n8n-editor-ui 1.108.1 → 1.109.1-exp.0

package/dist/assets/{DataStoreDetailsView-B0CKO8ZR.css → DataStoreDetailsView-BxDmY87S.css}

@@ -258,42 +258,42 @@
  -------------------------- */
 /* BEM
  -------------------------- */
-._wrapper_12ddz_123 {
+._wrapper_1s3y8_123 {
   display: flex;
   align-items: center;
   background: var(--color-background-base);
   padding: var(--spacing-2xs);
   border: var(--border-base);
   border-left: none;
-  height: 50px;
+  height: 38px;
 }
-._popover-content_12ddz_133 {
+._popover-content_1s3y8_133 {
   display: flex;
   flex-direction: column;
   width: 300px;
 }
-._popover-header_12ddz_139 {
+._popover-header_1s3y8_139 {
   padding: var(--spacing-2xs);
   border-bottom: var(--border-base);
 }
-._popover-body_12ddz_144 {
+._popover-body_1s3y8_144 {
   padding: var(--spacing-xs);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xs);
 }
-._option-content_12ddz_151 {
+._option-content_1s3y8_151 {
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
 }
-._error-message_12ddz_157 {
+._error-message_1s3y8_157 {
   display: flex;
   align-items: center;
   gap: var(--spacing-4xs);
   color: var(--color-text-danger);
 }
-._error-tooltip_12ddz_164 {
+._error-tooltip_1s3y8_164 {
   cursor: pointer;
 }/* BEM support Func
  -------------------------- */
@@ -417,14 +417,286 @@
  -------------------------- */
 /* BEM
  -------------------------- */
-._wrapper_m4zo5_123 {
+.data-store-column-header-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.data-store-column-header-action-item {
+  justify-content: flex-start;
+  gap: var(--spacing-xs);
+}
+.data-store-column-header-icon-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2xs);
+  min-width: 0;
+}
+.data-store-column-header-icon-wrapper .n8n-icon {
+  flex-shrink: 0;
+}
+.ag-header-cell-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  flex: 1;
+}/* BEM support Func
+ -------------------------- */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Outline
+-------------------------- */
+/* Box shadow
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+.n8n-empty-value {
+  font-style: italic;
+  color: var(--color-text-lighter);
+}/* BEM support Func
+ -------------------------- */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Outline
+-------------------------- */
+/* Box shadow
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+._wrapper_b8s2n_123 {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-m);
   width: calc(100% - var(--spacing-m) * 2);
   align-items: center;
 }
-._grid-container_m4zo5_131 {
+._grid-container_b8s2n_131 {
   position: relative;
   display: flex;
   width: 100%;
@@ -437,40 +709,47 @@
   --ag-font-family: var(--font-family);
   --ag-font-size: var(--font-size-xs);
   --ag-row-height: calc(var(--ag-grid-size) * 0.8 + 32px);
-  --ag-header-background-color: var(--color-background-base);
+  --ag-header-background-color: var(--color-background-light-base);
   --ag-header-font-size: var(--font-size-xs);
   --ag-header-font-weight: var(--font-weight-bold);
   --ag-header-foreground-color: var(--color-text-dark);
-  --ag-cell-horizontal-padding: calc(var(--ag-grid-size) * 0.7);
-  --ag-header-column-resize-handle-color: var(--border-color-base);
+  --ag-cell-horizontal-padding: var(--spacing-2xs);
+  --ag-header-column-resize-handle-color: var(--color-foreground-base);
   --ag-header-column-resize-handle-height: 100%;
   --ag-header-height: calc(var(--ag-grid-size) * 0.8 + 32px);
 }
-._grid-container_m4zo5_131 .ag-header-cell-resize {
-  width: var(--spacing-4xs);
+._grid-container_b8s2n_131 .ag-header-cell-resize {
+  width: var(--spacing-xs);
+  right: -7px;
+}
+._grid-container_b8s2n_131 .ag-cell[col-id="ag-Grid-SelectionColumn"] {
+  border: none;
+}
+._grid-container_b8s2n_131 .ag-cell[col-id="ag-Grid-SelectionColumn"].ag-cell-focus {
+  outline: none;
 }
-._add-column-popover_m4zo5_157 {
+._add-column-popover_b8s2n_164 {
   display: flex;
   position: absolute;
   right: -47px;
 }
-._footer_m4zo5_163 {
+._footer_b8s2n_170 {
   display: flex;
   width: 100%;
   justify-content: space-between;
   margin-bottom: var(--spacing-l);
   padding-right: var(--spacing-xl);
 }
-._footer_m4zo5_163 .el-pagination__sizes {
+._footer_b8s2n_170 .el-pagination__sizes {
   height: 100%;
   position: relative;
   top: -1px;
 }
-._footer_m4zo5_163 .el-pagination__sizes input {
+._footer_b8s2n_170 .el-pagination__sizes input {
   height: 100%;
   min-height: 28px;
 }
-._footer_m4zo5_163 .el-pagination__sizes .el-input__suffix {
+._footer_b8s2n_170 .el-pagination__sizes .el-input__suffix {
   width: var(--spacing-m);
 }/* BEM support Func
  -------------------------- */
@@ -594,7 +873,7 @@
  -------------------------- */
 /* BEM
  -------------------------- */
-._data-store-details-view_12eds_123 {
+._data-store-details-view_1eejh_123 {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -604,15 +883,21 @@
   align-content: start;
   padding: var(--spacing-l) var(--spacing-2xl) 0;
 }
-._header-loading_12eds_134 {
+._header-loading_1eejh_134 {
   margin-bottom: var(--spacing-2xl);
 }
-._header-loading_12eds_134 div {
+._header-loading_1eejh_134 div {
   height: 2em;
 }
-._header_12eds_134 {
+._header_1eejh_134 {
   display: flex;
+  gap: var(--spacing-l);
   align-items: center;
-  justify-content: space-between;
   margin-bottom: var(--spacing-xl);
+}
+._saving_1eejh_148 {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3xs);
+  margin-top: var(--spacing-5xs);
 }

package/dist/assets/{DataStoreView-Ca7MkqMT.js → DataStoreView-B0rFOKrx.js}

@@ -1,11 +1,12 @@
-import { d as defineComponent, aG as useTemplateRef, x as computed, gt as DATA_STORE_DETAILS, h as createElementBlock, g as openBlock, i as createVNode, w as withCtx, s as N8nCard, n as normalizeClass, j as createBaseVNode, B as withModifiers, p as N8nText, k as createTextVNode, t as toDisplayString, l as unref, c as useI18n, eD as _sfc_main$3, e as createBlock, f as createCommentVNode, aH as InlineRename, aK as N8nBadge, N as N8nIcon, C as N8nLink, _ as _export_sfc, aa as useRoute, Y as useDebounce, ax as useDocumentTitle, a as useToast, g2 as useInsightsStore, au as useProjectsStore, aj as useSourceControlStore, r as ref, aF as ProjectTypes, o as onMounted, dR as N8nActionBox, Z as useUIStore, gu as ADD_DATA_STORE_MODAL_KEY, gv as DEFAULT_DATA_STORE_PAGE_SIZE } from "./index-DuT-FIl1.js";
-import { P as ProjectHeader } from "./ProjectHeader-Br8yvqkf.js";
-import { R as ResourcesListLayout } from "./ResourcesListLayout-ozILtp5g.js";
-import { I as InsightsSummary } from "./InsightsSummary-CpUOsQoR.js";
-import { u as useProjectPages } from "./useProjectPages-BkXBOvhp.js";
-import { _ as _sfc_main$2 } from "./DataStoreActions.vue_vue_type_script_setup_true_lang-4xXQM9V0.js";
-import { u as useDataStoreStore } from "./dataStore.store-TYb453Ex.js";
-import "./TableBase-DpxvhaiM.js";
+import { R as ResourcesListLayout } from "./ResourcesListLayout-CL3ardp2.js";
+import { d as defineComponent, x as computed, gx as DATA_STORE_DETAILS, h as createElementBlock, g as openBlock, i as createVNode, w as withCtx, s as N8nCard, n as normalizeClass, j as createBaseVNode, B as withModifiers, p as N8nText, k as createTextVNode, t as toDisplayString, l as unref, c as useI18n, eE as _sfc_main$3, e as createBlock, f as createCommentVNode, aK as N8nBadge, N as N8nIcon, C as N8nLink, _ as _export_sfc, a2 as useRoute, b as useRouter, P as useDebounce, ax as useDocumentTitle, a as useToast, g5 as useInsightsStore, au as useProjectsStore, af as useSourceControlStore, Q as useUIStore, r as ref, aF as ProjectTypes, o as onMounted, a7 as watch, dS as N8nActionBox, ge as PROJECT_DATA_STORES, gy as DEFAULT_DATA_STORE_PAGE_SIZE, gz as ADD_DATA_STORE_MODAL_KEY } from "./index-Cz15Tiv9.js";
+import { P as ProjectHeader } from "./ProjectHeader-RvcbYSCb.js";
+import { I as InsightsSummary } from "./InsightsSummary-BwAXblg3.js";
+import { u as useProjectPages } from "./useProjectPages-atXZB4mX.js";
+import { _ as _sfc_main$2 } from "./DataStoreActions.vue_vue_type_script_setup_true_lang-Uy8kEcSJ.js";
+import { u as useDataStoreStore } from "./dataStore.store-_vnx0W6W.js";
+import "./TableBase-OkNFnxMN.js";
+import "./PageViewLayout-DfWGehvM.js";
 const _hoisted_1 = { "data-test-id": "data-store-card" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "DataStoreCard",
@@ -14,12 +15,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     readOnly: { type: Boolean, default: false },
     showOwnershipBadge: { type: Boolean, default: false }
   },
-  emits: ["rename"],
-  setup(__props, { emit: __emit }) {
+  setup(__props) {
     const i18n = useI18n();
     const props = __props;
-    const emit = __emit;
-    const renameInput = useTemplateRef("renameInput");
     const dataStoreRoute = computed(() => {
       return {
         name: DATA_STORE_DETAILS,
@@ -29,22 +27,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }
       };
     });
-    const onRename = () => {
-      if (renameInput.value && typeof renameInput.value.forceFocus === "function") {
-        setTimeout(() => {
-          renameInput.value?.forceFocus?.();
-        }, 100);
-      }
-    };
-    const onNameSubmit = (name) => {
-      if (props.dataStore.name === name) return;
-      emit("rename", {
-        dataStore: { ...props.dataStore, name }
-      });
-    };
     return (_ctx, _cache) => {
       const _component_N8nIcon = N8nIcon;
-      const _component_N8nInlineTextEdit = InlineRename;
+      const _component_n8n_text = N8nText;
       const _component_N8nBadge = N8nBadge;
       const _component_N8nText = N8nText;
       const _component_TimeAgo = _sfc_main$3;
@@ -75,18 +60,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   onClick: _cache[0] || (_cache[0] = withModifiers(() => {
                   }, ["prevent"]))
                 }, [
-                  createVNode(_component_N8nInlineTextEdit, {
-                    ref_key: "renameInput",
-                    ref: renameInput,
-                    "data-test-id": "datastore-name-input",
-                    placeholder: unref(i18n).baseText("dataStore.add.input.name.label"),
-                    class: normalizeClass(_ctx.$style["card-name"]),
-                    "model-value": props.dataStore.name,
-                    "max-length": 50,
-                    "read-only": props.readOnly,
-                    disabled: props.readOnly,
-                    "onUpdate:modelValue": onNameSubmit
-                  }, null, 8, ["placeholder", "class", "model-value", "read-only", "disabled"]),
+                  createVNode(_component_n8n_text, {
+                    tag: "h2",
+                    bold: "",
+                    "data-test-id": "data-store-card-name"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(props.dataStore.name), 1)
+                    ]),
+                    _: 1
+                  }),
                   props.readOnly ? (openBlock(), createBlock(_component_N8nBadge, {
                     key: 0,
                     class: "ml-3xs",
@@ -169,7 +152,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   createVNode(_sfc_main$2, {
                     "data-store": props.dataStore,
                     "is-read-only": props.readOnly,
-                    onRename
+                    location: "card"
                   }, null, 8, ["data-store", "is-read-only"])
                 ], 2)
               ]),
@@ -182,17 +165,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const card = "_card_1y92f_123";
+const card = "_card_1cq4j_123";
 const style0 = {
   card,
-  "card-name": "_card-name_1y92f_131",
-  "card-icon": "_card-icon_1y92f_137",
-  "card-header": "_card-header_1y92f_144",
-  "card-footer": "_card-footer_1y92f_152",
-  "info-cell": "_info-cell_1y92f_156",
-  "info-cell--created": "_info-cell--created_1y92f_165",
-  "info-cell--record-count": "_info-cell--record-count_1y92f_166",
-  "info-cell--column-count": "_info-cell--column-count_1y92f_167"
+  "card-icon": "_card-icon_1cq4j_131",
+  "card-header": "_card-header_1cq4j_138",
+  "card-footer": "_card-footer_1cq4j_146",
+  "info-cell": "_info-cell_1cq4j_150",
+  "info-cell--created": "_info-cell--created_1cq4j_159",
+  "info-cell--record-count": "_info-cell--record-count_1cq4j_160",
+  "info-cell--column-count": "_info-cell--column-count_1cq4j_161"
 };
 const cssModules = {
   "$style": style0
@@ -203,6 +185,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const i18n = useI18n();
     const route = useRoute();
+    const router = useRouter();
     const projectPages = useProjectPages();
     const { callDebounced } = useDebounce();
     const documentTitle = useDocumentTitle();
@@ -211,16 +194,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const insightsStore = useInsightsStore();
     const projectsStore = useProjectsStore();
     const sourceControlStore = useSourceControlStore();
+    const uiStore = useUIStore();
     const loading = ref(true);
     const currentPage = ref(1);
     const pageSize = ref(DEFAULT_DATA_STORE_PAGE_SIZE);
-    const customProjectActions = computed(() => [
-      {
-        id: "add-data-store",
-        label: i18n.baseText("dataStore.add.button.label"),
-        disabled: loading.value || projectPages.isOverviewSubPage
-      }
-    ]);
     const dataStoreResources = computed(
       () => dataStoreStore.dataStores.map((ds) => {
         return {
@@ -229,6 +206,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         };
       })
     );
+    const projectId = computed(() => {
+      return Array.isArray(route.params.projectId) ? route.params.projectId[0] : route.params.projectId;
+    });
     const totalCount = computed(() => dataStoreStore.totalCount);
     const currentProject = computed(() => projectsStore.currentProject);
     const projectName = computed(() => {
@@ -251,9 +231,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const readOnlyEnv = computed(() => sourceControlStore.preferences.branchReadOnly);
     const initialize = async () => {
       loading.value = true;
-      const projectId = Array.isArray(route.params.projectId) ? route.params.projectId[0] : route.params.projectId;
       try {
-        await dataStoreStore.fetchDataStores(projectId, currentPage.value, pageSize.value);
+        await dataStoreStore.fetchDataStores(projectId.value, currentPage.value, pageSize.value);
       } catch (error) {
         toast.showError(error, "Error loading data stores");
       } finally {
@@ -272,36 +251,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const onAddModalClick = () => {
-      useUIStore().openModal(ADD_DATA_STORE_MODAL_KEY);
-    };
-    const onProjectHeaderAction = (action) => {
-      if (action === "add-data-store") {
-        useUIStore().openModal(ADD_DATA_STORE_MODAL_KEY);
-      }
-    };
-    const onCardRename = async (payload) => {
-      try {
-        const updated = await dataStoreStore.updateDataStore(
-          payload.dataStore.id,
-          payload.dataStore.name,
-          payload.dataStore.projectId
-        );
-        if (!updated) {
-          toast.showError(
-            new Error(i18n.baseText("generic.unknownError")),
-            i18n.baseText("dataStore.rename.error")
-          );
-        }
-      } catch (error) {
-        toast.showError(error, i18n.baseText("dataStore.rename.error"));
-      }
+      void router.push({
+        name: PROJECT_DATA_STORES,
+        params: { projectId: projectId.value, new: "new" }
+      });
     };
     onMounted(() => {
       documentTitle.set(i18n.baseText("dataStore.dataStores"));
     });
+    watch(
+      () => route.params.new,
+      () => {
+        if (route.params.new === "new") {
+          uiStore.openModal(ADD_DATA_STORE_MODAL_KEY);
+        } else {
+          uiStore.closeModal(ADD_DATA_STORE_MODAL_KEY);
+        }
+      },
+      { immediate: true }
+    );
     return (_ctx, _cache) => {
       const _component_n8n_action_box = N8nActionBox;
-      return openBlock(), createBlock(ResourcesListLayout, {
+      const _component_ResourcesListLayout = ResourcesListLayout;
+      return openBlock(), createBlock(_component_ResourcesListLayout, {
         ref: "layout",
         "resource-key": "dataStore",
         type: "list-paginated",
@@ -320,10 +292,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "onUpdate:paginationAndSort": onPaginationUpdate
       }, {
         header: withCtx(() => [
-          createVNode(ProjectHeader, {
-            "custom-actions": customProjectActions.value,
-            onCustomActionSelected: onProjectHeaderAction
-          }, {
+          createVNode(ProjectHeader, null, {
             default: withCtx(() => [
               unref(projectPages).isOverviewSubPage && unref(insightsStore).isSummaryEnabled ? (openBlock(), createBlock(InsightsSummary, {
                 key: 0,
@@ -333,7 +302,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, null, 8, ["loading", "summary"])) : createCommentVNode("", true)
             ]),
             _: 1
-          }, 8, ["custom-actions"])
+          })
         ]),
         empty: withCtx(() => [
           createVNode(_component_n8n_action_box, {
@@ -350,8 +319,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             class: "mb-2xs",
             "data-store": data,
             "show-ownership-badge": unref(projectPages).isOverviewSubPage,
-            "read-only": readOnlyEnv.value,
-            onRename: onCardRename
+            "read-only": readOnlyEnv.value
           }, null, 8, ["data-store", "show-ownership-badge", "read-only"])
         ]),
         _: 1