Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Show warning for archived projects #1495

Merged
merged 1 commit into from
Apr 10, 2024
Merged

feat: Show warning for archived projects #1495

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions frontend/.storybook/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/*
* SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
* SPDX-License-Identifier: Apache-2.0
*/

/* Overwrite font from Storybook in documentation */
:where(div:not(.sb-anchor, .sb-unstyled, .sb-unstyled div)) {
font-family: unset !important;
-webkit-font-smoothing: unset !important;
}
18 changes: 16 additions & 2 deletions frontend/angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,14 @@
"browserTarget": "capellacollab:build",
"compodoc": true,
"compodocArgs": ["-e", "json", "-d", "."],
"port": 6006
"port": 6006,
"styles": [
".storybook/styles.css",
"@angular/material/prebuilt-themes/indigo-pink.css",
"monaco-editor/min/vs/editor/editor.main.css",
"src/styles.css",
"node_modules/ngx-toastr/toastr.css"
]
}
},
"build-storybook": {
Expand All @@ -134,7 +141,14 @@
"browserTarget": "capellacollab:build",
"compodoc": true,
"compodocArgs": ["-e", "json", "-d", "."],
"outputDir": "storybook-static"
"outputDir": "storybook-static",
"styles": [
".storybook/styles.css",
"@angular/material/prebuilt-themes/indigo-pink.css",
"monaco-editor/min/vs/editor/editor.main.css",
"src/styles.css",
"node_modules/ngx-toastr/toastr.css"
]
}
}
}
Expand Down
4 changes: 0 additions & 4 deletions frontend/src/app/projects/project-detail/project-metadata/project-metadata.component.css
View file
Open in desktop

This file was deleted.

133 changes: 72 additions & 61 deletions frontend/src/app/projects/project-detail/project-metadata/project-metadata.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,72 +4,83 @@
-->

<div class="flex h-full flex-col">
<h2 id="title" class="text-xl font-medium">Project Information</h2>
<h2 class="text-xl font-medium">Project Information</h2>
<div
class="collab-card [p-12px] m-[10px] !flex grow flex-col justify-between"
class="collab-card [p-12px] m-[10px] flex min-h-[200px] grow flex-col justify-between gap-2"
>
<div class="flex flex-col">
@if (project !== undefined) {
<div class="break-all">
<h2 id="title" class="text-xl font-medium">
{{ project!.name }}
</h2>
</div>
} @else {
<ngx-skeleton-loader
[theme]="{
'border-radius': '5px',
height: '24px',
width: '50%',
border: '1px solid white'
}"
></ngx-skeleton-loader>
}
@if (project !== undefined) {
<div class="grow text-sm" id="description">
@if (project !== undefined) {
<div class="flex flex-col gap-2">
<h2 class="break-all text-xl font-medium">
{{ project!.name }}
</h2>
<div class="grow text-sm">
{{ project!.description || "No description available." }}
</div>
} @else {
<ngx-skeleton-loader
[theme]="{
'border-radius': '5px',
height: '100px',
width: '80%',
border: '1px solid white'
}"
></ngx-skeleton-loader>
}
</div>
@if (projectUserService.verifyRole("manager")) {
<div class="flex flex-wrap items-center gap-2">
<span
matTooltip="The project can't be deleted since it has linked models"
[matTooltipDisabled]="canDelete"
>
<button
[disabled]="!canDelete"
(click)="deleteProject()"
mat-flat-button
color="warn"
>
<mat-icon class="mat-icon-position left">delete_forever</mat-icon
>Delete project
</button>
</span>
<a mat-raised-button (click)="toggleArchive()">
<mat-icon class="mat-icon-position left">archive</mat-icon>
{{ project?.is_archived ? "Unarchive" : "Archive" }}
</a>
<a
[disabled]="project === undefined"
mat-raised-button
routerLink="metadata"
id="modify"
>
<mat-icon class="mat-icon-position left">settings</mat-icon> Modify
project
</a>
@if (project.is_archived) {
<div class="flex items-center gap-2 text-sm text-warning">
<div>
<mat-icon>warning</mat-icon>
</div>
<div>
<span class="font-bold">This project is archived.</span>
<span>
TeamForCapella repositories of this project will no longer be
available in persistent sessions and will no longer be
synchronized to Git repositories. In addition, it's no possible
to create new models in this project.
</span>
</div>
</div>
}
</div>
@if (projectUserService.verifyRole("manager")) {
<div class="flex flex-wrap items-center gap-2">
<span
matTooltip="The project can't be deleted since it has linked models"
[matTooltipDisabled]="canDelete"
>
<button
[disabled]="!canDelete"
(click)="deleteProject()"
mat-flat-button
color="warn"
>
<mat-icon class="mat-icon-position left">delete_forever</mat-icon>
Delete project
</button>
</span>
<a mat-raised-button (click)="toggleArchive()">
<mat-icon class="mat-icon-position left">archive</mat-icon>
{{ project.is_archived ? "Unarchive" : "Archive" }}
</a>
<a
[disabled]="project === undefined"
mat-raised-button
routerLink="metadata"
id="modify"
>
<mat-icon class="mat-icon-position left">settings</mat-icon>
Modify project
</a>
</div>
}
} @else {
<ngx-skeleton-loader
[theme]="{
'border-radius': '5px',
height: '24px',
width: '50%',
border: '1px solid white'
}"
></ngx-skeleton-loader>
<ngx-skeleton-loader
[theme]="{
'border-radius': '5px',
height: '100px',
width: '80%',
border: '1px solid white'
}"
></ngx-skeleton-loader>
}
</div>
</div>
4 changes: 2 additions & 2 deletions frontend/src/app/projects/project-detail/project-metadata/project-metadata.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { MatButtonModule } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { ActivatedRoute, Router } from '@angular/router';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { filter } from 'rxjs';
Expand All @@ -31,9 +31,9 @@ import {
NgxSkeletonLoaderModule,
MatButtonModule,
MatTooltipModule,
RouterLink,
],
templateUrl: './project-metadata.component.html',
styleUrls: ['./project-metadata.component.css'],
})
export class ProjectMetadataComponent implements OnInit {
project?: Project;
Expand Down
32 changes: 28 additions & 4 deletions ...tend/src/app/projects/project-detail/project-metadata/project-metadata.docs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,41 @@ import {Meta, Title, Story, Canvas} from "@storybook/blocks";

The Project metadata let's users know about the project name, description and status.

When it's loaded, the metadata view looks like:
## Larger devices

While loading the project, it looks the same for all users:
<Story of={ProjectMetadata.Loading}/>

For example, this is the view for a normal user in the project:
A "normal" project user can see the title and description:
<Story of={ProjectMetadata.NormalUser}/>

Project leads have the option to modify some settings:
<Story of={ProjectMetadata.ProjectAdmin} />

This is how an archived projects looks like:
<Story of={ProjectMetadata.Archived} />
This is how an archived projects looks like for normal users:
<Story of={ProjectMetadata.NormalUserArchived} />

This is how an archived projects looks like for project admins:
<Story of={ProjectMetadata.ProjectAdminArchived} />

If there are linked models in the project, the delete button is disabled:
<Story of={ProjectMetadata.CantDelete} />


## Small devices
On small devices, it looks like this:

<div style={{display: "flex", "flex-wrap": "wrap"}}>
<div style={{width: "250px"}}>
<Story of={ProjectMetadata.Loading}/>
</div>
<div style={{width: "250px"}}>
<Story of={ProjectMetadata.NormalUser}/>
</div>
<div style={{width: "250px"}}>
<Story of={ProjectMetadata.ProjectAdmin}/>
</div>
<div style={{width: "250px"}}>
<Story of={ProjectMetadata.ProjectAdminArchived}/>
</div>
</div>
22 changes: 20 additions & 2 deletions frontend/src/app/projects/project-detail/project-metadata/project-metadata.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ type Story = StoryObj<ProjectMetadataComponent>;

const project: Project = {
name: 'test',
description: 'test',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
type: 'general',
visibility: 'internal',
is_archived: false,
Expand Down Expand Up @@ -96,7 +97,24 @@ export const ProjectAdmin: Story = {
],
};

export const Archived: Story = {
export const NormalUserArchived: Story = {
args: {
project: { ...project, is_archived: true },
canDelete: true,
},
decorators: [
moduleMetadata({
providers: [
{
provide: ProjectUserService,
useFactory: () => new MockProjectUserService('user'),
},
],
}),
],
};

export const ProjectAdminArchived: Story = {
args: {
project: { ...project, is_archived: true },
canDelete: true,
Expand Down
Loading