refactor(ui): remove some semanticUI components

ui/src/app/model/workflow-template.model.ts

@@ -89,7 +89,7 @@ export class WorkflowTemplateInstance implements WithKey {
         if (!this.workflow) {
             return InstanceStatus.NOT_IMPORTED;
         }
-        return this.workflow_template_version === wt.version ? InstanceStatus.UP_TO_DATE : InstanceStatus.NOT_UP_TO_DATE;
+        return this.workflow_template_version === wt?.version ? InstanceStatus.UP_TO_DATE : InstanceStatus.NOT_UP_TO_DATE;
     }
 }
 

ui/src/app/shared/favorite-cards/favorite-cards.component.html

@@ -1,101 +1,101 @@
-<div class="ui cards" [class.centered]="centered">
-  <div class="card" *ngIf="(workflows && workflows.length) || (projects && projects.length)">
-    <div class="content">
-      <div class="header">
-        {{'favorite_add' | translate}}
-      </div>
-      <div class="description">
-        <sui-select class="selection"
-                    placeholder="{{'favorite_select_type' | translate}}"
-                    [(ngModel)]="newFav.type">
-            <sui-select-option value="project"></sui-select-option>
-            <sui-select-option value="workflow"></sui-select-option>
-        </sui-select>
-        <ng-container *ngIf="newFav.type === 'project'">
-          <sui-select class="selection mt5"
-                      placeholder="{{'favorite_project_select' | translate}}"
-                      labelField="name"
-                      [options]="filteredProjects"
-                      [isSearchable]="true"
-                      [(ngModel)]="newFav"
-                      #selectProj>
-              <sui-select-option *ngFor="let option of selectProj.filteredOptions" [value]="option"></sui-select-option>
-          </sui-select>
-        </ng-container>
-        <ng-container *ngIf="newFav.type === 'workflow'">
-          <sui-select class="selection mt5"
-                      placeholder="{{'favorite_project_select' | translate}}"
-                      labelField="name"
-                      valueField="key"
-                      [options]="projects"
-                      [isSearchable]="true"
-                      [(ngModel)]="projectKeySelected"
-                      #selectProj>
-              <sui-select-option *ngFor="let option of selectProj.filteredOptions" [value]="option"></sui-select-option>
-          </sui-select>
-        </ng-container>
-        <ng-container *ngIf="newFav.type === 'workflow' && projectKeySelected">
-          <sui-select class="selection mt5"
-                      placeholder="{{'favorite_workflow_select' | translate}}"
-                      labelField="workflow_name"
-                      [options]="filteredWf"
-                      [isSearchable]="true"
-                      [(ngModel)]="newFav"
-                      #selectWf>
-              <sui-select-option *ngFor="let option of selectWf.filteredOptions" [value]="option"></sui-select-option>
-          </sui-select>
-        </ng-container>
-      </div>
-    </div>
-    <div class="ui bottom green attached button" [class.disabled]="loading[newFav.key + newFav.workflow_name]" (click)="updateFav(newFav)">
-      <i class="plus icon" *ngIf="!loading[newFav.key + newFav.workflow_name]"></i>
-      <div class="ui active small inline loader" *ngIf="loading[newFav.key + newFav.workflow_name]"></div>
-      {{'favorite_add_btn' | translate}}
-    </div>
-  </div>
-  <ng-container *ngFor="let favorite of favorites">
-    <div class="card">
-      <div class="content">
-        <ng-container [ngSwitch]="favorite.type">
-          <ng-container *ngSwitchCase="'workflow'">
-            <div class="right floated" *ngIf="!favorite.icon">
-              <i class="share alternate icon"></i>
-            </div>
-            <img class="right floated mini ui image" [src]="favorite.icon" *ngIf="favorite.icon">
-            <a class="header" href="#" [routerLink]="['/project', favorite.key, 'workflow', favorite.workflow_name]">
-              {{favorite.workflow_name}}
-            </a>
-            <div class="meta">
-              {{'navbar_workflow_in' | translate}} <a class="projectLink" href="" [routerLink]="['/project', favorite.key]">{{favorite.key}}</a>
-            </div>
-            <div class="description">
-              {{favorite.description}}
-            </div>
-          </ng-container>
-          <ng-container *ngSwitchDefault>
-            <div class="right floated" *ngIf="!favorite.icon">
-              <i class="browser icon"></i>
-            </div>
-            <img class="right floated mini ui image" [src]="favorite.icon" *ngIf="favorite.icon">
-            <a class="header" href="#" [routerLink]="['/project', favorite.key]">
-              {{favorite.name}}
-            </a>
-            <div class="meta">
-              {{'common_project' | translate}}
-            </div>
-            <div class="description">
-              {{favorite.description}}
-            </div>
-          </ng-container>
-        </ng-container>
-      </div>
-      <div class="ui bottom attached vertical animated button" (click)="updateFav(favorite)" [class.disabled]="loading[favorite.key + favorite.workflow_name]" tabindex="0">
-        <div class="hidden content">{{'common_favorites_delete' | translate}}</div>
-        <div class="visible content">
-          <div class="ui active small inline loader" *ngIf="loading[favorite.key + favorite.workflow_name]"></div>
-          <i class="trash icon" *ngIf="!loading[favorite.key + favorite.workflow_name]"></i>
-        </div>
-      </div>
-    </div>
-  </ng-container>
-</div>
+<ng-container *ngIf="(workflows && workflows.length) || (projects && projects.length)">
+    <nz-row>
+        <nz-col [nzSpan]="6">
+            <nz-card [nzActions]="[actionSetting]">
+                <nz-card-meta
+                        nzTitle="Add a bookmark"
+                        [nzDescription]="descriptionTmpl"
+                ></nz-card-meta>
+            </nz-card>
+            <ng-template #descriptionTmpl>
+                <nz-select [(ngModel)]="newFav.type" nzPlaceHolder="Select a favorite type">
+                    <nz-option nzLabel="project" nzValue="project"></nz-option>
+                    <nz-option nzLabel="workflow" nzValue="workflow"></nz-option>
+                </nz-select>
+                <ng-container *ngIf="newFav.type === 'project'">
+                    <nz-select nzShowSearch nzPlaceHolder="Select a project"
+                               [(ngModel)]="newFav"
+                               #selectProj>
+                        <nz-option *ngFor="let p of filteredProjects" [nzLabel]="p.name" [nzValue]="p"></nz-option>
+                    </nz-select>
+                </ng-container>
+                <ng-container *ngIf="newFav.type === 'workflow'">
+                    <nz-select nzShowSearch nzPlaceHolder="Select a project" [(ngModel)]="projectKeySelected">
+                        <nz-option *ngFor="let p of projects" [nzLabel]="p.name" [nzValue]="p.key"></nz-option>
+                    </nz-select>
+                </ng-container>
+                <ng-container *ngIf="newFav.type === 'workflow' && projectKeySelected">
+                    <nz-select nzShowSearch nzPlaceHolder="Select a workflow"
+                               [(ngModel)]="newFav"
+                               #selectWf>
+                        <nz-option *ngFor="let w of filteredWf" [nzLabel]="w.workflow_name" [nzValue]="w"></nz-option>
+                    </nz-select>
+                </ng-container>
+            </ng-template>
+            <ng-template #actionSetting>
+                <button nz-button nzType="link" (click)="updateFav(newFav)">
+                    <i nz-icon nzType="plus"></i> Add to my bookmarks
+                </button>
+            </ng-template>
+        </nz-col>
+        <nz-col [nzSpan]="6" *ngFor="let favorite of favorites">
+            <ng-template #extraTmpl>
+                <ng-container [ngSwitch]="favorite.type">
+                    <ng-container *ngSwitchCase="'workflow'">
+                        <i class="share alternate icon" *ngIf="!favorite.icon"></i>
+                        <img width="32" [src]="favorite.icon" *ngIf="favorite.icon" alt="workflow logo">
+                    </ng-container>
+                    <ng-container *ngSwitchDefault>
+                        <i class="browser icon" *ngIf="!favorite.icon"></i>
+                        <img  width="32" [src]="favorite.icon" *ngIf="favorite.icon" alt="project logo">
+                    </ng-container>
+                </ng-container>
+            </ng-template>
+            <ng-template #favTitle>
+                <ng-container *ngIf="favorite.type === 'workflow'">
+                    <a class="header" href="#"
+                       [routerLink]="['/project', favorite.key, 'workflow', favorite.workflow_name]">
+                        {{favorite.workflow_name}}
+                    </a>
+                </ng-container>
+                <ng-container *ngIf="favorite.type === 'project'">
+                    <a class="header" href="#" [routerLink]="['/project', favorite.key]">
+                        {{favorite.name}}
+                    </a>
+                </ng-container>
+            </ng-template>
+            <ng-template #favDescTmpl>
+                <ng-container *ngIf="favorite.type === 'workflow'">
+                    <div>
+                        Workflow in <a class="projectLink" href="" [routerLink]="['/project', favorite.key]">{{favorite.key}}</a>
+                    </div>
+                    <div>
+                        {{favorite.description}}
+                    </div>
+                </ng-container>
+                <ng-container *ngIf="favorite.type === 'project'">
+                    <div>
+                       Project
+                    </div>
+                    <div>
+                        {{favorite.description}}
+                    </div>
+                </ng-container>
+            </ng-template>
+            <ng-template #favActionsTmpl>
+                <button nz-button nzType="link" (click)="updateFav(favorite)" [disabled]="loading[favorite.key + favorite.workflow_name]">
+                    <i nz-icon nzType="delete"></i>Delete from bookmarks
+                </button>
+            </ng-template>
+            <nz-card [nzActions]="[favActionsTmpl]">
+                <nz-card-meta
+                        [nzTitle]="favTitle"
+                        [nzDescription]="favDescTmpl"
+                        [nzAvatar]="extraTmpl"
+                ></nz-card-meta>
+            </nz-card>
+        </nz-col>
+    </nz-row>
+</ng-container>
+
+

ui/src/app/shared/favorite-cards/favorite-cards.component.scss

@@ -1,18 +1,7 @@
-.mt5 {
+nz-select {
+  width: 100%;
   margin-top: 5px;
 }
-
-.projectLink {
-  color: rgba(0, 0, 0, 0.68);
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.ui.cards > .card {
-  margin-right: auto;
-}
-
-.text-black {
-  color: black;
+nz-card {
+  margin: 10px 10px;
 }

ui/src/app/shared/repomanager/from/repomanager.form.component.ts

@@ -22,6 +22,7 @@ export class RepoManagerFormComponent {
 
     // project
     @Input() project: Project;
+    @Input() disableLabel: boolean = false;
 
     public ready = false;
     public connectLoading = false;

ui/src/app/shared/repomanager/from/repomanager.form.html

@@ -2,7 +2,7 @@
     <nz-row>
         <nz-col [nzSpan]="10">
             <nz-form-item>
-                <nz-form-label>Add a repository manager</nz-form-label>
+                <nz-form-label *ngIf="!disableLabel">Add a repository manager</nz-form-label>
                 <nz-form-control>
                     <nz-select [(ngModel)]="selectedRepoId" [nzDisabled]="connectLoading" name="repo">
                         <nz-option *ngFor="let r of reposManagerList; let i = index;" [nzValue]="i" [nzLabel]="r"></nz-option>
@@ -11,9 +11,13 @@
             </nz-form-item>
         </nz-col>
         <nz-col [nzSpan]="2" [nzOffset]="12">
-            <button nz-button nzType="primary" type="submit" [disabled]="selectedRepoId == null"  [nzLoading]="connectLoading" name="addrepo">
-                Connect
-            </button>
+            <nz-form-item>
+                <nz-form-item>
+                    <button nz-button nzType="primary" type="submit" [disabled]="selectedRepoId == null"  [nzLoading]="connectLoading" name="addrepo">
+                        Connect
+                    </button>
+                </nz-form-item>
+            </nz-form-item>
         </nz-col>
     </nz-row>
 </form>

ui/src/app/shared/shared.module.ts

@@ -123,7 +123,7 @@ import { en_US, NZ_I18N } from 'ng-zorro-antd/i18n';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { IconDefinition } from '@ant-design/icons-angular';
 import { ArrowDownOutline, ArrowRightOutline, BellFill, BookOutline, CalendarOutline, CaretDownFill, CaretRightFill, CaretUpFill, CheckOutline, CodeOutline, CopyOutline, DeleteOutline, DragOutline, EyeInvisibleOutline, EyeOutline, KeyOutline,
-    HighlightFill, HistoryOutline, InfoCircleOutline, PhoneFill, PlusOutline, PlusSquareOutline, QuestionOutline, QuestionCircleOutline, RestOutline, SaveOutline, SettingFill, ShareAltOutline, StarOutline, StarFill, SyncOutline,
+    HighlightFill, HistoryOutline, InfoCircleOutline, PhoneFill, PlusOutline, PlusSquareOutline, QuestionOutline, QuestionCircleOutline, RestOutline, SaveOutline, SettingFill, ShareAltOutline, StarOutline, StarFill, StopOutline, SyncOutline,
     TableOutline, TagsOutline, ToolFill, UnlockFill, UnorderedListOutline, UploadOutline, UserOutline, WarningOutline, WarningFill } from '@ant-design/icons-angular/icons'
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzTagModule } from 'ng-zorro-antd/tag';
@@ -156,7 +156,7 @@ const ngZorroConfig: NzConfig = {
 
 const icons: IconDefinition[] = [ ArrowDownOutline, ArrowRightOutline, BellFill, BookOutline, CalendarOutline, CaretDownFill, CaretRightFill, CaretUpFill, CheckOutline, CodeOutline, CopyOutline, DeleteOutline, DragOutline,
     EyeInvisibleOutline, EyeOutline, KeyOutline, HighlightFill, HistoryOutline, InfoCircleOutline, PhoneFill, PlusOutline, PlusSquareOutline, QuestionOutline, QuestionCircleOutline,
-    RestOutline, SaveOutline, SettingFill, ShareAltOutline, StarOutline, StarFill, SyncOutline, TableOutline, TagsOutline, ToolFill, UnlockFill, UnorderedListOutline, UploadOutline, UserOutline, WarningOutline, WarningFill ];
+    RestOutline, SaveOutline, SettingFill, ShareAltOutline, StarOutline, StarFill, StopOutline, SyncOutline, TableOutline, TagsOutline, ToolFill, UnlockFill, UnorderedListOutline, UploadOutline, UserOutline, WarningOutline, WarningFill ];
 
 @NgModule({
     imports: [

ui/src/app/shared/vcs/vcs.strategy.component.ts

@@ -30,11 +30,11 @@ export class VCSStrategyComponent implements OnInit {
     @Input() project: Project;
     @Input() appName: string;
     @Input() loading: boolean;
-    @Input() hideBranch = false;
     @Input() hideButton = false;
     @Input() createOnProject = false;
     @Input() sshWarning = false;
     @Input() projectKeysOnly = false;
+    @Input() withoutForm = false;
 
     selectedPublicKey: string;
 

ui/src/app/shared/vcs/vcs.strategy.html

@@ -1,4 +1,4 @@
-<form nz-form>
+<form nz-form *ngIf="!withoutForm">
     <nz-form-item>
         <nz-form-label>Connection</nz-form-label>
         <nz-form-control>
@@ -16,7 +16,7 @@
                 <nz-form-label [nzSpan]="3">
                     SSH key*
                     <a class="keyLink" (click)="openCreateKeyModal('ssh')"
-                          *ngIf="createOnProject">Create</a>
+                          *ngIf="createOnProject">(Create)</a>
                 </nz-form-label>
                 <nz-form-control [nzSpan]="7">
                     <app-parameter-value [editList]="false" [edit]="true" [type]="'ssh-key'" [keys]="keys"
@@ -58,12 +58,70 @@
         <nz-alert nzType="info" nzMessage="Don't forget to add your ssh key on your repository"></nz-alert>
     </ng-container>
     <nz-form-item nzJustify="end">
-        <button nz-button nzType="primary" [nzLoading]="loading" [disabled]="loading || !strategy.connection_type"
+        <button *ngIf="!hideButton" nz-button nzType="primary" [nzLoading]="loading" [disabled]="loading || !strategy.connection_type"
                 (click)="saveStrategy()">Save
         </button>
     </nz-form-item>
 </form>
-<nz-modal [(nzVisible)]="modalKeyVisible" nzTitle="Add a key" [nzFooter]="null" nzWidth="900px">
+
+<div *ngIf="withoutForm" class="noform">
+    <nz-row>
+        <nz-col [nzSpan]="24">
+            Connection:
+            <nz-radio-group  [(ngModel)]="strategy.connection_type" name="radioConnecion">
+                <ng-container *ngFor="let c of connectionType.values()">
+                    <label nz-radio [nzValue]="c" >{{c}}</label>
+                </ng-container>
+            </nz-radio-group>
+        </nz-col>
+    </nz-row>
+    <nz-row *ngIf="strategy.connection_type === connectionType.SSH">
+        <nz-col [nzSpan]="3" [nzOffset]="2">
+            SSH key*
+            <a class="keyLink" (click)="openCreateKeyModal('ssh')"
+               *ngIf="createOnProject">(Create)
+            </a>
+        </nz-col>
+        <nz-col [nzSpan]="6" [nzOffset]="1">
+            <app-parameter-value [editList]="false" [edit]="true" [type]="'ssh-key'" [keys]="keys"
+                                 [(value)]="strategy.ssh_key" (valueChange)="updatePublicKey($event)">
+            </app-parameter-value>
+
+        </nz-col>
+        <nz-col [nzSpan]="1">
+            <button nz-button [title]="'key_copy_public' | translate" ngxClipboard
+                    [cbContent]="selectedPublicKey" (click)="clickCopyKey()">
+                <i nz-icon nzType="copy" nzTheme="outline"></i>
+            </button>
+        </nz-col>
+    </nz-row>
+    <nz-row *ngIf="strategy.connection_type === connectionType.HTTPS">
+        <nz-col [nzSpan]="3" [nzOffset]="2">
+            User:
+        </nz-col>
+        <nz-col [nzSpan]="7"  [nzOffset]="1">
+            <input nz-input name="user" type="text" [(ngModel)]="strategy.user">
+        </nz-col>
+    </nz-row>
+    <nz-row *ngIf="strategy.connection_type === connectionType.HTTPS">
+        <nz-col [nzSpan]="3" [nzOffset]="2">
+            Password:
+        </nz-col>
+        <nz-col [nzSpan]="7" [nzOffset]="1">
+            <input nz-input name="password" type="password"[(ngModel)]="strategy.password">
+        </nz-col>
+    </nz-row>
+    <nz-row>
+        <nz-col [nzSpan]="3" [nzOffset]="2">
+            PGP key:
+        </nz-col>
+        <nz-col [nzSpan]="7" [nzOffset]="1">
+            <app-parameter-value [editList]="false" [edit]="true" [type]="'pgp-key'" [keys]="keys"
+                                         [(value)]="strategy.pgp_key"></app-parameter-value>
+        </nz-col>
+    </nz-row>
+</div>
+<nz-modal [(nzVisible)]="modalKeyVisible" nzTitle="Add a key" [nzFooter]="null" nzWidth="900px" (nzOnCancel)="modalKeyVisible = false">
     <div *nzModalContent>
         <app-keys-form [loading]="loading" (keyEvent)="addKey($event)" [defaultType]="defaultKeyType" prefix="proj-">
         </app-keys-form>