feat: Show code snipped in diagram cache dialog

backend/capellacollab/core/metadata.py

@@ -1,6 +1,8 @@
 # SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
 # SPDX-License-Identifier: Apache-2.0
 
+import typing as t
+
 import fastapi
 import pydantic
 
@@ -18,9 +20,15 @@ class Metadata(pydantic.BaseModel):
     authentication_provider: str | None
     environment: str | None
 
+    host: str | None
+    port: str | None
+    protocol: str | None
+
 
 router = fastapi.APIRouter()
-cfg: dict[str, str | None] = config["general"].get("metadata", {})
+
+general_cfg: dict[str, t.Any] = config["general"]
+metadata_cfg: dict[str, str | None] = general_cfg.get("metadata", {})
 
 
 @router.get(
@@ -30,9 +38,12 @@ class Metadata(pydantic.BaseModel):
 def get_metadata():
     return Metadata(
         version=capellacollab.__version__,
-        privacy_policy_url=cfg.get("privacyPolicyURL"),
-        imprint_url=cfg.get("imprintURL"),
-        provider=cfg.get("provider"),
-        authentication_provider=cfg.get("authenticationProvider"),
-        environment=cfg.get("environment"),
+        privacy_policy_url=metadata_cfg.get("privacyPolicyURL"),
+        imprint_url=metadata_cfg.get("imprintURL"),
+        provider=metadata_cfg.get("provider"),
+        authentication_provider=metadata_cfg.get("authenticationProvider"),
+        environment=metadata_cfg.get("environment"),
+        host=general_cfg.get("host"),
+        port=str(general_cfg.get("port")),
+        protocol=general_cfg.get("scheme"),
     )

backend/config/config_template.yaml

@@ -33,7 +33,7 @@ k8s:
 
 general:
   host: localhost
-  port: 4200
+  port: 8000
   scheme: http
   wildcardHost: False
 

frontend/.eslintrc.js

@@ -70,7 +70,12 @@ module.exports = {
       parser: "@angular-eslint/template-parser",
       rules: {
         "tailwindcss/classnames-order": "off",
-        "tailwindcss/no-custom-classname": "error",
+        "tailwindcss/no-custom-classname": [
+          "error",
+          {
+            whitelist: ["language-python"],
+          },
+        ],
         "tailwindcss/enforces-negative-arbitrary-values": "error",
         "tailwindcss/enforces-shorthand": "error",
         "tailwindcss/no-contradicting-classname": "error",

frontend/angular.json

@@ -33,7 +33,8 @@
             "styles": [
               "src/custom-theme.scss",
               "src/styles.css",
-              "node_modules/ngx-toastr/toastr.css"
+              "node_modules/ngx-toastr/toastr.css",
+              "node_modules/highlight.js/styles/atom-one-dark.css"
             ],
             "optimization": {
               "fonts": false

frontend/package.json

@@ -28,6 +28,7 @@
     "@types/semver": "^7.5.6",
     "buffer": "^6.0.3",
     "file-saver": "^2.0.5",
+    "highlight.js": "^11.9.0",
     "http-status-codes": "^2.3.0",
     "ngx-cookie": "^6.0.1",
     "ngx-skeleton-loader": "^8.1.0",

frontend/src/app/app.module.ts

@@ -46,6 +46,10 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CookieModule } from 'ngx-cookie';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { ToastrModule } from 'ngx-toastr';
+import {
+  HighlightPipeTransform,
+  ModelDiagramCodeBlockComponent,
+} from 'src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-code-block/model-diagram-code-block.component';
 import { BasicAuthTokenComponent } from 'src/app/users/basic-auth-token/basic-auth-token.component';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -182,6 +186,7 @@ import { UsersProfileComponent } from './users/users-profile/users-profile.compo
     FormFieldSkeletonLoaderComponent,
     GitSettingsComponent,
     HeaderComponent,
+    HighlightPipeTransform,
     InitModelComponent,
     InputDialogComponent,
     JobRunOverviewComponent,
@@ -198,6 +203,7 @@ import { UsersProfileComponent } from './users/users-profile/users-profile.compo
     ModelComplexityBadgeComponent,
     ModelDescriptionComponent,
     ModelDetailComponent,
+    ModelDiagramCodeBlockComponent,
     ModelDiagramDialogComponent,
     ModelDiagramPreviewDialogComponent,
     ModelOverviewComponent,

frontend/src/app/general/metadata/metadata.service.ts

@@ -108,4 +108,8 @@ export interface BackendMetadata {
   provider: string;
   authentication_provider: string;
   environment: string;
+
+  host: string;
+  port: string;
+  protocol: string;
 }

frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-code-block/model-diagram-code-block.component.html

@@ -0,0 +1,54 @@
+<!--
+ ~ SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
+ ~ SPDX-License-Identifier: Apache-2.0
+ -->
+
+<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="mt-2">
+    You can also access the diagrams via our Python library
+    <i>capellambse</i>. Follow the installation instructions on
+    <a
+      target="_blank"
+      rel="noopener"
+      class="text-url"
+      href="https://github.com/DSD-DBS/py-capellambse#installation"
+      >Github<span class="align-middle"
+        ><mat-icon class="scale-75">open_in_new</mat-icon></span
+      >
+    </a>
+    and then use the code snippet. To authenticate, you have to insert a
+    personal access token. The token has the same scope as your user. Be careful
+    with it. You can revoke the token in the settings.
+  </div>
+  <pre><code
+    class="language-python my-2 rounded-md border shadow"
+    [innerHTML]="this.codeBlockContent | hightlight: 'python'"
+  ></code></pre>
+  <div class="flex flex-wrap gap-2">
+    <button
+      class="mt-auto self-end"
+      [cdkCopyToClipboard]="this.codeBlockContent"
+      matTooltip="Copy codeblock to clipboard"
+      color="bg-transparent"
+      mat-raised-button
+      (click)="showClipboardMessage()"
+    >
+      <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>
+</mat-expansion-panel>