From 4009f365f51cbe382cbd44bb9ca574f721dfcd5c Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Tue, 10 Sep 2024 15:22:08 +0200 Subject: [PATCH] fix: Broken loading animation of model sources The model sources view which lists Git and T4C repositories had a broken loading animation. Also, some UI elements were refreshed. A new star indicates a primary Git repository (instead of text). --- ...rd-overview-skeleton-loader.component.html | 31 ++-- ...card-overview-skeleton-loader.component.ts | 1 - .../model-detail/model-detail.component.css | 18 --- .../model-detail/model-detail.component.html | 149 ++++++++++-------- .../model-detail/model-detail.component.ts | 3 +- .../model-detail/model-detail.stories.ts | 98 ++++++++++++ frontend/src/storybook/git.ts | 20 +++ frontend/src/storybook/t4c.ts | 39 ++++- 8 files changed, 252 insertions(+), 107 deletions(-) delete mode 100644 frontend/src/app/projects/models/model-detail/model-detail.component.css create mode 100644 frontend/src/app/projects/models/model-detail/model-detail.stories.ts diff --git a/frontend/src/app/helpers/skeleton-loaders/mat-card-overview-skeleton-loader/mat-card-overview-skeleton-loader.component.html b/frontend/src/app/helpers/skeleton-loaders/mat-card-overview-skeleton-loader/mat-card-overview-skeleton-loader.component.html index 5b5a472381..f8d4d118ef 100644 --- a/frontend/src/app/helpers/skeleton-loaders/mat-card-overview-skeleton-loader/mat-card-overview-skeleton-loader.component.html +++ b/frontend/src/app/helpers/skeleton-loaders/mat-card-overview-skeleton-loader/mat-card-overview-skeleton-loader.component.html @@ -3,21 +3,18 @@ ~ SPDX-License-Identifier: Apache-2.0 --> -@if (loading) { - @for (_ of _cardNumbersArray; track $index) { -
- -
- } +@for (_ of _cardNumbersArray; track $index) { +
+ +
} -
diff --git a/frontend/src/app/helpers/skeleton-loaders/mat-card-overview-skeleton-loader/mat-card-overview-skeleton-loader.component.ts b/frontend/src/app/helpers/skeleton-loaders/mat-card-overview-skeleton-loader/mat-card-overview-skeleton-loader.component.ts index f47e41b3f9..4e8da32809 100644 --- a/frontend/src/app/helpers/skeleton-loaders/mat-card-overview-skeleton-loader/mat-card-overview-skeleton-loader.component.ts +++ b/frontend/src/app/helpers/skeleton-loaders/mat-card-overview-skeleton-loader/mat-card-overview-skeleton-loader.component.ts @@ -12,7 +12,6 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; imports: [NgxSkeletonLoaderModule], }) export class MatCardOverviewSkeletonLoaderComponent implements OnInit { - @Input() loading = true; @Input() reservedCards = 1; @Input() rows: number | undefined = undefined; diff --git a/frontend/src/app/projects/models/model-detail/model-detail.component.css b/frontend/src/app/projects/models/model-detail/model-detail.component.css deleted file mode 100644 index b852d87c8a..0000000000 --- a/frontend/src/app/projects/models/model-detail/model-detail.component.css +++ /dev/null @@ -1,18 +0,0 @@ -/* - * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -.footer { - color: grey; - text-align: end; - padding: 5px; -} - -.visually-disabled { - background-color: grey !important; -} - -app-mat-card-overview-loader { - display: contents; -} diff --git a/frontend/src/app/projects/models/model-detail/model-detail.component.html b/frontend/src/app/projects/models/model-detail/model-detail.component.html index 163c35f9ad..c6357b6e1a 100644 --- a/frontend/src/app/projects/models/model-detail/model-detail.component.html +++ b/frontend/src/app/projects/models/model-detail/model-detail.component.html @@ -3,13 +3,63 @@ ~ SPDX-License-Identifier: Apache-2.0 --> -
-

Git repositories

-
- +

Git repositories

+
+ +
+
+ Use existing repository
+
+ link +
+
+
+ + @if ((gitModelService.gitModels$ | async) === undefined) { + + } @else { + @for (gitModel of gitModelService.gitModels$ | async; track gitModel.id) { + +
+
+ Integration {{ gitModel.id }} + @if (gitModel.primary) { + star + } +
+ +
+ Path: {{ gitModel.path }} + Revision: {{ gitModel.revision }} + Entrypoint: {{ gitModel.entrypoint }} + @if (gitModel.username) { + + Username: {{ gitModel.username }} + + } +
+
+ + } + } +
+@if ( + (modelService.model$ | async)?.tool?.integrations?.t4c && + userService.user?.role === "administrator" +) { +

TeamForCapella repositories

+
+
Use existing repository
@@ -19,79 +69,42 @@

Git repositories

 - - - -
-
Integration {{ gitModel.id }}
+ +
-
Path: {{ gitModel.path }}
-
Revision: {{ gitModel.revision }}
-
Entry point: {{ gitModel.entrypoint }}
-
Primary: {{ gitModel.primary ? "True" : "False" }}
-
Username: {{ gitModel.username }}
-
Password set: {{ gitModel.password ? "True" : "False" }}
+ Create new repository
+
+ add_circle_outline +
-
-
-

TeamForCapella repositories

-
- -
-
- Use existing repository
-
- link -
-
-
- - - -
-
- Create new repository
-
- add_circle_outline -
-
-
- - + @if ((t4cModelService.t4cModels$ | async) === undefined) { + + } @else {
Integration {{ t4cModel.id }}
-
Instance: {{ t4cModel.repository.instance.name }}
-
Repository: {{ t4cModel.repository.name }}
-
T4C model name: {{ t4cModel.name }}
+ Instance: {{ t4cModel.repository.instance.name }} + Repository: {{ t4cModel.repository.name }} + Project: {{ t4cModel.name }}
- -
+ }
-
+} diff --git a/frontend/src/app/projects/models/model-detail/model-detail.component.ts b/frontend/src/app/projects/models/model-detail/model-detail.component.ts index 392620598f..bcb71e26b2 100644 --- a/frontend/src/app/projects/models/model-detail/model-detail.component.ts +++ b/frontend/src/app/projects/models/model-detail/model-detail.component.ts @@ -5,6 +5,7 @@ import { NgIf, NgFor, AsyncPipe } from '@angular/common'; import { Component, OnDestroy, OnInit } from '@angular/core'; import { MatRipple } from '@angular/material/core'; +import { MatIconModule } from '@angular/material/icon'; import { RouterLink } from '@angular/router'; import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; import { combineLatest, filter } from 'rxjs'; @@ -20,7 +21,6 @@ import { ProjectWrapperService } from '../../service/project.service'; @Component({ selector: 'app-model-detail', templateUrl: './model-detail.component.html', - styleUrls: ['./model-detail.component.css'], standalone: true, imports: [ NgIf, @@ -30,6 +30,7 @@ import { ProjectWrapperService } from '../../service/project.service'; MatCardOverviewSkeletonLoaderComponent, NgFor, AsyncPipe, + MatIconModule, ], }) export class ModelDetailComponent implements OnInit, OnDestroy { diff --git a/frontend/src/app/projects/models/model-detail/model-detail.stories.ts b/frontend/src/app/projects/models/model-detail/model-detail.stories.ts new file mode 100644 index 0000000000..c12d9621de --- /dev/null +++ b/frontend/src/app/projects/models/model-detail/model-detail.stories.ts @@ -0,0 +1,98 @@ +/* + * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors + * SPDX-License-Identifier: Apache-2.0 + */ +import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; +import { T4CModelService } from 'src/app/projects/models/model-source/t4c/service/t4c-model.service'; +import { ModelWrapperService } from 'src/app/projects/models/service/model.service'; +import { GitModelService } from 'src/app/projects/project-detail/model-overview/model-detail/git-model.service'; +import { UserWrapperService } from 'src/app/services/user/user.service'; +import { MockGitModelService, mockPrimaryGitModel } from 'src/storybook/git'; +import { mockModel, MockModelWrapperService } from 'src/storybook/model'; +import { mockT4CModel, MockT4CModelService } from 'src/storybook/t4c'; +import { mockUser, MockUserService } from 'src/storybook/user'; +import { ModelDetailComponent } from './model-detail.component'; + +const meta: Meta = { + title: 'Model Components / Model Sources / Overview', + component: ModelDetailComponent, + parameters: { + chromatic: { viewports: [1920] }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Loading: Story = { + args: {}, + decorators: [ + moduleMetadata({ + providers: [ + { + provide: ModelWrapperService, + useFactory: () => new MockModelWrapperService(mockModel, []), + }, + ], + }), + ], +}; + +export const LoadingAsAdmin: Story = { + args: {}, + decorators: [ + moduleMetadata({ + providers: [ + { + provide: ModelWrapperService, + useFactory: () => new MockModelWrapperService(mockModel, []), + }, + { + provide: UserWrapperService, + useFactory: () => + new MockUserService({ ...mockUser, role: 'administrator' }), + }, + ], + }), + ], +}; + +export const WithRepositoryAsAdmin: Story = { + args: {}, + decorators: [ + moduleMetadata({ + providers: [ + { + provide: ModelWrapperService, + useFactory: () => new MockModelWrapperService(mockModel, []), + }, + { + provide: UserWrapperService, + useFactory: () => + new MockUserService({ ...mockUser, role: 'administrator' }), + }, + { + provide: GitModelService, + useFactory: () => + new MockGitModelService(mockPrimaryGitModel, [ + mockPrimaryGitModel, + { ...mockPrimaryGitModel, id: 2, primary: false, username: '' }, + ]), + }, + { + provide: GitModelService, + useFactory: () => + new MockGitModelService(mockPrimaryGitModel, [ + mockPrimaryGitModel, + { ...mockPrimaryGitModel, id: 2, primary: false, username: '' }, + ]), + }, + { + provide: T4CModelService, + useFactory: () => + new MockT4CModelService(mockT4CModel, [mockT4CModel]), + }, + ], + }), + ], +}; diff --git a/frontend/src/storybook/git.ts b/frontend/src/storybook/git.ts index 6724036c5d..fa231060fc 100644 --- a/frontend/src/storybook/git.ts +++ b/frontend/src/storybook/git.ts @@ -2,7 +2,12 @@ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors * SPDX-License-Identifier: Apache-2.0 */ +import { BehaviorSubject, Subject } from 'rxjs'; import { GitModel } from 'src/app/openapi'; +import { + GetGitModel, + GitModelService, +} from 'src/app/projects/project-detail/model-overview/model-detail/git-model.service'; export const mockPrimaryGitModel: Readonly = { id: 1, @@ -14,3 +19,18 @@ export const mockPrimaryGitModel: Readonly = { password: false, username: 'fakeUsername', }; + +export class MockGitModelService implements Partial { + private _gitModel = new Subject(); + private _gitModels = new BehaviorSubject( + undefined, + ); + + public readonly gitModel$ = this._gitModel.asObservable(); + public readonly gitModels$ = this._gitModels.asObservable(); + + constructor(gitModel: GetGitModel, gitModels: GetGitModel[]) { + this._gitModel.next(gitModel); + this._gitModels.next(gitModels); + } +} diff --git a/frontend/src/storybook/t4c.ts b/frontend/src/storybook/t4c.ts index c934e86cc3..334d73de8f 100644 --- a/frontend/src/storybook/t4c.ts +++ b/frontend/src/storybook/t4c.ts @@ -8,8 +8,17 @@ import { ValidationErrors, } from '@angular/forms'; import { BehaviorSubject, Observable, of } from 'rxjs'; -import { T4CInstance, ValidationError } from 'src/app/openapi'; -import { SimpleT4CModel } from 'src/app/projects/models/model-source/t4c/service/t4c-model.service'; +import { + T4CInstance, + T4CModel, + T4CRepository, + T4CRepositoryStatus, + ValidationError, +} from 'src/app/openapi'; +import { + SimpleT4CModel, + T4CModelService, +} from 'src/app/projects/models/model-source/t4c/service/t4c-model.service'; import { T4CInstanceWrapperService } from 'src/app/services/settings/t4c-instance.service'; import { ExtendedT4CRepository, @@ -40,6 +49,13 @@ export const mockT4CInstance: Readonly = { is_archived: false, }; +export const mockT4CRepository: Readonly = { + id: 1, + name: 'repository', + instance: mockT4CInstance, + status: T4CRepositoryStatus.Online, +}; + export const mockExtendedT4CRepository: Readonly = { id: 1, name: 'repository', @@ -47,6 +63,12 @@ export const mockExtendedT4CRepository: Readonly = { status: 'LOADING', }; +export const mockT4CModel: Readonly = { + id: 1, + name: 'project', + repository: mockT4CRepository, +}; + export class MockT4CInstanceWrapperService implements Partial { @@ -95,3 +117,16 @@ export class MockT4CRepositoryWrapperService }; } } + +export class MockT4CModelService implements Partial { + private _t4cModel = new BehaviorSubject(undefined); + public readonly t4cModel$ = this._t4cModel.asObservable(); + + private _t4cModels = new BehaviorSubject(undefined); + public readonly t4cModels$ = this._t4cModels.asObservable(); + + constructor(t4cModel: T4CModel, t4cModels: T4CModel[]) { + this._t4cModel.next(t4cModel); + this._t4cModels.next(t4cModels); + } +}