chore(ui): amending the initial editor implementation

ui/src/components/inputs/Editor.vue

@@ -216,12 +216,12 @@
                 this.decorations = this.editor.createDecorationsCollection();
 
                 if (!this.original) {
-                    this.editor.onDidBlurEditorWidget(() => {
+                    this.editor.onDidBlurEditorWidget?.(() => {
                         this.$emit("focusout", editor.getValue());
                         this.focus = false;
                     })
 
-                    this.editor.onDidFocusEditorText(() => {
+                    this.editor.onDidFocusEditorText?.(() => {
                         this.focus = true;
                     })
 
@@ -262,7 +262,7 @@
                 });
 
                 // TabFocus is global to all editor so revert the behavior on non inputs
-                this.editor.onDidFocusEditorText(() => {
+                this.editor.onDidFocusEditorText?.(() => {
                     TabFocus.setTabFocusMode(this.input);
                 })
 
@@ -349,7 +349,7 @@
                         }
                     });
 
-                    this.editor.onDidChangeCursorPosition(() => {
+                    this.editor.onDidChangeCursorPosition?.(() => {
                         let position = this.editor.getPosition();
                         let model = this.editor.getModel();
                         clearTimeout(this.lastTimeout);
@@ -377,8 +377,8 @@
             },
             highlightPebble() {
                 // Highlight code that match pebble content
-                let model = this.editor.getModel();
-                let text = model.getValue();
+                let model = this.editor?.getModel?.();
+                let text = model?.getValue?.();
                 let regex = new RegExp("\\{\\{(.+?)}}", "g");
                 let match;
                 const decorationsToAdd = [];
@@ -407,6 +407,7 @@
     @import "../../styles/layout/root-dark.scss";
 
     .ks-editor {
+        display: grid;
         width: 100%;
 
         .top-nav {

ui/src/components/inputs/EditorSidebar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="explorerVisible" class="w-25 p-3 sidebar" @click="$refs.tree.setCurrentKey(undefined)">
+    <div v-show="explorerVisible" class="p-3 sidebar" @click="$refs.tree.setCurrentKey(undefined)">
         <div class="d-flex flex-row">
             <el-select
                 v-model="filter"
@@ -114,7 +114,6 @@
             :allow-drop="(_, drop, dropType) => !drop.data?.leaf || dropType !== 'inner'"
             draggable
             node-key="id"
-            empty-text=""
             v-loading="items === undefined"
             :props="{class: 'node', isLeaf: 'leaf'}"
             class="mt-3"
@@ -133,6 +132,11 @@
             @node-drop="nodeMoved"
             @keydown.delete.prevent="deleteKeystroke"
         >
+            <template #empty>
+                <div class="m-5 empty">
+                    {{ $t("namespace files.no_items") }}
+                </div>
+            </template>
             <template #default="{data, node}">
                 <el-dropdown
                     :ref="`dropdown__${data.fileName}`"
@@ -402,7 +406,7 @@
             },
         },
         methods: {
-            ...mapMutations("editor", ["changeOpenedTabs"]),
+            ...mapMutations("editor", ["toggleExplorerVisibility", "changeOpenedTabs"]),
             ...mapActions("namespace", [
                 "createDirectory",
                 "readDirectory",
@@ -446,7 +450,6 @@
                     const items = await this.readDirectory(payload);
 
                     this.renderNodes(items);
-
                     this.items = this.sorted(this.items)
                 }
 
@@ -631,7 +634,7 @@
                                 const folderIndex = currentFolder.findIndex(
                                     (item) =>
                                         typeof item === "object" &&
-                                        item.name === folderName
+                                        item.fileName === folderName
                                 );
                                 if (folderIndex === -1) {
                                     // If the folder doesn't exist, create it
@@ -922,6 +925,10 @@
         height: calc(100% - 64px);
         overflow: hidden auto;
 
+        .el-tree__empty-block {
+            height: auto;
+        }
+
         &::-webkit-scrollbar {
             width: 2px;
         }
@@ -948,11 +955,21 @@
 </style>
 
 <style lang="scss" scoped>
+    @import "@kestra-io/ui-libs/src/scss/variables.scss";
+
     .sidebar {
         flex: unset;
+        min-width: 250px;
+        max-width: 300px;
         background: var(--card-bg);
         border-right: 1px solid var(--bs-border-color);
 
+        .empty {
+            text-align: center;
+            color: $secondary;
+            font-size: $font-size-xs;
+        }
+
         :deep(.el-button):not(.el-dialog .el-button) {
             border: 0;
             background: none;

ui/src/components/inputs/EditorView.vue

@@ -575,10 +575,8 @@
                     fetchGraph();
                 }
 
-                if (validationDomElement.value) {
-                    validationDomElement.value.onResize(
-                        editorDomElement.value.$el.offsetWidth
-                    );
+                if (validationDomElement.value && editorDomElement.value?.$el?.offsetWidth) {
+                    validationDomElement.value.onResize(editorDomElement.value.$el.offsetWidth);
                 }
 
                 return value;
@@ -1038,12 +1036,12 @@
                 )
             "
         >
-            <el-button @click="toggleExplorerVisibility()">
+            <el-button @click="toggleExplorerVisibility()" class="toggle-button">
                 <component :is="explorerVisible ? MenuOpen : MenuClose" />
             </el-button>
         </el-tooltip>
 
-        <el-scrollbar v-if="!isCreating" always ref="tabsScrollRef" class="tabs">
+        <el-scrollbar v-if="!isCreating" always ref="tabsScrollRef" class="ms-1 tabs">
             <el-button
                 v-for="(tab, index) in openedTabs"
                 :key="index"
@@ -1287,6 +1285,7 @@
 
 <style lang="scss" scoped>
     @use "element-plus/theme-chalk/src/mixins/mixins" as *;
+    @import "@kestra-io/ui-libs/src/scss/variables.scss";
 
     .button-top {
         background: var(--card-bg);
@@ -1296,6 +1295,7 @@
         display: flex;
         align-items: center;
         justify-content: end;
+        max-height: 49.5px;
 
         :deep(.validation) {
             border: 0;
@@ -1398,15 +1398,24 @@
         margin-top: calc(3 * var(--spacer));
     }
 
+    .toggle-button {
+        color: $secondary;
+    }
+
     .tabs {
         flex: 1;
         overflow-x: auto;
         white-space: nowrap;
 
         .tab-active {
             background: var(--bs-gray-200) !important;
+            color: black;
             cursor: default;
 
+            html.dark & {
+                color: white;
+            }
+
             .tab-name {
                 font-weight: 600;
             }

ui/src/components/inputs/MonacoEditor.vue

@@ -614,8 +614,8 @@
             destroy: function () {
                 this.subflowAutocompletionProvider?.dispose();
                 this.nestedFieldAutocompletionProvider?.dispose();
-                this.editor?.getModel()?.dispose();
-                this.editor?.dispose();
+                this.editor?.getModel()?.dispose?.();
+                this.editor?.dispose?.();
             },
             needReload: function (newValue, oldValue) {
                 return oldValue.renderSideBySide !== newValue.renderSideBySide;

ui/src/stores/editor.js

@@ -1,13 +1,13 @@
 export default {
     namespaced: true,
     state: {
-        explorerVisible: true,
+        explorerVisible: false,
         current: undefined,
         tabs: [],
     },
     mutations: {
-        toggleExplorerVisibility(state) {
-            state.explorerVisible = !state.explorerVisible;
+        toggleExplorerVisibility(state, isVisible) {
+            state.explorerVisible = isVisible ?? !state.explorerVisible;
         },
         changeOpenedTabs(state, payload) {
             const {

ui/src/translations/en.json

@@ -598,6 +598,7 @@
         "hide": "Hide namespace files"
       },
       "filter": "Filter",
+      "no_items": "No items",
       "tree": {
         "expand": "Expand all folders",
         "collapse": "Collapse all folders"

ui/src/translations/fr.json

@@ -570,55 +570,56 @@
     },
     "namespace files": {
       "toggle": {
-        "show": "Afficher les fichiers de l'espace de noms",
-        "hide": "Masquer les fichiers de l'espace de noms"
+          "show": "Afficher les fichiers de l'espace de noms",
+          "hide": "Masquer les fichiers de l'espace de noms"
       },
       "filter": "Filtrer",
+      "no_items": "Aucun élément",
       "tree": {
-        "expand": "Développer tous les dossiers",
-        "collapse": "Réduire tous les dossiers"
+          "expand": "Développer tous les dossiers",
+          "collapse": "Réduire tous les dossiers"
       },
       "create": {
-        "label": "Créer",
-        "file": "Créer un fichier",
-        "folder": "Créer un dossier"
+          "label": "Créer",
+          "file": "Créer un fichier",
+          "folder": "Créer un dossier"
       },
       "rename": {
-        "label": "Renommer",
-        "file": "Renommer le fichier",
-        "folder": "Renommer le dossier",
-        "new_file": "Nouveau nom avec extension :",
-        "new_folder": "Nouveau nom de dossier :"
+          "label": "Renommer",
+          "file": "Renommer le fichier",
+          "folder": "Renommer le dossier",
+          "new_file": "Nouveau nom avec extension :",
+          "new_folder": "Nouveau nom de dossier :"
       },
       "delete": {
-        "label": "Supprimer",
-        "file": "Supprimer le fichier",
-        "folder": "Supprimer le dossier"
+          "label": "Supprimer",
+          "file": "Supprimer le fichier",
+          "folder": "Supprimer le dossier"
       },
       "import": {
-        "import": "Importer",
-        "file": "Importer un fichier",
-        "folder": "Importer un dossier",
-        "success": "Fichier(s) importé(s) avec succès",
-        "error": "Des erreurs se sont produites lors de l'importation du(des) fichier(s)"
+          "import": "Importer",
+          "file": "Importer un fichier",
+          "folder": "Importer un dossier",
+          "success": "Fichier(s) importé(s) avec succès",
+          "error": "Des erreurs se sont produites lors de l'importation du(des) fichier(s)"
       },
-      "export": "Exporter les fichiers du namespace",
+      "export": "Exporter les fichiers de l'espace de noms",
       "dialog": {
-        "name": {
-          "file": "Nom avec extension :",
-          "folder": "Nom du dossier :"
-        },
-        "parent_folder": "Dossier parent :",
-        "file_deletion": "Confirmer la suppression du fichier",
-        "folder_deletion": "Confirmer la suppression du dossier",
-        "file_deletion_description": "Êtes-vous sûr de vouloir supprimer ce fichier ?",
-        "folder_deletion_description": "Êtes-vous sûr de vouloir supprimer ce dossier et tous ses contenus ?",
-        "confirm": "Confirmer"
+          "name": {
+              "file": "Nom avec extension :",
+              "folder": "Nom du dossier :"
+          },
+          "parent_folder": "Dossier parent :",
+          "file_deletion": "Confirmer la suppression du fichier",
+          "folder_deletion": "Confirmer la suppression du dossier",
+          "file_deletion_description": "Êtes-vous sûr de vouloir supprimer ce fichier ?",
+          "folder_deletion_description": "Êtes-vous sûr de vouloir supprimer ce dossier et tous ses contenus ?",
+          "confirm": "Confirmer"
       },
       "path": {
-        "copy": "Copier le chemin",
-        "success": "Chemin copié dans le presse-papiers",
-        "error": "Des erreurs se sont produites lors de la copie du chemin dans le presse-papiers"
+          "copy": "Copier le chemin",
+          "success": "Chemin copié dans le presse-papiers",
+          "error": "Des erreurs se sont produites lors de la copie du chemin dans le presse-papiers"
       }
     },
     "relative": "Relative",