From b423696f2b2f37512a9d87d681c7e095b5889f09 Mon Sep 17 00:00:00 2001
From: Xaviju <xaviju@gmail.com>
Date: Fri, 29 Sep 2023 14:29:08 +0200
Subject: [PATCH] feat(workflows): ui review

---
 .../kanban-header.component.html              |  7 +-
 .../project-feature-kanban.component.css      |  1 -
 .../project-navigation-menu.component.css     |  4 +-
 .../project-feature-navigation.component.html |  1 -
 .../project-feature-navigation.component.ts   |  8 +-
 .../project-feature-new-workflow.component.ts | 39 +++++++-
 .../project-feature-shell-routing.module.ts   | 98 ++++++++-----------
 .../lib/breadcrumb/breadcrumb.component.css   |  7 +-
 .../lib/breadcrumb/breadcrumb.component.html  |  7 +-
 9 files changed, 99 insertions(+), 73 deletions(-)

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 ecd18cb3a..1a7b2704c 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
@@ -21,7 +21,12 @@
   <tg-ui-breadcrumb
     *ngIf="workflows.length > 1"
     [hideLastCrumb]="editStatusFormOpened"
-    [crumbs]="[t('commons.kanban'), t('kanban.workflows'), workflow.name]"
+    [crumbs]="[
+      t('commons.kanban'),
+      t('kanban.workflows').charAt(0).toLocaleUpperCase() +
+        t('kanban.workflows').slice(1),
+      workflow.name
+    ]"
     [accent]="true">
   </tg-ui-breadcrumb>
 
diff --git a/javascript/apps/taiga/src/app/modules/project/feature-kanban/project-feature-kanban.component.css b/javascript/apps/taiga/src/app/modules/project/feature-kanban/project-feature-kanban.component.css
index f185acf29..28573a62f 100644
--- a/javascript/apps/taiga/src/app/modules/project/feature-kanban/project-feature-kanban.component.css
+++ b/javascript/apps/taiga/src/app/modules/project/feature-kanban/project-feature-kanban.component.css
@@ -38,6 +38,5 @@ Copyright (c) 2023-present Kaleidos INC
 }
 
 tg-kanban-header {
-  margin-block-end: var(--spacing-20);
   min-block-size: var(--spacing-40);
 }
diff --git a/javascript/apps/taiga/src/app/modules/project/feature-navigation/components/project-navigation-menu/project-navigation-menu.component.css b/javascript/apps/taiga/src/app/modules/project/feature-navigation/components/project-navigation-menu/project-navigation-menu.component.css
index 528d1688a..bfabcb00f 100644
--- a/javascript/apps/taiga/src/app/modules/project/feature-navigation/components/project-navigation-menu/project-navigation-menu.component.css
+++ b/javascript/apps/taiga/src/app/modules/project/feature-navigation/components/project-navigation-menu/project-navigation-menu.component.css
@@ -192,7 +192,6 @@ ul {
   margin-block: 0;
   margin-inline-end: var(--spacing-8);
   margin-inline-start: var(--spacing-16);
-  padding-block: var(--spacing-4);
   padding-inline-start: var(--spacing-8);
 }
 
@@ -201,8 +200,9 @@ ul {
   @mixin ellipsis;
 
   block-size: var(--spacing-28);
-  display: inline-block;
+  display: flex;
   inline-size: 100%;
+  padding-block: 0;
 
   &:hover {
     background: var(--color-gray90);
diff --git a/javascript/apps/taiga/src/app/modules/project/feature-navigation/project-feature-navigation.component.html b/javascript/apps/taiga/src/app/modules/project/feature-navigation/project-feature-navigation.component.html
index e3c6b5f32..a708bf20d 100644
--- a/javascript/apps/taiga/src/app/modules/project/feature-navigation/project-feature-navigation.component.html
+++ b/javascript/apps/taiga/src/app/modules/project/feature-navigation/project-feature-navigation.component.html
@@ -10,7 +10,6 @@
     [@mainNavContainer]="menuState"
     class="main-nav-container-inner">
     <!-- visibility: hidden prevent focus in the project menu when the setting menu is visible -->
-
     <tg-project-navigation-menu
       [collapsed]="collapsed"
       [class.collapsed]="collapsed"
diff --git a/javascript/apps/taiga/src/app/modules/project/feature-navigation/project-feature-navigation.component.ts b/javascript/apps/taiga/src/app/modules/project/feature-navigation/project-feature-navigation.component.ts
index 344afa361..da8005588 100644
--- a/javascript/apps/taiga/src/app/modules/project/feature-navigation/project-feature-navigation.component.ts
+++ b/javascript/apps/taiga/src/app/modules/project/feature-navigation/project-feature-navigation.component.ts
@@ -16,18 +16,20 @@ import {
   transition,
   trigger,
 } from '@angular/animations';
+import { CommonModule } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
   Component,
+  DestroyRef,
   ElementRef,
   HostBinding,
   HostListener,
   inject,
   Input,
   OnInit,
-  DestroyRef,
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   ActivatedRoute,
   ActivatedRouteSnapshot,
@@ -37,10 +39,8 @@ import { RxState } from '@rx-angular/state';
 import { Project } from '@taiga/data';
 import { Subject } from 'rxjs';
 import { LocalStorageService } from '~/app/shared/local-storage/local-storage.service';
-import { ProjectNavigationSettingsComponent } from './components/project-navigation-settings/project-navigation-settings.component';
-import { CommonModule } from '@angular/common';
 import { ProjectNavigationMenuComponent } from './components/project-navigation-menu/project-navigation-menu.component';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ProjectNavigationSettingsComponent } from './components/project-navigation-settings/project-navigation-settings.component';
 
 const collapseMenuAnimation = '200ms ease-out';
 const openMenuAnimation = '200ms ease-in';
diff --git a/javascript/apps/taiga/src/app/modules/project/feature-new-workflow/project-feature-new-workflow.component.ts b/javascript/apps/taiga/src/app/modules/project/feature-new-workflow/project-feature-new-workflow.component.ts
index 4c7b80486..98f672a24 100644
--- a/javascript/apps/taiga/src/app/modules/project/feature-new-workflow/project-feature-new-workflow.component.ts
+++ b/javascript/apps/taiga/src/app/modules/project/feature-new-workflow/project-feature-new-workflow.component.ts
@@ -12,7 +12,10 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Actions, ofType } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import { RxState } from '@rx-angular/state';
-import { Project, Workflow } from '@taiga/data';
+import { TuiNotification } from '@taiga-ui/core';
+import { Membership, Project, Workflow } from '@taiga/data';
+import { AppService } from '~/app/services/app.service';
+import { WsService } from '~/app/services/ws';
 import { RouteHistoryService } from '~/app/shared/route-history/route-history.service';
 import { filterNil } from '~/app/shared/utils/operators';
 import {
@@ -39,7 +42,9 @@ export class ProjectFeatureNewWorkflowComponent {
     private store: Store,
     private router: Router,
     private actions$: Actions,
-    private routeHistoryService: RouteHistoryService
+    private routeHistoryService: RouteHistoryService,
+    private wsService: WsService,
+    private appService: AppService
   ) {
     this.state.connect(
       'project',
@@ -50,6 +55,8 @@ export class ProjectFeatureNewWorkflowComponent {
       .subscribe(() => {
         this.cancelCreateWorkflow();
       });
+
+    this.events();
   }
 
   public createWorkflow(workflow: Workflow['name']) {
@@ -71,4 +78,32 @@ export class ProjectFeatureNewWorkflowComponent {
       ? [previousUrl]
       : [`/project/${project.id}${project.slug}/overview`];
   }
+
+  public events() {
+    this.wsService
+      .userEvents<{ membership: Membership }>('projectmemberships.update')
+      .pipe(untilDestroyed(this))
+      .subscribe((eventResponse) => {
+        const response = eventResponse.event.content;
+        if (!response.membership.role.isAdmin) {
+          this.userLoseAdminRole();
+        }
+      });
+  }
+
+  public userLoseAdminRole() {
+    this.appService.toastNotification({
+      message: 'errors.admin_permission',
+      paramsMessage: {
+        project: this.state.get('project').name,
+      },
+      status: TuiNotification.Warning,
+      closeOnNavigation: false,
+    });
+    void this.router.navigate([
+      `/project/${this.state.get('project').id}/${
+        this.state.get('project').slug
+      }/overview`,
+    ]);
+  }
 }
diff --git a/javascript/apps/taiga/src/app/modules/project/feature-shell/project-feature-shell-routing.module.ts b/javascript/apps/taiga/src/app/modules/project/feature-shell/project-feature-shell-routing.module.ts
index 5236a4f4d..60250c240 100644
--- a/javascript/apps/taiga/src/app/modules/project/feature-shell/project-feature-shell-routing.module.ts
+++ b/javascript/apps/taiga/src/app/modules/project/feature-shell/project-feature-shell-routing.module.ts
@@ -21,63 +21,15 @@ const routes: Routes = [
       project: ProjectFeatureShellResolverService,
     },
     children: [
-      {
-        path: '',
-        loadChildren: () =>
-          import(
-            '~/app/modules/project/feature-overview/project-feature-overview.module'
-          ).then((m) => m.ProjectFeatureOverviewModule),
-      },
-      {
-        path: 'overview',
-        loadChildren: () =>
-          import(
-            '~/app/modules/project/feature-overview/project-feature-overview.module'
-          ).then((m) => m.ProjectFeatureOverviewModule),
-        data: {
-          overview: true,
-        },
-      },
-      {
-        path: ':slug/overview',
-        loadChildren: () =>
-          import(
-            '~/app/modules/project/feature-overview/project-feature-overview.module'
-          ).then((m) => m.ProjectFeatureOverviewModule),
-        data: {
-          overview: true,
-        },
-      },
-      {
-        path: 'kanban',
-        loadChildren: () =>
-          import(
-            '~/app/modules/project/feature-view-setter/project-feature-view-setter.module'
-          ).then((m) => m.ProjectFeatureViewSetterModule),
-        canDeactivate: [CanDeactivateGuard],
-      },
-      {
-        path: ':slug',
-        loadChildren: () =>
-          import(
-            '~/app/modules/project/feature-overview/project-feature-overview.module'
-          ).then((m) => m.ProjectFeatureOverviewModule),
-      },
       {
         path: ':slug/kanban',
         redirectTo: ':slug/kanban/main',
         pathMatch: 'full',
       },
       {
-        path: ':slug/new-workflow',
-        loadChildren: () =>
-          import(
-            '~/app/modules/project/feature-new-workflow/project-feature-new-workflow.module'
-          ).then((m) => m.ProjectFeatureNewWorkflowModule),
-        canDeactivate: [CanDeactivateGuard],
-        data: {
-          newKanban: true,
-        },
+        path: 'kanban',
+        redirectTo: '/kanban/main',
+        pathMatch: 'full',
       },
       {
         path: ':slug/kanban/:workflow',
@@ -88,22 +40,21 @@ const routes: Routes = [
         canDeactivate: [CanDeactivateGuard],
         data: {
           kanban: true,
-          reuseComponent: false,
         },
       },
       {
-        path: 'stories/:storyRef',
+        path: ':slug/stories/:storyRef',
         loadChildren: () =>
           import(
             '~/app/modules/project/feature-view-setter/project-feature-view-setter.module'
           ).then((m) => m.ProjectFeatureViewSetterModule),
         canDeactivate: [CanDeactivateGuard],
         data: {
-          kanban: true,
+          stories: true,
         },
       },
       {
-        path: ':slug/stories/:storyRef',
+        path: 'stories/:storyRef',
         loadChildren: () =>
           import(
             '~/app/modules/project/feature-view-setter/project-feature-view-setter.module'
@@ -114,7 +65,7 @@ const routes: Routes = [
         },
       },
       {
-        path: 'settings',
+        path: ':slug/settings',
         loadChildren: () =>
           import(
             '~/app/modules/project/settings/feature-settings/feature-settings.module'
@@ -127,7 +78,7 @@ const routes: Routes = [
         },
       },
       {
-        path: ':slug/settings',
+        path: 'settings',
         loadChildren: () =>
           import(
             '~/app/modules/project/settings/feature-settings/feature-settings.module'
@@ -139,6 +90,39 @@ const routes: Routes = [
           project: ProjectAdminResolver,
         },
       },
+      {
+        path: 'overview',
+        loadChildren: () =>
+          import(
+            '~/app/modules/project/feature-overview/project-feature-overview.module'
+          ).then((m) => m.ProjectFeatureOverviewModule),
+        data: {
+          overview: true,
+        },
+      },
+      {
+        path: ':slug/overview',
+        loadChildren: () =>
+          import(
+            '~/app/modules/project/feature-overview/project-feature-overview.module'
+          ).then((m) => m.ProjectFeatureOverviewModule),
+        data: {
+          overview: true,
+        },
+      },
+      {
+        path: ':slug/new-workflow',
+        loadChildren: () =>
+          import(
+            '~/app/modules/project/feature-new-workflow/project-feature-new-workflow.module'
+          ).then((m) => m.ProjectFeatureNewWorkflowModule),
+        resolve: {
+          project: ProjectAdminResolver,
+        },
+        data: {
+          newKanban: true,
+        },
+      },
     ],
   },
 ];
diff --git a/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.css b/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.css
index c795988de..876f0b064 100644
--- a/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.css
+++ b/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.css
@@ -16,7 +16,12 @@ Copyright (c) 2023-present Kaleidos INC
 }
 
 .crumb {
-  padding: var(--spacing4);
+  padding: var(--spacing-4);
+}
+
+.crumb-divider {
+  block-size: var(--spacing-8);
+  inline-size: var(--spacing-8);
 }
 
 .accent {
diff --git a/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.html b/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.html
index ec5af3b7f..ae7565606 100644
--- a/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.html
+++ b/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.html
@@ -27,11 +27,10 @@
         [class.accent]="isLast && accent">
         {{ crumb }}
       </span>
-      <span
+      <tui-svg
         class="crumb-divider"
-        *ngIf="!(hideLastCrumb && i === crumbs.length - 2) && !isLast">
-        &gt;
-      </span>
+        *ngIf="!(hideLastCrumb && i === crumbs.length - 2) && !isLast"
+        src="chevron-right"></tui-svg>
     </ng-container>
   </ng-container>
   <ng-container *ngIf="type === 'collapsed'">