refactor(plugin-store): Standardize create and edit of plugins

DSD-DBS · Aug 27, 2023 · 443fcc7 · 443fcc7
1 parent 4f839af
commit 443fcc7
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 19 deletions.
diff --git a/frontend/src/app/plugins/store/create-plugin/create-plugin.component.css b/frontend/src/app/plugins/store/create-plugin/create-plugin.component.css
@@ -22,6 +22,17 @@
   overflow-y: scroll;
 }
 
-#reload {
-  margin-bottom: 5px;
+.card-title {
+  margin-bottom: 10px;
 }
+
+.highlight-link {
+  color: #007BFF;
+  text-decoration: underline;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.highlight-link:hover {
+  color: #0056b3;
+}
diff --git a/frontend/src/app/plugins/store/create-plugin/create-plugin.component.html b/frontend/src/app/plugins/store/create-plugin/create-plugin.component.html
@@ -34,18 +34,19 @@
   </form>
 </mat-card>
 <mat-card>
-  <div class="flex-space-between">
-    <span> Currently used template: </span>
-    <button mat-raised-button color="primary" id="reload">
-      <mat-icon>refresh</mat-icon> Reload from remote
-    </button>
-  </div>
-  <div
-    id="fetched-result"
-    [innerHTML]="
-      prettifyJSON((this.pluginStoreService.plugin | async)?.content)
-    "
-  >
-    hello world
+  <div class="card-title">Template preview</div>
+  <div id="fetched-result">
+    <pre *ngIf="!shouldShowLink(this.peekContent)">{{ this.peekContent }}</pre>
+    <div *ngIf="shouldShowLink(this.peekContent)">
+      Invalid YAML. Check your provided URL, it should link to raw content of a
+      YAML template.
+      <a
+        href="https://raw.githubusercontent.com/DSD-DBS/capella-collab-manager/plugins-store/backend/tests/data/mbse-works-plugin.yml"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="highlight-link"
+        >This is an example.</a
+      >
+    </div>
   </div>
 </mat-card>
diff --git a/frontend/src/app/plugins/store/create-plugin/create-plugin.component.ts b/frontend/src/app/plugins/store/create-plugin/create-plugin.component.ts
@@ -6,22 +6,39 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { debounceTime } from 'rxjs';
 import {
   Plugin,
   PluginStoreService,
 } from 'src/app/plugins/store/service/plugin-store.service';
+import * as yaml from 'js-yaml';
 
+@UntilDestroy()
 @Component({
   selector: 'app-create-plugin',
   templateUrl: './create-plugin.component.html',
   styleUrls: ['./create-plugin.component.css'],
 })
 export class CreatePluginComponent {
+  peekContent = '';
+
   constructor(
     public pluginStoreService: PluginStoreService,
     private router: Router
   ) { }
 
+  ngOnInit(): void {
+    this.createPluginForm.controls['remote'].valueChanges
+      .pipe(
+        debounceTime(500),
+        untilDestroyed(this)
+      )
+      .subscribe(() => {
+        this.refreshPluginContent();
+      });
+  }
+
   createPluginForm = new FormGroup({
     remote: new FormControl('', Validators.required),
     username: new FormControl(''),
@@ -39,7 +56,23 @@ export class CreatePluginComponent {
     }
   }
 
-  prettifyJSON(content: any, spaces: number = 2) {
-    return JSON.stringify(content, null, spaces);
+  refreshPluginContent() {
+    this.pluginStoreService
+      .fetchPluginContentFromRemote(this.createPluginForm.value as Plugin)
+      .pipe(untilDestroyed(this))
+      .subscribe(plugin => {
+        this.peekContent = this.prettifyYAML(plugin.content);
+      });
+  }
+
+  prettifyYAML(content: any): string {
+    if (content == undefined) {
+      return 'Invalid YAML. Check your provided URL, it should link to raw content of a YAML template. This is an example.';
+    }
+    return yaml.dump(content);
+  }
+
+  shouldShowLink(content: string): boolean {
+    return content ? content.includes('This is an example.') : false;
   }
 }
diff --git a/frontend/src/app/plugins/store/plugin-detail/plugin-details.component.css b/frontend/src/app/plugins/store/plugin-detail/plugin-details.component.css
@@ -7,10 +7,33 @@
   margin-left: 10px;
 }
 
+#username,
+#password {
+  width: 300px;
+}
+
+#username {
+  margin-right: 10px;
+}
+
+#fetched-result {
+  height: 500px;
+  padding: 10px;
+  border: solid;
+  border-radius: 5px;
+  border-color: lightgray;
+  font-family: "Courier New", Courier, monospace;
+  overflow-y: scroll;
+}
+
 .metadata-item {
   flex-basis: 50%;
 }
 
+.card-title {
+  margin-bottom: 20px;
+}
+
 .highlight-link {
   color: #007BFF;
   text-decoration: underline;

diff --git a/frontend/src/app/plugins/store/plugin-detail/plugin-details.component.html b/frontend/src/app/plugins/store/plugin-detail/plugin-details.component.html
@@ -34,10 +34,12 @@ <h2 id="title">Plugin information</h2>
     </div>
   </form>
 </mat-card>
-<h2 id="title">Plugin template preview</h2>
 <mat-card>
+  <div class="card-title">Template preview</div>
   <div id="fetched-result">
-    <pre *ngIf="!shouldShowLink(this.peekContent)">{{ this.peekContent }}</pre>
+    <pre *ngIf="!shouldShowLink(this.peekContent)">{{
+      this.peekContent || (this.pluginStoreService.plugin | async)?.content
+    }}</pre>
     <div *ngIf="shouldShowLink(this.peekContent)">
       Invalid YAML. Check your provided URL, it should link to raw content of a
       YAML template.