From 6c3c3bcee4eaf1300e0a9898d4c1a0ccc8d23902 Mon Sep 17 00:00:00 2001 From: romeonicholas Date: Thu, 2 Nov 2023 09:06:58 +0100 Subject: [PATCH] feat: Improve project creation UI --- docs/docs/user/projects/models/create.md | 7 +- .../create-project.component.html | 176 ++++++++------ .../create-project.component.spec.ts | 11 +- .../create-project.component.ts | 1 - .../create-model-base.component.html | 29 ++- .../create-model/create-model.component.html | 110 +++++---- .../create-model/create-model.component.ts | 4 + .../init-model/init-model.component.html | 84 +++---- .../model-source/choose-source.component.html | 91 +++---- .../manage-git-model.component.html | 122 +++++----- ...te-t4c-model-new-repository.component.html | 23 +- .../manage-t4c-model.component.html | 11 +- .../add-user-to-project.component.html | 2 +- .../project-user-settings.component.html | 229 +++++++++--------- .../project-user-settings.component.ts | 6 + .../app/projects/service/project.service.ts | 6 +- .../pure-variants.component.html | 2 +- frontend/src/styles.css | 28 +-- 18 files changed, 494 insertions(+), 448 deletions(-) diff --git a/docs/docs/user/projects/models/create.md b/docs/docs/user/projects/models/create.md index e22951323..d550c5743 100644 --- a/docs/docs/user/projects/models/create.md +++ b/docs/docs/user/projects/models/create.md @@ -99,12 +99,7 @@ the TeamForCapella instance and the TeamForCapella repository. With `project`, you can specify the name of the model in Capella. We recommend using the same name for the repository and project. -## Step 4: Choose Initialisation - -Please choose `Create empty model`. This has no effect on the existing -TeamForCapella content. More options will follow in the future. - -## Step 5: Metadata +## Step 4: Metadata This is an important step. Here, you can select the version and the model nature of your tool. If you don't select any version, the functionality will be diff --git a/frontend/src/app/projects/create-project/create-project.component.html b/frontend/src/app/projects/create-project/create-project.component.html index ef1056727..35c7f6466 100644 --- a/frontend/src/app/projects/create-project/create-project.component.html +++ b/frontend/src/app/projects/create-project/create-project.component.html @@ -3,14 +3,22 @@ ~ SPDX-License-Identifier: Apache-2.0 --> -
- - -
- +
+ + + + + +

Create new project

+
+
-
- +
+ Name -
-
- +
+
+ Description - +
-
-
-

Project visibility

- + Project visibility + + - - {{ - projectService.getProjectVisibilityDescription( - visibility - ) - }} - - -
-
+ {{ + projectService.getProjectVisibilityDescription(visibility) + }} + + +
-
- - arrow_backCancel -
+
+
+
+ + Create project + navigate_next + +
- -
- +
- - -
- -
+ + + + + +

+ (Optional) Add model +

+
+ +
+
+
+
+
- Skip model creation and finish project creation + Abort model creation and finish - Abort model initialization and finish project creation + Abort model creation and finish Finish project creation @@ -152,7 +171,8 @@

Project visibility

check
- +
+
diff --git a/frontend/src/app/projects/create-project/create-project.component.spec.ts b/frontend/src/app/projects/create-project/create-project.component.spec.ts index 6cc9964b3..83b95974a 100644 --- a/frontend/src/app/projects/create-project/create-project.component.spec.ts +++ b/frontend/src/app/projects/create-project/create-project.component.spec.ts @@ -29,6 +29,7 @@ import { } from 'src/../tests/spec-helper/element.spec-helper'; import { ToastService } from '../../helpers/toast/toast.service'; +import { ProjectUserService } from '../project-detail/project-users/service/project-user.service'; import { PatchProject, Project, @@ -36,7 +37,6 @@ import { ProjectVisibility, } from '../service/project.service'; import { CreateProjectComponent } from './create-project.component'; -import { ProjectUserService } from '../project-detail/project-users/service/project-user.service'; const mockProjects: Project[] = [ { @@ -237,15 +237,6 @@ describe('CreateProjectComponent', () => { expect(appCreateModelComponent).toBeTruthy(); }); - it('renders routerLink to /projects', () => { - const cancelEl: HTMLElement = findElByTestId( - fixture, - 'a-cancel', - ).nativeElement; - - expect(cancelEl.getAttribute('href')).toEqual('/projects'); - }); - it('gets redirected to project/:projectName after clicking on finish', () => { setFieldValue(fixture, 'input-name', testProjectName); click(fixture, 'button-create-project'); diff --git a/frontend/src/app/projects/create-project/create-project.component.ts b/frontend/src/app/projects/create-project/create-project.component.ts index 0d29fdd1a..deb20f02c 100644 --- a/frontend/src/app/projects/create-project/create-project.component.ts +++ b/frontend/src/app/projects/create-project/create-project.component.ts @@ -69,7 +69,6 @@ export class CreateProjectComponent implements OnInit, OnDestroy { getColorByModelCreationStep(): string { switch (this.modelCreationStep) { - case 'create-model': case 'complete': return 'primary'; default: diff --git a/frontend/src/app/projects/models/create-model-base/create-model-base.component.html b/frontend/src/app/projects/models/create-model-base/create-model-base.component.html index f4a0b889d..8ef9895c1 100644 --- a/frontend/src/app/projects/models/create-model-base/create-model-base.component.html +++ b/frontend/src/app/projects/models/create-model-base/create-model-base.component.html @@ -3,11 +3,14 @@ ~ SPDX-License-Identifier: Apache-2.0 --> -
- +
+
-
- +
+ Model name @@ -19,15 +22,15 @@ }}” already exists. -
-
- +
+
+ Model description - -
- +
+
+ Model tool - -
+
+
diff --git a/frontend/src/app/projects/models/create-model/create-model.component.html b/frontend/src/app/projects/models/create-model/create-model.component.html index a73a67a49..30f9a24c8 100644 --- a/frontend/src/app/projects/models/create-model/create-model.component.html +++ b/frontend/src/app/projects/models/create-model/create-model.component.html @@ -3,56 +3,74 @@ ~ SPDX-License-Identifier: Apache-2.0 --> -
+
- - - - - - - - - -
- - - -
- - - - - - - - - +
+ + + + +

Create model

+ + + + + + + + +

Choose source

+ + + + + + + + +

Link source

+ +
+ + + +
+ + + + + + +

Configure model

+ + + +
diff --git a/frontend/src/app/projects/models/create-model/create-model.component.ts b/frontend/src/app/projects/models/create-model/create-model.component.ts index 55e006af5..cca3f048e 100644 --- a/frontend/src/app/projects/models/create-model/create-model.component.ts +++ b/frontend/src/app/projects/models/create-model/create-model.component.ts @@ -103,6 +103,10 @@ export class CreateModelComponent implements OnInit { this.stepper.previous(); } } + + hasRoute(route: string) { + return this.router.url.includes(route); + } } export type CreateModelStep = diff --git a/frontend/src/app/projects/models/init-model/init-model.component.html b/frontend/src/app/projects/models/init-model/init-model.component.html index a69c095ef..d27a325c5 100644 --- a/frontend/src/app/projects/models/init-model/init-model.component.html +++ b/frontend/src/app/projects/models/init-model/init-model.component.html @@ -3,59 +3,53 @@ ~ SPDX-License-Identifier: Apache-2.0 --> -
- +
+
-
- - Modelling tool - - - - Version - - - {{ version.name }} - (recommended) - (deprecated) - - - -
-
- - Model nature - - - {{ nature.name }} - - - -
+ + Modelling tool + + + + Version + + + {{ version.name }} + (recommended) + (deprecated) + + + + + Model nature + + + {{ nature.name }} + + +
-
- +
diff --git a/frontend/src/app/projects/models/model-source/choose-source.component.html b/frontend/src/app/projects/models/model-source/choose-source.component.html index 5cb741c8b..b4773d349 100644 --- a/frontend/src/app/projects/models/model-source/choose-source.component.html +++ b/frontend/src/app/projects/models/model-source/choose-source.component.html @@ -2,48 +2,57 @@ ~ SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors ~ SPDX-License-Identifier: Apache-2.0 --> + - diff --git a/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.html b/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.html index 881137ed4..a547185c2 100644 --- a/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.html +++ b/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.html @@ -3,11 +3,14 @@ ~ SPDX-License-Identifier: Apache-2.0 --> -
- +
+
-
+
Base integration URL -
-
- +
+
+ Absolute URL {{ @@ -48,7 +51,7 @@ {{ urls.inputUrl.errors?.urlSchemeError }} - +
Resulting URL* @@ -75,22 +78,22 @@
-
- +
+ Git username - + Git password or token If empty password gets not updated -
+
-
- +
+ Branch, tag or revision -
-
- +
+
+ Entry point @@ -141,33 +144,31 @@ Entrypoint must end with ".aird" in case of a capella model - -
+
+
Primary Git repository - - -
- -
- - -
- - arrow_back - Cancel - - +
+
+
+ +
+ + +
-
- - - -
-
+ + + +
-
-
-
- - - +
+
+
+
+ +    + +
+
-
- + +
diff --git a/frontend/src/app/projects/models/model-source/t4c/create-t4c-model-new-repository/create-t4c-model-new-repository.component.html b/frontend/src/app/projects/models/model-source/t4c/create-t4c-model-new-repository/create-t4c-model-new-repository.component.html index a1841659d..7249ff4ec 100644 --- a/frontend/src/app/projects/models/model-source/t4c/create-t4c-model-new-repository/create-t4c-model-new-repository.component.html +++ b/frontend/src/app/projects/models/model-source/t4c/create-t4c-model-new-repository/create-t4c-model-new-repository.component.html @@ -5,9 +5,9 @@
- +
- +
+ +
diff --git a/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.html b/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.html index 7a4d27a24..1aa73fd17 100644 --- a/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.html +++ b/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.html @@ -5,9 +5,9 @@
- +
-
- +
diff --git a/frontend/src/app/projects/project-detail/project-users/add-user-to-project/add-user-to-project.component.html b/frontend/src/app/projects/project-detail/project-users/add-user-to-project/add-user-to-project.component.html index b5c3c7bbc..5698d81f7 100644 --- a/frontend/src/app/projects/project-detail/project-users/add-user-to-project/add-user-to-project.component.html +++ b/frontend/src/app/projects/project-detail/project-users/add-user-to-project/add-user-to-project.component.html @@ -56,7 +56,7 @@

Add user

diff --git a/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html b/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html index 2e6fc39a5..060cfbb56 100644 --- a/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html +++ b/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html @@ -3,132 +3,143 @@ ~ SPDX-License-Identifier: Apache-2.0 --> -
-
-
+
+
+

Project members

-
- - -
+
- - - Search - - search - -
-
-
- {{ capitalizeFirstLetter(role) }} -
-
-
-
- account_circle -
-
-
{{ user.user.name }}
-
- {{ projectUserService.ADVANCED_ROLES[user.role] }}, - {{ projectUserService.PERMISSIONS[user.permission] }} -
+
+ +
+ +
+ +

New members

+ +
+ +
+ +

Current members

+ + + Search + + search + +
+
+
+ {{ capitalizeFirstLetter(role) }} +
+
+
+
+ account_circle +
+
+
{{ user.user.name }}
+
+ {{ projectUserService.ADVANCED_ROLES[user.role] }}, + {{ projectUserService.PERMISSIONS[user.permission] }}
-
- +
+
+ + + +
-
- - -
-
- -
+
+
+
- -
+
+ diff --git a/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.ts b/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.ts index 085094f05..ae85adb26 100644 --- a/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.ts +++ b/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.ts @@ -5,6 +5,7 @@ import { Component, OnInit } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; +import { Router } from '@angular/router'; import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; import { filter, take } from 'rxjs'; import { @@ -38,6 +39,7 @@ export class ProjectUserSettingsComponent implements OnInit { private toastService: ToastService, private projectService: ProjectService, private dialog: MatDialog, + private router: Router, ) {} ngOnInit(): void { @@ -210,4 +212,8 @@ export class ProjectUserSettingsComponent implements OnInit { }); }); } + + hasRoute(route: string) { + return this.router.url.includes(route); + } } diff --git a/frontend/src/app/projects/service/project.service.ts b/frontend/src/app/projects/service/project.service.ts index f642f298d..54abdca57 100644 --- a/frontend/src/app/projects/service/project.service.ts +++ b/frontend/src/app/projects/service/project.service.ts @@ -146,8 +146,6 @@ export type Project = Required & { }; export const ProjectVisibility = { - internal: - 'Internal - all logged in users can see the project and have read access on its models.', - private: - 'Private - users need to be explicitly granted access to see the project.', + internal: 'Internal (viewable by all logged in users)', + private: 'Private (only viewable by project members)', }; diff --git a/frontend/src/app/settings/integrations/pure-variants/pure-variants.component.html b/frontend/src/app/settings/integrations/pure-variants/pure-variants.component.html index 31de9df5d..77d3c03db 100644 --- a/frontend/src/app/settings/integrations/pure-variants/pure-variants.component.html +++ b/frontend/src/app/settings/integrations/pure-variants/pure-variants.component.html @@ -4,7 +4,7 @@ -->
- +

pure::variants configuration

:not(.field-separator) { flex-grow: 1; } -.text-center { - text-align: center; -} - -mat-card.default { - width: 400px; -} - .margin.default { margin: 10px; } -.section-card { - width: var(--section-card-width); -} - .version-selector { flex-shrink: 0.5; } @@ -258,7 +241,7 @@ Angular Material Card Styles } .form-field-default { - width: 405px; + width: 100%; max-width: 85vw; } @@ -292,3 +275,12 @@ Option cards height: 2.4rem; width: 20ch; } + +@media (max-width: 640px) { + .mat-stepper-horizontal-line { + width: 100%; + } + .mat-horizontal-stepper-header-container { + height: 50px; + } +}