feat(ui): editor plugin doc must be always visible and cached (#1087)

Author: Skraye

Diff for: ui/src/components/inputs/Editor.vue

@@ -13,12 +13,9 @@
                 </el-tooltip>
             </el-button-group>
             <span v-if="!this.guidedProperties.tourStarted">
-                <el-tooltip v-if="editorTypeDocumentation" :content="editorDocumentation ? $t('hide task documentation') : $t('show task documentation')" :persistent="false" transition="" :hide-after="0">
+                <el-tooltip :content="editorDocumentation ? $t('hide task documentation') : $t('show task documentation')" :persistent="false" transition="" :hide-after="0">
                     <el-button type="info" :icon="editorDocumentation ? icon.Close : icon.BookMultipleOutline" circle style="float: right" size="small" @click="setShowDocumentation" />
                 </el-tooltip>
-                <el-tooltip v-else :content="$t('Click on a task to show documentation')" :persistent="false" transition="" :hide-after="0">
-                    <el-button type="info" :icon="icon.Help" circle style="float: right" size="small" @click="setShowDocumentation" />
-                </el-tooltip>
             </span>
         </nav>
 
@@ -45,8 +42,12 @@
                     {{ placeholder }}
                 </div>
             </div>
-            <div v-if="!this.guidedProperties.tourStarted" :class="[editorTypeDocumentation && plugin && editorDocumentation ? 'plugin-doc-active' : '','plugin-doc']">
+            <div v-if="!this.guidedProperties.tourStarted" :class="[editorDocumentation ? 'plugin-doc-active' : '','plugin-doc']">
                 <markdown v-if="plugin" :source="plugin.markdown" />
+                <div v-else>
+                    <div class="img get-started" />
+                    <el-alert type="info" :title="$t('focus task')" show-icon :closable="false" />
+                </div>
             </div>
         </div>
     </div>
@@ -100,11 +101,13 @@
                     Close: shallowRef(Close)
                 },
                 oldDecorations: [],
-                editorDocumentation: undefined
+                editorDocumentation: undefined,
+                plugin: undefined,
+                taskType: undefined
             };
         },
         computed: {
-            ...mapState("plugin", ["plugin","pluginSingleList","editorTypeDocumentation"]),
+            ...mapState("plugin", ["pluginSingleList","pluginsDocumentation"]),
             ...mapGetters("core", ["guidedProperties"]),
             themeComputed() {
                 const darkTheme = document.getElementsByTagName("html")[0].className.indexOf("dark") >= 0;
@@ -317,13 +320,20 @@
                     let model = this.editor.getModel();
                     const taskType = yamlUtils.getTaskType(model.getValue(),position)
                     if (taskType && this.pluginSingleList.includes(taskType)) {
-                        if(localStorage.getItem("editorDocumentation") !== "false") {
+                        if (!this.pluginsDocumentation[taskType]) {
                             this.$store
                                 .dispatch("plugin/load", {cls: taskType})
+                                .then(plugin => {
+                                    this.$store.commit("plugin/setPluginsDocumentation", {...this.pluginsDocumentation, [taskType]: plugin});
+                                    this.plugin = plugin;
+                                });
+                        } else if (this.pluginsDocumentation[taskType]) {
+                            this.plugin = this.pluginsDocumentation[taskType];
                         }
-                        this.$store.commit("plugin/setEditorTypeDocumentation", taskType);
+                        this.taskType = taskType;
                     } else {
-                        this.$store.commit("plugin/setEditorTypeDocumentation", undefined);
+                        this.plugin = undefined;
+                        this.taskType = undefined;
                     }
                 });
             },
@@ -358,9 +368,17 @@
             setShowDocumentation() {
                 this.editorDocumentation = !this.editorDocumentation;
                 localStorage.setItem("editorDocumentation", (this.editorDocumentation).toString());
-                if(this.editorTypeDocumentation) {
-                    this.$store
-                        .dispatch("plugin/load", {cls: this.editorTypeDocumentation})
+                if (this.taskType) {
+                    if (!this.pluginsDocumentation[this.taskType]) {
+                        this.$store
+                            .dispatch("plugin/load", {cls: this.taskType})
+                            .then(plugin => {
+                                this.$store.commit("plugin/setPluginsDocumentation", {...this.pluginsDocumentation, [this.taskType]: plugin});
+                                this.plugin = plugin;
+                            });
+                    } else if (this.pluginsDocumentation[this.taskType]) {
+                        this.plugin = this.pluginsDocumentation[this.taskType];
+                    }
                 }
             }
         },
@@ -486,4 +504,17 @@
         padding: calc(var(--spacer)*1.5);
     }
 
+    div.img {
+        min-height: 130px;
+        height: 100%;
+
+        &.get-started {
+            background: url("../../assets/onboarding/onboarding-started-light.svg") no-repeat center;
+
+            html.dark & {
+                background: url("../../assets/onboarding/onboarding-started-dark.svg") no-repeat center;
+            }
+        }
+    }
+
 </style>

Diff for: ui/src/stores/plugins.js

@@ -5,7 +5,7 @@ export default {
         plugins: undefined,
         pluginSingleList: undefined,
         icons: undefined,
-        editorTypeDocumentation: undefined
+        pluginsDocumentation: {}
     },
     actions: {
         list({commit}) {
@@ -48,8 +48,8 @@ export default {
         setIcons(state, icons) {
             state.icons = icons
         },
-        setEditorTypeDocumentation(state, editorTypeDocumentation) {
-            state.editorTypeDocumentation = editorTypeDocumentation
+        setPluginsDocumentation(state, pluginsDocumentation) {
+            state.pluginsDocumentation = pluginsDocumentation
         }
     },
     getters: {}

Diff for: ui/src/translations.json

@@ -377,7 +377,8 @@
     "show task documentation": "Show Task documentation",
     "hide task documentation": "Hide Task documentation",
     "show task documentation in editor": "Show Task documentation in editor",
-    "show documentation": "Show documentation"
+    "show documentation": "Show documentation",
+    "focus task": "Focus on any element to see its documentation."
   },
   "fr": {
     "id": "Identifiant",
@@ -755,9 +756,10 @@
     "watch demo content": "Obtenez un aperçu de la puissance de Kestra grâce à notre vidéo de démonstration.",
     "need help?": "Besoin d'aide?",
     "need help? content": "Besoin d'assistance pour une fonctionnalité ou un flow? Notre communauté d'ingénieurs data et de développeurs sont là pour aider.",
-    "show task documentation": "Show Task documentation",
-    "hide task documentation": "Hide Task documentation",
-    "show task documentation in editor": "Show Task documentation in editor",
-    "show documentation": "Show documentation"
+    "show task documentation": "Afficher la documentation des tâches",
+    "hide task documentation": "Cacher la documentation des tâches",
+    "show task documentation in editor": "Afficher la documentation dans l'éditeur",
+    "show documentation": "Afficher la documentation",
+    "focus task": "Cliquer sur une tâche pour voir sa documentation"
   }
 }

Diff for: ui/src/utils/yamlUtils.js

@@ -166,9 +166,11 @@ export default class YamlUtils {
         const lineCounter = new LineCounter();
         const yamlDoc = yaml.parseDocument(source, {lineCounter});
         const cursorIndex = lineCounter.lineStarts[position.lineNumber-1] + position.column;
-        for(const item of yamlDoc.contents.items){
-            if(item.value instanceof YAMLSeq && item.key.range[0] <= cursorIndex && item.value.range[1] >= cursorIndex){
-                return YamlUtils._getTaskType(item.value, cursorIndex, null)
+        if(yamlDoc.contents) {
+            for (const item of yamlDoc.contents.items) {
+                if (item.value instanceof YAMLSeq && item.key.range[0] <= cursorIndex && item.value.range[1] >= cursorIndex) {
+                    return YamlUtils._getTaskType(item.value, cursorIndex, null)
+                }
             }
         }
     }

Diff for: webserver/src/main/java/io/kestra/webserver/controllers/PluginController.java

@@ -120,7 +120,8 @@ public Map<String, PluginIcon> icons() {
     @Get(uri = "{cls}")
     @ExecuteOn(TaskExecutors.IO)
     @Operation(tags = {"Plugins"}, summary = "Get plugin documentation")
-    public Doc pluginDocumentation(
+    @Cacheable("default")
+    public HttpResponse<Doc> pluginDocumentation(
         @Parameter(description = "The plugin full class name") @PathVariable String cls,
         @Parameter(description = "Include all the properties") @QueryValue(value = "all", defaultValue = "false") boolean allProperties
     ) throws IOException {
@@ -130,14 +131,16 @@ public Doc pluginDocumentation(
             allProperties
         );
 
-        return new Doc(
-            DocumentationGenerator.render(classPluginDocumentation),
-            new Schema(
-                classPluginDocumentation.getPropertiesSchema(),
-                classPluginDocumentation.getOutputsSchema(),
-                classPluginDocumentation.getDefs()
-            )
-        );
+        return HttpResponse.ok()
+            .body(new Doc(
+                DocumentationGenerator.render(classPluginDocumentation),
+                new Schema(
+                    classPluginDocumentation.getPropertiesSchema(),
+                    classPluginDocumentation.getOutputsSchema(),
+                    classPluginDocumentation.getDefs()
+                )
+            ))
+            .header("Cache-Control", "public, max-age=3600");
     }
 
     @SuppressWarnings({"rawtypes", "unchecked"})