From 90749c94c23ef7d1312f4e767423e1608685638d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20L=C3=B3pez?= <marina.lopez.yap@gmail.com>
Date: Thu, 28 Sep 2023 13:48:18 +0200
Subject: [PATCH] feat(workflows): u#2860 t#4029 update workflow event

---
 .../data-access/+state/actions/project.actions.ts |  2 +-
 .../data-access/+state/effects/project.effects.ts |  5 -----
 .../+state/reducers/project.reducer.ts            |  7 +++++--
 .../kanban-header/kanban-header.component.html    |  2 ++
 .../kanban-header/kanban-header.component.ts      |  4 +++-
 .../data-access/+state/reducers/kanban.reducer.ts | 13 ++++++++-----
 .../project-feature-shell.component.ts            |  9 +++++++++
 .../+state/effects/story-detail.effects.spec.ts   |  2 ++
 .../+state/reducers/story-detail.reducer.ts       | 15 +++++++++++++++
 javascript/libs/data/src/lib/story.model.mock.ts  |  2 ++
 javascript/libs/data/src/lib/story.model.ts       |  2 +-
 11 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/javascript/apps/taiga/src/app/modules/project/data-access/+state/actions/project.actions.ts b/javascript/apps/taiga/src/app/modules/project/data-access/+state/actions/project.actions.ts
index b52ce1af1..f8c9f970f 100644
--- a/javascript/apps/taiga/src/app/modules/project/data-access/+state/actions/project.actions.ts
+++ b/javascript/apps/taiga/src/app/modules/project/data-access/+state/actions/project.actions.ts
@@ -134,7 +134,6 @@ export const projectApiActions = createActionGroup({
     'create Workflow Error': emptyProps(),
     'Update Workflow Success': props<{
       workflow: Workflow;
-      oldSlug: Workflow['slug'];
     }>(),
   },
 });
@@ -169,6 +168,7 @@ export const projectEventActions = createActionGroup({
     'Remove Member': props<{ membership: Membership; workspace: string }>(),
     'Update Member': props<{ membership: Membership }>(),
     'Create Workflow': props<{ workflow: Workflow }>(),
+    'Update Workflow': props<{ workflow: Workflow }>(),
     'Create comment': props<{ storyRef: Story['ref']; comment: UserComment }>(),
     'Status reorder': props<{
       id: Status['id'];
diff --git a/javascript/apps/taiga/src/app/modules/project/data-access/+state/effects/project.effects.ts b/javascript/apps/taiga/src/app/modules/project/data-access/+state/effects/project.effects.ts
index d3d1f4b31..58fc97ab9 100644
--- a/javascript/apps/taiga/src/app/modules/project/data-access/+state/effects/project.effects.ts
+++ b/javascript/apps/taiga/src/app/modules/project/data-access/+state/effects/project.effects.ts
@@ -224,16 +224,11 @@ export class ProjectEffects {
             .updateWorkflow(action.name, action.slug, project.id)
             .pipe(
               map((updatedWorkflow) => {
-                // void this.router.navigate(
-                //   [`project/${project.id}/${project.slug}/kanban/${updatedWorkflow.slug}`],
-                //   { replaceUrl: true }
-                // );
                 this.location.go(
                   `project/${project.id}/${project.slug}/kanban/${updatedWorkflow.slug}`
                 );
                 return ProjectActions.projectApiActions.updateWorkflowSuccess({
                   workflow: updatedWorkflow,
-                  oldSlug: action.slug,
                 });
               })
             );
diff --git a/javascript/apps/taiga/src/app/modules/project/data-access/+state/reducers/project.reducer.ts b/javascript/apps/taiga/src/app/modules/project/data-access/+state/reducers/project.reducer.ts
index 84d595eab..2b3aed4af 100644
--- a/javascript/apps/taiga/src/app/modules/project/data-access/+state/reducers/project.reducer.ts
+++ b/javascript/apps/taiga/src/app/modules/project/data-access/+state/reducers/project.reducer.ts
@@ -114,10 +114,13 @@ export const reducer = createImmerReducer(
   ),
   on(
     ProjectActions.projectApiActions.updateWorkflowSuccess,
-    (state, { workflow, oldSlug }): ProjectState => {
+    ProjectActions.projectEventActions.updateWorkflow,
+    (state, { workflow }): ProjectState => {
       if (state.currentProjectId) {
         const workflows = state.projects[state.currentProjectId].workflows;
-        const workflowIndex = workflows.findIndex((it) => it.slug === oldSlug);
+        const workflowIndex = workflows.findIndex(
+          (it) => it.id === workflow.id
+        );
         workflows[workflowIndex].name = workflow.name;
         workflows[workflowIndex].slug = workflow.slug;
       }
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 c23886ec5..ecd18cb3a 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
@@ -33,10 +33,12 @@
     [(open)]="openWorkflowOptions">
     <button
       #statusOptions
+      *ngIf="project.userIsAdmin && project.workflows.length > 1"
       [attr.aria-label]="t('kanban.status_options')"
       role="menu"
       aria-haspopup="true"
       [attr.aria-expanded]="openWorkflowOptions"
+      [tgUiTooltip]="t('kanban.status_options')"
       icon="more-vertical"
       data-test="status-options"
       class="status-options-menu-button"
diff --git a/javascript/apps/taiga/src/app/modules/project/feature-kanban/components/kanban-header/kanban-header.component.ts b/javascript/apps/taiga/src/app/modules/project/feature-kanban/components/kanban-header/kanban-header.component.ts
index 8b6894d1a..2a85d0048 100644
--- a/javascript/apps/taiga/src/app/modules/project/feature-kanban/components/kanban-header/kanban-header.component.ts
+++ b/javascript/apps/taiga/src/app/modules/project/feature-kanban/components/kanban-header/kanban-header.component.ts
@@ -9,6 +9,7 @@
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { TranslocoDirective } from '@ngneat/transloco';
+import { TooltipDirective } from '@taiga/ui/tooltip';
 import {
   TuiButtonModule,
   TuiDataListModule,
@@ -31,6 +32,7 @@ import { Store } from '@ngrx/store';
   imports: [
     CommonModule,
     TranslocoDirective,
+    TooltipDirective,
     TuiHostedDropdownModule,
     TuiButtonModule,
     TuiDataListModule,
@@ -60,11 +62,11 @@ export class KanbanHeaderComponent {
   }
 
   public toggleEditWorkflowForm() {
+    this.openWorkflowOptions = false;
     this.editStatusFormOpened = !this.editStatusFormOpened;
   }
 
   public editWorkflowName(workflow: Workflow['name']) {
-    this.openWorkflowOptions = false;
     this.toggleEditWorkflowForm();
     this.store.dispatch(
       updateWorkflow({
diff --git a/javascript/apps/taiga/src/app/modules/project/feature-kanban/data-access/+state/reducers/kanban.reducer.ts b/javascript/apps/taiga/src/app/modules/project/feature-kanban/data-access/+state/reducers/kanban.reducer.ts
index 6f902e630..2a6bb7bac 100644
--- a/javascript/apps/taiga/src/app/modules/project/feature-kanban/data-access/+state/reducers/kanban.reducer.ts
+++ b/javascript/apps/taiga/src/app/modules/project/feature-kanban/data-access/+state/reducers/kanban.reducer.ts
@@ -9,7 +9,10 @@
 import { createFeature, createSelector, on } from '@ngrx/store';
 import { Status, Story, Workflow } from '@taiga/data';
 import { DropCandidate } from '@taiga/ui/drag/drag.model';
-import { projectEventActions } from '~/app/modules/project/data-access/+state/actions/project.actions';
+import {
+  projectEventActions,
+  projectApiActions,
+} from '~/app/modules/project/data-access/+state/actions/project.actions';
 import {
   KanbanStory,
   KanbanStoryA11y,
@@ -32,7 +35,6 @@ import {
   replaceStory,
   setIntialPosition,
 } from './kanban.reducer.helpers';
-import { projectApiActions } from '~/app/modules/project/data-access/+state/actions/project.actions';
 
 export interface KanbanState {
   loadingWorkflow: boolean;
@@ -794,12 +796,13 @@ export const reducer = createImmerReducer(
   ),
   on(
     projectApiActions.updateWorkflowSuccess,
-    (state, { workflow, oldSlug }): KanbanState => {
-      if (state.currentWorkflowSlug === oldSlug) {
+    projectEventActions.updateWorkflow,
+    (state, { workflow }): KanbanState => {
+      if (state.workflow?.id === workflow.id) {
         state.currentWorkflowSlug = workflow.slug;
       }
 
-      if (state.workflow && state.workflow.slug === oldSlug) {
+      if (state.workflow?.id === workflow.id) {
         state.workflow.name = workflow.name;
         state.workflow.slug = workflow.slug;
       }
diff --git a/javascript/apps/taiga/src/app/modules/project/feature-shell/project-feature-shell.component.ts b/javascript/apps/taiga/src/app/modules/project/feature-shell/project-feature-shell.component.ts
index fe114f866..e2c7e77b4 100644
--- a/javascript/apps/taiga/src/app/modules/project/feature-shell/project-feature-shell.component.ts
+++ b/javascript/apps/taiga/src/app/modules/project/feature-shell/project-feature-shell.component.ts
@@ -278,6 +278,15 @@ export class ProjectFeatureShellComponent implements OnDestroy, AfterViewInit {
         );
       });
 
+    this.wsService
+      .projectEvents<{ workflow: Workflow }>('workflows.update')
+      .pipe(untilDestroyed(this))
+      .subscribe((eventResponse) => {
+        this.store.dispatch(
+          projectEventActions.updateWorkflow(eventResponse.event.content)
+        );
+      });
+
     this.wsService
       .projectEvents<{ story: StoryDetail }>('stories.update')
       .pipe(untilDestroyed(this))
diff --git a/javascript/apps/taiga/src/app/modules/project/story-detail/data-access/+state/effects/story-detail.effects.spec.ts b/javascript/apps/taiga/src/app/modules/project/story-detail/data-access/+state/effects/story-detail.effects.spec.ts
index 324d5a0c2..290715a0c 100644
--- a/javascript/apps/taiga/src/app/modules/project/story-detail/data-access/+state/effects/story-detail.effects.spec.ts
+++ b/javascript/apps/taiga/src/app/modules/project/story-detail/data-access/+state/effects/story-detail.effects.spec.ts
@@ -88,6 +88,7 @@ describe('StoryDetailEffects', () => {
       project.workflows.push(workflow);
 
       story.workflow = {
+        id: workflow.id,
         slug: workflow.slug,
         name: workflow.name,
       };
@@ -119,6 +120,7 @@ describe('StoryDetailEffects', () => {
       const story = StoryDetailMockFactory();
 
       story.workflow = {
+        id: workflow.id,
         slug: storyWorkflow.slug,
         name: storyWorkflow.name,
       };
diff --git a/javascript/apps/taiga/src/app/modules/project/story-detail/data-access/+state/reducers/story-detail.reducer.ts b/javascript/apps/taiga/src/app/modules/project/story-detail/data-access/+state/reducers/story-detail.reducer.ts
index e7a217c35..78e209436 100644
--- a/javascript/apps/taiga/src/app/modules/project/story-detail/data-access/+state/reducers/story-detail.reducer.ts
+++ b/javascript/apps/taiga/src/app/modules/project/story-detail/data-access/+state/reducers/story-detail.reducer.ts
@@ -489,6 +489,21 @@ export const reducer = createImmerReducer(
         return it.id !== attachment.id;
       });
 
+      return state;
+    }
+  ),
+  on(
+    projectEventActions.updateWorkflow,
+    (state, { workflow }): StoryDetailState => {
+      if (state.workflow?.id === workflow.id) {
+        state.workflow.name = workflow.name;
+        state.workflow.slug = workflow.slug;
+      }
+
+      if (state.story?.workflow.id === workflow.id) {
+        state.story.workflow.name = workflow.name;
+        state.story.workflow.slug = workflow.slug;
+      }
       return state;
     }
   )
diff --git a/javascript/libs/data/src/lib/story.model.mock.ts b/javascript/libs/data/src/lib/story.model.mock.ts
index b0a4b4f47..cc03a5d00 100644
--- a/javascript/libs/data/src/lib/story.model.mock.ts
+++ b/javascript/libs/data/src/lib/story.model.mock.ts
@@ -15,6 +15,7 @@ import {
   randSlug,
   randText,
   randUser,
+  randUuid,
 } from '@ngneat/falso';
 import { Status, StatusMockFactory, UserMockFactory } from '..';
 import { Story, StoryDetail } from './story.model';
@@ -66,6 +67,7 @@ export const StoryDetailMockFactory = (
     slug: randSlug(),
     status: statuses[Math.floor(Math.random() * statuses.length)],
     workflow: {
+      id: randUuid(),
       name: randText(),
       slug: randSlug(),
     },
diff --git a/javascript/libs/data/src/lib/story.model.ts b/javascript/libs/data/src/lib/story.model.ts
index f6e164b51..b72144f92 100644
--- a/javascript/libs/data/src/lib/story.model.ts
+++ b/javascript/libs/data/src/lib/story.model.ts
@@ -21,7 +21,7 @@ export interface Story {
 }
 
 export interface StoryDetail extends Story {
-  workflow: Pick<Workflow, 'name' | 'slug'>;
+  workflow: Pick<Workflow, 'id' | 'name' | 'slug'>;
   prev: null | {
     ref: Story['ref'];
     title: Story['title'];