refactor(ui): remove semantic from menu

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

@@ -44,8 +44,6 @@ import { KeysFormComponent } from './keys/form/keys.form.component';
 import { KeysListComponent } from './keys/list/keys.list.component';
 import { LabelsEditComponent } from './labels/edit/labels.edit.component';
 import { MenuComponent } from './menu/menu.component';
-import { ConfirmModalComponent } from './modal/confirm/confirm.component';
-import { DeleteModalComponent } from './modal/delete/delete.component';
 import { ParameterFormComponent } from './parameter/form/parameter.form';
 import { ParameterListComponent } from './parameter/list/parameter.component';
 import { ParameterValueComponent } from './parameter/value/parameter.value.component';
@@ -225,11 +223,9 @@ const icons: IconDefinition[] = [ ArrowDownOutline, ArrowRightOutline, BellFill,
         CommitListComponent,
         ConditionsComponent,
         ConfirmButtonComponent,
-        ConfirmModalComponent,
         CutPipe,
         DataTableComponent,
         DeleteButtonComponent,
-        DeleteModalComponent,
         DiffItemComponent,
         DiffListComponent,
         DurationMsPipe,
@@ -340,11 +336,9 @@ const icons: IconDefinition[] = [ ArrowDownOutline, ArrowRightOutline, BellFill,
         CommonModule,
         ConditionsComponent,
         ConfirmButtonComponent,
-        ConfirmModalComponent,
         CutPipe,
         DataTableComponent,
         DeleteButtonComponent,
-        DeleteModalComponent,
         DiffItemComponent,
         DiffListComponent,
         DragulaModule,

ui/src/app/shared/workflow/menu/edit-hook/menu.edit.hook.html

@@ -1,26 +1,23 @@
-<div class="sidebar-node-edit">
-    <div class="ui list">
-        <ng-container *ngIf="hook.hook_model_name !== 'Workflow'">
-            <a class="item" (click)="sendEvent('logs')" [class.disabled]="isRun && (!hookEventUUID || hookEventUUID !== hook.uuid)">
-                {{ 'btn_logs' | translate }}
-            </a>
-        </ng-container>
-        <ng-container *ngIf="hook.hook_model_name === 'Workflow' && hookEvent?.parent_workflow?.key">
-            <a
-               [routerLink]="['/project', hookEvent.parent_workflow.key, 'workflow', hookEvent.parent_workflow.name, 'run', hookEvent.parent_workflow.run]">
-                Display parent workflow run
-            </a>
-        </ng-container>
+<ul>
+        <li *ngIf="hook.hook_model_name !== 'Workflow'">
+           <a [class.disabled]="isRun && (!hookEventUUID || hookEventUUID !== hook.uuid)" (click)="sendEvent('logs')">Display logs</a>
+
+        </li>
+        <li  *ngIf="hook.hook_model_name === 'Workflow' && hookEvent?.parent_workflow?.key">
+            <a [routerLink]="['/project', hookEvent.parent_workflow.key, 'workflow', hookEvent.parent_workflow.name, 'run', hookEvent.parent_workflow.run]">Display parent workflow run</a>
+        </li>
         <hr>
-        <a class="item" (click)="sendEvent('edit')">
-                <span *ngIf="readonly">{{ 'workflow_node_menu_edit_ro' | translate }}</span>
-                <span *ngIf="!readonly">{{ 'workflow_node_menu_edit' | translate }}</span>
-        </a>
+        <li>
+            <a (click)="sendEvent('edit')">
+                <span *ngIf="readonly">Show context configuration</span>
+                <span *ngIf="!readonly">Edit the context</span>
+            </a>
+        </li>
         <hr>
-        <a class="item" (click)="sendEvent('delete')"
-           [class.disabled]="readonly">
-                {{ 'btn_delete' | translate }}
-        </a>
-    </div>
-</div>
+        <li>
+            <a *ngIf="!readonly" nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this hook ?" (nzOnConfirm)="sendEvent('delete')">Delete</a>
+            <span *ngIf="readonly"><a disabled>Delete</a></span>
+        </li>
+    </ul>
+
 

ui/src/app/shared/workflow/menu/edit-hook/menu.edit.hook.scss

@@ -1,6 +1,5 @@
-.item:hover {
-    text-decoration: underline;
-}
-.item.disabled {
-    text-decoration: none;
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }

ui/src/app/shared/workflow/menu/edit-node/menu.edit.node.component.ts

@@ -92,6 +92,37 @@ export class WorkflowWNodeMenuEditComponent implements OnInit, OnDestroy {
     }
 
     sendEvent(e: string): void {
+        switch (e) {
+            case 'run':
+                if (!this.runnable) {
+                    return;
+                }
+                break;
+            case 'fork':
+            case 'join':
+            case 'join_link':
+            case 'outgoinghook':
+            case 'pipeline':
+                if (this.readonly) {
+                    return;
+                }
+                break;
+            case 'parent':
+                if (this.workflow.workflow_data.node.id !== this.node.id || this.readonly) {
+                    return;
+                }
+                break;
+            case 'hook':
+                if(!this.workflow.workflow_data || this.workflow.workflow_data.node.id !== this.node.id || this.readonly) {
+                    return;
+                }
+                break;
+            case 'delete':
+                if(this.readonly || this.node.id === this.workflow.workflow_data.node.id) {
+                    return;
+                }
+
+        }
         this.event.emit(e);
     }
 

ui/src/app/shared/workflow/menu/edit-node/menu.edit.node.html

@@ -1,65 +1,88 @@
-<div class="menu-node">
-    <div class="ui list" *ngIf="workflow">
-        <ng-container *ngIf="workflowrun">
-            <a class="item" (click)="sendEvent('run')" [class.disabled]="!runnable">
-                {{'btn_run' | translate }}
+<ul *ngIf="workflow">
+    <ng-container *ngIf="workflowrun">
+        <li>
+            <a (click)="sendEvent('run')" [class.disabled]="!runnable">
+                Run pipeline
             </a>
-            <hr>
-        </ng-container>
-        <ng-container *ngIf="node && !workflowrun">
-            <a class="item" (click)="sendEvent('pipeline')"
-                [class.disabled]="readonly">
-                    {{ 'workflow_node_trigger_add' | translate }}
+        </li>
+        <hr>
+    </ng-container>
+    <ng-container *ngIf="node && !workflowrun">
+        <li>
+            <a (click)="sendEvent('pipeline')"
+               [class.disabled]="readonly">
+                Add a pipeline
             </a>
-            <a class="item" (click)="sendEvent('parent')"
-                [class.disabled]="workflow.workflow_data.node.id !== node.id || readonly">
-                    {{ 'workflow_node_parent' | translate }}
+        </li>
+        <li>
+            <a (click)="sendEvent('parent')"
+               [class.disabled]="workflow.workflow_data.node.id !== node.id || readonly">
+                Add a parent pipeline
             </a>
-            <a class="item" (click)="sendEvent('fork')" [class.disabled]="readonly">
-                    {{ 'workflow_node_fork_add' | translate }}
+        </li>
+        <li>
+            <a (click)="sendEvent('fork')" [class.disabled]="readonly">
+                Add a fork
             </a>
-            <a class="item" (click)="sendEvent('join')" [class.disabled]="readonly">
-                    {{ 'workflow_node_join_add' | translate }}
+        </li>
+        <li>
+            <a (click)="sendEvent('join')" [class.disabled]="readonly">
+                Add a join
             </a>
-            <a class="item" (click)="sendEvent('join_link')" [class.disabled]="readonly">
-                {{ 'workflow_node_join_link' | translate }}
+        </li>
+        <li>
+            <a (click)="sendEvent('join_link')" [class.disabled]="readonly">
+                Link to a join
             </a>
-            <hr>
-            <a class="item" (click)="sendEvent('hook')"
-                [class.disabled]="!workflow.workflow_data || workflow.workflow_data.node.id !== node.id || readonly">
-                {{ 'workflow_node_hook_add' | translate }}
+        </li>
+        <hr>
+        <li>
+            <a (click)="sendEvent('hook')"
+               [class.disabled]="!workflow.workflow_data || workflow.workflow_data.node.id !== node.id || readonly">
+                Add a hook
             </a>
-            <a class="item" (click)="sendEvent('outgoinghook')" [class.disabled]="readonly">
-                    {{ 'workflow_node_outgoing_hook' | translate }}
+        </li>
+        <li>
+            <a (click)="sendEvent('outgoinghook')" [class.disabled]="readonly">
+                Add an outgoing hook
             </a>
-            <hr>
+        </li>
+        <hr>
+        <li>
             <a class="item" (click)="sendEvent('edit')">
-                    <span *ngIf="readonly">{{ 'workflow_node_menu_edit_ro' | translate }}</span>
-                    <span *ngIf="!readonly">{{ 'workflow_node_menu_edit' | translate }}</span>
-            </a>
-            <ng-container *ngIf="node.type === 'pipeline' && workflow && workflow.pipelines && node && node.context && workflow.pipelines[node.context.pipeline_id]">
-                <a class="item"
-                    [routerLink]="['/project', project.key, 'pipeline', workflow.pipelines[node.context.pipeline_id].name]"
-                    [queryParams]="{workflow: workflow.name}">
-                        {{ 'workflow_node_menu_edit_pipeline' | translate }}
-                </a>
-            </ng-container>
-            <hr>
-            <a class="item" (click)="sendEvent('delete')" [class.disabled]="readonly
-                || node.id === workflow.workflow_data.node.id">
-                    {{ 'btn_delete' | translate }}
+                <span *ngIf="readonly">Show context configuration</span>
+                <span *ngIf="!readonly">Edit the context</span>
             </a>
-        </ng-container>
-        <ng-container *ngIf="node && noderun && node.type === 'pipeline'">
-                <a class="item" (click)="sendEvent('logs')">
-                    {{'btn_logs' | translate }}
+        </li>
+
+        <ng-container *ngIf="node.type === 'pipeline' && workflow && workflow.pipelines && node && node.context && workflow.pipelines[node.context.pipeline_id]">
+            <li>
+                <a [routerLink]="['/project', project.key, 'pipeline', workflow.pipelines[node.context.pipeline_id].name]"
+                   [queryParams]="{workflow: workflow.name}">
+                    Edit the pipeline
                 </a>
-                <hr>
+            </li>
         </ng-container>
-        <ng-container *ngIf="node && workflowrun">
-            <a class="item" (click)="sendEvent('edit')">
-                    {{ 'workflow_node_menu_edit_ro' | translate }}
+        <hr>
+        <li>
+            <a (click)="sendEvent('delete')" *ngIf="!readonly && node.id !== workflow.workflow_data.node.id">
+                Delete
             </a>
-        </ng-container>
-    </div>
-</div>
+        </li>
+    </ng-container>
+    <ng-container *ngIf="node && noderun && node.type === 'pipeline'">
+        <li>
+            <a (click)="sendEvent('logs')">
+                Display logs
+            </a>
+        </li>
+        <hr>
+    </ng-container>
+    <ng-container *ngIf="node && workflowrun">
+        <li>
+            <a (click)="sendEvent('edit')">
+                Show context configuration
+            </a>
+        </li>
+    </ng-container>
+</ul>

ui/src/app/shared/workflow/menu/edit-node/menu.edit.node.scss

@@ -1,6 +1,9 @@
-.item:hover {
-    text-decoration: underline;
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
-.item.disabled {
-    text-decoration: none;
+
+a.disabled {
+  text-decoration: none;
 }