Merge pull request #2206 from DSD-DBS/update-repo-dialog

chore: Update Delete Repo Dialog to use modern Angular Control Flow

frontend/src/app/settings/integrations/pure-variants/pure-variants.component.html

@@ -48,12 +48,7 @@ <h2 class="text-xl font-medium">pure::variants configuration</h2>
         @if (
           configuration?.license_key_filename === undefined || loadingLicenseKey
         ) {
-          <app-form-field-skeleton-loader
-            *ngIf="
-              configuration?.license_key_filename === undefined ||
-              loadingLicenseKey
-            "
-          ></app-form-field-skeleton-loader>
+          <app-form-field-skeleton-loader></app-form-field-skeleton-loader>
         } @else if (configuration?.license_key_filename && !loadingLicenseKey) {
           <div>
             You've uploaded a file with the name '{{

frontend/src/app/settings/modelsources/t4c-settings/t4c-instance-settings/t4c-instance-settings.component.ts

@@ -42,7 +42,6 @@ import { T4CRepoDeletionDialogComponent } from './t4c-repo-deletion-dialog/t4c-r
 @Component({
   selector: 'app-t4c-instance-settings',
   templateUrl: './t4c-instance-settings.component.html',
-  styleUrls: ['./t4c-instance-settings.component.css'],
   imports: [
     MatButton,
     MatIcon,

frontend/src/app/settings/modelsources/t4c-settings/t4c-instance-settings/t4c-repo-deletion-dialog/t4c-repo-deletion-dialog.component.html

@@ -17,27 +17,36 @@ <h1>Remove T4C repository</h1>
   </div>
   Please type in the name of the repository to confirm the deletion: <br />
   <form (submit)="removeRepository()">
-    <mat-form-field appearance="fill">
+    <mat-form-field appearance="fill" class="my-2 w-full">
       <mat-label>Repository name</mat-label>
       <input
         (paste)="(false)"
         matInput
         [formControl]="repositoryNameForm"
         [placeholder]="repo.name"
+        data-testid="delete-repo-input"
       />
-      <mat-error *ngIf="repositoryNameForm.errors?.required">
-        You have to type in the repository name!
-      </mat-error>
-      <mat-error *ngIf="repositoryNameForm.errors?.repositoryNameMatchFailed">
-        The repository name doesn't match the repository you'd like to delete!
-      </mat-error>
+      @if (repositoryNameForm.errors?.required) {
+        <mat-error> You have to type in the repository name! </mat-error>
+      }
+
+      @if (repositoryNameForm.errors?.repositoryNameMatchFailed) {
+        <mat-error>
+          The repository name doesn't match the repository you'd like to delete!
+        </mat-error>
+      }
     </mat-form-field>
 
     <div class="flex justify-between">
       <button type="button" mat-button (click)="this.dialogRef.close(false)">
         Cancel
       </button>
-      <button mat-flat-button type="submit" color="warn">
+      <button
+        [disabled]="!repositoryNameForm.valid"
+        mat-flat-button
+        type="submit"
+        color="warn"
+      >
         Remove the repository
       </button>
     </div>

frontend/src/app/settings/modelsources/t4c-settings/t4c-instance-settings/t4c-repo-deletion-dialog/t4c-repo-deletion-dialog.component.ts

@@ -2,7 +2,6 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NgIf } from '@angular/common';
 import { Component, Inject } from '@angular/core';
 import {
   AbstractControl,
@@ -26,14 +25,12 @@ import {
 @Component({
   selector: 't4c-repo-deletion-dialog-dialog',
   templateUrl: './t4c-repo-deletion-dialog.component.html',
-  styleUrls: ['./t4c-repo-deletion-dialog.component.css'],
   imports: [
     FormsModule,
     MatFormField,
     MatLabel,
     MatInput,
     ReactiveFormsModule,
-    NgIf,
     MatError,
     MatButton,
   ],

frontend/src/app/settings/modelsources/t4c-settings/t4c-instance-settings/t4c-repo-deletion-dialog/t4c-repo-deletion-dialog.stories.ts

@@ -0,0 +1,91 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { userEvent, within } from '@storybook/test';
+import { dialogWrapper } from 'src/storybook/decorators';
+import { mockSimpleToolModel } from '../../../../../../storybook/model';
+import {
+  mockT4CInstance,
+  mockT4CRepositoryWrapperServiceProvider,
+} from '../../../../../../storybook/t4c';
+import { T4CRepoDeletionDialogComponent } from './t4c-repo-deletion-dialog.component';
+
+const meta: Meta<T4CRepoDeletionDialogComponent> = {
+  title: 'Settings Components/Modelsources/T4C/Delete Repo Dialog',
+  component: T4CRepoDeletionDialogComponent,
+  decorators: [
+    moduleMetadata({
+      providers: [
+        mockT4CRepositoryWrapperServiceProvider([
+          {
+            id: 1,
+            name: 'test-repo',
+            instance: mockT4CInstance,
+            status: 'ONLINE',
+            integrations: [
+              {
+                id: 1,
+                name: 'mockModel',
+                model: mockSimpleToolModel,
+              },
+              {
+                id: 2,
+                name: 'mockModel 2',
+                model: mockSimpleToolModel,
+              },
+            ],
+          },
+        ]),
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {
+            id: 1,
+            name: 'test-repo',
+            instance: mockT4CInstance,
+            integrations: [
+              {
+                id: 1,
+                name: 'mockModel',
+                model: mockSimpleToolModel,
+              },
+              {
+                id: 2,
+                name: 'mockModel 2',
+                model: mockSimpleToolModel,
+              },
+            ],
+          },
+        },
+      ],
+    }),
+    dialogWrapper,
+  ],
+};
+
+export default meta;
+type Story = StoryObj<T4CRepoDeletionDialogComponent>;
+
+export const Empty: Story = {
+  args: {},
+};
+
+export const InvalidContent: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const deleteRepoInput = canvas.getByTestId('delete-repo-input');
+    await userEvent.type(deleteRepoInput, 'invalid-text');
+  },
+};
+
+export const ValidContent: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const deleteRepoInput = canvas.getByTestId('delete-repo-input');
+    await userEvent.type(deleteRepoInput, 'test-repo');
+  },
+};