fix(plugin-store): Reload from remote URL for plugin templates

DSD-DBS · Aug 27, 2023 · f627254 · f627254
1 parent dea2e67
commit f627254
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 24 deletions.
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
@@ -47,10 +47,9 @@ <h2 id="title">Plugin information</h2>
     </button>
   </div>
   <div id="fetched-result">
-    {{
-      prettifyJSON(
-        this.peekContent || (pluginStoreService.plugin | async)?.content
-      )
-    }}
+    <pre>{{
+      this.peekContent ||
+        prettifyYAML((pluginStoreService.plugin | async)?.content)
+    }}</pre>
   </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
@@ -10,6 +10,7 @@ import { ToastService } from 'src/app/helpers/toast/toast.service';
 import { filter } from 'rxjs';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Plugin, PluginStoreService } from '../service/plugin-store.service';
+import * as yaml from 'js-yaml';
 
 @UntilDestroy()
 @Component({
@@ -56,14 +57,22 @@ export class PluginDetailsComponent {
   }
 
   refreshPluginContent() {
-    this.peekContent = this.pluginStoreService.fetchPluginContentFromRemote(
-      this.editPluginForm.value as Plugin
-    );
+    this.pluginStoreService
+      .fetchPluginContentFromRemote(this.editPluginForm.value as Plugin)
+      .pipe(untilDestroyed(this))
+      .subscribe(plugin => {
+        this.peekContent = this.prettifyYAML(plugin.content);
+      });
   }
 
-  prettifyJSON(content: any, spaces: number = 2) {
-    return JSON.stringify(content, null, spaces);
-  }
+  prettifyYAML(content: any): string {
+    try {
+        return yaml.dump(content);
+    } catch (error) {
+        console.error('Failed to convert content to YAML:', content);
+        return '';
+    }
+}
 
   deletePlugin(): void {
     if (

diff --git a/frontend/src/app/plugins/store/service/plugin-store.service.ts b/frontend/src/app/plugins/store/service/plugin-store.service.ts
@@ -5,7 +5,7 @@
 
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable, tap } from 'rxjs';
+import { BehaviorSubject, Observable, tap, catchError, of } from 'rxjs';
 import { environment } from 'src/environments/environment';
 
 @Injectable({
@@ -66,18 +66,15 @@ export class PluginStoreService {
     });
   }
 
-  fetchPluginContentFromRemote(plugin: Plugin): PluginTemplateContent {
-    // Idea: Preview content with remote from Form without saving back in DB
-    // Only problem is typing >:S
-    var content;
-    this.httpClient.post<Plugin>(`${this.BACKEND_URL_PREFIX}/peek-plugin-content`, plugin)
-      .subscribe({
-        next: (fplugin) => {
-          content = fplugin.content!;
-        },
-        error: (response) => { content = {}}
-      });
-    return content
+  fetchPluginContentFromRemote(plugin: Plugin): Observable<Plugin> {
+    return this.httpClient.post<Plugin>(`${this.BACKEND_URL_PREFIX}/peek-plugin-content`, plugin)
+      .pipe(
+        tap(fplugin => { return fplugin; }),
+        catchError(error => {
+          console.error('Error fetching plugin content:', error);
+          return of({} as Plugin);
+        })
+      );
   }
 
   registerPluginInStore(plugin: Plugin): Observable<Plugin> {