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
index e9d8c7dfce..c4c2b1d008 100644
--- 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;
+}
\ No newline at end of file
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
index ab0f7019fb..15db294fb2 100644
--- 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 @@
-
- Currently used template:
-
-
-
- hello world
+
Template preview
+
+
{{ this.peekContent }}
+
+ Invalid YAML. Check your provided URL, it should link to raw content of a
+ YAML template.
+
This is an example.
+
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
index b62c64fe47..3ee33dba58 100644
--- 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
index 8c14e8f1e1..59fb8cacd2 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
@@ -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
index 00032d41d9..1bfcbffb75 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,10 +34,12 @@
Plugin information
-
Plugin template preview
+ Template preview
-
{{ this.peekContent }}
+
{{
+ this.peekContent || (this.pluginStoreService.plugin | async)?.content
+ }}
Invalid YAML. Check your provided URL, it should link to raw content of a
YAML template.