feat(ui): new plugin doc redesign

kestra-io · Jan 22, 2025 · 7097e8d · 7097e8d
1 parent 10bc70c
commit 7097e8d
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 34 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@js-joda/core": "^5.6.3",
-    "@kestra-io/ui-libs": "^0.0.112",
+    "@kestra-io/ui-libs": "^0.0.113",
     "@vue-flow/background": "^1.3.2",
     "@vue-flow/controls": "^1.1.2",
     "@vue-flow/core": "^1.42.1",

diff --git a/ui/src/components/dashboard/components/DashboardEditor.vue b/ui/src/components/dashboard/components/DashboardEditor.vue
@@ -147,11 +147,6 @@
 </template>
 <script setup>
     import PluginDocumentation from "../../plugins/PluginDocumentation.vue";
-    import Markdown from "../../layout/Markdown.vue";
-    import TimeSeries from "./charts/custom/TimeSeries.vue";
-    import Bar from "./charts/custom/Bar.vue";
-    import Pie from "./charts/custom/Pie.vue";
-    import Table from "./tables/custom/Table.vue";
     import ValidationErrors from "../../flows/ValidationError.vue"
     import BookOpenVariant from "vue-material-design-icons/BookOpenVariant.vue";
     import ChartBar from "vue-material-design-icons/ChartBar.vue";
@@ -167,6 +162,11 @@
     import yaml from "yaml";
     import ContentSave from "vue-material-design-icons/ContentSave.vue";
     import intro from "../../../assets/markdown/dashboard_home.md?raw";
+    import Markdown from "../../layout/Markdown.vue";
+    import TimeSeries from "./charts/custom/TimeSeries.vue";
+    import Bar from "./charts/custom/Bar.vue";
+    import Pie from "./charts/custom/Pie.vue";
+    import Table from "./tables/custom/Table.vue";
 
     export default {
         computed: {
@@ -212,7 +212,7 @@
                     if (type && this.plugins.includes(type)) {
                         this.$store.dispatch("plugin/load", {cls: type})
                             .then(plugin => {
-                                this.$store.commit("plugin/setEditorPlugin", plugin);
+                                this.$store.commit("plugin/setEditorPlugin", {cls: type, ...plugin});
                             });
                     } else {
                         this.$store.commit("plugin/setEditorPlugin", undefined);

diff --git a/ui/src/components/executions/Logs.vue b/ui/src/components/executions/Logs.vue
@@ -117,7 +117,7 @@
     import {DynamicScroller, DynamicScrollerItem} from "vue-virtual-scroller";
     import "vue-virtual-scroller/dist/vue-virtual-scroller.css"
     import Collapse from "../layout/Collapse.vue";
-    import {State} from "@kestra-io/ui-libs"
+    import {State, Utils as LibUtils} from "@kestra-io/ui-libs"
     import Utils from "../../utils/utils";
     import LogLine from "../logs/LogLine.vue";
     import Restart from "./Restart.vue";
@@ -278,7 +278,7 @@
                     return;
                 }
 
-                const sortedIndices = [...logIndicesForLevel, this.logCursor].filter(Utils.distinctFilter).sort(this.sortLogsByViewOrder);
+                const sortedIndices = [...logIndicesForLevel, this.logCursor].filter(LibUtils.distinctFilter).sort(this.sortLogsByViewOrder);
                 this.logCursor = sortedIndices?.[sortedIndices.indexOf(this.logCursor) - 1] ?? sortedIndices[sortedIndices.length - 1];
             },
             nextLogForLevel(level) {
@@ -288,7 +288,7 @@
                     return;
                 }
 
-                const sortedIndices = [...logIndicesForLevel, this.logCursor].filter(Utils.distinctFilter).sort(this.sortLogsByViewOrder);
+                const sortedIndices = [...logIndicesForLevel, this.logCursor].filter(LibUtils.distinctFilter).sort(this.sortLogsByViewOrder);
                 this.logCursor = sortedIndices?.[sortedIndices.indexOf(this.logCursor) + 1] ?? sortedIndices[0];
             },
             scrollToLog(index) {

diff --git a/ui/src/components/inputs/EditorView.vue b/ui/src/components/inputs/EditorView.vue
@@ -737,7 +737,7 @@
         const pluginSingleList = store.getters["plugin/getPluginSingleList"];
         if (taskType && pluginSingleList && pluginSingleList.includes(taskType)) {
             store.dispatch("plugin/load", {cls: taskType}).then((plugin) => {
-                store.commit("plugin/setEditorPlugin", plugin);
+                store.commit("plugin/setEditorPlugin", {cls: taskType, ...plugin});
             });
         } else {
             store.commit("plugin/setEditorPlugin", undefined);

diff --git a/ui/src/components/plugins/PluginDocumentation.vue b/ui/src/components/plugins/PluginDocumentation.vue
@@ -1,28 +1,51 @@
 <template>
-    <div class="plugin-documentation-div">
-        <markdown v-if="editorPlugin" :source="editorPlugin.markdown" />
+    <div class="plugin-doc">
+        <template v-if="editorPlugin">
+            <div class="d-flex gap-3 mb-3 align-items-center">
+                <task-icon
+                    class="plugin-icon"
+                    :cls="editorPlugin.cls"
+                    only-icon
+                    :icons="icons"
+                />
+                <h4 class="mb-0">
+                    {{ pluginName }}
+                </h4>
+            </div>
+            <Suspense>
+                <schema-to-html class="plugin-schema" :schema="editorPlugin.schema" :plugin-type="editorPlugin.cls">
+                    <template #markdown="{content}">
+                        <markdown font-size-var="font-size-base" :source="content" />
+                    </template>
+                </schema-to-html>
+            </Suspense>
+        </template>
         <markdown v-else :source="introContent" />
     </div>
 </template>
 
 <script>
     import Markdown from "../layout/Markdown.vue";
+    import {SchemaToHtml, TaskIcon} from "@kestra-io/ui-libs";
     import {mapState} from "vuex";
     import intro from "../../assets/documentations/basic.md?raw"
 
     export default {
-        name: "PluginDocumentation",
-        components: {Markdown},
+        components: {Markdown, SchemaToHtml, TaskIcon},
         props: {
             overrideIntro: {
                 type: String,
                 default: null
             }
         },
         computed: {
-            ...mapState("plugin", ["editorPlugin"]),
+            ...mapState("plugin", ["editorPlugin", "icons"]),
             introContent () {
                 return this.overrideIntro ?? intro
+            },
+            pluginName() {
+                const split = this.editorPlugin.cls.split(".");
+                return split[split.length - 1];
             }
         },
         created() {
@@ -32,12 +55,61 @@
 </script>
 
 <style scoped lang="scss">
-    .plugin-documentation-div {
-        width: 0;
+    @use "@kestra-io/ui-libs/src/scss/color-palette" as color-palette;
 
-        :deep(.markdown) {
-            :first-child {
-                margin-top: 0;
+    .plugin-doc {
+        background-color: var(--ks-background-body) !important;
+
+        :deep(.plugin-title) {
+            font-size: 1.25em;
+        }
+
+        .plugin-icon {
+            width: 25px;
+            height: 25px;
+        }
+
+        .plugin-schema {
+            :deep(.code-block) {
+                background-color: var(--ks-background-card);
+                border: 1px solid var(--ks-border-primary)
+            }
+
+            :deep(.language) {
+                color: var(--ks-content-tertiary);
+            }
+
+            :deep(.plugin-section) {
+                p {
+                    margin-bottom: 0;
+                }
+                .collapse-button {
+                    padding: 3px 0;
+                    font-size: var(--font-size-lg);
+                    line-height: 1.5rem;
+                }
+
+                > .collapse-button:not(.collapsed) {
+                    color: color-palette.$base-purple-200;
+                }
+
+                .property:not(:has(.collapsed)) {
+                    background-color: color-palette.$base-gray-900;
+                }
+
+                .type-box{
+                    .ref-type {
+                        border-right: 1px solid var(--ks-border-primary);
+                    }
+
+                    &:has(.ref-type):hover {
+                        background: var(--ks-button-background-secondary-hover) !important;
+
+                        .ref-type {
+                            border-right: 1px solid var(--ks-border-secondary);
+                        }
+                    }
+                }
             }
         }
     }

diff --git a/ui/src/mixins/flowTemplateEdit.js b/ui/src/mixins/flowTemplateEdit.js
@@ -6,10 +6,10 @@ import Delete from "vue-material-design-icons/Delete.vue";
 import Editor from "../components/inputs/Editor.vue";
 import RouteContext from "./routeContext";
 import YamlUtils from "../utils/yamlUtils";
+import yamlUtils from "../utils/yamlUtils";
 import action from "../models/action";
 import permission from "../models/permission";
 import {pageFromRoute} from "../utils/eventsRouter";
-import yamlUtils from "../utils/yamlUtils";
 import {apiUrl} from "override/utils/route";
 
 export default {
@@ -266,7 +266,7 @@ export default {
             if (taskType && this.pluginSingleList.includes(taskType)) {
                 this.$store.dispatch("plugin/load", {cls: taskType})
                     .then(plugin => {
-                        this.$store.commit("plugin/setEditorPlugin", plugin);
+                        this.$store.commit("plugin/setEditorPlugin", {cls: taskType, ...plugin});
                     });
             } else {
                 this.$store.commit("plugin/setEditorPlugin", undefined);

diff --git a/ui/src/utils/utils.js b/ui/src/utils/utils.js
@@ -210,7 +210,7 @@ export default class Utils {
         // class name
         let htmlClass = document.getElementsByTagName("html")[0].classList;
 
-        function removeClasses() 
+        function removeClasses()
         {
             htmlClass.forEach((cls) => {
             if (cls === "dark" || cls === "light" || cls === "syncWithSystem") {
@@ -238,7 +238,7 @@ export default class Utils {
         if(theme === "syncWithSystem") {
             theme = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
         }
-        
+
         return theme;
     }
 
@@ -276,10 +276,6 @@ export default class Utils {
         document.body.removeChild(node);
     }
 
-    static distinctFilter(value, index, array) {
-        return array.indexOf(value) === index;
-    }
-
     static toFormData(obj) {
         if (!(obj instanceof FormData)) {
             const formData = new FormData();