From 4f839aff24da2591cdc8604e2f5e113bf6ffc155 Mon Sep 17 00:00:00 2001
From: ewuerger <ernst.wuerger@gmail.com>
Date: Sun, 27 Aug 2023 11:50:01 +0200
Subject: [PATCH] feat(plugin-store): Get rid of the button

---
 .../plugin-details.component.css              | 11 ++++++++
 .../plugin-details.component.html             | 28 +++++++++----------
 .../plugin-detail/plugin-details.component.ts | 24 +++++++++++-----
 3 files changed, 41 insertions(+), 22 deletions(-)

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
index 9f49c8aa02..8c14e8f1e1 100644
--- a/frontend/src/app/plugins/store/plugin-detail/plugin-details.component.css
+++ b/frontend/src/app/plugins/store/plugin-detail/plugin-details.component.css
@@ -10,3 +10,14 @@
 .metadata-item {
   flex-basis: 50%;
 }
+
+.highlight-link {
+  color: #007BFF;
+  text-decoration: underline;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.highlight-link:hover {
+  color: #0056b3;
+}
\ No newline at end of file
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
index abf59bb8c6..00032d41d9 100644
--- 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,22 +34,20 @@ <h2 id="title">Plugin information</h2>
     </div>
   </form>
 </mat-card>
+<h2 id="title">Plugin template preview</h2>
 <mat-card>
-  <div class="flex-space-between">
-    <span> Currently used template: </span>
-    <button
-      mat-raised-button
-      color="primary"
-      id="reload"
-      (click)="refreshPluginContent()"
-    >
-      <mat-icon>refresh</mat-icon> Reload from remote
-    </button>
-  </div>
   <div id="fetched-result">
-    <pre>{{
-      this.peekContent ||
-        prettifyYAML((pluginStoreService.plugin | async)?.content)
-    }}</pre>
+    <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/plugin-detail/plugin-details.component.ts b/frontend/src/app/plugins/store/plugin-detail/plugin-details.component.ts
index 869e00fc57..67d0cfbace 100644
--- a/frontend/src/app/plugins/store/plugin-detail/plugin-details.component.ts
+++ b/frontend/src/app/plugins/store/plugin-detail/plugin-details.component.ts
@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { ToastService } from 'src/app/helpers/toast/toast.service';
-import { filter } from 'rxjs';
+import { filter, debounceTime } from 'rxjs';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Plugin, PluginStoreService } from '../service/plugin-store.service';
 import * as yaml from 'js-yaml';
@@ -37,6 +37,14 @@ export class PluginDetailsComponent {
         this.plugin = plugin;
         this.editPluginForm.patchValue(plugin);
       });
+    this.editPluginForm.controls['remote'].valueChanges
+      .pipe(
+        debounceTime(500),
+        untilDestroyed(this)
+      )
+      .subscribe(() => {
+        this.refreshPluginContent();
+      });
   }
 
   editPluginForm = new FormGroup({
@@ -66,13 +74,15 @@ export class PluginDetailsComponent {
   }
 
   prettifyYAML(content: any): string {
-    try {
-        return yaml.dump(content);
-    } catch (error) {
-        console.error('Failed to convert content to YAML:', content);
-        return '';
+    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;
+  }
 
   deletePlugin(): void {
     if (