Merge pull request #1562 from DSD-DBS/more-stories

test: Add Stories for file browser and trigger pipeline dialog

frontend/.storybook/preview.ts

@@ -13,6 +13,8 @@ import { ToastrModule } from 'ngx-toastr';
 import { RouterModule } from '@angular/router';
 import { CookieModule } from 'ngx-cookie';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatDialogRef } from '@angular/material/dialog';
+import { DialogRef } from '@angular/cdk/dialog';
 
 setCompodocJson(docJson);
 
@@ -44,6 +46,8 @@ const preview: Preview = {
           RouterModule.forRoot([]),
         ),
         importProvidersFrom(BrowserAnimationsModule),
+        { provide: MatDialogRef, useValue: {} },
+        { provide: DialogRef, useValue: {} },
       ],
     }),
   ],

frontend/src/app/projects/models/backup-settings/trigger-pipeline/trigger-pipeline.docs.mdx

@@ -0,0 +1,56 @@
+{/*
+    SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+    SPDX-License-Identifier: Apache-2.0
+*/}
+
+import * as TriggerPipelineComponent from './trigger-pipeline.stories.ts'
+import { Meta, Title, Story, Canvas, Unstyled } from '@storybook/blocks'
+
+<Meta of={TriggerPipelineComponent} />
+
+<Title />
+
+The `TriggerPipeline` component is used to trigger and manage pipelines for a project.
+Pipelines are used to synchronize TeamForCapella models to Git.
+
+When no pipeline is configured, a message is displayed:
+
+<Unstyled>
+  <div style={{ width: '600px' }}>
+    <Story of={TriggerPipelineComponent.NoPipelineFound} />
+  </div>
+</Unstyled>
+
+
+While the pipelines are loading, they are not displayed:
+
+<Unstyled>
+  <div style={{ width: '600px' }}>
+    <Story of={TriggerPipelineComponent.LoadingPipelines} />
+  </div>
+</Unstyled>
+
+When the pipelines are loaded, an overview of all pipelines is displayed:
+
+<Unstyled>
+  <div style={{ width: '670px' }}>
+    <Story of={TriggerPipelineComponent.PipelineOverview} />
+  </div>
+</Unstyled>
+
+The user can select a pipeline to see more details and actions:
+
+<Unstyled>
+  <div style={{ width: '800px' }}>
+    <Story of={TriggerPipelineComponent.OnePipelineSelected} />
+  </div>
+</Unstyled>
+
+Pipelines can only be deleted when the TeamForCapella server is reachable.
+Administrators can also force-delete a pipeline when the T4C server is not running:
+
+<Unstyled>
+  <div style={{ width: '800px' }}>
+    <Story of={TriggerPipelineComponent.ForcePipelineDeletion} />
+  </div>
+</Unstyled>

frontend/src/app/projects/models/backup-settings/trigger-pipeline/trigger-pipeline.stories.ts

@@ -0,0 +1,128 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { Observable, of } from 'rxjs';
+import {
+  Pipeline,
+  PipelineService,
+} from 'src/app/projects/models/backup-settings/service/pipeline.service';
+import { TriggerPipelineComponent } from 'src/app/projects/models/backup-settings/trigger-pipeline/trigger-pipeline.component';
+import { UserService } from 'src/app/services/user/user.service';
+import { dialogWrapper } from 'src/storybook/decorators';
+import { mockPrimaryGitModel } from 'src/storybook/git';
+import { mockTeamForCapellaRepository } from 'src/storybook/t4c';
+import { MockUserService } from 'src/storybook/user';
+
+const meta: Meta<TriggerPipelineComponent> = {
+  title: 'Pipeline Components / Trigger Pipeline',
+  component: TriggerPipelineComponent,
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: { projectSlug: 'test', modelSlug: 'test' },
+        },
+      ],
+    }),
+    dialogWrapper,
+  ],
+};
+
+export default meta;
+type Story = StoryObj<TriggerPipelineComponent>;
+
+class MockPipelineService implements Partial<PipelineService> {
+  public readonly pipelines$: Observable<Pipeline[] | undefined> =
+    of(undefined);
+
+  constructor(pipelines?: Pipeline[] | undefined) {
+    this.pipelines$ = of(pipelines);
+  }
+}
+
+export const NoPipelineFound: Story = {
+  args: {},
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: PipelineService,
+          useFactory: () => new MockPipelineService([]),
+        },
+      ],
+    }),
+  ],
+};
+
+export const LoadingPipelines: Story = {
+  args: {},
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: PipelineService,
+          useFactory: () => new MockPipelineService(undefined),
+        },
+      ],
+    }),
+  ],
+};
+
+const pipeline = {
+  id: 1,
+  t4c_model: mockTeamForCapellaRepository,
+  git_model: mockPrimaryGitModel,
+  run_nightly: false,
+  include_commit_history: false,
+};
+
+export const PipelineOverview: Story = {
+  args: {},
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: PipelineService,
+          useFactory: () => new MockPipelineService([pipeline, pipeline]),
+        },
+      ],
+    }),
+  ],
+};
+
+export const OnePipelineSelected: Story = {
+  args: { selectedPipeline: pipeline },
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: PipelineService,
+          useFactory: () => new MockPipelineService([pipeline]),
+        },
+      ],
+    }),
+  ],
+};
+
+export const ForcePipelineDeletion: Story = {
+  args: { selectedPipeline: pipeline },
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: PipelineService,
+          useFactory: () => new MockPipelineService([pipeline]),
+        },
+        {
+          provide: UserService,
+          useFactory: () => new MockUserService('administrator'),
+        },
+      ],
+    }),
+  ],
+};

frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.stories.ts

@@ -3,8 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { dialogWrapper } from 'src/storybook/decorators';
 import { base64ModelDiagram } from 'src/storybook/diagram';
 import { mockModel } from 'src/storybook/model';
 import { mockProject } from 'src/storybook/project';
@@ -24,9 +25,9 @@ const meta: Meta<ModelDiagramDialogComponent> = {
           provide: MAT_DIALOG_DATA,
           useValue: { model: mockModel, project: mockProject },
         },
-        { provide: MatDialogRef, useValue: {} },
       ],
     }),
+    dialogWrapper,
   ],
 };
 

frontend/src/app/sessions/user-sessions-wrapper/active-sessions/file-browser-dialog/file-browser-dialog.docs.mdx

@@ -0,0 +1,67 @@
+{/*
+    SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+    SPDX-License-Identifier: Apache-2.0
+*/}
+
+import * as FileBrowserDialog from './file-browser-dialog.stories.ts'
+import { Meta, Title, Story, Canvas, Unstyled } from '@storybook/blocks'
+
+<Meta of={FileBrowserDialog} />
+
+<Title />
+
+The file explorer allows users to browse, download and upload files from their workspace.
+
+While the files are loading, a progress bar is displayed:
+
+<Unstyled>
+  <div style={{ width: '400px' }}>
+    <Story of={FileBrowserDialog.LoadingFiles} />
+  </div>
+</Unstyled>
+
+When the files are loaded, a tree is displayed.
+Users can expand directories by clicking on the folder icon.
+
+<Unstyled>
+  <div style={{ width: '400px' }}>
+    <Story of={FileBrowserDialog.Files} />
+  </div>
+</Unstyled>
+
+## Uploads
+
+When uploading a file, the upload button on the specific directory has to be selected.
+The file is then staged for upload. In this story, expand the workspace directory to see the staged file1.
+
+<Unstyled>
+  <div style={{ width: '400px' }}>
+    <Story of={FileBrowserDialog.UploadNewFile} />
+  </div>
+</Unstyled>
+
+When the upload is confirmed with the Submit button, it's uploaded to the server:
+
+<Unstyled>
+  <div style={{ width: '400px' }}>
+    <Story of={FileBrowserDialog.UploadInProgress} />
+  </div>
+</Unstyled>
+
+When the upload is finished, it's processed by the backend:
+
+<Unstyled>
+  <div style={{ width: '400px' }}>
+    <Story of={FileBrowserDialog.UploadProcessedByBackend} />
+  </div>
+</Unstyled>
+
+## Downloads
+
+When downloading a directory, the download button on the specific directory has to be selected.
+The file is then downloaded:
+<Unstyled>
+  <div style={{ width: '400px' }}>
+    <Story of={FileBrowserDialog.DownloadPreparation} />
+  </div>
+</Unstyled>