refactor(ui): remove consumer SUIModal + last suiPopup

ui/src/app/shared/workflow/sidebar/run-list/workflow.sidebar.run.component.html

@@ -26,7 +26,7 @@
                             <a title="Copy version" ngxClipboard [cbContent]="r.version ? r.version : r.num"
                                 (click)="confirmCopy();$event.stopPropagation();"><i class="copy outline icon"></i></a>
                         </div>
-                        <ng-template let-popup #popupTemplate>
+                        <ng-template #popupTemplate>
                             <div class="content">
                                 <div class="ui bulleted list">
                                     <div class="item"
@@ -36,8 +36,8 @@
                                 </div>
                             </div>
                         </ng-template>
-                        <div class="line" *ngIf="filteredTags[r.id] && filteredTags[r.id].length" suiPopup
-                            [popupTemplate]="popupTemplate" popupPlacement="right">
+                        <div class="line" *ngIf="filteredTags[r.id] && filteredTags[r.id].length" nz-popover
+                            [nzPopoverContent]="popupTemplate" nzPopoverPlacement="right">
                             <ng-container *ngFor="let t of filteredTags[r.id]; let i = index; let last = last">
                                 {{t.value}}<ng-container *ngIf="!last">,</ng-container>
                             </ng-container>

ui/src/app/views/application/show/application.html

@@ -4,12 +4,9 @@
         <app-project-breadcrumb [project]="project" [application]="readOnlyApplication" [workflow]="workflowName"
             [workflowRun]="workflowNum" [workflowRunNode]="workflowNodeRun" [wPipeline]="workflowPipeline">
             <div class="right floated labelFeature" [title]="'workflow_from_repository_btn' | translate">
-                <a class="ui label small basic" [class.green]="application && application.from_repository" suiPopup
-                    [popupTemplate]="popupFromRepository" popupPlacement="bottom right" popupTrigger="outsideClick"
-                    #popup="suiPopup">
-                    <i class="code icon"></i>as code
-                </a>
-                <ng-template let-popup #popupFromRepository>
+                <nz-tag [nzColor]="application?.from_repository?'green':''" nz-popover nzPopoverTrigger="click" [nzPopoverContent]="popupFromRepository"
+                        nzPopoverPlacement="leftBottom"><i nz-icon nzType="code" nzTheme="outline"></i>as code</nz-tag>
+                <ng-template #popupFromRepository>
                     <div class="content infoPopup">
                         <ng-container *ngIf="application && application.from_repository">
                             <p>
@@ -21,12 +18,10 @@
                             <p>{{'workflow_repository_help_line_2' | translate}}</p>
                             <div class="footer">
                                 <div>
-                                    <div class="ui list">
-                                        <a class="item" target="_blank" rel="noopener noreferrer"
+                                    <a class="item" target="_blank" rel="noopener noreferrer"
                                             href="#" [routerLink]="['/docs', 'tutorials', 'init_workflow_with_cdsctl']">
-                                            {{'common_read_more'| translate}}
-                                        </a>
-                                    </div>
+                                            Read more
+                                    </a>
                                 </div>
                             </div>
                         </ng-container>

ui/src/app/views/application/show/application.scss

@@ -16,6 +16,20 @@
 .ascodeButton {
   position: absolute;
   right: 15px;
-  top: 121px;
+  top: 135px;
 }
 
+.labelFeature {
+  position: relative;
+  top: -3px;
+  margin-left: 10px;
+  margin-top: 5px;
+
+  nz-tag {
+    cursor: pointer;
+  }
+
+  i {
+    margin-right: 5px;
+  }
+}

ui/src/app/views/environment/show/environment.show.html

@@ -4,12 +4,9 @@
         <app-project-breadcrumb [project]="project" [environment]="environment" [workflow]="workflowName"
             [workflowRun]="workflowNum" [workflowRunNode]="workflowNodeRun" [wPipeline]="workflowPipeline">
             <div class="right floated labelFeature" [title]="'workflow_from_repository_btn' | translate">
-                <a class="ui label small basic" [class.green]="environment.from_repository" suiPopup
-                    [popupTemplate]="popupFromRepository" popupPlacement="bottom right" popupTrigger="outsideClick"
-                    #popup="suiPopup">
-                    <i class="code icon"></i>as code
-                </a>
-                <ng-template let-popup #popupFromRepository>
+                <nz-tag [nzColor]="environment?.from_repository?'green':''" nz-popover nzPopoverTrigger="click" [nzPopoverContent]="popupFromRepository"
+                        nzPopoverPlacement="leftBottom"><i nz-icon nzType="code" nzTheme="outline"></i>as code</nz-tag>
+                <ng-template #popupFromRepository>
                     <div class="content infoPopup">
                         <ng-container *ngIf="environment.from_repository">
                             <p>

ui/src/app/views/environment/show/environment.show.scss

@@ -11,7 +11,22 @@
   .ascodeButton {
     position: absolute;
     right: 15px;
-    top: 121px;
+    top: 135px;
+  }
+}
+
+.labelFeature {
+  position: relative;
+  top: -3px;
+  margin-left: 10px;
+  margin-top: 5px;
+
+  nz-tag {
+    cursor: pointer;
+  }
+
+  i {
+    margin-right: 5px;
   }
 }
 

ui/src/app/views/pipeline/show/pipeline.show.component.ts

@@ -69,6 +69,7 @@ export class PipelineShowComponent implements OnInit, OnDestroy {
 
     keys: AllKeys;
     asCodeEditorOpen: boolean;
+    nzTagColor: string = '';
 
     // tabs
     tabs: Array<Tab>;
@@ -103,7 +104,6 @@ export class PipelineShowComponent implements OnInit, OnDestroy {
                 this._cd.markForCheck();
             });
 
-
         this.asCodeEditorSubscription = this._pipCoreService.getAsCodeEditor()
             .subscribe((state) => {
                 if (state != null) {
@@ -197,6 +197,14 @@ export class PipelineShowComponent implements OnInit, OnDestroy {
                     this.pipeline = cloneDeep(pip.pipeline);
                 }
 
+                if (this.pipeline.from_repository && (!this.pipeline.ascode_events || this.pipeline.ascode_events.length ===0)) {
+                    this.nzTagColor = 'green';
+                } else if (this.pipeline.from_repository && this.pipeline?.ascode_events?.length > 0) {
+                    this.nzTagColor = 'orange';
+                } else {
+                    this.nzTagColor = '';
+                }
+
                 if (this.pipeline.usage) {
                     this.applications = this.pipeline.usage.applications || [];
                     this.workflows = this.pipeline.usage.workflows || [];

ui/src/app/views/pipeline/show/pipeline.show.html

@@ -5,14 +5,10 @@
             [workflow]="workflowName" [version]="version" [buildNumber]="buildNumber" [envName]="envName"
             [remote]="remote" [branch]="branch">
             <div class="right floated labelFeature" [title]="'workflow_from_repository_btn' | translate">
-                <a class="ui label small basic"
-                    [class.green]="pipeline && pipeline.from_repository && (!pipeline.ascode_events || pipeline.ascode_events.length ===0)"
-                    [class.orange]="pipeline && pipeline.from_repository && pipeline?.ascode_events?.length > 0"
-                    [class.grey]="pipeline && !pipeline.from_repository && (!pipeline.ascode_events || pipeline.ascode_events.length === 0)"
-                    nz-popover [nzPopoverContent]="popupFromRepository" nzPopoverPlacement="bottomLeft" nzPopoverTrigger="click">
-                    <i class="code icon"></i>as code
-                </a>
-                <ng-template let-popup #popupFromRepository>
+                <nz-tag [nzColor]="nzTagColor" nz-popover nzPopoverTrigger="click" [nzPopoverContent]="popupFromRepository"
+                        nzPopoverPlacement="bottom"><i nz-icon nzType="code" nzTheme="outline"></i>as code</nz-tag>
+
+                <ng-template #popupFromRepository>
                     <div class="content infoPopup">
                         <ng-container *ngIf="pipeline?.workflow_ascode_holder">
                             <app-ascode-event [project]="project" [workflow]="pipeline.workflow_ascode_holder"

ui/src/app/views/pipeline/show/pipeline.show.scss

@@ -8,5 +8,20 @@
 .ascodeButton {
   position: absolute;
   right: 15px;
-  top: 121px;
+  top: 135px;
+}
+
+.labelFeature {
+  position: relative;
+  top: -3px;
+  margin-left: 10px;
+  margin-top: 5px;
+
+  nz-tag {
+    cursor: pointer;
+  }
+
+  i {
+    margin-right: 5px;
+  }
 }

ui/src/app/views/pipeline/show/workflow/pipeline.workflow.html

@@ -5,8 +5,8 @@
                 <div class="ui buttons">
                     <div class="ui blue button" (click)="showAsCodeEditor()">
                         <i class="terminal icon"></i> {{'workflow_edit_as_code' | translate}}
-                        <i class="orange warning sign icon ml5" *ngIf="previewMode" suiPopup
-                            [popupText]="'workflow_preview_mode' | translate" popupPlacement="top center">
+                        <i class="orange warning sign icon ml5" *ngIf="previewMode" nz-tooltip
+                           nzTooltipTitle="Your pipeline is in preview mode">
                         </i>
                     </div>
                     <div *ngIf="previewMode" class="ui green button" (click)="savePreview()">

ui/src/app/views/settings/user/consumer-create-modal/consumer-create-modal.component.ts

@@ -2,13 +2,9 @@ import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
-    EventEmitter,
-    Input,
-    Output,
-    ViewChild
+    Input, OnInit,
 } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { ModalTemplate, SuiActiveModal, SuiModalService, TemplateModalConfig } from '@richardlt/ng2-semantic-ui';
 import { AuthConsumer, AuthConsumerScopeDetail } from 'app/model/authentication.model';
 import { Group } from 'app/model/group.model';
 import { AuthentifiedUser } from 'app/model/user.model';
@@ -18,6 +14,7 @@ import { UserService } from 'app/service/user/user.service';
 import { Column, Select } from 'app/shared/table/data-table.component';
 import { ToastService } from 'app/shared/toast/ToastService';
 import { finalize } from 'rxjs/operators';
+import { NzModalRef } from 'ng-zorro-antd/modal';
 
 export enum CloseEventType {
     CREATED = 'CREATED',
@@ -38,13 +35,9 @@ export enum FormStepName {
     styleUrls: ['./consumer-create-modal.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ConsumerCreateModalComponent {
-    @ViewChild('consumerCreateModal') consumerDetailsModal: ModalTemplate<boolean, boolean, void>;
-    modal: SuiActiveModal<boolean, boolean, void>;
-    open: boolean;
+export class ConsumerCreateModalComponent implements OnInit {
 
     @Input() user: AuthentifiedUser;
-    @Output() close = new EventEmitter<CloseEventType>();
 
     newConsumer: AuthConsumer = new AuthConsumer();
     signinToken: string;
@@ -62,7 +55,7 @@ export class ConsumerCreateModalComponent {
     maxActivedStep: FormStepName;
 
     constructor(
-        private _modalService: SuiModalService,
+        private _modal: NzModalRef,
         private _userService: UserService,
         private _groupService: GroupService,
         private _authenticationService: AuthenticationService,
@@ -79,36 +72,15 @@ export class ConsumerCreateModalComponent {
         ];
     }
 
-    show() {
-        if (this.open) {
-            return;
-        }
-
-        this.open = true;
-
-        const config = new TemplateModalConfig<boolean, boolean, void>(this.consumerDetailsModal);
-        config.mustScroll = true;
-        this.modal = this._modalService.open(config);
-        this.modal.onApprove(_ => {
- this.closeCallback();
-});
-        this.modal.onDeny(_ => {
- this.closeCallback();
-});
-
-        this.init();
-    }
-
     closeCallback(): void {
-        this.open = false;
         if (this.newConsumer.id) {
-            this.close.emit(CloseEventType.CREATED);
+            this._modal.triggerOk();
         } else {
-            this.close.emit(CloseEventType.CLOSED);
+            this._modal.triggerCancel();
         }
     }
 
-    init(): void {
+    ngOnInit(): void {
         this.newConsumer = new AuthConsumer();
         this.signinToken = null;
         this.selectedGroupKeys = null;
@@ -257,8 +229,4 @@ export class ConsumerCreateModalComponent {
         }
         this.selectedScopeDetails.push(detail);
     }
-
-    clickClose() {
-        this.modal.approve(true);
-    }
 }

ui/src/app/views/settings/user/consumer-create-modal/consumer-create-modal.html

@@ -1,4 +1,4 @@
-<ng-template let-context let-modal="modal" #consumerCreateModal>
+<div>
     <div class="header">
         {{ 'auth_consumer_create_modal_title' | translate }}
     </div>
@@ -111,33 +111,33 @@
             </div>
         </div>
     </div>
-    <div class="actions">
-        <div class="ui grid">
-            <div class="four wide column left aligned">
-                <button
+</div>
+<div *nzModalFooter>
+    <div class="ui grid">
+        <div class="four wide column left aligned">
+            <button
                     *ngIf="activeStep === formStepName.GROUPS || activeStep === formStepName.SCOPES || activeStep === formStepName.SERVICE"
                     class="ui primary button" (click)="clickBack()">
-                    {{ 'btn_back' | translate }}
-                </button>
-            </div>
-            <div class="eight wide column centered">
-                <button *ngIf="activeStep !== formStepName.TOKEN" class="ui green button" [class.loading]="loading"
+                {{ 'btn_back' | translate }}
+            </button>
+        </div>
+        <div class="eight wide column centered">
+            <button *ngIf="activeStep !== formStepName.TOKEN" class="ui green button" [class.loading]="loading"
                     (click)="clickNext()">
-                    <ng-container *ngIf="activeStep === formStepName.SERVICE; then createButton; else nextButton">
-                    </ng-container>
-                    <ng-template #createButton>
-                        <i class="save icon"></i>{{ 'btn_create' | translate }}
-                    </ng-template>
-                    <ng-template #nextButton>
-                        {{ 'btn_next' | translate }}
-                    </ng-template>
-                </button>
-            </div>
-            <div class="four wide column right aligned">
-                <button class="ui secondary button" (click)="clickClose()">
-                    {{ 'btn_close' | translate }}
-                </button>
-            </div>
+                <ng-container *ngIf="activeStep === formStepName.SERVICE; then createButton; else nextButton">
+                </ng-container>
+                <ng-template #createButton>
+                    <i class="save icon"></i>{{ 'btn_create' | translate }}
+                </ng-template>
+                <ng-template #nextButton>
+                    {{ 'btn_next' | translate }}
+                </ng-template>
+            </button>
+        </div>
+        <div class="four wide column right aligned">
+            <button class="ui secondary button" (click)="closeCallback()">
+                {{ 'btn_close' | translate }}
+            </button>
         </div>
     </div>
-</ng-template>
+</div>