Skip to content

Commit

Permalink
Merge pull request #1130 from DSD-DBS/display-value-component
Browse files Browse the repository at this point in the history
refactor: Add own display value component
  • Loading branch information
MoritzWeber0 authored Oct 25, 2023
2 parents 7f1b267 + 3c070c5 commit d47d71f
Show file tree
Hide file tree
Showing 10 changed files with 119 additions and 96 deletions.
6 changes: 4 additions & 2 deletions frontend/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ import { HeaderComponent } from './general/header/header.component';
import { VersionComponent } from './general/metadata/version/version.component';
import { NavBarMenuComponent } from './general/nav-bar-menu/nav-bar-menu.component';
import { NoticeComponent } from './general/notice/notice.component';
import { DisplayValueComponent } from './helpers/display-value/display-value.component';
import { MatIconComponent } from './helpers/mat-icon/mat-icon.component';
import { ButtonSkeletonLoaderComponent } from './helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.component';
import { FormFieldSkeletonLoaderComponent } from './helpers/skeleton-loaders/form-field-skeleton-loader/form-field-skeleton-loader.component';
Expand Down Expand Up @@ -108,7 +109,7 @@ import { SessionComponent } from './sessions/session/session.component';
import { SessionOverviewComponent } from './sessions/session-overview/session-overview.component';
import { SessionsComponent } from './sessions/sessions.component';
import { ActiveSessionsComponent } from './sessions/user-sessions-wrapper/active-sessions/active-sessions.component';
import { GuacamoleDialogComponent } from './sessions/user-sessions-wrapper/active-sessions/connect/guacamole-dialog/guacamole-dialog.component';
import { ConnectionDialogComponent } from './sessions/user-sessions-wrapper/active-sessions/connection-dialog/connection-dialog.component';
import { FileBrowserDialogComponent } from './sessions/user-sessions-wrapper/active-sessions/file-browser-dialog/file-browser-dialog.component';
import { FileExistsDialogComponent } from './sessions/user-sessions-wrapper/active-sessions/file-browser-dialog/file-exists-dialog/file-exists-dialog.component';
import { CreateReadonlySessionComponent } from './sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component';
Expand Down Expand Up @@ -150,6 +151,7 @@ import { SettingsComponent } from './settings/settings.component';
ChooseInitComponent,
ChooseSourceComponent,
ConfirmationDialogComponent,
ConnectionDialogComponent,
CreateBackupComponent,
CreateModelBaseComponent,
CreateModelComponent,
Expand All @@ -161,6 +163,7 @@ import { SettingsComponent } from './settings/settings.component';
CreateT4cModelNewRepositoryComponent,
DeleteGitSettingsDialogComponent,
DeleteSessionDialogComponent,
DisplayValueComponent,
EditGitSettingsComponent,
EditProjectMetadataComponent,
EditT4CInstanceComponent,
Expand All @@ -170,7 +173,6 @@ import { SettingsComponent } from './settings/settings.component';
FooterComponent,
FormFieldSkeletonLoaderComponent,
GitSettingsComponent,
GuacamoleDialogComponent,
HeaderComponent,
InitModelComponent,
JobRunOverviewComponent,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/*
* SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
* SPDX-License-Identifier: Apache-2.0
*/
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!--
~ SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
~ SPDX-License-Identifier: Apache-2.0
-->

<div class="mt-2 flex items-center">
<span class="mr-2 gap-1 rounded border p-2 font-mono">
<span [ngClass]="{ blur: !valueRevealed && blurValue }">{{
value
}}</span></span
>
<button
*ngIf="blurValue && !valueRevealed"
(click)="valueRevealed = true"
matTooltip="Show value"
class="flex"
>
<mat-icon>blur_off</mat-icon>
</button>
<button
*ngIf="blurValue && valueRevealed"
(click)="valueRevealed = false"
matTooltip="Hide value"
class="flex"
>
<mat-icon>blur_on</mat-icon>
</button>
<button
*ngIf="value"
[cdkCopyToClipboard]="value!"
matTooltip="Copy value to clipboard"
(click)="showClipboardMessage()"
class="flex"
>
<mat-icon>content_copy</mat-icon>
</button>
</div>
40 changes: 40 additions & 0 deletions frontend/src/app/helpers/display-value/display-value.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/*
* SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
* SPDX-License-Identifier: Apache-2.0
*/

import { Component, Input } from '@angular/core';
import { ToastService } from 'src/app/helpers/toast/toast.service';

@Component({
selector: 'app-display-value',
templateUrl: './display-value.component.html',
styleUrls: ['./display-value.component.css'],
})
export class DisplayValueComponent {
constructor(private toastService: ToastService) {}

@Input()
value?: string = undefined;

@Input()
blurValue = false;

@Input()
valueName?: string = undefined;

showClipboardMessage(): void {
this.toastService.showSuccess(
`${
this.valueName ? this.capitalizeString(this.valueName) : 'Value'
} copied`,
`The ${this.valueName || 'value'} was copied to your clipboard.`,
);
}

capitalizeString(value: string) {
return value.charAt(0).toUpperCase() + value.slice(1);
}

valueRevealed = false;
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ import {
isPersistentSession,
} from 'src/app/schemes';
import { BeautifyService } from 'src/app/services/beatify/beautify.service';
import { ConnectionDialogComponent } from 'src/app/sessions/user-sessions-wrapper/active-sessions/connection-dialog/connection-dialog.component';
import { DeleteSessionDialogComponent } from '../../delete-session-dialog/delete-session-dialog.component';
import { SessionService } from '../../service/session.service';
import { UserSessionService } from '../../service/user-session.service';
import { GuacamoleDialogComponent } from './connect/guacamole-dialog/guacamole-dialog.component';
import { FileBrowserDialogComponent } from './file-browser-dialog/file-browser-dialog.component';

@Component({
Expand Down Expand Up @@ -49,7 +49,7 @@ export class ActiveSessionsComponent {
if (session.jupyter_uri) {
window.open(session.jupyter_uri);
} else {
this.dialog.open(GuacamoleDialogComponent, {
this.dialog.open(ConnectionDialogComponent, {
data: session,
});
}
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/*
* SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
* SPDX-License-Identifier: Apache-2.0
*/
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"
>
<div class="m-m-card">
<div class="title">TeamForCapella session token</div>
<div class="mb-1 text-base font-bold">TeamForCapella session token</div>
If you'd like to connect to TeamForCapella while working with Capella,
<br />
please copy your session token and enter it when prompted in your Capella
Expand All @@ -18,32 +18,11 @@
You can always return to this dialog by clicking on "Connect" in the "Active
sessions" overview. <br />
<div *ngIf="session?.t4c_password">
<span
class="cursor-copy border font-mono"
[cdkCopyToClipboard]="session!.t4c_password"
(click)="showClipboardMessage()"
>
<span [ngClass]="{ blur: !t4cPasswordRevealed }">{{
session!.t4c_password
}}</span></span
>

<button
*ngIf="!t4cPasswordRevealed"
(click)="this.t4cPasswordRevealed = true"
mat-mini-fab
matTooltip="Show session token"
>
<mat-icon> blur_off</mat-icon>
</button>
<button
*ngIf="t4cPasswordRevealed"
(click)="this.t4cPasswordRevealed = false"
mat-mini-fab
matTooltip="Hide session token"
>
<mat-icon> blur_on</mat-icon>
</button>
<app-display-value
[value]="session!.t4c_password"
[blurValue]="true"
valueName="TeamForCapella token"
></app-display-value>
</div>
<div *ngIf="!session?.t4c_password">
No session token was generated for your session.
Expand All @@ -53,15 +32,19 @@
</div>

<div class="m-m-card">
<div class="title">Connect to the session</div>
<div class="mb-1 text-base font-bold">Connect to the session</div>
Please click on this button to connect to the server: <br />
<button mat-flat-button color="primary" (click)="redirectToGuacamole()">
Connect to Session
</button>
<div class="mt-2">
<button mat-flat-button color="primary" (click)="redirectToGuacamole()">
Connect to Session
</button>
</div>
</div>
<hr />
<div class="m-m-card">
<div class="title">Wait for {{ session.version?.tool?.name }}</div>
<div class="mb-1 text-base font-bold">
Wait for {{ session.version?.tool?.name }}
</div>
After opening the session, {{ session.version?.tool?.name }}
{{ session.version?.name }} starts automatically. This can take up to one
minute.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,21 @@ import { GuacamoleService } from 'src/app/services/guacamole/guacamole.service';
import { UserService } from 'src/app/services/user/user.service';

@Component({
selector: 'app-guacamole-dialog',
templateUrl: './guacamole-dialog.component.html',
styleUrls: ['./guacamole-dialog.component.css'],
selector: 'app-connection-dialog',
templateUrl: './connection-dialog.component.html',
styleUrls: ['./connection-dialog.component.css'],
})
export class GuacamoleDialogComponent {
export class ConnectionDialogComponent {
isPersistentSession = isPersistentSession;

t4cPasswordRevealed = false;
nativeClient = false;

constructor(
public userService: UserService,
private localStorageService: LocalStorageService,
private guacamoleService: GuacamoleService,
@Inject(MAT_DIALOG_DATA) public session: Session,
public dialogRef: MatDialogRef<GuacamoleDialogComponent>,
public dialogRef: MatDialogRef<ConnectionDialogComponent>,
private toastService: ToastService,
) {}

Expand All @@ -39,10 +39,7 @@ export class GuacamoleDialogComponent {
});
}

showClipboardMessage(): void {
this.toastService.showSuccess(
'Session token copied',
'The session token was copied to your clipboard.',
);
requestNativeClient(): void {
this.nativeClient = true;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -49,38 +49,11 @@ <h2 class="!mb-2">Personal Access Tokens</h2>
<div *ngIf="password" class="mb-10">
<mat-card class="!ml-0">
Generated Token:
<span class="mr-1 border font-mono">
<span [ngClass]="{ blur: !passwordRevealed }">{{
password
}}</span></span
>
<button
*ngIf="!passwordRevealed"
(click)="this.passwordRevealed = true"
mat-mini-fab
matTooltip="Show password"
class="!mx-1"
>
<mat-icon>blur_off</mat-icon>
</button>
<button
*ngIf="passwordRevealed"
(click)="this.passwordRevealed = false"
mat-mini-fab
matTooltip="Hide password"
class="!mx-1"
>
<mat-icon>blur_on</mat-icon>
</button>
<button
[cdkCopyToClipboard]="password"
mat-mini-fab
matTooltip="Copy password to Clipboard"
(click)="showClipboardMessage()"
class="!mx-1"
>
<mat-icon>content_copy</mat-icon>
</button>
<app-display-value
[value]="password"
[blurValue]="true"
valueName="session token"
></app-display-value>
<div class="mt-2 text-red-600">
Make sure you save the token - you won't be able to access it again.
</div></mat-card
Expand Down

0 comments on commit d47d71f

Please sign in to comment.