feat(workflow): Design review

javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-workflow/story-detail-workflow.component.ts

@@ -12,22 +12,28 @@ import {
   EventEmitter,
   Input,
   OnChanges,
+  OnInit,
   Output,
   ViewChild,
 } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
 import { TranslocoDirective } from '@ngneat/transloco';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import {
   TuiButtonModule,
   TuiDataListModule,
   TuiHostedDropdownComponent,
   TuiHostedDropdownModule,
+  TuiNotification,
   TuiSvgModule,
 } from '@taiga-ui/core';
-import { StoryDetail, Workflow } from '@taiga/data';
+import { Project, StoryDetail, Workflow } from '@taiga/data';
 import { BreadcrumbComponent } from '@taiga/ui/breadcrumb/breadcrumb.component';
+import { AppService } from '~/app/services/app.service';
+import { WsService } from '~/app/services/ws';
 
+@UntilDestroy()
 @Component({
   selector: 'tg-story-detail-workflow',
   templateUrl: './story-detail-workflow.component.html',
@@ -44,12 +50,12 @@ import { BreadcrumbComponent } from '@taiga/ui/breadcrumb/breadcrumb.component';
     TuiSvgModule,
   ],
 })
-export class StoryDetailWorkflowComponent implements OnChanges {
+export class StoryDetailWorkflowComponent implements OnInit, OnChanges {
   @Input({ required: true })
   public story!: StoryDetail;
 
   @Input({ required: true })
-  public workflows!: Workflow[];
+  public project!: Project;
 
   @Input()
   public canEdit = false;
@@ -63,8 +69,14 @@ export class StoryDetailWorkflowComponent implements OnChanges {
   public openWorkflowList = false;
   public filteredWorkflows: Workflow[] = [];
 
+  constructor(private wsService: WsService, private appService: AppService) {}
+
+  public ngOnInit(): void {
+    this.events();
+  }
+
   public ngOnChanges(): void {
-    this.filteredWorkflows = this.workflows.filter(
+    this.filteredWorkflows = this.project.workflows.filter(
       (workflow) => workflow.slug !== this.story.workflow.slug
     );
   }
@@ -78,4 +90,23 @@ export class StoryDetailWorkflowComponent implements OnChanges {
     this.component?.nativeFocusableElement?.focus();
     this.toWorkflow.emit(workflow);
   }
+
+  public events() {
+    this.wsService
+      .projectEvents<{ story: StoryDetail }>('stories.update')
+      .pipe(untilDestroyed(this))
+      .subscribe((msg) => {
+        const workflowURL = `project/${this.project.id}/${this.project.slug}/kanban/${msg.event.content.story.workflow.slug}`;
+        this.appService.toastNotification({
+          message: 'move.confirm',
+          paramsMessage: {
+            workflowURL,
+            workflowName: msg.event.content.story.workflow.name,
+          },
+          status: TuiNotification.Info,
+          scope: 'story',
+          autoClose: true,
+        });
+      });
+  }
 }

javascript/apps/taiga/src/app/modules/project/story-detail/data-access/+state/actions/story-detail.actions.ts

@@ -36,6 +36,7 @@ export const StoryDetailActions = createActionGroup({
     }>(),
     'Update story workflow': props<{
       story: StoryUpdate;
+      workflow: Workflow;
       projectId: Project['id'];
     }>(),
     'Delete story': props<{

javascript/apps/taiga/src/app/modules/project/story-detail/data-access/+state/effects/story-detail.effects.ts

@@ -177,7 +177,7 @@ export class StoryDetailEffects {
           if (httpResponse.status === 400) {
             this.appService.toastNotification({
               message: 'move.error',
-              paramsMessage: { workflow: action.story.workflow },
+              paramsMessage: { workflow: action.workflow.name },
               status: TuiNotification.Error,
               scope: 'story',
               autoClose: true,

javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.html

@@ -126,7 +126,7 @@
                       <tg-story-detail-workflow
                         *ngIf="vm.story"
                         [story]="vm.story"
-                        [workflows]="vm.project.workflows"
+                        [project]="vm.project"
                         [canEdit]="vm.canEdit"
                         (toWorkflow)="moveStoryToWorkflow($event)">
                       </tg-story-detail-workflow>

javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.ts

@@ -492,6 +492,7 @@ export class StoryDetailComponent {
     this.store.dispatch(
       StoryDetailActions.updateStoryWorkflow({
         projectId: this.state.get('project').id,
+        workflow,
         story,
       })
     );

javascript/apps/taiga/src/assets/i18n/story/en-US.json

@@ -24,7 +24,8 @@
   "empty_description_view_permissions": "This story doesn't have a description yet.",
   "edit_description": "Edit description",
   "move": {
-    "error": "The workflow {{workflow}} does not have any status. Create one and try again."
+    "error": "The workflow {{workflow}} does not have any status. Create one and try again.",
+    "confirm": "The story has been moved to the <a href='{{workflowURL}}'> {{workflowName}} </a> workflow"
   },
   "delete": {
     "delete_story": "Delete Story",