Update Plugins Manager (close esrlabs#2278)

Author: DmitryAstafyev

application/client/src/app/ui/styles/material.less

@@ -83,6 +83,17 @@ button[mat-stroked-button][disabled] {
         }
     }
 }
+button[mat-stroked-button] {
+    & .mdc-button__label {
+        white-space: nowrap;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        & mat-spinner {
+            margin-right: 16px;
+        }
+    }
+}
 
 & mat-error {
     color: @scheme-color-warning!important;

application/client/src/app/ui/tabs/plugins/component.ts

@@ -5,6 +5,8 @@ import { ChangesDetector } from '@ui/env/extentions/changes';
 import { Provider } from './provider';
 import { Target } from './list/component';
 import { bridge } from '@service/bridge';
+import { Notification, notifications } from '@ui/service/notifications';
+import { error } from '@platform/log/utils';
 
 @Component({
     selector: 'app-tabs-plugins-manager',
@@ -16,7 +18,6 @@ import { bridge } from '@service/bridge';
 @Ilc()
 export class PluginsManager extends ChangesDetector implements AfterContentInit, OnDestroy {
     public provider: Provider = new Provider();
-
     public get Target(): typeof Target {
         return Target;
     }
@@ -36,27 +37,49 @@ export class PluginsManager extends ChangesDetector implements AfterContentInit,
             this.provider.subjects.get().selected.subscribe(() => {
                 this.detectChanges();
             }),
+            this.provider.subjects.get().add.subscribe(() => {
+                this.detectChanges();
+            }),
+            this.provider.subjects.get().remove.subscribe(() => {
+                this.detectChanges();
+            }),
         );
         this.provider.load();
     }
 
     public async reload() {
+        if (this.provider.isBusy()) {
+            return;
+        }
         await this.provider.load(true);
     }
 
     public async addPlugin() {
-        await bridge
-            .folders()
-            .select()
-            .then((dirs: string[]) => {
-                if (dirs.length === 0) {
-                    return Promise.resolve();
-                }
-                return this.provider.addPlugin(dirs[0]);
-            })
-            .catch((err: Error) => {
-                console.error(`Error while opening folders: ${err.message}`);
-            });
+        if (this.provider.isBusy()) {
+            return;
+        }
+        try {
+            const folder = await bridge.folders().select();
+            if (folder.length === 0) {
+                return;
+            }
+            await this.provider.addPlugin(folder[0]);
+            this.reload();
+            notifications.notify(
+                new Notification({
+                    message: `New plugin has been added`,
+                    actions: [],
+                }),
+            );
+        } catch (err) {
+            notifications.notify(
+                new Notification({
+                    message: this.log().error(`Fail to add plugin: ${error(err)}`),
+                    actions: [],
+                    pinned: true,
+                }),
+            );
+        }
     }
 }
 

application/client/src/app/ui/tabs/plugins/details/component.ts

@@ -16,6 +16,8 @@ import { micromark } from 'micromark';
 import { PluginDescription } from '../desc';
 import { Provider } from '../provider';
 import { PluginRunData, PluginLogLevel } from '@platform/types/bindings/plugins';
+import { lockers, Locker } from '@ui/service/lockers';
+import { Notification, notifications } from '@ui/service/notifications';
 
 import * as dom from '@ui/env/dom';
 
@@ -164,10 +166,7 @@ export class Details extends ChangesDetector implements AfterViewInit, AfterCont
         // TODO: safe openening URL
     }
 
-    constructor(
-        cdRef: ChangeDetectorRef,
-        protected readonly sanitizer: DomSanitizer,
-    ) {
+    constructor(cdRef: ChangeDetectorRef, protected readonly sanitizer: DomSanitizer) {
         super(cdRef);
     }
 
@@ -202,11 +201,35 @@ export class Details extends ChangesDetector implements AfterViewInit, AfterCont
         };
     }
 
-    public async removePlugin(): Promise<void> {
+    public removePlugin() {
         if (this.plugin.path === undefined) {
             return;
         }
-        await this.provider.removePlugin(this.plugin.path.filename);
+        const lock = lockers.lock(new Locker(true, `Removing plugin...`), {
+            closable: false,
+        });
+        this.provider
+            .removePlugin(this.plugin.path.filename)
+            .then(() => {
+                notifications.notify(
+                    new Notification({
+                        message: `Plugin has been removed`,
+                        actions: [],
+                    }),
+                );
+            })
+            .catch((err: Error) => {
+                notifications.notify(
+                    new Notification({
+                        message: `Fail to remove plugin: ${err.message}`,
+                        actions: [],
+                        pinned: true,
+                    }),
+                );
+            })
+            .finally(() => {
+                lock.popup.close();
+            });
     }
 }
 

application/client/src/app/ui/tabs/plugins/details/template.html

@@ -16,7 +16,11 @@
     >
         Inspect
     </button>
-    <button class="flat-codicon-button" [disabled]="loading" (click)="removePlugin()">
+    <button
+        class="flat-codicon-button"
+        [disabled]="loading || provider.isBusy()"
+        (click)="removePlugin()"
+    >
         Remove
     </button>
 </div>

application/client/src/app/ui/tabs/plugins/module.ts

@@ -4,14 +4,22 @@ import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 import { PluginsManager } from './component';
 import { List } from './list/component';
 import { Plugin } from './plugin/component';
 import { Details } from './details/component';
 
 @NgModule({
-    imports: [CommonModule, MatCardModule, MatButtonModule, MatProgressBarModule, MatIconModule],
+    imports: [
+        CommonModule,
+        MatCardModule,
+        MatButtonModule,
+        MatProgressBarModule,
+        MatIconModule,
+        MatProgressSpinnerModule,
+    ],
     declarations: [PluginsManager, Plugin, List, Details],
     exports: [PluginsManager],
     bootstrap: [PluginsManager],

application/client/src/app/ui/tabs/plugins/provider.ts

@@ -5,6 +5,7 @@ import { scope } from '@platform/env/scope';
 import { Logger } from '@platform/log';
 import { InstalledPluginDesc, InvalidPluginDesc, PluginDescription } from './desc';
 import { bridge } from '@service/bridge';
+import { error } from '@platform/log/utils';
 
 export class Provider {
     protected log: Logger;
@@ -22,17 +23,27 @@ export class Provider {
         load: Subject<void>;
         state: Subject<void>;
         selected: Subject<string>;
+        // true - add starting; false - finished
+        add: Subject<boolean>;
+        // true - add starting; false - finished
+        remove: Subject<boolean>;
     }> = new Subjects({
         load: new Subject<void>(),
         state: new Subject<void>(),
         selected: new Subject<string>(),
+        add: new Subject<boolean>(),
+        remove: new Subject<boolean>(),
     });
     public selected: PluginDescription | undefined;
     public state: {
         loading: boolean;
+        adding: boolean;
+        removing: boolean;
         error: string | undefined;
     } = {
         loading: false,
+        adding: false,
+        removing: false,
         error: undefined,
     };
 
@@ -126,9 +137,56 @@ export class Provider {
         this.subjects.get().selected.emit(path);
     }
     public addPlugin(pluginPath: string): Promise<void> {
-        return plugins.addPlugin(pluginPath);
+        if (this.isBusy()) {
+            return Promise.reject(
+                new Error(
+                    `Cannot add plugin, because previous plugin operation is still in progress.`,
+                ),
+            );
+        }
+        this.state.adding = true;
+        this.subjects.get().add.emit(this.state.adding);
+        return plugins.addPlugin(pluginPath).finally(() => {
+            this.state.adding = false;
+            this.subjects.get().add.emit(this.state.adding);
+        });
+    }
+    public async removePlugin(pluginPath: string): Promise<void> {
+        if (this.isBusy()) {
+            return Promise.reject(
+                new Error(
+                    `Cannot add plugin, because previous plugin operation is still in progress.`,
+                ),
+            );
+        }
+        this.state.removing = true;
+        this.subjects.get().remove.emit(this.state.removing);
+        try {
+            await plugins.removePlugin(pluginPath);
+            await this.load(true);
+            const selected = this.selected;
+            if (selected !== undefined) {
+                if (
+                    [
+                        ...this.plugins.installed,
+                        ...this.plugins.available,
+                        ...this.plugins.invalid,
+                    ].find((pl) => pl.entity.dir_path === selected.getPath()) !== undefined
+                ) {
+                    this.selected = undefined;
+                }
+            }
+            this.state.removing = false;
+            this.subjects.get().remove.emit(this.state.removing);
+            this.subjects.get().state.emit();
+            return Promise.resolve();
+        } catch (err) {
+            this.state.removing = false;
+            this.subjects.get().remove.emit(this.state.removing);
+            return Promise.reject(new Error(error(err)));
+        }
     }
-    public removePlugin(pluginPath: string): Promise<void> {
-        return plugins.removePlugin(pluginPath);
+    public isBusy(): boolean {
+        return this.state.adding || this.state.loading || this.state.removing;
     }
 }

application/client/src/app/ui/tabs/plugins/template.html

@@ -27,14 +27,18 @@
                     <div class="controlls">
                         <button
                             mat-stroked-button
-                            [disabled]="provider.state.loading"
+                            [disabled]="provider.state.loading || provider.state.adding"
                             (click)="addPlugin()"
                         >
+                            <mat-spinner
+                                *ngIf="provider.state.adding"
+                                [diameter]="16"
+                            ></mat-spinner>
                             Add
                         </button>
                         <button
                             mat-stroked-button
-                            [disabled]="provider.state.loading"
+                            [disabled]="provider.state.loading || provider.state.adding"
                             (click)="reload()"
                         >
                             Reload