From 6006aecf9bf9510399754a3f21032a54f50c17d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20L=C3=B3pez?= <marina.lopez.yap@gmail.com>
Date: Mon, 2 Oct 2023 14:47:16 +0200
Subject: [PATCH] feat(front): u#2860 t#4051 edit workflow design review

---
 .../components/kanban-header/kanban-header.component.css | 8 +++++---
 .../kanban-header/kanban-header.component.html           | 9 ++++++---
 javascript/apps/taiga/src/assets/i18n/kanban/en-US.json  | 1 +
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/javascript/apps/taiga/src/app/modules/project/feature-kanban/components/kanban-header/kanban-header.component.css b/javascript/apps/taiga/src/app/modules/project/feature-kanban/components/kanban-header/kanban-header.component.css
index ce5b490e8..eb3473bf3 100644
--- a/javascript/apps/taiga/src/app/modules/project/feature-kanban/components/kanban-header/kanban-header.component.css
+++ b/javascript/apps/taiga/src/app/modules/project/feature-kanban/components/kanban-header/kanban-header.component.css
@@ -10,7 +10,6 @@ Copyright (c) 2023-present Kaleidos INC
 @import url("shared/option-list.css");
 
 :host {
-  align-items: center;
   display: flex;
   gap: var(--spacing-4);
 }
@@ -31,12 +30,15 @@ Copyright (c) 2023-present Kaleidos INC
   @mixin separator;
 }
 
+.kanban-header-breadcrumbs {
+  padding-block-start: var(--spacing-4);
+}
+
 .workflow-form {
   &::ng-deep {
     background: transparent;
-    border: 0;
+    border-color: transparent;
     box-shadow: none;
-    margin-block-start: var(--spacing-4);
     padding: 0;
 
     &.input-wrapper {
diff --git a/javascript/apps/taiga/src/app/modules/project/feature-kanban/components/kanban-header/kanban-header.component.html b/javascript/apps/taiga/src/app/modules/project/feature-kanban/components/kanban-header/kanban-header.component.html
index 1a7b2704c..d9ff8251d 100644
--- a/javascript/apps/taiga/src/app/modules/project/feature-kanban/components/kanban-header/kanban-header.component.html
+++ b/javascript/apps/taiga/src/app/modules/project/feature-kanban/components/kanban-header/kanban-header.component.html
@@ -27,7 +27,8 @@
         t('kanban.workflows').slice(1),
       workflow.name
     ]"
-    [accent]="true">
+    [accent]="true"
+    class="kanban-header-breadcrumbs">
   </tg-ui-breadcrumb>
 
   <tui-hosted-dropdown
@@ -43,7 +44,9 @@
       role="menu"
       aria-haspopup="true"
       [attr.aria-expanded]="openWorkflowOptions"
-      [tgUiTooltip]="t('kanban.status_options')"
+      [tgUiTooltip]="
+        t('kanban.status_options_tooltip', { name: workflow.name })
+      "
       icon="more-vertical"
       data-test="status-options"
       class="status-options-menu-button"
@@ -87,7 +90,7 @@
   </ng-template>
 
   <tg-new-workflow-form
-    *ngIf="editStatusFormOpened"
+    *ngIf="editStatusFormOpened && project.userIsAdmin"
     class="workflow-form"
     [workflow]="workflow"
     (createWorkflow)="editWorkflowName($event)"
diff --git a/javascript/apps/taiga/src/assets/i18n/kanban/en-US.json b/javascript/apps/taiga/src/assets/i18n/kanban/en-US.json
index 967724421..053c513bd 100644
--- a/javascript/apps/taiga/src/assets/i18n/kanban/en-US.json
+++ b/javascript/apps/taiga/src/assets/i18n/kanban/en-US.json
@@ -27,6 +27,7 @@
   "write_status": "Write a status name",
   "status_empty": "Status name can’t be empty.",
   "status_options": "Display status options",
+  "status_options_tooltip": "{{ name }} workflow options",
   "status_btn_tooltip": "Status actions",
   "edit_status_name": "Edit status name",
   "status_name": "Status name",