From 7c12ad17dc1aaeec1d1fe292241c18f945e1199c Mon Sep 17 00:00:00 2001 From: Steven Guiheux Date: Tue, 5 Jul 2022 17:53:25 +0200 Subject: [PATCH 01/10] refactor(ui): remove semantic from run summary and workflow tags --- .../shared/ascode/events/ascode.event.html | 7 +- .../shared/ascode/events/ascode.event.scss | 4 +- ui/src/app/shared/shared.module.ts | 8 +- .../workflow.sidebar.run.component.html | 8 +- .../workflow.sidebar.run.component.scss | 3 + .../workflow.sidebar.run.component.ts | 11 - .../run/summary/workflow.run.summary.html | 178 +++++++-------- .../run/summary/workflow.run.summary.scss | 207 ++++++++++-------- ui/src/app/views/workflow/show/workflow.scss | 2 +- .../app/views/workflow/workflow.component.ts | 15 +- ui/src/app/views/workflow/workflow.html | 87 +++----- ui/src/app/views/workflow/workflow.scss | 76 +++---- 12 files changed, 291 insertions(+), 315 deletions(-) diff --git a/ui/src/app/shared/ascode/events/ascode.event.html b/ui/src/app/shared/ascode/events/ascode.event.html index a79bb30c5f..73d978eddd 100644 --- a/ui/src/app/shared/ascode/events/ascode.event.html +++ b/ui/src/app/shared/ascode/events/ascode.event.html @@ -20,6 +20,9 @@ - +
+ +
+ diff --git a/ui/src/app/shared/ascode/events/ascode.event.scss b/ui/src/app/shared/ascode/events/ascode.event.scss index 1b2c64bc14..6b80fdc236 100644 --- a/ui/src/app/shared/ascode/events/ascode.event.scss +++ b/ui/src/app/shared/ascode/events/ascode.event.scss @@ -1,5 +1,4 @@ .asCodeEvents { - ul { li { ul { @@ -7,6 +6,9 @@ } } } + .footer { + text-align: right; + } } diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts index 8f8c7950ae..00a28b8a4a 100644 --- a/ui/src/app/shared/shared.module.ts +++ b/ui/src/app/shared/shared.module.ts @@ -124,7 +124,9 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm'; 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 { BellFill, BookOutline, CalendarOutline, CaretDownFill, CaretRightFill, CaretUpFill, CheckOutline, CopyOutline, DeleteOutline, DragOutline, EyeInvisibleOutline, EyeOutline, KeyOutline, HistoryOutline, InfoCircleOutline, PhoneFill, PlusOutline, PlusSquareOutline, QuestionOutline, QuestionCircleOutline, RestOutline, SaveOutline, SettingFill, ShareAltOutline, StarOutline, TableOutline, TagsOutline, ToolFill, UnlockFill, UnorderedListOutline, UploadOutline, WarningOutline } from '@ant-design/icons-angular/icons' +import { ArrowDownOutline, ArrowRightOutline, BellFill, BookOutline, CalendarOutline, CaretDownFill, CaretRightFill, CaretUpFill, CheckOutline, CopyOutline, DeleteOutline, DragOutline, EyeInvisibleOutline, EyeOutline, KeyOutline, + HistoryOutline, InfoCircleOutline, PhoneFill, PlusOutline, PlusSquareOutline, QuestionOutline, QuestionCircleOutline, RestOutline, SaveOutline, SettingFill, ShareAltOutline, StarOutline, StarFill, SyncOutline, + TableOutline, TagsOutline, ToolFill, UnlockFill, UnorderedListOutline, UploadOutline, UserOutline, WarningOutline } from '@ant-design/icons-angular/icons' import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; import { NzTagModule } from 'ng-zorro-antd/tag'; import { NzPopoverModule } from 'ng-zorro-antd/popover'; @@ -154,7 +156,9 @@ const ngZorroConfig: NzConfig = { icon: {nzTheme: "outline"} }; -const icons: IconDefinition[] = [ BellFill, BookOutline, CalendarOutline, CaretDownFill, CaretRightFill, CaretUpFill, CheckOutline, CopyOutline, DeleteOutline, DragOutline, EyeInvisibleOutline, EyeOutline, KeyOutline, HistoryOutline, InfoCircleOutline, PhoneFill, PlusOutline, PlusSquareOutline, QuestionOutline, QuestionCircleOutline, RestOutline, SaveOutline, SettingFill, ShareAltOutline, StarOutline, TableOutline, TagsOutline, ToolFill, UnlockFill, UnorderedListOutline, UploadOutline, WarningOutline ]; +const icons: IconDefinition[] = [ ArrowDownOutline, ArrowRightOutline, BellFill, BookOutline, CalendarOutline, CaretDownFill, CaretRightFill, CaretUpFill, CheckOutline, CopyOutline, DeleteOutline, DragOutline, + EyeInvisibleOutline, EyeOutline, KeyOutline, HistoryOutline, InfoCircleOutline, PhoneFill, PlusOutline, PlusSquareOutline, QuestionOutline, QuestionCircleOutline, + RestOutline, SaveOutline, SettingFill, ShareAltOutline, StarOutline, StarFill, SyncOutline, TableOutline, TagsOutline, ToolFill, UnlockFill, UnorderedListOutline, UploadOutline, UserOutline, WarningOutline ]; @NgModule({ imports: [ diff --git a/ui/src/app/shared/workflow/sidebar/run-list/workflow.sidebar.run.component.html b/ui/src/app/shared/workflow/sidebar/run-list/workflow.sidebar.run.component.html index f82890650f..4dd38f346f 100644 --- a/ui/src/app/shared/workflow/sidebar/run-list/workflow.sidebar.run.component.html +++ b/ui/src/app/shared/workflow/sidebar/run-list/workflow.sidebar.run.component.html @@ -1,9 +1,7 @@ - - - - + + +
diff --git a/ui/src/app/shared/workflow/sidebar/run-list/workflow.sidebar.run.component.scss b/ui/src/app/shared/workflow/sidebar/run-list/workflow.sidebar.run.component.scss index 6c152b6758..7039a11eaf 100644 --- a/ui/src/app/shared/workflow/sidebar/run-list/workflow.sidebar.run.component.scss +++ b/ui/src/app/shared/workflow/sidebar/run-list/workflow.sidebar.run.component.scss @@ -213,4 +213,7 @@ } } } + nz-select { + padding: 5px 10px 5px 5px; + } } diff --git a/ui/src/app/shared/workflow/sidebar/run-list/workflow.sidebar.run.component.ts b/ui/src/app/shared/workflow/sidebar/run-list/workflow.sidebar.run.component.ts index efff845f57..a6963cb021 100644 --- a/ui/src/app/shared/workflow/sidebar/run-list/workflow.sidebar.run.component.ts +++ b/ui/src/app/shared/workflow/sidebar/run-list/workflow.sidebar.run.component.ts @@ -252,17 +252,6 @@ export class WorkflowSidebarRunListComponent implements OnDestroy { } } - filterTags(options: Array, query: string): Array | false { - if (!options) { - return false; - } - if (!query || query.length < 3) { - return options.slice(0, 100); - } - let queryLowerCase = query.toLowerCase(); - return options.filter(o => o.toLowerCase().indexOf(queryLowerCase) !== -1); - } - confirmCopy() { this._toast.success('', 'Workflow run version copied!'); } diff --git a/ui/src/app/views/workflow/run/summary/workflow.run.summary.html b/ui/src/app/views/workflow/run/summary/workflow.run.summary.html index 80af90552f..613d4992f4 100644 --- a/ui/src/app/views/workflow/run/summary/workflow.run.summary.html +++ b/ui/src/app/views/workflow/run/summary/workflow.run.summary.html @@ -1,104 +1,86 @@
-
-
-
-
-
-
-
-
-
- - {{workflowRun.start | amLocal | amDateFormat: 'DD/MM/YYYY HH:mm' }} -
-
- - {{workflowRun.num}}.{{workflowRun.last_subnumber}} -
-
-
- - {{workflowRun.last_execution | amLocal | amDateFormat: 'DD/MM/YYYY HH:mm' }} -
-
+ + + + + + + {{workflowRun.start | amLocal | amDateFormat: 'DD/MM/YYYY HH:mm' }} + + + #{{workflowRun.num}}.{{workflowRun.last_subnumber}} + + + + + {{workflowRun.last_execution | amLocal | amDateFormat: 'DD/MM/YYYY HH:mm' }} + + + + + + + + + + +
+
-
-
-
-
-
-
- - -
-
- -
- -
- {{author}} - -
-
-
- -
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
- -
+ {{author}} + + + + + + + + + + + + + + + + + 

                         

-                    

-                    

-                        
-                        
-                    

-                

+                    
+                
+            
+            

+                
+                
             

-            

-        

-    

+        
+    
 

diff --git a/ui/src/app/views/workflow/run/summary/workflow.run.summary.scss b/ui/src/app/views/workflow/run/summary/workflow.run.summary.scss
index a42208f96e..f7967f9db3 100644
--- a/ui/src/app/views/workflow/run/summary/workflow.run.summary.scss
+++ b/ui/src/app/views/workflow/run/summary/workflow.run.summary.scss
@@ -1,111 +1,138 @@
 @import '../../../../../common';
-
 .workflowRunStatus {
-    :host-context(.night) & {
-        .success {
-            background-color: $darkTheme_night_green;
-            border: 2px solid $darkTheme_green;
-            border-top: none;
-        }
-
-        .fail {
-            background-color: $darkTheme_night_red;
-            border: 2px solid $darkTheme_red;
-            border-top: none;
-        }
-
-        .building {
-            background-color: $darkTheme_night_blue;
-            border: 2px solid $darkTheme_blue;
-            border-top: none;
-        }
-
-        .inactive {
-            background-color: $darkTheme_night_grey;
-            border: 2px solid grey;
-            border-top: none;
-        }
-    }
-
 
-    .winfo {
-        z-index: 1;
+  :host-context(.night) & {
+    button {
+      border-color: rgba(255, 255, 255, 0.85);
     }
-    .cardinfo {
-        border-radius: 0 0 0.28571429rem 0.28571429rem;
+    .success {
+      background-color: $darkTheme_night_green;
+      border: 2px solid $darkTheme_green;
+      border-top: none;
     }
 
-    .running {
-        border: none;
+    .fail {
+      background-color: $darkTheme_night_red;
+      border: 2px solid $darkTheme_red;
+      border-top: none;
     }
 
-    .success {
-        background-color: $cds_color_light_green;
-        border: 2px solid $cds_color_green;
-        border-top: none;
+    .building {
+      background-color: $darkTheme_night_blue;
+      border: 2px solid $darkTheme_blue;
+      border-top: none;
     }
 
-    .fail {
-        background-color: $cds_color_light_red;
-        border: 2px solid $cds_color_red;
-        border-top: none;
+    .inactive {
+      background-color: $darkTheme_night_grey;
+      border: 2px solid grey;
+      border-top: none;
     }
+  }
 
-    .inactive {
-        background-color: $cds_color_light_grey;
-        border: 2px solid grey;
-        border-top: none;
+  .center {
+    text-align: center;
+  }
+
+  .alignRight {
+    text-align: right;
+  }
+
+  nz-card {
+    z-index: 2;
+  }
+
+  nz-row:not(:last-child) {
+    margin-bottom: 15px;
+  }
+
+  nz-row.bordered {
+    padding-top: 15px;
+    border-top: 1px solid rgba(34,36,38,.1);
+  }
+
+  button {
+    i {
+      margin-right: inherit;
+    }
+  }
+
+  i {
+    margin-right: 5px;
+  }
+
+  .success {
+    background-color: $cds_color_light_green;
+    border: 2px solid $cds_color_green;
+    border-top: none;
+  }
+
+  .fail {
+    background-color: $cds_color_light_red;
+    border: 2px solid $cds_color_red;
+    border-top: none;
+  }
+
+  .inactive {
+    background-color: $cds_color_light_grey;
+    border: 2px solid grey;
+    border-top: none;
+  }
+
+  .building {
+    background-color: $cds_color_light_teal;
+    border: 2px solid $cds_color_teal;
+    border-top: none;
+  }
+
+  .semicircle {
+    width: 3em;
+    position: absolute;
+    height: 3em;
+    border: 2px solid black;
+    border-radius: 50% !important;
+    margin: 0 auto 0em auto;
+    bottom: -1.5em;
+    left: calc(50% - 1.5em);
+    z-index: 1;
+    cursor: pointer;
+
+    i {
+      font-size: 1em;
+      position: absolute;
+      bottom: 3px;
+      left: 30%;
     }
 
-    .building {
-        background-color: $cds_color_light_teal;
-        border: 2px solid $cds_color_teal;
-        border-top: none;
+    &.success {
+      border-color: $cds_color_green;
     }
 
-    .semicircle {
-        width: 3em;
-        position: absolute;
-        height: 3em;
-        border: 2px solid black;
-        border-radius: 50% !important;
-        margin: 0 auto 0em auto;
-        bottom: -1.5em;
-        left: calc(50% - 1.5em);
-        z-index: -1;
-
-        .icon {
-            position: absolute;
-            bottom: 0;
-            left: 17%;
-        }
-
-        &.success {
-            border-color: $cds_color_green;
-        }
-
-        &.fail {
-            border-color: $cds_color_red;
-        }
-
-        &.inactive {
-            border-color: grey;
-        }
-
-        &.building {
-            border-color: $cds_color_teal;
-        }
+    &.fail {
+      border-color: $cds_color_red;
     }
 
-    .spawninfo {
-        .scrollable {
-            max-height: 300px;
-            overflow-y: auto;
-        }
+    &.inactive {
+      border-color: grey;
+    }
 
-        pre {
-            white-space: pre-line;
-            font-size: 0.85em;
-        }
+    &.building {
+      border-color: $cds_color_teal;
     }
+  }
+
+  .black {
+    background-color: #141414;
+  }
+  .scrollable {
+    max-height: 300px;
+    overflow-y: auto;
+    padding: 1em 1.5em;
+    color: white;
+  }
+
+  pre {
+    white-space: pre-line;
+    font-size: 0.9em;
+  }
 }
diff --git a/ui/src/app/views/workflow/show/workflow.scss b/ui/src/app/views/workflow/show/workflow.scss
index 00b79dc965..bfc6dcd71d 100644
--- a/ui/src/app/views/workflow/show/workflow.scss
+++ b/ui/src/app/views/workflow/show/workflow.scss
@@ -39,6 +39,6 @@
   .ascodeButton {
     position: absolute;
     right: 15px;
-    top: 121px;
+    margin-top: 7px;
   }
 }
diff --git a/ui/src/app/views/workflow/workflow.component.ts b/ui/src/app/views/workflow/workflow.component.ts
index bf9b47cd3c..33a992b4c5 100644
--- a/ui/src/app/views/workflow/workflow.component.ts
+++ b/ui/src/app/views/workflow/workflow.component.ts
@@ -73,6 +73,9 @@ export class WorkflowComponent implements OnInit, OnDestroy {
     selectecHookRef: string;
 
     workflowV3Enabled: boolean;
+    asCodeTagColor: string = '';
+    templateTagColor: string = '';
+    previewV3TagColor: string = '';
 
     constructor(
         private _activatedRoute: ActivatedRoute,
@@ -162,6 +165,13 @@ export class WorkflowComponent implements OnInit, OnDestroy {
                     this._store.dispatch(new SelectHook({ hook: h, node: this.workflow.workflow_data.node }));
                 }
             }
+            if (this.workflow && this.workflow.from_repository && (!this.workflow.as_code_events || this.workflow.as_code_events.length === 0)) {
+                this.asCodeTagColor = 'green';
+            } else if (this.workflow && this.workflow.as_code_events && this.workflow.as_code_events.length > 0) {
+                this.asCodeTagColor = 'orange';
+            } else if (this.workflow && !this.workflow.from_repository && (!this.workflow.as_code_events || this.workflow.as_code_events.length === 0)) {
+                this.asCodeTagColor = '';
+            }
             this._cd.markForCheck();
         });
 
@@ -199,7 +209,10 @@ export class WorkflowComponent implements OnInit, OnDestroy {
         this._store.dispatch(new UpdateFavoriteWorkflow({
             projectKey: this.project.key,
             workflowName: this.workflow.name
-        })).pipe(finalize(() => this.loadingFav = false))
+        })).pipe(finalize(() => {
+            this.loadingFav = false;
+            this._cd.markForCheck()
+        }))
             .subscribe(() => this._toast.success('', this._translate.instant('common_favorites_updated')));
     }
 
diff --git a/ui/src/app/views/workflow/workflow.html b/ui/src/app/views/workflow/workflow.html
index 65eee23267..614b823e2d 100644
--- a/ui/src/app/views/workflow/workflow.html
+++ b/ui/src/app/views/workflow/workflow.html
@@ -1,21 +1,16 @@
 

     
-        

-            

-            
+        

+            
+            
+                
+                
+            
         

-        

-            
-                as code
-            
-            
+        

+            as code
+            
                 

                     
@@ -24,33 +19,23 @@
                     
                     
-                        
{{'workflow_repository_help_line_1' | translate}}

-                        
{{'workflow_repository_help_line_2' | translate}}

+                        
Your workflow was not imported from your code.

+                        
Manage your workflow as code from your repository to automatically update it with changes on your branches.

                         

-                            
-                            

-                                
-                            

+                                        Read more
+                            
                         

                     
                 

             
         

-        

-            
-                template
-            
-            
+        

+            template
+            
                 

                     

                     
@@ -61,36 +46,30 @@
                                 class="ui orange label mini">{{'common_not_up_to_date'
                                 | translate }}
                         

-                        

-                            
-                                {{'common_update' | translate}}
-                            
+                        

+                            
                         

                     
                     
-                        
{{'workflow_template_help_line_1' | translate}}

-                        
{{'workflow_template_help_line_2' | translate}}

-                        

+                        
Your workflow was not generated from a template.

+                        
A workflow template allows you to quickly create then update a workflow and its components.

+                        
You can init a new template from current workflow.

+                        

                             
-                                {{'common_read_more' | translate}}
-                        

-                        
{{'workflow_template_help_line_3' | translate}}

-                        

-                            
-                                {{'workflow_template_init_from_workflow' | translate}}
-                            
+                               [routerLink]="['/docs', 'docs', 'concepts', 'template']">
+                                Read more
+                            
                         

                     
                 

             
         

-        

-            
+            
                 Preview Workflow v3
-            
+            
         

     
     

diff --git a/ui/src/app/views/workflow/workflow.scss b/ui/src/app/views/workflow/workflow.scss
index 4bb82787fe..4334972054 100644
--- a/ui/src/app/views/workflow/workflow.scss
+++ b/ui/src/app/views/workflow/workflow.scss
@@ -1,5 +1,9 @@
 @import "../../../common";
 
+.floatRight {
+  float: right;
+}
+
 .workflow-page {
     height: 100%;
     display: flex;
@@ -23,24 +27,6 @@ $sidebarWidth: 255px;
 .sidebar {
     width: $sidebarWidth;
     height: 100%;
-
-    .closeButton {
-        position: absolute;
-        display: block;
-        top: 0;
-        right: 0;
-        padding: 5px;
-        font-size: 30px;
-        line-height: 30px;
-        height: 40px;
-        width: 40px;
-        margin: 0;
-        cursor: pointer;
-
-        &:hover {
-            opacity: 0.6;
-        }
-    }
 }
 
 .content-wrap {
@@ -62,50 +48,40 @@ $sidebarWidth: 255px;
     }
 }
 
-i.star {
-    color: black;
-    margin-left: 15px;
-    font-size: 1.3em;
-
-    &.favorite {
-        color: $cds_favorite_color;
-
-        &:hover {
-            opacity: 0.4;
-        }
-    }
-
-    &.unfavorite {
-        opacity: 0.3;
-
-        &:hover {
-            color: $cds_favorite_color;
-            opacity: 1;
-        }
-    }
-}
-
 .labelFeature {
     position: relative;
     top: -3px;
     margin-left: 10px;
+    margin-top: 5px;
 
-    &.preview {
-        top: -2px;
-        margin: 0 10px;
+    nz-tag {
+      cursor: pointer;
     }
 }
 
+i.favorite {
+  color: $cds_favorite_color;
+  &:hover {
+    opacity: 0.4;
+  }
+}
+.star {
+  cursor: pointer;
+  margin-left: 15px;
+  font-size: 1.3em;
+}
+
 .infoPopup {
     width: 450px;
     word-break: break-word;
-
+    app-ascode-event {
+      min-height: 100px;
+    }
     .footer {
         display: flex;
-
-        div {
-            flex-grow: 1;
-            flex-basis: 0;
-        }
+        align-items: center;
+        button {
+          margin-left: auto;
+      }
     }
 }

From 2abcba05941ae80143978a9a690f84a2fb0f140d Mon Sep 17 00:00:00 2001
From: Steven Guiheux 
Date: Wed, 6 Jul 2022 10:27:00 +0200
Subject: [PATCH 02/10] refactor(ui): remove semantic from workflow summary

---
 ui/src/app/shared/shared.module.ts            |  4 +-
 .../run/summary/workflow.run.summary.html     |  2 +
 .../run/summary/workflow.run.summary.scss     |  1 +
 ui/src/app/views/workflow/show/workflow.html  | 98 ++++++++-----------
 ui/src/app/views/workflow/show/workflow.scss  | 30 +++---
 ui/src/app/views/workflow/workflow.html       |  9 +-
 ui/src/app/views/workflow/workflow.scss       |  4 +
 7 files changed, 68 insertions(+), 80 deletions(-)

diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts
index 00a28b8a4a..e2e128bc91 100644
--- a/ui/src/app/shared/shared.module.ts
+++ b/ui/src/app/shared/shared.module.ts
@@ -124,7 +124,7 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
 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, CopyOutline, DeleteOutline, DragOutline, EyeInvisibleOutline, EyeOutline, KeyOutline,
+import { ArrowDownOutline, ArrowRightOutline, BellFill, BookOutline, CalendarOutline, CaretDownFill, CaretRightFill, CaretUpFill, CheckOutline, CodeOutline, CopyOutline, DeleteOutline, DragOutline, EyeInvisibleOutline, EyeOutline, KeyOutline,
     HistoryOutline, InfoCircleOutline, PhoneFill, PlusOutline, PlusSquareOutline, QuestionOutline, QuestionCircleOutline, RestOutline, SaveOutline, SettingFill, ShareAltOutline, StarOutline, StarFill, SyncOutline,
     TableOutline, TagsOutline, ToolFill, UnlockFill, UnorderedListOutline, UploadOutline, UserOutline, WarningOutline } from '@ant-design/icons-angular/icons'
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
@@ -156,7 +156,7 @@ const ngZorroConfig: NzConfig = {
     icon: {nzTheme: "outline"}
 };
 
-const icons: IconDefinition[] = [ ArrowDownOutline, ArrowRightOutline, BellFill, BookOutline, CalendarOutline, CaretDownFill, CaretRightFill, CaretUpFill, CheckOutline, CopyOutline, DeleteOutline, DragOutline,
+const icons: IconDefinition[] = [ ArrowDownOutline, ArrowRightOutline, BellFill, BookOutline, CalendarOutline, CaretDownFill, CaretRightFill, CaretUpFill, CheckOutline, CodeOutline, CopyOutline, DeleteOutline, DragOutline,
     EyeInvisibleOutline, EyeOutline, KeyOutline, HistoryOutline, InfoCircleOutline, PhoneFill, PlusOutline, PlusSquareOutline, QuestionOutline, QuestionCircleOutline,
     RestOutline, SaveOutline, SettingFill, ShareAltOutline, StarOutline, StarFill, SyncOutline, TableOutline, TagsOutline, ToolFill, UnlockFill, UnorderedListOutline, UploadOutline, UserOutline, WarningOutline ];
 
diff --git a/ui/src/app/views/workflow/run/summary/workflow.run.summary.html b/ui/src/app/views/workflow/run/summary/workflow.run.summary.html
index 613d4992f4..2fc7a0d392 100644
--- a/ui/src/app/views/workflow/run/summary/workflow.run.summary.html
+++ b/ui/src/app/views/workflow/run/summary/workflow.run.summary.html
@@ -26,10 +26,12 @@
                         
                         
                     
                     
diff --git a/ui/src/app/views/workflow/run/summary/workflow.run.summary.scss b/ui/src/app/views/workflow/run/summary/workflow.run.summary.scss
index f7967f9db3..9ac2c42e72 100644
--- a/ui/src/app/views/workflow/run/summary/workflow.run.summary.scss
+++ b/ui/src/app/views/workflow/run/summary/workflow.run.summary.scss
@@ -129,6 +129,7 @@
     overflow-y: auto;
     padding: 1em 1.5em;
     color: white;
+    border-radius: 3px;
   }
 
   pre {
diff --git a/ui/src/app/views/workflow/show/workflow.html b/ui/src/app/views/workflow/show/workflow.html
index 59797ecd17..ba63a87a48 100644
--- a/ui/src/app/views/workflow/show/workflow.html
+++ b/ui/src/app/views/workflow/show/workflow.html
@@ -11,62 +11,48 @@
             
         
         

-            

-                

-                    

-                    

-                        

-                            

-                                

-                                    

-                                        

-                                            
-                                            
-                                        

-                                        

-                                            

-                                                

-                                                    
-                                                    {{'workflow_edit_as_code' | translate}}
-                                                    
-                                                    
-                                                

-                                                

-                                                     {{'btn_save' |
-                                                    translate}}
-                                                

-                                            

-                                        

-                                        

-                                            

-                                                

-                                                    {{'btn_run_workflow' | translate }}
-                                                

-                                            

-                                        

-                                    

-                                

-                            

-                        

-                    

-                    

-                

-            

+            
+                
+                    
+                        
+                            
+                                
+                                
+                            
+                            
+                                
+                                
+                            
+                            
+                                
+                            
+                        
+                    
+                
+            
             
         

diff --git a/ui/src/app/views/workflow/show/workflow.scss b/ui/src/app/views/workflow/show/workflow.scss
index bfc6dcd71d..f1aff679c4 100644
--- a/ui/src/app/views/workflow/show/workflow.scss
+++ b/ui/src/app/views/workflow/show/workflow.scss
@@ -3,36 +3,32 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  .ml5 {
-    margin-left: 5px;
-  }
+
   .workflowShowGraph {
     width: 100%;
     flex: 1;
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    .cardinfo {
-      margin-top: 1px;
-      border-radius: 0 0 0.28571429rem 0.28571429rem;
-    }
+
     .center {
       text-align: center;
     }
+    .alignRight {
+      text-align: right;
+    }
+
     app-workflow-graph {
       margin-top: 10px;
       flex: 1;
     }
-  }
-  .scrollingContent {
-    overflow-x: auto;
-    .paddingContent {
-      padding: 0;
-      .viewContent {
-        .padded {
-          padding: 0 100px 0 100px;
-        }
-      }
+
+    .savePreview {
+      margin-left: 10px;
+    }
+
+    .orange {
+      color: orange;
     }
   }
 
diff --git a/ui/src/app/views/workflow/workflow.html b/ui/src/app/views/workflow/workflow.html
index 614b823e2d..4d5f10a9ea 100644
--- a/ui/src/app/views/workflow/workflow.html
+++ b/ui/src/app/views/workflow/workflow.html
@@ -9,7 +9,7 @@
         

         

             as code
+            nzPopoverPlacement="rightBottom">as code
             
                 

                     
             template
+                    nzPopoverPlacement="rightBottom">template
             
                 

                     

@@ -42,9 +42,8 @@
                         
{{ 'workflow_from_template' | translate}}
                             {{workflow.from_template}}
-                            {{'common_not_up_to_date'
-                                | translate }}
+                                {{'common_not_up_to_date'
+                                    | translate }}
                         

                         

                             
diff --git a/ui/src/app/views/workflow/workflow.scss b/ui/src/app/views/workflow/workflow.scss
index 4334972054..1edcd302f7 100644
--- a/ui/src/app/views/workflow/workflow.scss
+++ b/ui/src/app/views/workflow/workflow.scss
@@ -57,6 +57,10 @@ $sidebarWidth: 255px;
     nz-tag {
       cursor: pointer;
     }
+
+    i {
+      margin-right: 5px;
+    }
 }
 
 i.favorite {

From 5277ec3ef1822246b3b4491bca1bd0d0660e4b8a Mon Sep 17 00:00:00 2001
From: Steven Guiheux 
Date: Wed, 6 Jul 2022 10:58:56 +0200
Subject: [PATCH 03/10] fix(ui): workflow preview

---
 ui/src/app/views/workflow/graph/workflow.graph.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/app/views/workflow/graph/workflow.graph.component.ts b/ui/src/app/views/workflow/graph/workflow.graph.component.ts
index cc51dfef0c..184e5921f0 100644
--- a/ui/src/app/views/workflow/graph/workflow.graph.component.ts
+++ b/ui/src/app/views/workflow/graph/workflow.graph.component.ts
@@ -99,7 +99,7 @@ export class WorkflowGraphComponent implements AfterViewInit, OnDestroy {
         // https://github.com/cpettitt/dagre/wiki#configuring-the-layout
         this.g = new dagreD3.graphlib.Graph().setGraph({ rankdir: this.direction, nodesep: 10, ranksep: 15, edgesep: 5 });
         // Create all nodes
-        if (this.workflow.workflow_data && this.workflow.workflow_data.node && this.workflow.workflow_data.node.id > 0) {
+        if (this.workflow.workflow_data && this.workflow.workflow_data.node) {
             this.createNode(this.workflow.workflow_data.node);
         }
         if (this.workflow.workflow_data && this.workflow.workflow_data.joins) {

From 0e2c774960ff39540d1c8209010a0028faa9774e Mon Sep 17 00:00:00 2001
From: Steven Guiheux 
Date: Wed, 6 Jul 2022 18:26:44 +0200
Subject: [PATCH 04/10] refactor(ui): remove semantic from notifications pages

---
 ui/src/app/store/workflow.state.ts            |   2 +-
 .../form/workflow.notifications.form.html     | 335 +++++++++++-------
 .../form/workflow.notifications.form.scss     |  24 +-
 .../workflow.notification.list.component.ts   |   6 -
 .../list/workflow.notification.list.html      | 138 +++-----
 .../list/workflow.notification.list.scss      |  59 ++-
 ui/src/theme.scss                             |   2 +-
 7 files changed, 339 insertions(+), 227 deletions(-)

diff --git a/ui/src/app/store/workflow.state.ts b/ui/src/app/store/workflow.state.ts
index 1ad447d659..9d4cf41d26 100644
--- a/ui/src/app/store/workflow.state.ts
+++ b/ui/src/app/store/workflow.state.ts
@@ -356,6 +356,7 @@ export class WorkflowState {
             return;
         }
 
+
         // Update Non as code workflow
         return this._http.put(
             `/project/${action.payload.projectKey}/workflows/${action.payload.workflowName}`,
@@ -389,7 +390,6 @@ export class WorkflowState {
                 ctx.dispatch(new UpdateModal({ workflow: wf }));
             } else {
                 let wfUpdated: Workflow = {
-                    ...state.workflow,
                     ...wf,
                     preview: null
                 };
diff --git a/ui/src/app/views/workflow/show/notification/form/workflow.notifications.form.html b/ui/src/app/views/workflow/show/notification/form/workflow.notifications.form.html
index 2cb998cd2f..8a8dadd2b0 100644
--- a/ui/src/app/views/workflow/show/notification/form/workflow.notifications.form.html
+++ b/ui/src/app/views/workflow/show/notification/form/workflow.notifications.form.html
@@ -1,135 +1,218 @@
 

-    

-        

+    
+        

             

         

-        

-            

-                
-                
-                    
-                        
-                        
-                    
-                    
-                
-            

-            

-                
-                
-                    
-                    
-                
-                
-            

-        

+        
+            
+                
+                    Notification type
+                    
+                        
+                            
+                        
+                        
+                    
+                
+            
+            
+                Pipelines
+                
+                    
+                        
+                    
+                    
+                
+            
+        
         
-            

-                

-                    
-                    
-                        
-                            
-                            
-                        
-                        
-                    
-                

-                

-                    
-                    
-                        
-                        
-                    
-                    
-                

-                

-                    
-                        {{ 'workflow_notification_on_start' | translate}}
-                    
-                

-            

-            

-                

-                    
-                    
-                

-                

-                    
-                        {{ 'workflow_notification_to_group' | translate}}
-                    
-                

-                

-                    
-                        {{ 'workflow_notification_to_initiator' | translate}}
-                    
-                

-            

-            

-                
-                
-            

-            

-                
-                
-            

-            

-                
-                
-                
-            

+            
+                
+                    
+                        Send on success
+                        
+                            
+                                
+                                    
+                                    
+                                
+                                
+                            
+                        
+                    
+                
+                
+                    
+                        Send on error
+                        
+                            
+                                
+                                
+                            
+                            
+                        
+                    
+                
+                
+                    
+                        Send on start
+                        
+                            
+                        
+                    
+                
+            
+            
+                
+                    
+                        Mails
+                        
+                            
+                        
+                    
+                
+                
+                    
+                        Send to group
+                        
+                            
+                        
+                    
+                
+                
+                    
+                        Send to initiator
+                        
+                            
+                        
+                    
+                
+            
+            
+                
+                    
+                        Subject
+                        
+                            
+                        
+                    
+                
+            
+            
+                
+                    
+                        Message
+                        
+                             
+                        
+                    
+                
+            
+            
+                
+                    
+                        Conditions
+                        
+                            
+                            
+                        
+                    
+                
+            
         
         
-            

-                
-                    {{ 'workflow_notification_vcs_status_enabled' | translate}}
-                
-            

-            

-                
-                    {{ 'workflow_notification_vcs_comment_enabled' | translate}}
-                
-            

-            

-                
-                    {{ 'workflow_notification_vcs_comment_always' | translate}}
-                
-            

-            

-                
-                
-            

-        
-        
-            
+            
+                
+                    
+                        Send status on commit
+                        
+                            
+                        
+                    
+                
+                
+                    
+                        Pull-request's comment enabled
+                        
+                            
+                        
+                    
+                
+                
+                    
+                        Always send
+                        
+                            
+                        
+                    
+                
+            
+            
+                
+                    
+                        Pull-request's comment body
+                        
+                            
+                        
+                    
+                
+            
         
-        

-            {{'btn_save' | translate}}
-            {{'btn_add' | translate}}
-            {{'btn_apply' | translate}}
-        

+        
+            
+                
+                    
+                
+                
+            
+
+        
+
     
 

+
+
diff --git a/ui/src/app/views/workflow/show/notification/form/workflow.notifications.form.scss b/ui/src/app/views/workflow/show/notification/form/workflow.notifications.form.scss
index a813abf96d..dc8bf52704 100644
--- a/ui/src/app/views/workflow/show/notification/form/workflow.notifications.form.scss
+++ b/ui/src/app/views/workflow/show/notification/form/workflow.notifications.form.scss
@@ -1,11 +1,21 @@
-.centered {
-    text-align: center;
-}
+nz-row {
+  nz-col {
+    padding: 0 5px;
 
-sui-checkbox {
-    margin-top: 32px;
+    nz-select {
+      width: 100%;
+    }
 
-    &.no-mt {
-        margin-top: 0px;
+    nz-switch {
+      margin-right: 10px;
     }
+
+  }
+}
+.help {
+  margin-bottom: 20px;
+}
+
+.floatRight {
+  float: right;
 }
diff --git a/ui/src/app/views/workflow/show/notification/list/workflow.notification.list.component.ts b/ui/src/app/views/workflow/show/notification/list/workflow.notification.list.component.ts
index c1c11bafdb..71eb64bcc7 100644
--- a/ui/src/app/views/workflow/show/notification/list/workflow.notification.list.component.ts
+++ b/ui/src/app/views/workflow/show/notification/list/workflow.notification.list.component.ts
@@ -90,12 +90,6 @@ export class WorkflowNotificationListComponent {
         });
     }
 
-    copy(index: number) {
-        this.newNotification = cloneDeep(this.workflow.notifications[index]);
-        delete this.selectedNotification;
-        delete this.newNotification.id;
-    }
-
     setNotificationTemplate() {
         this.loadingNotifTemplate = true;
         this._notificationService.getNotificationTypes().pipe(first(), finalize(() => {
diff --git a/ui/src/app/views/workflow/show/notification/list/workflow.notification.list.html b/ui/src/app/views/workflow/show/notification/list/workflow.notification.list.html
index 29f1a4a182..f1c923749e 100644
--- a/ui/src/app/views/workflow/show/notification/list/workflow.notification.list.html
+++ b/ui/src/app/views/workflow/show/notification/list/workflow.notification.list.html
@@ -1,101 +1,81 @@
 

-    

-        

-            

-                

+    
+        
+            

+                
Workflow notifications

+                
+            

+            

+                

                     

-                        {{'workflow_notification_form' | translate }}
+                        {{n.type}}
                     

-                

-                
-                    

-                        

-                            

-                                {{n.type}}
-                                

-                                    
-                                

-                            

-                            

-                                
-                                    {{'/'}}
-                                    {{ node }}
-                                
-                            

-                        

+                    

+                        
+                            {{'/'}}
+                            {{ node }}
+                        
                     

-                
+                

+            

+            

+                
Events integration

+                
             

-            

-                

+            

+                

                     

-                        {{'workflow_event_form' | translate }}
+                        {{eventIntegration.project_integration.name}}
+                        
                     

                 

             

-        

-        

+        
+        
             
                 
+                                                 [notification]="workflow.notifications[selectedNotification]" [loading]="loading"
+                                                 [editMode]="editMode" (updatedNotification)="updateNotification($event)" [readOnly]="readOnly"
+                                                 (deleteNotificationEvent)="deleteNotification($event)" [canDelete]="true">
                 
             
             
                 
+                                                 [canDelete]="false" [notification]="newNotification" [editMode]="editMode"
+                                                 (updatedNotification)="createNotification($event)">
             
             
-                

-                    

+                

+                    

                         

                     

-                    

-                        

-                            
-                                
-                                
-                            
-                        

-                        

-                            {{'workflow_no_event_integration' | translate }} {{'common_click_more_informations' | translate }}
-                        

-                        

-                            
-                        

-                    

-                

-                

-                    

-                        

-                            

-                                

-                                    
-                                    
-                                

-                                

-                                    {{eventIntegration.project_integration.name}}
-                                

-                            

-                        

-                    

-                

+                            Add
+                        
+                    
+                
             
-        

-    

+        
+    
 

diff --git a/ui/src/app/views/workflow/show/notification/list/workflow.notification.list.scss b/ui/src/app/views/workflow/show/notification/list/workflow.notification.list.scss
index 26a03309a1..bfcdcde541 100644
--- a/ui/src/app/views/workflow/show/notification/list/workflow.notification.list.scss
+++ b/ui/src/app/views/workflow/show/notification/list/workflow.notification.list.scss
@@ -1,12 +1,57 @@
 .Notifications {
     padding: 20px;
-}
 
-.full {
-    width: 100%
-}
+  .section {
+    margin-bottom: 10px;
+    h3 {
+      display: inline;
+    }
+    button {
+      float: right;
+    }
+  }
+  .section:not(:first-child) {
+    margin-top: 50px;
+  }
+
+  .item {
+    padding: 10px;
+    cursor: pointer;
+
+    .content {
+      display: flex;
+      flex-direction: column;
+
+      .title {
+        font-weight: bold;
+
+        button {
+          float: right;
+        }
+      }
+
+      .description {
+        font-size: 0.8em;
+      }
+    }
+  }
+  .item.active, .item:hover {
+    background-color: #eeeeee;
+    :host-context(.night) & {
+      background-color: #1f1f1f;
+    }
+
+  }
+
+  .form {
+    padding-left: 30px;
+
+    .help {
+      margin-bottom: 15px;
+    }
 
-.intname {
-    font-size: 1.2em;
-    margin-top: 0.5em;
+    .integrationsList {
+      width: 500px;
+    }
+  }
 }
diff --git a/ui/src/theme.scss b/ui/src/theme.scss
index 1635f9600a..4bd31c240e 100644
--- a/ui/src/theme.scss
+++ b/ui/src/theme.scss
@@ -2,7 +2,7 @@
 $darkBackground: #1b1c1d;
 
 $darkTheme_grey_0: #2d2c2c; // top bar and active|hover on darkTheme_grey_1 background
-$darkTheme_grey_1: #383736;
+$darkTheme_grey_1: #1f1f1f;
 $darkTheme_grey_2: #333333;
 $darkTheme_grey_3: #434141;
 $darkTheme_grey_4: #494949;

From badaa586b83af16719c617d222c82375b211bb0b Mon Sep 17 00:00:00 2001
From: Steven Guiheux 
Date: Thu, 7 Jul 2022 11:39:14 +0200
Subject: [PATCH 05/10] refactor(ui): remove semantic from workflow admin view

---
 .../show/admin/workflow.admin.component.html  | 542 ++++++++----------
 .../show/admin/workflow.admin.component.ts    |  13 +-
 .../workflow/show/admin/workflow.admin.scss   |  52 +-
 3 files changed, 290 insertions(+), 317 deletions(-)

diff --git a/ui/src/app/views/workflow/show/admin/workflow.admin.component.html b/ui/src/app/views/workflow/show/admin/workflow.admin.component.html
index 6f5f288bfe..89b99d445f 100644
--- a/ui/src/app/views/workflow/show/admin/workflow.admin.component.html
+++ b/ui/src/app/views/workflow/show/admin/workflow.admin.component.html
@@ -1,322 +1,262 @@
 

-    
-        
-            

-                

-                    

-                        

-                            application icon
-                        

-                        
-                        
-                    

-                    

-                    

-                        
-                        
-                    

-                

-            

-        
-    
-    
-        
-            

-                

-                    
-                    
-                    

-                        
{{'workflow_update_name_error' | translate}}

-                    

-                

-                

-                    
-                    
-                

-                

-                    
+                
+            
+            
+                
+                    Add sidebar's tags
+                
+                
+                    
+                        

+                            
+                                
+                            
+                            
+                        

+                    
+                
+            
+            
+                Current tags 
+                
                     
-                        

-                            

-                                

-                                    {{t + ' '}}
-                                    
-                                

-                            

+                        

+                            
+                                {{t + ' '}}
+                                
+                            
                         

                     
                     
-                        

-                            {{ 'workfow_tag_no' | translate }}
-                        

+                        
                     
-                    

-                        

-                            
-                                
-                                
-                            
-                        

-                        

-                            

-                                
-                            

-                        

+                
+            
+            
+                Maximum number of workflow runs
+                
+                    
+                
+            
+            
+                Purge tags
+                
+                    

+                        
+                            
+                            
+                        
+                        
                     

-                

-                

-                    
-                    

-                        
-                    

-                    
-                        

-                            {{ 'workfow_tag_no' | translate }}
-                        

-                    
+                
+            
+            
+                Current purge tags
+                
                     
-                        

-                            

-                                

-                                    {{t + ' '}}
-                                    
-                                

-                            

+                        

+                            
+                                {{t + ' '}}
+                                
+                            
                         

                     
-                    

-                        

-                            
-                                
-                                
-                            
-                        

-                        

-                            

-                                
-                            

-                        

-                    

-                

-                

-                    
-                

-                
-                    

-                        
-                        
-                            You can set a custom lua retention policy rule for this workflow.
-                            Available variables are: {{availableStringVariables}}.
-                            

-                            

-                            More informations and examples in CDS documentation
-                            
-                                here.
-                        
-                        
+                    
+                        
+                    
+                
+            
+            
+                Maximum number of workflow runs
+                
+                    {{workflow.max_runs}}
+                    
+                
+            
+            
+                Workflow run retention policy 
+                
+                    

+                        You can set a custom lua retention policy rule for this workflow.
+                        Available variables are: {{availableStringVariables}}.
+                        

+                        

+                        More informations and examples in CDS documentation
+                        
+                            here.
                     

-                    

-                        
-                        
-                            
{{ 'workflow_retention_policy' | translate }}

-                            

-                                
-                                    

-                                        
-                                            
-                                        
-                                        
-                                            
-                                        
-                                        
-                                            
-                                        
-                                        {{dryRunAnalyzedRuns + ' / ' + dryRunMaxDatas + ' run analyzed ( ' +
-                                        dryRunDatas.length + ' runs kept )'}}
-                                    

+
+                
+                
+                    
+                
+            
+            
+                
+                
+                    

+                        
+                            

+                                
+                                    
                                 
-                                
-                                    
All runs would be deleted

+                                
+                                    
                                 
-                                
-                                    

-                                        
{{'workflow_retention_result_title' | translate }}

-                                        
-                                    

+                                
+                                    
                                 
+                                {{dryRunAnalyzedRuns + ' / ' + dryRunMaxDatas + ' run analyzed ( ' +
+                            dryRunDatas.length + ' runs kept )'}}
                             

-                            

-                                
+                        
+                        
+                            
+                        
+                        
+                            

+                                
{{'workflow_retention_result_title' | translate }}

+                                
                             

-                        
+                        
                     

-                
-                

-                    
-                    
-                

-                

-                    
+                    

+                
+            
+            
+                Current run number
+                
+                    
+                
+            
+            
+                
-                

-            
-        
-    
-    
-        
-            

-                
Link an integration

-                

-                    

-                        

-                            
-                                
-                                
-                            
-                        

-                        

-                            

-                                
-                            

-                        

+                    Save
+                    Apply
+                
+            
+        
+    
+    
+        

+            
+                Link an integration
+                
+                    

+                        
+                            
+                        
+                        
                     

-                

-
-                
Configuration

-                
-                    
There is no linked integration on this workflow

-                
-                

-                    
-
-                        
-                            
-                            
-                                
-                                
-                                
-                            
-                            
-                            
-                            
-                                
-                                
-                                
-                            
-                            
-                        
NameConfiguration

-                                    {{integ.project_integration.name}}
-                                
-                                    
-                                        

-                                            

-                                                
-                                            

-                                            

-                                                
-                                                
-                                                
-                                            

-                                        

-                                    
-                                		
-                                    

-                                        
-                                    

-                                    

-                                        
-                                    

-                                

-                    
-                

-            

-        
-    
-    
-        
-            

-                

-                    
{{ 'workflow_delete_label' | translate}}

-                    
{{ 'workflow_delete_description' | translate}}

-                

-                

-                    
-                

-            

-        
-    
+                
+            
+            
+                Configuration
+                
+                    
+                        
+                        
+                            Name
+                            
+                        
+                        
+                        
+                        
+                            
+                                {{integ.project_integration.name}}
+                            
+                            
+                                
+                            
+                        
+                        
+                    
+                
+            
+            
+                
+                    
+                
+            
+        
+    
+    
+        
+            
+                
Delete workflow

+                
Once you delete a workflow, there is no going back. Please be certain.

+            
+            
+                
+            
+        
+    
 

diff --git a/ui/src/app/views/workflow/show/admin/workflow.admin.component.ts b/ui/src/app/views/workflow/show/admin/workflow.admin.component.ts
index b0865d578c..a9e733c802 100644
--- a/ui/src/app/views/workflow/show/admin/workflow.admin.component.ts
+++ b/ui/src/app/views/workflow/show/admin/workflow.admin.component.ts
@@ -10,7 +10,6 @@ import {
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Select, Store } from '@ngxs/store';
-import { ModalTemplate, SuiActiveModal, SuiModalService, TemplateModalConfig } from '@richardlt/ng2-semantic-ui';
 import { EventService } from 'app/event.service';
 import { Project } from 'app/model/project.model';
 import { RunToKeep } from 'app/model/purge.model';
@@ -115,7 +114,6 @@ export class WorkflowAdminComponent implements OnInit, OnDestroy {
     dryRunsStatusSubs: Subscription;
     @Select(WorkflowState.getRetentionProgress()) dryRunProgress$: Observable;
     dryRunProgressSub: Subscription;
-    @ViewChild('modalDryRun') dryRunModal: ModalTemplate;
     dryRunColumns = [];
     dryRunDatas: Array;
     dryRunMaxDatas: number;
@@ -124,7 +122,8 @@ export class WorkflowAdminComponent implements OnInit, OnDestroy {
     availableVariables: Array;
     availableStringVariables: string;
     _keyUpListener: any;
-    modal: SuiActiveModal;
+
+    dryRunModalVisible: boolean = false;
 
     loading = false;
     fileTooLarge = false;
@@ -141,7 +140,6 @@ export class WorkflowAdminComponent implements OnInit, OnDestroy {
         private _dragularService: DragulaService,
         private _theme: ThemeStore,
         private _nzModalService: NzModalService,
-        private _modalService: SuiModalService,
         private _eventService: EventService,
         private _configService: ConfigService
     ) {
@@ -334,6 +332,7 @@ export class WorkflowAdminComponent implements OnInit, OnDestroy {
     }
 
     updateTagMetadata(): void {
+        console.log(this.tagsToAdd);
         if (this.tagsToAdd && this.tagsToAdd.length > 0) {
             if (!this.selectedTags) {
                 this.selectedTags = [];
@@ -344,6 +343,7 @@ export class WorkflowAdminComponent implements OnInit, OnDestroy {
 
         this._workflow.metadata['default_tags'] = this.selectedTags.join(',');
         this.tagsToAdd = [];
+        this._cd.markForCheck();
     }
 
     updateTagPurge(): void {
@@ -357,6 +357,7 @@ export class WorkflowAdminComponent implements OnInit, OnDestroy {
 
         this._workflow.purge_tags = this.selectedTagsPurge;
         this.tagsToAddPurge = [];
+        this._cd.markForCheck();
     }
 
     removeFromSelectedTags(ind: number): void {
@@ -383,9 +384,7 @@ export class WorkflowAdminComponent implements OnInit, OnDestroy {
             }))
             .subscribe(result => {
                 this.dryRunMaxDatas = result.nb_runs_to_analyze;
-                const config = new TemplateModalConfig(this.dryRunModal);
-                config.mustScroll = true;
-                this.modal = this._modalService.open(config);
+                this.dryRunModalVisible = true;
                 this._cd.markForCheck();
             });
     }
diff --git a/ui/src/app/views/workflow/show/admin/workflow.admin.scss b/ui/src/app/views/workflow/show/admin/workflow.admin.scss
index 7accc4d82e..9170ad1a46 100644
--- a/ui/src/app/views/workflow/show/admin/workflow.admin.scss
+++ b/ui/src/app/views/workflow/show/admin/workflow.admin.scss
@@ -1,26 +1,60 @@
 #WorkflowAdmin {
+    nz-card {
+      margin-top: 15px;
+      margin-bottom: 15px;
+    }
+
+    .selectTag {
+      width: 500px;
+      display: flex;
+
+      button {
+        margin-left: 10px;
+      }
+    }
+
     textarea {
         height: 8em;
     }
 
-    .app-icon {
+    .wf-icon {
         height: 5em;
         width: 5em;
     }
 
-    .submitbutton {
-        height: 2em;
+    .multipleButtons {
+      margin-right: 10px;
     }
 
-    .ui.horizontal.list > .item {
-        margin-right: 0.5em;
+    i {
+      margin-left: 5px;
+    }
+    button {
+      i {
+        margin-left: 0;
+      }
     }
-
-  .field {
-    margin-top: 10px;
-  }
 }
 
+
 .dryrun {
   min-height: 460px;
 }
+
+.retentionTooltip {
+  width: 600px;
+}
+
+.alignRight {
+  text-align: right;
+}
+
+.green {
+  color: green;
+}
+.red {
+  color: red;
+}
+.blue {
+  color: #0D82F8FF;
+}

From bce29bfd8e308aef71987fe59e9adca54e164bb3 Mon Sep 17 00:00:00 2001
From: Steven Guiheux 
Date: Thu, 7 Jul 2022 12:12:17 +0200
Subject: [PATCH 06/10] refactor(ui): same title and color

---
 .../show/admin/application.admin.html         |  8 +++----
 .../show/advanced/environment.advanced.html   |  4 ++--
 .../pipeline/show/admin/pipeline.admin.html   |  2 +-
 .../project/show/admin/project.admin.html     |  6 ++---
 .../show/admin/workflow.admin.component.html  |  8 +++----
 .../workflow/show/admin/workflow.admin.scss   |  1 +
 ui/src/ngzorro.dark.less                      | 11 ++++++++++
 ui/src/styles.scss                            | 22 +++++++++++++++++++
 8 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/ui/src/app/views/application/show/admin/application.admin.html b/ui/src/app/views/application/show/admin/application.admin.html
index 6b2daf5478..b4bc05aa35 100644
--- a/ui/src/app/views/application/show/admin/application.admin.html
+++ b/ui/src/app/views/application/show/admin/application.admin.html
@@ -1,5 +1,5 @@
 

-    
+    
         

             
                 Name
@@ -36,11 +36,11 @@
         
     

 
-    
+    
         
     
 
-    
+    
         
             
         
@@ -49,7 +49,7 @@
         
     
 
-    
+    
         
             
                 
Delete application

diff --git a/ui/src/app/views/environment/show/advanced/environment.advanced.html b/ui/src/app/views/environment/show/advanced/environment.advanced.html
index de5af1b613..116f82d280 100644
--- a/ui/src/app/views/environment/show/advanced/environment.advanced.html
+++ b/ui/src/app/views/environment/show/advanced/environment.advanced.html
@@ -1,5 +1,5 @@
 

-    
+    
         

             
                 Name
@@ -23,7 +23,7 @@
             
         

     
-    
+    
         
             
                 
{{ 'environment_delete_label' | translate}}

diff --git a/ui/src/app/views/pipeline/show/admin/pipeline.admin.html b/ui/src/app/views/pipeline/show/admin/pipeline.admin.html
index 4601b3f8bd..4af3c17bbf 100644
--- a/ui/src/app/views/pipeline/show/admin/pipeline.admin.html
+++ b/ui/src/app/views/pipeline/show/admin/pipeline.admin.html
@@ -1,5 +1,5 @@
 

-    
+    
         
             

                 

diff --git a/ui/src/app/views/project/show/admin/project.admin.html b/ui/src/app/views/project/show/admin/project.admin.html
index 06ce17b871..503f7a4fc4 100644
--- a/ui/src/app/views/project/show/admin/project.admin.html
+++ b/ui/src/app/views/project/show/admin/project.admin.html
@@ -1,5 +1,5 @@
 

-    
+    
         
             
                 Project name
@@ -40,13 +40,13 @@
             
         
     
-    
+    
         
         
     
-    
+    
         
             
                 
Delete project

diff --git a/ui/src/app/views/workflow/show/admin/workflow.admin.component.html b/ui/src/app/views/workflow/show/admin/workflow.admin.component.html
index 89b99d445f..ec2220ac43 100644
--- a/ui/src/app/views/workflow/show/admin/workflow.admin.component.html
+++ b/ui/src/app/views/workflow/show/admin/workflow.admin.component.html
@@ -1,5 +1,5 @@
 

-    
+    
         

             
                 Select icon
@@ -23,7 +23,7 @@
             
         

     
-    
+    
         

             
                 Workflow name
@@ -200,7 +200,7 @@ 
{{'workflow_retention_result_title' | translate }}

             
         

     
-    
+    
         

             
                 Link an integration
@@ -247,7 +247,7 @@ 
{{'workflow_retention_result_title' | translate }}

             
         

     
-    
+    
         
             
                 
Delete workflow

diff --git a/ui/src/app/views/workflow/show/admin/workflow.admin.scss b/ui/src/app/views/workflow/show/admin/workflow.admin.scss
index 9170ad1a46..385a1f0887 100644
--- a/ui/src/app/views/workflow/show/admin/workflow.admin.scss
+++ b/ui/src/app/views/workflow/show/admin/workflow.admin.scss
@@ -1,4 +1,5 @@
 #WorkflowAdmin {
+
     nz-card {
       margin-top: 15px;
       margin-bottom: 15px;
diff --git a/ui/src/ngzorro.dark.less b/ui/src/ngzorro.dark.less
index 66e4bead65..2781033443 100644
--- a/ui/src/ngzorro.dark.less
+++ b/ui/src/ngzorro.dark.less
@@ -30,3 +30,14 @@ textarea:read-only {
 .entity-card:hover {
   background: #3a3a3a;
 }
+
+nz-card.redTitle {
+  .ant-card-head {
+    background-color: #a61d24;
+  }
+}
+nz-card.coloredTitle {
+  .ant-card-head {
+    background-color: #1f1f1f;
+  }
+}
diff --git a/ui/src/styles.scss b/ui/src/styles.scss
index 807c3ab7a3..ddda4aeeca 100644
--- a/ui/src/styles.scss
+++ b/ui/src/styles.scss
@@ -43,6 +43,28 @@ textarea:read-only {
   border-radius: 2px;
 }
 
+nz-card.redTitle {
+  .ant-card-head {
+    min-height: 44px;
+    background-color: #ff4d4f;
+    color: white;
+
+  }
+  .ant-card-head-title {
+    padding: 8px 0;
+  }
+}
+nz-card.coloredTitle {
+  .ant-card-head {
+    min-height: 44px;
+    background-color: #EEEEEE;
+
+  }
+  .ant-card-head-title {
+    padding: 8px 0;
+  }
+}
+
 .inner-content {
   background-color: #fff;
 }

From 02724e2f85e43559cf5089262c0179f38b500788 Mon Sep 17 00:00:00 2001
From: Steven Guiheux 
Date: Thu, 7 Jul 2022 13:57:34 +0200
Subject: [PATCH 07/10] fix(ui): remove translate

---
 ui/src/assets/i18n/en.json | 47 --------------------------------------
 1 file changed, 47 deletions(-)

diff --git a/ui/src/assets/i18n/en.json b/ui/src/assets/i18n/en.json
index 10a9f8efad..a5af504748 100644
--- a/ui/src/assets/i18n/en.json
+++ b/ui/src/assets/i18n/en.json
@@ -83,7 +83,6 @@
   "btn_close": "Close",
   "btn_create": "Create",
   "btn_create_workflow": "Create workflow",
-  "btn_dry_run": "Dry Run",
   "btn_delete": "Delete",
   "btn_goto_workflow": "See workflow",
   "btn_inspect_repo": "Inspect repository",
@@ -91,7 +90,6 @@
   "btn_resync_repo": "Resynchronize",
   "btn_resync_ascode_event": "Resynchronize repository modifications",
   "btn_run": "Run pipeline",
-  "btn_run_workflow": "Run workflow",
   "btn_save": "Save",
   "btn_save_application": "Save application",
   "btn_save_pipeline": "Save pipeline",
@@ -158,7 +156,6 @@
   "common_date_end": "End",
   "common_date_start": "Start",
   "common_description": "Description",
-  "common_icon": "Icon",
   "common_see_documentation": "See documentation",
   "common_documentation": "Documentation",
   "common_cds_documentation": "CDS Documentation",
@@ -206,7 +203,6 @@
   "common_no_application": "There is no application linked",
   "common_no_workflow": "There is no workflow linked",
   "common_no_environment": "There is no environment linked",
-  "common_orientation": "Orientation",
   "common_or": "OR",
   "common_copy_clipboard": "Copy to clipboad",
   "common_select": "Select",
@@ -345,12 +341,6 @@
   "navbar_search_help_details": "Tips: 'projectkey/' : display all workflows and applications for this project. You will have the same result with 'project title/'.",
   "notification_on_workflow_success": "SUCCESS on workflow '{{workflowName}}'",
   "notification_on_workflow_failing": "FAILURE on workflow '{{workflowName}}'",
-  "notification_on_failure": "Send on failure",
-  "notification_on_start": "Send on start",
-  "notification_on_success": "Send on success",
-  "notification_title": "Title",
-  "notification_body": "Content",
-  "notification_type": "Type",
   "parameter_added": "Parameter added",
   "parameter_deleted": "Parameter deleted",
   "parameter_git_url": "Git repository Url",
@@ -588,7 +578,6 @@
   "workflow_node_condition_empty": "There are empty run conditions",
   "workflow_node_condition_duplicate": "You test many times the same variable",
   "workflow_resync_vcs": "Resync VCS status",
-  "workflow_resync_vcs_tooltip": "This action will resend to your repository manager the current status of all your pipelines",
   "workflow_vcs_resynced": "VCS status resynced",
   "workflow_added": "Workflow added",
   "workflow_run_scheduling": "Crafting workflow",
@@ -597,8 +586,6 @@
   "workflow_create": "Create a workflow",
   "workflow_deleted": "Workflow deleted",
   "workflow_deleted_warning": "Warning, if you delete this pipeline with all its children you are going to delete all the workflow and its configuration",
-  "workflow_delete_label": "Delete workflow",
-  "workflow_delete_description": "Once you delete a workflow, there is no going back. Please be certain.",
   "workflow_description": "Workflow description",
   "workflow_from_repository": "Workflow imported from {{repo}}",
   "workflow_from_repository_btn": "Import workflow from repository",
@@ -616,7 +603,6 @@
   "workflow_node_menu_edit_ro": "Show context configuration",
   "workflow_node_menu_edit_pipeline": "Edit the pipeline",
   "workflow_run_node_job_queued": "Queued {{time}} ago",
-  "workflow_update_name_error": "Invalid workflow name. Allowed pattern is: ^[a-zA-Z0-9._-]{1,}$",
   "workflow_wizard_description": "Choose your workflow options",
   "workflow_edit_as_code": "Edit as code",
   "workflow_hook_delete_title": "Delete the hook",
@@ -639,52 +625,23 @@
   "workflow_node_outgoing_hook": "Add an outgoing hook",
   "workflow_node_parent": "Add a parent pipeline",
   "workflow_node_trigger_add": "Add a pipeline",
-  "workflow_history_length_title": "History's length of your builds to keep by tag",
   "workflow_node_permissions_form_title": "Add a permission",
-  "workflow_history_length": "History's length",
   "workflow_permission_list_title": "List workflow permissions",
   "workflow_permission_form_title": "Add a permission on workflow",
   "workflow_root_context_mutex": "Limit one run at a time",
   "workflow_no_run_found": "No workflow run found",
   "workflow_run_readonly_title": "This workflow run  is on read only mode",
   "workflow_run_readonly_content": "This workflow run is on read only mode. It cannot be run anymore.",
-  "workflow_sidebar_tag_zone": "Tags to display in the sidebar (order by priority)",
   "workflow_ascode_updated": "Draft updated",
   "workflow_updated": "Workflow updated",
-  "workfow_tag_no": "No tag",
-  "workflow_tag_dragdrop": "Drag & drop to modify tags order",
   "workflow_resync": "Resynchronize workflow",
   "workflow_run_only_failed": "Only failed jobs",
   "workflow_stopped": "Workflow stopped",
-  "workflow_last_execution": "Last execution date",
-  "workflow_first_execution": "First execution date",
-  "workflow_runnumber_title": "Current run number",
-  "workflow_notification_type": "Notification type",
-  "workflow_notification_pipeline": "Pipelines",
-  "workflow_notification_on_success": "Send on success",
-  "workflow_notification_on_failure": "Send on error",
-  "workflow_notification_on_start": "Send on start",
-  "workflow_notification_title": "Title",
-  "workflow_notification_body": "Message",
-  "workflow_notification_to_group": "Send to group",
-  "workflow_notification_to_initiator": "Send to initiator",
-  "workflow_notification_email_user": "Mails",
-  "workflow_notification_form": "Add a notification",
-  "workflow_notification_copy": "Copy",
-  "workflow_notification_vcs_status_enabled": "Send status on commit",
-  "workflow_notification_vcs_comment_enabled": "Pull-request's comment enabled",
-  "workflow_notification_vcs_comment_always": "Always send",
-  "workflow_notification_vcs_pr_comment_body": "Pull-request's comment body",
   "workflow_notification_explanation": "_A user notification can be useful to report the status of a workflow according to its status. Each pipeline in a workflow can be notified based on status in 'Success', 'Fail' or status change. The message sent to the recipients can be set using [CDS variables] (https://ovh.github.io/cds/docs/concepts/variables/). E-mail notifications can also contain HTML, cf. [User Notifications] documentation (https://ovh.github.io/cds/docs/concepts/workflow/notifications/) ._",
-  "workflow_retention_maxruns": "Maximum number of workflow runs: ",
-  "workflow_retention_maxruns_admin": "You can contact a CDS administrator to customize this value",
   "workflow_retention_policy": "Workflow run retention policy",
   "workflow_retention_result_title": "The following runs will be kept",
   "workflow_run_delayed": "Workflow run has been delayed",
   "workflow_event_explanation": "_Here you can configure one or more integrations of type `Event`. This allows you to send all technical data in a backend to make it accessible by third-party applications such as Kafka or ElasticSearch. See the [Event Notifications] (https://ovh.github.io/cds/docs/concepts/workflow/notifications/) documentation for more information._",
-  "workflow_no_event_integration": "You haven't any event integration on your project.",
-  "workflow_event_form": "Events integrations",
-  "workflow_notification_conditions": "Conditions",
   "workflow_wizard_select_repo_man": "Select a repository manager",
   "workflow_wizard_select_repo": "Select a repository",
   "workflow_wizard_select_repo_loading": "Loading repositories...",
@@ -697,9 +654,7 @@
   "workflow_template_deleted": "Workflow template deleted",
   "workflow_template": "Workflow template",
   "workflow_templates": "Workflow templates",
-  "workflow_template_help_line_1": "Your workflow was not generated from a template.",
   "workflow_template_help_line_2": "A workflow template allows you to quickly create then update a workflow and its components.",
-  "workflow_template_help_line_3": "You can init a new template from current workflow.",
   "workflow_template_update_title": "Update workflow from template",
   "workflow_template_update_info_btn": "Show differences with new version",
   "workflow_template_update_info_line_1": "Apply will override your existing workflow and components according to the latest version of selected template.",
@@ -720,13 +675,11 @@
   "workflow_template_bulk_info_line_ascode": "Some selected instances refer to ascode workflow. A pull request will be made on each workflow's repository. Please fill the branch and commit message to proceed.",
   "workflow_template_detach": "Detach",
   "workflow_template_apply_detach": "Detach the generated workflow from the template.",
-  "workflow_template_init_from_workflow": "Init a template",
   "workflow_template_help_add_from": "Current workflow template was initialized with data from \"{{workflowName}}\" workflow in \"{{projectKey}}\" project. The data will not be stored until you save the template.",
   "workflow_template_param_select_key": "Select a key",
   "workflow_warning_deprecated_yaml": "Yaml workflow configuration is deprecated",
   "application_repository_help_line_1": "Your application was not imported from your code.",
   "pipeline_repository_help_line_1": "Your pipeline was not imported from your code.",
-  "workflow_repository_help_line_1": "Your workflow was not imported from your code.",
   "workflow_repository_help_line_2": "Manage your workflow as code from your repository to automatically update it with changes on your branches.",
   "workflow_error_bad_environment_name_title": "Bad environment name",
   "workflow_error_bad_integration_name_title": "Bad integration name",

From 2fe86322e4d36294cdf82bf42584a253953e0b8b Mon Sep 17 00:00:00 2001
From: Steven Guiheux 
Date: Thu, 7 Jul 2022 14:19:14 +0200
Subject: [PATCH 08/10] fix: replace tooltip by popover

---
 .../app/views/workflow/show/admin/workflow.admin.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/app/views/workflow/show/admin/workflow.admin.component.html b/ui/src/app/views/workflow/show/admin/workflow.admin.component.html
index ec2220ac43..3951066e83 100644
--- a/ui/src/app/views/workflow/show/admin/workflow.admin.component.html
+++ b/ui/src/app/views/workflow/show/admin/workflow.admin.component.html
@@ -123,7 +123,7 @@
                 
             
             
-                Workflow run retention policy 
+                Workflow run retention policy 
                 
                     

                         You can set a custom lua retention policy rule for this workflow.

From 50e185653a9ebe7e75d5afb81c97458a8f10ec05 Mon Sep 17 00:00:00 2001
From: Steven Guiheux 
Date: Thu, 7 Jul 2022 16:18:18 +0200
Subject: [PATCH 09/10] fix(ui): remove debug condition

---
 .../views/workflow/show/admin/workflow.admin.component.html   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/app/views/workflow/show/admin/workflow.admin.component.html b/ui/src/app/views/workflow/show/admin/workflow.admin.component.html
index 3951066e83..11453e11f0 100644
--- a/ui/src/app/views/workflow/show/admin/workflow.admin.component.html
+++ b/ui/src/app/views/workflow/show/admin/workflow.admin.component.html
@@ -85,7 +85,7 @@
                            #formWorkflowUpdateHistory="ngModel" min="1" max="500">
                 
             
-            
+            
                 Purge tags
                 
                     

@@ -97,7 +97,7 @@
                     

                 
             
-            
+            
                 Current purge tags
                 
                     

From 13f9080f7d881c40c9b2447116e2a0d65fbd53d5 Mon Sep 17 00:00:00 2001
From: Guiheux Steven 
Date: Thu, 7 Jul 2022 17:01:00 +0200
Subject: [PATCH 10/10] Update
 ui/src/app/views/workflow/show/admin/workflow.admin.component.ts

Co-authored-by: Richard LT 
---
 ui/src/app/views/workflow/show/admin/workflow.admin.component.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/src/app/views/workflow/show/admin/workflow.admin.component.ts b/ui/src/app/views/workflow/show/admin/workflow.admin.component.ts
index a9e733c802..f41d819014 100644
--- a/ui/src/app/views/workflow/show/admin/workflow.admin.component.ts
+++ b/ui/src/app/views/workflow/show/admin/workflow.admin.component.ts
@@ -332,7 +332,6 @@ export class WorkflowAdminComponent implements OnInit, OnDestroy {
     }
 
     updateTagMetadata(): void {
-        console.log(this.tagsToAdd);
         if (this.tagsToAdd && this.tagsToAdd.length > 0) {
             if (!this.selectedTags) {
                 this.selectedTags = [];