feat(workflows): create workflow page

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

@@ -16,6 +16,7 @@ import {
   StoryDetail,
   User,
   UserComment,
+  Workflow,
 } from '@taiga/data';
 import { DropCandidate } from '@taiga/ui/drag/drag.model';
 
@@ -67,6 +68,14 @@ export const updateStoryShowView = createAction(
   }>()
 );
 
+export const createWorkflow = createAction(
+  '[Project] Create Workflow',
+  props<{
+    project: Project;
+    name: Workflow['name'];
+  }>
+);
+
 export const newProjectMembers = createAction(
   '[Project][ws] New Project Members'
 );

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

@@ -20,6 +20,7 @@ export const KanbanActions = createActionGroup({
   source: 'Kanban',
   events: {
     'Init Kanban': props<{ workflow: Workflow['slug'] }>(),
+    'Load Workflow kanban': props<{ workflow: Workflow['slug'] }>(),
     'Open Create Story form': props<{ status: Status['id'] }>(),
     'Close Create Story form': emptyProps(),
     'Create Story': props<{

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

@@ -44,7 +44,7 @@ import {
 export class KanbanEffects {
   public loadKanbanWorkflows$ = createEffect(() => {
     return this.actions$.pipe(
-      ofType(KanbanActions.initKanban),
+      ofType(KanbanActions.initKanban, KanbanActions.loadWorkflowKanban),
       concatLatestFrom(() => [
         this.store.select(selectCurrentProject).pipe(filterNil()),
       ]),
@@ -67,7 +67,7 @@ export class KanbanEffects {
 
   public loadKanbanStories$ = createEffect(() => {
     return this.actions$.pipe(
-      ofType(KanbanActions.initKanban),
+      ofType(KanbanActions.initKanban, KanbanActions.loadWorkflowKanban),
       concatLatestFrom(() => [
         this.store.select(selectCurrentProject).pipe(filterNil()),
         this.store.select(selectWorkflow),

javascript/apps/taiga/src/app/modules/project/feature-kanban/project-feature-kanban.component.ts

@@ -30,7 +30,16 @@ import {
   WorkflowStatus,
 } from '@taiga/data';
 import { ModalComponent } from '@taiga/ui/modal/components';
-import { combineLatest, filter, map, merge, pairwise, take } from 'rxjs';
+import {
+  combineLatest,
+  distinctUntilChanged,
+  filter,
+  map,
+  merge,
+  pairwise,
+  skip,
+  take,
+} from 'rxjs';
 import * as ProjectActions from '~/app/modules/project/data-access/+state/actions/project.actions';
 import {
   selectCurrentProject,
@@ -134,16 +143,22 @@ export class ProjectFeatureKanbanComponent {
       return;
     }
 
-    this.route.paramMap.subscribe((params) => {
-      const workflowSlug = params.get('workflow') ?? 'main';
-      this.store.dispatch(KanbanActions.initKanban({ workflow: workflowSlug }));
-    });
-
     // Load on init kanban page. Not on every reload
-    // const workflowSlug = this.route.snapshot.params['workflow'];
-    // this.store.dispatch(
-    //   KanbanActions.initKanban({ workflow: workflowSlug })
-    // );
+    const workflow: Workflow['slug'] =
+      (this.route.snapshot.params['workflow'] as Workflow['slug']) ?? 'main';
+    this.store.dispatch(KanbanActions.initKanban({ workflow }));
+
+    this.route.paramMap
+      .pipe(
+        map((params) => {
+          return params.get('workflow') ?? 'main';
+        }),
+        distinctUntilChanged(),
+        skip(1)
+      )
+      .subscribe((workflow: Workflow['slug']) => {
+        this.store.dispatch(KanbanActions.loadWorkflowKanban({ workflow }));
+      });
 
     this.checkInviteModalStatus();
     this.state.connect(

javascript/apps/taiga/src/app/modules/project/feature-navigation/components/project-navigation-menu/project-navigation-menu.component.html

@@ -394,7 +394,8 @@
     </div>
   </div>
   <ng-template #createWorkflowButtonTpl>
-    <button
+    <a
+      [routerLink]="['/project', project.id, project.slug, 'new-kanban']"
       *ngIf="project.userIsAdmin"
       class="create-workflow"
       size="m"
@@ -406,7 +407,6 @@
       (pointerenter)="activeSection = true"
       (pointerleave)="activeSection = false"
       tuiIconButton
-      icon="plus"
-      (click)="createWorkflow()"></button>
+      icon="plus"></a>
   </ng-template>
 </ng-container>

javascript/apps/taiga/src/app/modules/project/feature-navigation/components/project-navigation-menu/project-navigation-menu.component.ts

@@ -213,10 +213,6 @@ export class ProjectNavigationMenuComponent {
     this.dialog.type = '';
   }
 
-  public createWorkflow() {
-    console.log('create workflow');
-  }
-
   public trackById(_index: number, workflow: Workflow) {
     return workflow.id;
   }

javascript/apps/taiga/src/app/modules/project/feature-new-kanban/project-feature-new-kanban-routing.module.ts

@@ -0,0 +1,21 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) 2023-present Kaleidos INC
+ */
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ProjectFeatureNewKanbanComponent } from './project-feature-new-kanban.component';
+
+const routes: Routes = [
+  { path: '', component: ProjectFeatureNewKanbanComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ProjectFeatureNewKanbanRoutingModule {}

javascript/apps/taiga/src/app/modules/project/feature-new-kanban/project-feature-new-kanban.component.css

@@ -0,0 +1,7 @@
+/*
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+Copyright (c) 2023-present Kaleidos INC
+*/

javascript/apps/taiga/src/app/modules/project/feature-new-kanban/project-feature-new-kanban.component.html

@@ -0,0 +1,9 @@
+<!--
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+Copyright (c) 2023-present Kaleidos INC
+-->
+
+<div>New Kanban Works!</div>

javascript/apps/taiga/src/app/modules/project/feature-new-kanban/project-feature-new-kanban.component.spec.ts

@@ -0,0 +1,63 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) 2023-present Kaleidos INC
+ */
+
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { Spectator, createComponentFactory } from '@ngneat/spectator/jest';
+import { getTranslocoModule } from '~/app/transloco/transloco-testing.module';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
+import { ProjectFeatureNewKanbanComponent } from './project-feature-new-kanban.component';
+
+import { selectorExample } from './+state/selectors/project-feature-new-kanban.selectors';
+
+describe('ProjectFeatureNewKanbanComponent', () => {
+  let spectator: Spectator<ProjectFeatureNewKanbanComponent>;
+  let store: MockStore;
+
+  const createComponent = createComponentFactory({
+    component: ProjectFeatureNewKanbanComponent,
+    imports: [getTranslocoModule()],
+    schemas: [NO_ERRORS_SCHEMA],
+    mocks: [],
+  });
+
+  const initialState = { loggedIn: false };
+
+  beforeEach(() => {
+    spectator = createComponent({
+      // The component inputs
+      props: {
+        name: 'example',
+      },
+      // Override the component's providers
+      providers: [provideMockStore({ initialState })],
+      // Whether to run change detection (defaults to true)
+      detectChanges: false,
+    });
+
+    store = spectator.inject(MockStore);
+  });
+
+  it('example', () => {
+    // change ngrx state
+    store.setState({ loggedIn: true });
+
+    // mock selector
+    store.overrideSelector(selectorExample, {
+      id: 1,
+      name: 'test',
+    });
+
+    // trigger emission from all selectors
+    store.refreshState();
+
+    spectator.detectChanges();
+
+    // This test checks that the input attribute name becomes a class in the component structure
+    expect(spectator.query('div')).toHaveClass('example');
+  });
+});

javascript/apps/taiga/src/app/modules/project/feature-new-kanban/project-feature-new-kanban.component.ts

@@ -0,0 +1,22 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) 2023-present Kaleidos INC
+ */
+
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'tg-project-feature-new-kanban',
+  templateUrl: './project-feature-new-kanban.component.html',
+  styleUrls: ['./project-feature-new-kanban.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+})
+export class ProjectFeatureNewKanbanComponent implements OnInit {
+  public ngOnInit(): void {
+    console.log('ProjectFeatureNewKanbanComponent works!');
+  }
+}

javascript/apps/taiga/src/app/modules/project/feature-new-kanban/project-feature-new-kanban.module.ts

@@ -0,0 +1,19 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) 2023-present Kaleidos INC
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ProjectFeatureNewKanbanRoutingModule } from './project-feature-new-kanban-routing.module';
+
+@NgModule({
+  imports: [CommonModule, ProjectFeatureNewKanbanRoutingModule],
+  declarations: [],
+  providers: [],
+  exports: [],
+})
+export class ProjectFeatureNewKanbanModule {}

javascript/apps/taiga/src/app/modules/project/feature-shell/project-feature-shell-routing.module.ts

@@ -28,6 +28,26 @@ const routes: Routes = [
             '~/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: () =>
@@ -48,6 +68,17 @@ const routes: Routes = [
         redirectTo: ':slug/kanban/main',
         pathMatch: 'full',
       },
+      {
+        path: ':slug/new-kanban',
+        loadChildren: () =>
+          import(
+            '~/app/modules/project/feature-new-kanban/project-feature-new-kanban.module'
+          ).then((m) => m.ProjectFeatureNewKanbanModule),
+        canDeactivate: [CanDeactivateGuard],
+        data: {
+          newKanban: true,
+        },
+      },
       {
         path: ':slug/kanban/:workflow',
         loadChildren: () =>

javascript/apps/taiga/src/app/modules/project/feature-shell/project-feature-shell.component.ts

@@ -15,15 +15,15 @@ import {
   OnDestroy,
 } from '@angular/core';
 import {
-  Router,
-  RouterOutlet,
   ActivatedRoute,
   ActivatedRouteSnapshot,
+  Router,
+  RouterOutlet,
 } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Store } from '@ngrx/store';
 import { RxState } from '@rx-angular/state';
-import { TuiNotification, TuiButtonModule } from '@taiga-ui/core';
+import { TuiButtonModule, TuiNotification } from '@taiga-ui/core';
 import {
   Attachment,
   Membership,
@@ -54,9 +54,9 @@ import {
 } from '../data-access/+state/actions/project.actions';
 import { setNotificationClosed } from '../feature-overview/data-access/+state/actions/project-overview.actions';
 
-import { ProjectNavigationComponent } from '../feature-navigation/project-feature-navigation.component';
 import { TranslocoDirective } from '@ngneat/transloco';
 import { ContextNotificationComponent } from '@taiga/ui/context-notification/context-notification.component';
+import { ProjectNavigationComponent } from '../feature-navigation/project-feature-navigation.component';
 
 @UntilDestroy()
 @Component({
@@ -153,12 +153,18 @@ export class ProjectFeatureShellComponent implements OnDestroy, AfterViewInit {
           active.routeConfig?.component?.name ===
             'ProjectFeatureOverviewComponent';
         const isSettings = !!active.data.settings;
+        const isNewKanban = !!active.data.newKanban;
 
         if (isKanban) {
           void this.router.navigate(
             [`project/${project.id}/${project.slug}/kanban`],
             { replaceUrl: true }
           );
+        } else if (isNewKanban) {
+          void this.router.navigate(
+            [`project/${project.id}/${project.slug}/new-kanban`],
+            { replaceUrl: true }
+          );
         } else if (isOverview) {
           void this.router.navigate(
             [`project/${project.id}/${project.slug}/overview`],