Add collaboration getting started header

theia-extensions/product/src/browser/branding-util.tsx

@@ -122,6 +122,21 @@ export function renderDocumentation(windowService: WindowService): React.ReactNo
     </div>;
 }
 
+export function renderCollaboration(windowService: WindowService): React.ReactNode {
+    return <div className='gs-section'>
+        <h3 className='gs-section-header'>
+            Collaboration
+        </h3>
+        <div >
+            The IDE features a built-in collaboration feature.
+            You can share your workspace with others and work together in real-time by clicking on the <i>Collaborate</i> item in the status bar.
+            The collaboration feature is powered by the
+            <BrowserLink text="Open Collaboration Tools" url="https://www.open-collab.tools/" windowService={windowService} /> project
+            and uses their public server infrastructure.
+        </div>
+    </div>;
+}
+
 export function renderDownloads(): React.ReactNode {
     return <div className='gs-section'>
         <h3 className='gs-section-header'>

theia-extensions/product/src/browser/theia-ide-getting-started-widget.tsx

@@ -11,7 +11,9 @@ import * as React from 'react';
 
 import { Message, PreferenceService } from '@theia/core/lib/browser';
 import { inject, injectable } from '@theia/core/shared/inversify';
-import { renderDocumentation, renderDownloads, renderExtendingCustomizing, renderSourceCode, renderSupport, renderTickets, renderWhatIs } from './branding-util';
+import {
+    renderDocumentation, renderDownloads, renderExtendingCustomizing, renderSourceCode, renderSupport, renderTickets, renderWhatIs, renderCollaboration
+} from './branding-util';
 
 import { GettingStartedWidget } from '@theia/getting-started/lib/browser/getting-started-widget';
 import { VSXEnvironment } from '@theia/vsx-registry/lib/common/vsx-environment';
@@ -86,6 +88,11 @@ export class TheiaIDEGettingStartedWidget extends GettingStartedWidget {
                         {renderDocumentation(this.windowService)}
                     </div>
                 </div>
+                <div className='flex-grid'>
+                    <div className='col'>
+                        {renderCollaboration(this.windowService)}
+                    </div>
+                </div>
                 <div className='flex-grid'>
                     <div className='col'>
                         {renderDownloads()}