refactor(ui): remove sm-menu (#6133)

ovh · Apr 7, 2022 · a7b6450 · a7b6450
1 parent e80eb41
commit a7b6450
Show file tree

Hide file tree

Showing 40 changed files with 441 additions and 378 deletions.
diff --git a/ui/angular.json b/ui/angular.json
@@ -26,13 +26,14 @@
                 "glob": "*",
                 "input": "node_modules/@ant-design/icons-angular/src/inline-svg/",
                 "output": "/assets/"
-              }, {
-                "glob": "ng-zorro-antd.dark.min.css",
-                "input": "./node_modules/ng-zorro-antd",
-                "output": "/assets/"
               }
             ],
             "styles": [
+              {
+                "input": "src/ngzorro.dark.less",
+                "bundleName": "ngzorro.dark",
+                "inject": false
+              },
               "node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
               "node_modules/dragula/dist/dragula.css",
               "node_modules/codemirror/lib/codemirror.css",

diff --git a/ui/src/app/service/theme/theme.store.ts b/ui/src/app/service/theme/theme.store.ts
@@ -25,7 +25,7 @@ export class ThemeStore {
             style.type = 'text/css';
             style.rel = 'stylesheet';
             style.id = 'dark-theme';
-            style.href = 'assets/ng-zorro-antd.dark.min.css';
+            style.href = 'ngzorro.dark.css';
             document.body.appendChild(style);
         } else {
             const dom = document.getElementById('dark-theme');

diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts
@@ -116,6 +116,8 @@ import { ZoneComponent } from './zone/zone.component';
 import { NgxAutoScrollDirective } from 'app/shared/directives/auto-scroll.directive';
 import { NZ_CONFIG, NzConfig } from 'ng-zorro-antd/core/config';
 import { NzNotificationModule } from 'ng-zorro-antd/notification';
+import { NzMenuModule } from 'ng-zorro-antd/menu';
+import { NzButtonModule } from 'ng-zorro-antd/button';
 
 const ngZorroConfig: NzConfig = {
     notification: {nzPauseOnHover: true, nzPlacement: "topRight"}
@@ -125,7 +127,9 @@ const ngZorroConfig: NzConfig = {
 
 @NgModule({
     imports: [
+        NzButtonModule,
         NzNotificationModule,
+        NzMenuModule,
         CommonModule,
         ClipboardModule,
         NgxSemanticModule,
@@ -296,6 +300,8 @@ const ngZorroConfig: NzConfig = {
         NgForNumber,
         NgxSemanticModule,
         NgxAutoScrollDirective,
+        NzButtonModule,
+        NzMenuModule,
         NzNotificationModule,
         PaginationComponent,
         ParameterFormComponent,

diff --git a/ui/src/app/shared/tabs/tab.component.ts b/ui/src/app/shared/tabs/tab.component.ts
@@ -21,10 +21,7 @@ import { Tab } from './tabs.component';
 @AutoUnsubscribe()
 export class TabComponent implements AfterViewInit, OnChanges {
     @ViewChild('templateSibling', { read: ViewContainerRef }) templateSibling: ViewContainerRef;
-
     @Input() tab: Tab;
-    @Input() active: boolean;
-    @Output() onSelect = new EventEmitter();
 
     constructor(
         private _cd: ChangeDetectorRef
@@ -45,8 +42,4 @@ export class TabComponent implements AfterViewInit, OnChanges {
             this._cd.markForCheck();
         }
     }
-
-    click() {
-        this.onSelect.emit();
-    }
 }
diff --git a/ui/src/app/shared/tabs/tab.html b/ui/src/app/shared/tabs/tab.html
@@ -1,7 +1,9 @@
-<a sm-item [class.active]="active" (click)="click()">
-    <ng-container *ngIf="!tab.template">
-        <i *ngIf="tab.icon" [ngClass]="[tab.icon, 'icon']"></i>
-        {{tab.translate | translate:tab.translate_args}}
+<ng-container *ngIf="!tab.template">
+    <i *ngIf="tab.icon" [ngClass]="[tab.icon, 'icon']"></i>
+    {{tab.title}}
+    <ng-container *ngIf="tab.warningText || tab.warningTemplate">
+        <i class="exclamation triangle orange icon" suiPopup [popupTemplate]="tab.warningTemplate" [popupText]="tab.warningText"></i>
     </ng-container>
-    <span #templateSibling></span>
-</a>
+</ng-container>
+<span #templateSibling></span>
+
diff --git a/ui/src/app/shared/tabs/tabs.component.ts b/ui/src/app/shared/tabs/tabs.component.ts
@@ -4,12 +4,14 @@ import { AutoUnsubscribe } from 'app/shared/decorator/autoUnsubscribe';
 import { Subscription } from 'rxjs/Subscription';
 
 export class Tab {
-    translate: string;
-    translate_args?: {};
+    title: string;
     icon: string;
     key: string;
     default: boolean;
     template: TemplateRef<any>;
+    warningText: string;
+    warningTemplate: TemplateRef<any>;
+    disabled: boolean;
 }
 
 @Component({
@@ -52,6 +54,9 @@ export class TabsComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     clickSelect(tab: Tab) {
+        if (tab.disabled) {
+            return;
+        }
         if (!this.disableNavigation) {
             this._router.navigate([], {
                 relativeTo: this._route,

diff --git a/ui/src/app/shared/tabs/tabs.html b/ui/src/app/shared/tabs/tabs.html
@@ -1,3 +1,7 @@
-<sm-menu class="pointing secondary stackable">
-    <app-tab *ngFor="let t of tabs" [tab]="t" [active]="selected.key === t.key" (onSelect)="clickSelect(t)"></app-tab>
-</sm-menu>
+<ul nz-menu nzMode="horizontal">
+    <ng-container *ngFor="let t of tabs">
+        <li nz-menu-item [nzSelected]="selected.key === t.key" (click)="clickSelect(t)" [nzDisabled]="t.disabled">
+            <app-tab [tab]="t"></app-tab>
+        </li>
+    </ng-container>
+</ul>
diff --git a/ui/src/app/shared/workflow/modal/node-edit/node.edit.modal.html b/ui/src/app/shared/workflow/modal/node-edit/node.edit.modal.html
@@ -33,7 +33,7 @@
                             </a>
                             <a class="item" [class.active]="selected === 'permissions'"
                                 (click)="changeView('permissions')">
-                                {{ 'common_permissions' | translate }}
+                                Permissions
                             </a>
                         </ng-container>
                         <ng-container *ngIf="hookSelected">

diff --git a/ui/src/app/views/application/show/application.component.ts b/ui/src/app/views/application/show/application.component.ts
@@ -6,7 +6,6 @@ import { Application } from 'app/model/application.model';
 import { Environment } from 'app/model/environment.model';
 import { Pipeline } from 'app/model/pipeline.model';
 import { Project } from 'app/model/project.model';
-import { AuthentifiedUser } from 'app/model/user.model';
 import { Workflow } from 'app/model/workflow.model';
 import { ApplicationStore } from 'app/service/application/application.store';
 import { AsCodeSaveModalComponent } from 'app/shared/ascode/save-modal/ascode.save-modal.component';
@@ -17,11 +16,11 @@ import { VariableEvent } from 'app/shared/variable/variable.event.model';
 import * as applicationsActions from 'app/store/applications.action';
 import { CancelApplicationEdition, ClearCacheApplication } from 'app/store/applications.action';
 import { ApplicationsState, ApplicationStateModel } from 'app/store/applications.state';
-import { AuthenticationState } from 'app/store/authentication.state';
 import { ProjectState, ProjectStateModel } from 'app/store/project.state';
 import cloneDeep from 'lodash-es/cloneDeep';
 import { Subscription } from 'rxjs';
 import { filter, finalize } from 'rxjs/operators';
+import { Tab } from 'app/shared/tabs/tabs.component';
 
 @Component({
     selector: 'app-application-show',
@@ -50,8 +49,9 @@ export class ApplicationShowComponent implements OnInit, OnDestroy {
     _routeParamsSub: Subscription;
     _queryParamsSub: Subscription;
 
-    // Selected tab
-    selectedTab = 'home';
+    // tabs
+    tabs: Array<Tab>;
+    selectedTab: Tab;
 
     @ViewChild('varWarning')
     private varWarningModal: WarningModalComponent;
@@ -132,6 +132,7 @@ export class ApplicationShowComponent implements OnInit, OnDestroy {
                     this.pipelines = this.application.usage.pipelines || [];
                     this.usageCount = this.pipelines.length + this.environments.length + this.workflows.length;
                 }
+                this.initTabs();
 
                 // Update recent application viewed
                 this._applicationStore.updateRecentApplication(s.currentProjectKey, this.application);
@@ -142,17 +143,55 @@ export class ApplicationShowComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit() {
+        this.initTabs();
         this._queryParamsSub = this._routeActivated.queryParams.subscribe(params => {
             let tab = params['tab'];
             if (tab) {
-                this.selectedTab = tab;
+                let current_tab = this.tabs.find((t) => t.key === tab);
+                if (current_tab) {
+                    this.selectTab(current_tab);
+                }
             }
             this._cd.markForCheck();
         });
     }
 
-    showTab(tab: string): void {
-        this._router.navigateByUrl('/project/' + this.project.key + '/application/' + this.application.name + '?tab=' + tab);
+    initTabs() {
+        let usageText = 'Usage';
+        if (this.application) {
+            usageText = 'Usage (' + this.usageCount + ')';
+        }
+        this.tabs = [<Tab>{
+            title: 'Overview',
+            key: 'home',
+            default: true,
+        }, <Tab>{
+            title: 'Variables',
+            key: 'variables',
+            icon: 'font'
+        }, <Tab>{
+            title: 'Vulnerabilities',
+            key: 'vuln'
+        }, <Tab>{
+            title: usageText,
+            icon: 'map signs',
+            key: 'usage'
+        }, <Tab>{
+            title: 'Keys',
+            icon: 'privacy',
+            key: 'keys'
+        }]
+        if (this.project?.permissions?.writable) {
+            this.tabs.push(<Tab>{
+                title: 'Advanced',
+                icon: 'graduation',
+                key: 'advanced'
+            })
+        }
+    }
+
+    selectTab(tab: Tab): void {
+        this.selectedTab = tab;
     }
 
     /**

diff --git a/ui/src/app/views/application/show/application.html b/ui/src/app/views/application/show/application.html
@@ -34,43 +34,20 @@
                 </ng-template>
             </div>
         </app-project-breadcrumb>
-
-        <div class="CDSmenu" *ngIf="application">
-            <sm-menu title="" class="pointing secondary">
-                <a sm-item [class.active]="selectedTab === 'home'" (click)="showTab('home')">
-                    <i class=""></i>{{ 'common_home' | translate }}
-                </a>
-                <a sm-item [class.active]="selectedTab === 'variables'" (click)="showTab('variables')">
-                    <i class="font icon"></i>{{ 'common_variables' | translate }}
-                </a>
-                <a sm-item [class.active]="selectedTab === 'vuln'" (click)="showTab('vuln')">
-                    {{ 'common_vulnerabilities' | translate}}
-                </a>
-                <a sm-item [class.active]="selectedTab === 'usage'" (click)="showTab('usage')">
-                    <i class="map signs icon"></i>{{ 'common_usage' | translate }}{{ ' (' + usageCount + ')' }}
-                </a>
-                <a sm-item [class.active]="selectedTab === 'keys'" id="ApplicationKeysTab" (click)="showTab('keys')"><i
-                        class="privacy icon"></i>
-                    {{ 'common_keys' | translate }}
-                </a>
-                <a sm-item [class.active]="selectedTab === 'advanced'" (click)="showTab('advanced')">
-                    <i class="graduation icon"></i>{{ 'common_advanced' | translate }}
-                </a>
-                <div class="ui small buttons" *ngIf="editMode && !readOnly">
-                    <ng-container *ngIf="application.editModeChanged">
-                        <button class="ui button" (click)="cancelApplication()">{{'common_cancel' | translate }}</button>
-                        <div class="or"></div>
-                    </ng-container>
-                    <button class="ui green button" [disabled]="!application.editModeChanged"
-                            (click)="saveEditMode()">{{'btn_save_application' | translate }}</button>
-                </div>
-            </sm-menu>
-        </div>
+        <app-tabs [tabs]="tabs" (onSelect)="selectTab($event)"></app-tabs>
+        <ng-container *ngIf="editMode && !readOnly">
+            <nz-button-group class="ascodeButton">
+                <ng-container *ngIf="application.editModeChanged">
+                    <button nz-button nzType="default" (click)="cancelApplication()">{{'common_cancel' | translate }}</button>
+                </ng-container>
+                <button nz-button nzType="primary" [disabled]="!application.editModeChanged" (click)="saveEditMode()">{{'btn_save_application' | translate }}</button>
+            </nz-button-group>
+        </ng-container>
 
         <div class="scrollingContent">
             <div class="paddingContent">
                 <div class="viewContent">
-                    <div [ngSwitch]="selectedTab">
+                    <div [ngSwitch]="selectedTab.key">
                         <div *ngSwitchCase="'home'">
                             <app-home [project]="project" [application]="application"></app-home>
                         </div>

diff --git a/ui/src/app/views/application/show/application.scss b/ui/src/app/views/application/show/application.scss
@@ -13,11 +13,9 @@
   height: 100%;
 }
 
-sm-menu {
-  .ui.buttons {
-    position: absolute;
-    right: 15px;
-    margin-top: 2px;
-  }
+.ascodeButton {
+  position: absolute;
+  right: 15px;
+  top: 107px;
 }
 
diff --git a/ui/src/app/views/application/show/home/application.home.html b/ui/src/app/views/application/show/home/application.home.html
@@ -52,7 +52,7 @@ <h4>{{ 'application_home_integration' | translate }}</h4>
                     [queryParams]="{tab: 'advanced'}">{{
                     'application_home_no_integration' | translate }}</a>
             </div>
-            <h4>{{ 'common_usage' | translate}}</h4>
+            <h4>Usage</h4>
             <ng-container *ngIf="application.usage && application.usage.workflows">
                 <ul>
                     <li *ngFor="let w of application.usage.workflows">