Skip to content

Commit

Permalink
feat: Show code snipped in diagram cache dialog
Browse files Browse the repository at this point in the history 
In order for users to better understand how a personal access token can be helpful the codesnippet from the docs is displayed in the frontend.
  • Loading branch information
@Paula-Kli
Paula-Kli committed Oct 31, 2023
1 parent b85e77a commit 3da5b3a
Show file tree
Hide file tree
Showing 3 changed files with 192 additions and 102 deletions.
10 changes: 10 additions & 0 deletions .../src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,3 +92,13 @@ button {
mat-divider {
margin: 10px 0;
}

pre,
code {
white-space: pre-line;
}

pre > code > i {
white-space: pre;
font-style: normal;
}
249 changes: 147 additions & 102 deletions ...src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
~ SPDX-License-Identifier: Apache-2.0
-->
<div class="dialog">
<div class="header">
<div class="header relative">
<h2>View diagrams</h2>
<span
>Last update:
Expand All @@ -13,112 +13,157 @@ <h2>View diagrams</h2>
}}</span
>

<mat-form-field
style="margin-bottom: -1.25em"
id="search"
appearance="outline"
>
<mat-label>Search</mat-label>
<input
[(ngModel)]="search"
autocomplete="off"
matInput
placeholder="Diagram name or uuid"
/>
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<span *ngIf="filteredDiagrams()"
>{{ filteredDiagrams()?.length }} diagram(s) found:
</span>
</div>
<div class="flex flex-wrap">
<mat-card
class="diagram-card"
#diagram
[id]="diagram.uuid"
[attr.success]="diagram.success"
*ngFor="let diagram of filteredDiagrams()"
>
<img
(click)="openModelDiagramPreviewDialog(diagram)"
matTooltip="Open preview"
*ngIf="diagram.success && diagrams[diagram.uuid]?.content"
class="diagram"
[src]="diagrams[diagram.uuid].content"
/>
<br />
<div>
<mat-expansion-panel color="bg-slate-400">
<mat-expansion-panel-header>
<mat-panel-title>
Learn how to use the diagram cache with capellambse!
</mat-panel-title>
</mat-expansion-panel-header>
<div class="relative flex flex-col">
<pre><code #codeBlock>
<i>model = capellambse.MelodyModel(</i>
<i> path="path to the aird file of the model on your machine",</i>
<i> diagram_cache=&#123;</i>
<i> &quot;path&quot;: &quot;{{ this.path + "/diagrams/%s"}}&quot;,</i>
<i> &quot;username&quot;: &quot;{{ username }}&quot;,</i>
<i> &quot;password&quot;: &quot;{{ passwordValue !== undefined ? passwordValue : 'You can insert your project token here using the "Insert token" button. The inserted token is valid for 30 days.' }}&quot;,</i>
<i> &#125;</i>
<i> )</i>
</code></pre>
<div class="flex">
<button
class="mt-auto self-end"
[cdkCopyToClipboard]="this.codeBlockContent"
matTooltip="Copy codeblock to clipboard"
color="bg-transparent"
mat-raised-button
>
<mat-icon>content_copy</mat-icon>
</button>
<button
class="mt-auto self-end text-white"
(click)="insertToken()"
[disabled]="passwordValue"
matTooltip="Insert new personal access token for your user"
color="primary"
mat-raised-button
>
Insert token
</button>
</div>
</div>
</mat-expansion-panel>

<mat-form-field
style="margin-bottom: -1.25em"
id="search"
appearance="outline"
>
<mat-label>Search</mat-label>
<input
[(ngModel)]="search"
autocomplete="off"
matInput
placeholder="Diagram name or uuid"
/>
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<span *ngIf="filteredDiagrams()"
>{{ filteredDiagrams()?.length }} diagram(s) found:
</span>
</div>
<div class="flex flex-wrap">
<mat-card
class="diagram-card"
#diagram
[id]="diagram.uuid"
[attr.success]="diagram.success"
*ngFor="let diagram of filteredDiagrams()"
>
<img
(click)="openModelDiagramPreviewDialog(diagram)"
matTooltip="Open preview"
*ngIf="diagram.success && diagrams[diagram.uuid]?.content"
class="diagram"
[src]="diagrams[diagram.uuid].content"
/>
<ngx-skeleton-loader
style="width: 100%"
*ngIf="
(!diagrams[diagram.uuid] && diagram.success) ||
diagrams[diagram.uuid]?.loading
"
[theme]="{
'border-radius': '5px',
height: '200px',
width: 'calc(100% - 10px)',
border: '1px solid white'
}"
></ngx-skeleton-loader>
<div *ngIf="!diagram.success" class="diagram-error">
<mat-icon class="diagram-error-icon">error</mat-icon> <br />
Diagram export has failed. <br />Please contact your diagram cache
administrator.
</div>
<div
*ngIf="
diagram.success &&
diagrams[diagram.uuid] &&
diagrams[diagram.uuid].content === null
"
class="diagram-error"
>
<mat-icon class="diagram-error-icon">error</mat-icon> <br />
Error loading the diagram from the server. <br />Please try again
later.
<br />
If the problem persists, please contact your diagram cache
administrator.
</div>
<div class="list-item">
<div class="diagram-metadata">
<div class="diagram-name">{{ diagram.name }}</div>
<div class="uuid">UUID: {{ diagram.uuid }}</div>
</div>
</div>
<button
class="download-button"
(click)="downloadDiagram(diagram.uuid)"
mat-raised-button
[disabled]="!diagram.success"
>
<mat-icon>cloud_download</mat-icon> Download
</button>
</mat-card>
</div>
<div class="flex flex-wrap" *ngIf="filteredDiagrams() === undefined">
<ngx-skeleton-loader
style="width: 100%"
*ngIf="
(!diagrams[diagram.uuid] && diagram.success) ||
diagrams[diagram.uuid]?.loading
"
*ngFor="let _ of loaderArray"
class="loader"
[theme]="{
'border-radius': '5px',
height: '200px',
width: 'calc(100% - 10px)',
height: '332px',
'min-width': '208px',
border: '1px solid white'
}"
></ngx-skeleton-loader>
<div *ngIf="!diagram.success" class="diagram-error">
<mat-icon class="diagram-error-icon">error</mat-icon> <br />
Diagram export has failed. <br />Please contact your diagram cache
administrator.
</div>
<div
*ngIf="
diagram.success &&
diagrams[diagram.uuid] &&
diagrams[diagram.uuid].content === null
"
class="diagram-error"
>
<mat-icon class="diagram-error-icon">error</mat-icon> <br />
Error loading the diagram from the server. <br />Please try again later.
<br />
If the problem persists, please contact your diagram cache
administrator.
</div>
<div class="list-item">
<div class="diagram-metadata">
<div class="diagram-name">{{ diagram.name }}</div>
<div class="uuid">UUID: {{ diagram.uuid }}</div>
</div>
</div>
<button
class="download-button"
(click)="downloadDiagram(diagram.uuid)"
mat-raised-button
[disabled]="!diagram.success"
>
<mat-icon>cloud_download</mat-icon> Download
</button>
</mat-card>
</div>
<div class="flex flex-wrap" *ngIf="filteredDiagrams() === undefined">
<ngx-skeleton-loader
*ngFor="let _ of loaderArray"
class="loader"
[theme]="{
'border-radius': '5px',
height: '332px',
'min-width': '208px',
border: '1px solid white'
}"
></ngx-skeleton-loader>
</div>
<div *ngIf="this.diagramMetadata?.diagrams?.length === 0">
Your model doesn't seem to contain diagrams.
</div>
<div
*ngIf="
this.diagramMetadata?.diagrams?.length !== 0 &&
filteredDiagrams()?.length === 0
"
>
No diagrams for the given filter found. Please remove your search query.
</div>
<div class="sticky bottom-0 w-full bg-white md:hidden">
<mat-divider id="bottom-divider"></mat-divider>
<button class="w-full" mat-button mat-dialog-close>Close</button>
</div>
<div *ngIf="this.diagramMetadata?.diagrams?.length === 0">
Your model doesn't seem to contain diagrams.
</div>
<div
*ngIf="
this.diagramMetadata?.diagrams?.length !== 0 &&
filteredDiagrams()?.length === 0
"
>
No diagrams for the given filter found. Please remove your search query.
</div>
<div class="sticky bottom-0 w-full bg-white md:hidden">
<mat-divider id="bottom-divider"></mat-divider>
<button class="w-full" mat-button mat-dialog-close>Close</button>
</div>
</div>
</div>
35 changes: 35 additions & 0 deletions ...d/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
ViewChildren,
ElementRef,
QueryList,
ViewChild,
} from '@angular/core';
import {
MatDialog,
Expand All @@ -25,6 +26,9 @@ import {
DiagramMetadata,
ModelDiagramService,
} from 'src/app/projects/models/diagrams/service/model-diagram.service';
import { ModelService } from 'src/app/projects/models/service/model.service';
import { UserService } from 'src/app/services/user/user.service';
import { TokenService } from 'src/app/users/basic-auth-service/basic-auth-token.service';

@Component({
selector: 'app-model-diagram-dialog',
Expand All @@ -34,6 +38,9 @@ import {
export class ModelDiagramDialogComponent {
diagramMetadata?: DiagramCacheMetadata;
diagrams: Diagrams = {};
username?: string;
passwordValue?: string;
path?: string;

loaderArray = Array(60).fill(0);

Expand All @@ -42,6 +49,11 @@ export class ModelDiagramDialogComponent {

search = '';

@ViewChild('codeBlock') codeBlock!: ElementRef;
get codeBlockContent(): string {
return this.codeBlock?.nativeElement.textContent || '';
}

filteredDiagrams(): DiagramMetadata[] | undefined {
if (!this.diagramMetadata) {
return undefined;
Expand All @@ -55,6 +67,9 @@ export class ModelDiagramDialogComponent {

constructor(
private modelDiagramService: ModelDiagramService,
private userService: UserService,
private modelService: ModelService,
private tokenService: TokenService,
private dialogRef: MatDialogRef<ModelDiagramDialogComponent>,
private dialog: MatDialog,
@Inject(MAT_DIALOG_DATA)
Expand All @@ -71,6 +86,14 @@ export class ModelDiagramDialogComponent {
this.dialogRef.close();
},
});

this.userService
.getCurrentUser()
.subscribe((user) => (this.username = user.name));
this.path = this.modelService.backendURLFactory(
data.projectSlug,
data.modelSlug,
);
}

observeVisibleDiagrams() {
Expand Down Expand Up @@ -155,6 +178,18 @@ export class ModelDiagramDialogComponent {
saveAs(response, `${uuid}.svg`);
});
}

async insertToken() {
const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 30);
this.tokenService
.createToken(
'Created in diagram cache dialog',
expirationDate,
'Diagram-cache',
)
.subscribe((token) => (this.passwordValue = token.password));
}
}

interface Diagrams {
Expand Down

0 comments on commit 3da5b3a

Please sign in to comment.