Added progressbar and minor changes

Signed-off-by: jbicker <jan.bicker@typefox.io>
eclipse-theia · Dec 2, 2019 · 96b5ac3 · 96b5ac3
1 parent 1a6ecc4
commit 96b5ac3
Show file tree

Hide file tree

Showing 12 changed files with 204 additions and 127 deletions.
diff --git a/packages/vscode-extensions/src/browser/style/index.css b/packages/vscode-extensions/src/browser/style/index.css
@@ -62,7 +62,8 @@
 }
 
 .extensionButton.working {
-    background: none;
+    background: var(--theia-disabled-color1);
+    color: var(--theia-ui-font-color0);
 }
 
 .extensionButton.working:hover {

diff --git a/packages/vscode-extensions/src/browser/view/detail/vscode-extension-detail-widget-factory.ts b/packages/vscode-extensions/src/browser/view/detail/vscode-extension-detail-widget-factory.ts
@@ -21,6 +21,8 @@ import { VSCodeExtensionDetailWidget } from './vscode-extensions-detail-widget';
 import { VSCodeExtensionPartResolved } from '../../vscode-extensions-types';
 import { VSCodeExtensionsService } from '../../vscode-extensions-service';
 import { VSCodeExtensionsModel } from '../../vscode-extensions-model';
+import { ProgressLocationService } from '@theia/core/lib/browser/progress-location-service';
+import { ProgressService } from '@theia/core/lib/common';
 
 export interface VSCodeExtensionDetailWidgetOptions {
     readonly extension: VSCodeExtensionPartResolved;
@@ -34,9 +36,12 @@ export class VSCodeExtensionDetailWidgetFactory implements WidgetFactory {
 
     @inject(VSCodeExtensionsService) protected readonly service: VSCodeExtensionsService;
     @inject(VSCodeExtensionsModel) protected readonly model: VSCodeExtensionsModel;
+    @inject(ProgressLocationService) protected readonly progressLocationService: ProgressLocationService;
+    @inject(ProgressService) protected readonly progressService: ProgressService;
 
     async createWidget(options: VSCodeExtensionDetailWidgetOptions): Promise<VSCodeExtensionDetailWidget> {
-        const widget = new VSCodeExtensionDetailWidget(options, this.service, this.model);
+        const widget = new VSCodeExtensionDetailWidget(
+            options, this.service, this.model, this.progressService, this.progressLocationService);
         widget.id = 'vscode-extension:' + options.extension.name;
         widget.title.closable = true;
         widget.title.label = options.extension.name;

diff --git a/packages/vscode-extensions/src/browser/view/detail/vscode-extension-open-handler.ts b/packages/vscode-extensions/src/browser/view/detail/vscode-extension-open-handler.ts
@@ -21,13 +21,13 @@ import { VSCodeExtensionDetailWidget } from './vscode-extensions-detail-widget';
 import { VSCodeExtensionDetailWidgetOptions } from './vscode-extension-detail-widget-factory';
 
 export namespace VSCodeExtensionUri {
-    export const scheme = 'vscx';
+    export const scheme = 'vscode';
     export function toUri(extensionName: string): URI {
-        return new URI('').withScheme(scheme).withFragment(extensionName);
+        return new URI('').withScheme(scheme).withPath('extension/' + extensionName);
     }
     export function toExtensionName(uri: URI): string {
-        if (uri.scheme === scheme) {
-            return uri.fragment;
+        if (uri.scheme === scheme && uri.path.dir.toString() === 'extension') {
+            return uri.path.base;
         }
         throw new Error('The given uri is not an vscode extension URI, uri: ' + uri);
     }

diff --git a/packages/vscode-extensions/src/browser/view/detail/vscode-extensions-detail-widget.tsx b/packages/vscode-extensions/src/browser/view/detail/vscode-extensions-detail-widget.tsx
@@ -20,35 +20,43 @@ import { VSCodeExtensionDetailWidgetOptions } from './vscode-extension-detail-wi
 import { VSCXDetailHeader } from './vscx-detail-header-component';
 import { VSCodeExtensionsService } from '../../vscode-extensions-service';
 import { VSCodeExtensionsModel } from '../../vscode-extensions-model';
+import { ProgressService } from '@theia/core/lib/common';
+import { ProgressLocationService } from '@theia/core/lib/browser/progress-location-service';
 
 export class VSCodeExtensionDetailWidget extends ReactWidget {
 
     constructor(
         protected readonly options: VSCodeExtensionDetailWidgetOptions,
         protected readonly service: VSCodeExtensionsService,
-        protected readonly model: VSCodeExtensionsModel
+        protected readonly model: VSCodeExtensionsModel,
+        protected readonly progressService: ProgressService,
+        protected readonly progressLocationService: ProgressLocationService
     ) {
         super();
         this.addClass('vscode-extension-detail');
+
+        this.id = options.extension.publisher + '-' + options.extension.name + '-' + 'detail';
+
         service.onDidUpdateInstalled(() => {
-            this.init();
+            this.update();
         });
-        this.init();
-    }
-
-    protected init(): void {
-        this.options.extension.busy = false;
         this.update();
     }
 
     protected render(): React.ReactNode {
         return <React.Fragment>
-            <VSCXDetailHeader extension={this.options.extension} service={this.service} />
-            <div className='extensionDocContainer flexcontainer'>
-                <div className='extensionDocumentation'>
-                    <span dangerouslySetInnerHTML={{ __html: this.options.readMe }} />
+                <VSCXDetailHeader
+                    toDispose={this.toDispose}
+                    id={this.id}
+                    progressLocationService={this.progressLocationService}
+                    progressService={this.progressService}
+                    extension={this.options.extension}
+                    service={this.service} />
+                <div className='extensionDocContainer flexcontainer'>
+                    <div className='extensionDocumentation'>
+                        <span dangerouslySetInnerHTML={{ __html: this.options.readMe }} />
+                    </div>
                 </div>
-            </div>
         </React.Fragment>;
     }
 

diff --git a/packages/vscode-extensions/src/browser/view/detail/vscx-detail-header-component.tsx b/packages/vscode-extensions/src/browser/view/detail/vscx-detail-header-component.tsx
@@ -19,64 +19,82 @@ import { VSCodeExtensionPartResolved, VSCodeExtensionFullResolved } from '../../
 import { VSCXStars } from './vscx-stars-component';
 import { VSCXInstallButton } from '../vscx-install-button-component';
 import { VSCodeExtensionsService } from '../../vscode-extensions-service';
+import { ProgressService, DisposableCollection } from '@theia/core/lib/common';
+import { ProgressLocationService } from '@theia/core/lib/browser/progress-location-service';
+import { ProgressBar } from '@theia/core/lib/browser/progress-bar';
 
 export class VSCXDetailHeader extends React.Component<VSCXDetailHeader.Props, VSCXDetailHeader.State> {
 
+    protected detailHeaderRef: (ref: HTMLElement | null) => void;
+    protected progressLocation: string;
+
     constructor(props: VSCXDetailHeader.Props) {
         super(props);
+
+        this.progressLocation = this.props.id;
+
+        this.detailHeaderRef = ref => {
+            if (ref) {
+                const onProgress = this.props.progressLocationService.onProgress(this.progressLocation);
+                this.props.toDispose.push(new ProgressBar({ container: ref, insertMode: 'prepend' }, onProgress));
+            }
+        };
     }
 
     render(): JSX.Element {
         const extension = this.props.extension as VSCodeExtensionFullResolved;
         return <React.Fragment>
-            <div className='extensionHeaderContainer'>
-                {
-                    extension.iconUrl ?
-                        <div className='extensionHeaderImage'>
-                            <div className='icon'>
-                                <img src={extension.iconUrl} />
+            <div ref={this.detailHeaderRef}>
+                <div className='extensionHeaderContainer'>
+                    {
+                        extension.iconUrl ?
+                            <div className='extensionHeaderImage'>
+                                <div className='icon'>
+                                    <img src={extension.iconUrl} />
+                                </div>
+                            </div> : ''
+                    }
+                    <div className='extensionMetaDataContainer'>
+                        <div className='extensionTitleContainer'>
+                            <h1 className='extensionName'>{extension.name}</h1>
+                            <div className='extensionSubtitle'>
+                                <div className='extensionAuthor'>{extension.publisher}</div>
+                                <span className='textDivider' />
+                                <div className='extensionVersion'>{extension.version}</div>
+                                {
+                                    extension.averageRating ?
+                                        <React.Fragment>
+                                            <span className='textDivider' />
+                                            <div className='extensionRatingStars'>
+                                                <VSCXStars number={extension.averageRating} />
+                                            </div>
+                                        </React.Fragment>
+                                        : ''
+                                }
+                                {
+                                    extension.repository ?
+                                        <React.Fragment>
+                                            <span className='textDivider' />
+                                            <a href={extension.repository} target='_blank'>Repository</a>
+                                        </React.Fragment>
+                                        : ''
+                                }
+                                {
+                                    extension.license ?
+                                        <React.Fragment>
+                                            <span className='textDivider' />
+                                            {extension.license}
+                                        </React.Fragment>
+                                        : ''
+                                }
                             </div>
-                        </div> : ''
-                }
-                <div className='extensionMetaDataContainer'>
-                    <div className='extensionTitleContainer'>
-                        <h1 className='extensionName'>{extension.name}</h1>
-                        <div className='extensionSubtitle'>
-                            <div className='extensionAuthor'>{extension.publisher}</div>
-                            <span className='textDivider' />
-                            <div className='extensionVersion'>{extension.version}</div>
-                            {
-                                extension.averageRating ?
-                                    <React.Fragment>
-                                        <span className='textDivider' />
-                                        <div className='extensionRatingStars'>
-                                            <VSCXStars number={extension.averageRating} />
-                                        </div>
-                                    </React.Fragment>
-                                    : ''
-                            }
-                            {
-                                extension.repository ?
-                                    <React.Fragment>
-                                        <span className='textDivider' />
-                                        <a href={extension.repository} target='_blank'>Repository</a>
-                                    </React.Fragment>
-                                    : ''
-                            }
-                            {
-                                extension.license ?
-                                    <React.Fragment>
-                                        <span className='textDivider' />
-                                        {extension.license}
-                                    </React.Fragment>
-                                    : ''
-                            }
                         </div>
+                        <div className='extensionDescription'>{extension.description}</div>
+                        <VSCXInstallButton
+                            extension={extension}
+                            service={this.props.service}
+                            progressService={this.props.progressService} progressLocation={this.progressLocation} />
                     </div>
-                    <div className='extensionDescription'>{extension.description}</div>
-                    <VSCXInstallButton
-                        service={this.props.service}
-                        extension={this.props.extension} />
                 </div>
             </div>
         </React.Fragment>;
@@ -85,8 +103,12 @@ export class VSCXDetailHeader extends React.Component<VSCXDetailHeader.Props, VS
 
 export namespace VSCXDetailHeader {
     export interface Props {
-        extension: VSCodeExtensionPartResolved
-        service: VSCodeExtensionsService
+        id: string;
+        toDispose: DisposableCollection;
+        extension: VSCodeExtensionPartResolved;
+        service: VSCodeExtensionsService;
+        progressService: ProgressService;
+        progressLocationService: ProgressLocationService;
     }
     export interface State {
 

diff --git a/packages/vscode-extensions/src/browser/view/list/vscode-extensions-list-widget.tsx b/packages/vscode-extensions/src/browser/view/list/vscode-extensions-list-widget.tsx
@@ -22,6 +22,8 @@ import { VSCodeExtensionsService } from '../../vscode-extensions-service';
 import { VSCodeExtensionsModel } from '../../vscode-extensions-model';
 import { VSCXList } from './vscx-list-component';
 import { VSCodeExtensionPart, VSCodeExtensionsLocation } from '../../vscode-extensions-types';
+import { ProgressLocationService } from '@theia/core/lib/browser/progress-location-service';
+import { ProgressService } from '@theia/core/lib/common';
 
 export const VSCodeExtensionsListOptions = Symbol('VSCodeExtensionsListOptions');
 
@@ -50,6 +52,8 @@ export class VSCodeExtensionsListWidget extends ReactWidget {
     @inject(VSCodeExtensionsListOptions) protected readonly options: VSCodeExtensionsListOptions;
     @inject(VSCodeExtensionsService) protected readonly service: VSCodeExtensionsService;
     @inject(VSCodeExtensionsModel) protected readonly model: VSCodeExtensionsModel;
+    @inject(ProgressLocationService) protected readonly progressLocationService: ProgressLocationService;
+    @inject(ProgressService) protected readonly progressService: ProgressService;
 
     @postConstruct()
     protected init(): void {
@@ -64,7 +68,12 @@ export class VSCodeExtensionsListWidget extends ReactWidget {
 
     protected render(): React.ReactNode {
         return <React.Fragment>
-            <VSCXList extensions={this.extensions} model={this.model} service={this.service} />
+            <VSCXList
+                progressLocation='vscode-extensions-list'
+                progressService={this.progressService}
+                extensions={this.extensions}
+                model={this.model}
+                service={this.service} />
         </React.Fragment>;
     }
 

diff --git a/packages/vscode-extensions/src/browser/view/list/vscode-extensions-widget.ts b/packages/vscode-extensions/src/browser/view/list/vscode-extensions-widget.ts
@@ -20,6 +20,7 @@ import { VSCodeExtensionsSearchbarWidget } from './vscode-extensions-searchbar-w
 import { VSCodeExtensionsListWidget } from './vscode-extensions-list-widget';
 import { VSCodeExtensionsService } from '../../vscode-extensions-service';
 import { VSCodeExtensionsCommands } from '../../vscode-extensions-contribution';
+import { ProgressBar } from '@theia/core/lib/browser/progress-bar';
 
 export const VSCXInstalledList = Symbol('VSCXInstalledList');
 export const VSCXRegistryList = Symbol('VSCXList');
@@ -30,6 +31,8 @@ export class VSCodeExtensionsWidget extends ViewContainer {
     static ID = 'vscode-extensions';
     static LABEL = 'Extensions';
 
+    protected progressLocation: string;
+
     @inject(VSCodeExtensionsSearchbarWidget) protected readonly vscxSearchbar: VSCodeExtensionsSearchbarWidget;
     @inject(VSCodeExtensionsService) protected readonly service: VSCodeExtensionsService;
     @inject(VSCXInstalledList) protected readonly vscxInstalledList: VSCodeExtensionsListWidget;
@@ -77,6 +80,10 @@ export class VSCodeExtensionsWidget extends ViewContainer {
             priority: 1,
             onDidChange
         });
+
+        this.progressLocation = 'vscode-extensions-list';
+        const onProgress = this.progressLocationService.onProgress(this.progressLocation);
+        this.toDispose.push(new ProgressBar({ container: this.node, insertMode: 'prepend' }, onProgress));
     }
 
     getSearchTerm(): string {

diff --git a/packages/vscode-extensions/src/browser/view/list/vscx-list-component.tsx b/packages/vscode-extensions/src/browser/view/list/vscx-list-component.tsx
@@ -19,6 +19,7 @@ import { VSCodeExtensionPart } from '../../vscode-extensions-types';
 import { VSCXListItem } from './vscx-list-item-component';
 import { VSCodeExtensionsService } from '../../vscode-extensions-service';
 import { VSCodeExtensionsModel } from '../../vscode-extensions-model';
+import { ProgressService } from '@theia/core/lib/common';
 
 export class VSCXList extends React.Component<VSCXList.Props> {
 
@@ -27,7 +28,14 @@ export class VSCXList extends React.Component<VSCXList.Props> {
             {
                 this.props.extensions && this.props.extensions.length > 0 ?
                     this.props.extensions.map(extension =>
-                        <VSCXListItem key={extension.publisher + extension.name} model={this.props.model} service={this.props.service} extension={extension} />)
+                        <VSCXListItem
+                            progressLocation={this.props.progressLocation}
+                            progressService={this.props.progressService}
+                            key={extension.publisher + extension.name}
+                            model={this.props.model}
+                            service={this.props.service}
+                            extension={extension}
+                        />)
                     :
                     <div className='extensionHeaderContainer noExtensionFound'>
                         No Extensions Found
@@ -42,5 +50,7 @@ export namespace VSCXList {
         extensions?: VSCodeExtensionPart[];
         service: VSCodeExtensionsService;
         model: VSCodeExtensionsModel;
+        progressService: ProgressService,
+        progressLocation: string
     }
 }