n8n-editor-ui 1.111.0 → 1.112.0

package/dist/assets/{DataStoreDetailsView-DLuRcsh-.js → DataStoreDetailsView-DZK3pYSP.js}

@@ -1,8 +1,8 @@
-import { d as defineComponent, aG as useTemplateRef, b as useRouter, a as useToast, r as ref, x as computed, c as useI18n, a7 as watch, h as createElementBlock, g as openBlock, n as normalizeClass, i as createVNode, j as createBaseVNode, w as withCtx, t as toDisplayString, aH as InlineRename, l as unref, e as createBlock, f as createCommentVNode, gm as PROJECT_DATA_STORES, Y as nextTick, f4 as telemetry, _ as _export_sfc, eh as mergeModels, c1 as toRefs, ei as useModel, o as onMounted, eB as getCurrentInstance, gK as markRaw, c7 as onUnmounted, gL as mergeDefaults, eY as toRaw, gM as render, c0 as isRef, gN as isReactive, fY as isProxy, b2 as withDirectives, N as N8nIcon, b3 as vShow, aM as N8nActionDropdown, bd as DateTime, a8 as resolveComponent, ap as normalizeStyle, P as useDebounce, y as N8nPopoverReka, e7 as N8nInputLabel, c$ as N8nInput, b8 as withKeys, gO as MAX_COLUMN_NAME_LENGTH, p as N8nText, k as createTextVNode, a9 as Tooltip, ea as N8nSelect, F as Fragment, A as renderList, eb as _sfc_main$9, q as N8nButton, aa as _sfc_main$a, gP as COLUMN_NAME_REGEX, gQ as ADD_ROW_ROW_ID, gR as NULL_VALUE, gS as EMPTY_VALUE, ca as useClipboard, bq as onClickOutside, gT as DEFAULT_ID_COLUMN_NAME, eU as orderBy, gU as DATA_STORE_ID_COLUMN_WIDTH, am as useMessage, an as MODAL_CONFIRM, al as useTelemetry, gV as DATA_STORE_HEADER_HEIGHT, gW as DATA_STORE_ROW_HEIGHT, ax as useDocumentTitle, gX as MIN_LOADING_TIME, dM as N8nLoading, dL as _sfc_main$b, gY as DATA_STORE_VIEW } from "./index-DuLlH1tF.js";
-import { u as useDataStoreStore, r as reorderItem } from "./dataStore.store-vaNG0oX7.js";
-import { B as Breadcrumbs, _ as __unplugin_components_0 } from "./ProjectBreadcrumb-OJlbtg71.js";
-import { _ as _sfc_main$8 } from "./DataStoreActions.vue_vue_type_script_setup_true_lang-d31tni9q.js";
-import { S as SelectedItemsInfo } from "./SelectedItemsInfo-C55zD1dl.js";
+import { fK as useDataStoreStore, b as useRouter, a as useToast, ah as InlineRename, fq as PROJECT_DATA_STORES, eb as telemetry, _ as _export_sfc, fO as render, fP as ResponseError, N as N8nIcon, az as vShow, am as N8nActionDropdown, fQ as LOOSE_DATE_REGEX, r as useDebounce, h as N8nPopoverReka, di as N8nInputLabel, cj as N8nInput, aE as withKeys, fR as MAX_COLUMN_NAME_LENGTH, d as N8nText, H as Tooltip, dl as N8nSelect, dm as _sfc_main$9, e as N8nButton, I as _sfc_main$a, fS as COLUMN_NAME_REGEX, fT as ADD_ROW_ROW_ID, fU as NULL_VALUE, fV as EMPTY_VALUE, aJ as DateTime, fW as NUMBER_WITH_SPACES_REGEX, fX as NUMBER_THOUSAND_SEPARATOR, fY as NUMBER_DECIMAL_SEPARATOR, bv as useClipboard, aW as onClickOutside, fZ as DEFAULT_ID_COLUMN_NAME, f_ as reorderItem, f$ as DEFAULT_COLUMN_WIDTH, e1 as orderBy, g0 as DATA_STORE_ID_COLUMN_WIDTH, Z as useMessage, $ as MODAL_CONFIRM, Y as useTelemetry, g1 as DATA_STORE_HEADER_HEIGHT, g2 as DATA_STORE_ROW_HEIGHT, a8 as useDocumentTitle, g3 as MIN_LOADING_TIME, cZ as N8nLoading, cY as _sfc_main$b, g4 as DATA_STORE_VIEW } from "./index-BJG79OsS.js";
+import { o as defineComponent, bB as useTemplateRef, b8 as ref, a9 as computed, bT as useI18n, w as watch, ac as createElementBlock, b1 as openBlock, aQ as normalizeClass, k as createVNode, ad as createBaseVNode, bI as withCtx, bo as toDisplayString, u as unref, aa as createBlock, ab as createCommentVNode, n as nextTick, aO as mergeModels, bs as toRefs, by as useModel, r as onMounted, g as getCurrentInstance, aM as markRaw, s as onUnmounted, aN as mergeDefaults, Q as toRaw, aI as isRef, aG as isReactive, aF as isProxy, bK as withDirectives, bc as resolveComponent, aS as normalizeStyle, ah as createTextVNode, F as Fragment, ba as renderList } from "./index-4g2Akj0I.js";
+import { B as Breadcrumbs, _ as __unplugin_components_0 } from "./ProjectBreadcrumb-9uWmVmc7.js";
+import { _ as _sfc_main$8 } from "./DataStoreActions.vue_vue_type_script_setup_true_lang-qftEof1u.js";
+import { S as SelectedItemsInfo } from "./SelectedItemsInfo-DzoCyQOW.js";
 const BREADCRUMBS_SEPARATOR = "/";
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "DataStoreBreadcrumbs",
@@ -130,12 +130,12 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const separator = "_separator_12h50_132";
+const separator = "_separator_1n6ua_133";
 const style0$2 = {
-  "data-store-breadcrumbs": "_data-store-breadcrumbs_12h50_123",
-  "data-store-actions": "_data-store-actions_12h50_128",
+  "data-store-breadcrumbs": "_data-store-breadcrumbs_1n6ua_123",
+  "data-store-actions": "_data-store-actions_1n6ua_128",
   separator,
-  "breadcrumb-current": "_breadcrumb-current_12h50_138"
+  "breadcrumb-current": "_breadcrumb-current_1n6ua_139"
 };
 const cssModules$2 = {
   "$style": style0$2
@@ -41458,11 +41458,20 @@ const useDataStorePagination = (options = {}) => {
     ensureItemOnPage
   };
 };
+const DATA_STORE_COLUMN_TYPES = ["string", "number", "boolean", "date"];
+const AG_GRID_CELL_TYPES = [
+  "text",
+  "number",
+  "boolean",
+  "date",
+  "dateString",
+  "object"
+];
 const isDataStoreValue = (value) => {
   return value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value instanceof Date;
 };
 const isAGGridCellType = (value) => {
-  return typeof value === "string" && ["text", "number", "boolean", "date", "dateString", "object"].includes(value);
+  return typeof value === "string" && AG_GRID_CELL_TYPES.includes(value);
 };
 const COLUMN_TYPE_ICONS = {
   string: "type",
@@ -41472,6 +41481,7 @@ const COLUMN_TYPE_ICONS = {
 };
 const useDataStoreTypes = () => {
   const getIconForType = (type) => COLUMN_TYPE_ICONS[type];
+  const i18n = useI18n();
   const mapToAGCellType = (colType) => {
     if (colType === "string") {
       return "text";
@@ -41501,14 +41511,35 @@ const useDataStoreTypes = () => {
         return null;
     }
   };
+  const getAddColumnError = (error) => {
+    const DEFAULT_HTTP_STATUS = 500;
+    const DEFAULT_MESSAGE = i18n.baseText("generic.unknownError");
+    if (error instanceof ResponseError) {
+      return {
+        httpStatus: error.httpStatusCode ?? 500,
+        message: error.message
+      };
+    }
+    if (error instanceof Error) {
+      return {
+        httpStatus: DEFAULT_HTTP_STATUS,
+        message: error.message
+      };
+    }
+    return {
+      httpStatus: DEFAULT_HTTP_STATUS,
+      message: DEFAULT_MESSAGE
+    };
+  };
   return {
     getIconForType,
     mapToAGCellType,
     mapToDataStoreColumnType,
-    getDefaultValueForType
+    getDefaultValueForType,
+    getAddColumnError
   };
 };
-const _hoisted_1$4 = { class: "data-store-column-header-icon-wrapper" };
+const _hoisted_1$3 = { class: "data-store-column-header-icon-wrapper" };
 const _hoisted_2$2 = {
   class: "ag-header-cell-text",
   "data-test-id": "data-store-column-header-text"
@@ -41595,7 +41626,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         onMouseleave: onMouseLeave,
         onClick: onHeaderClick
       }, [
-        createBaseVNode("div", _hoisted_1$4, [
+        createBaseVNode("div", _hoisted_1$3, [
           typeIcon.value ? (openBlock(), createBlock(_component_N8nIcon, {
             key: 0,
             icon: typeIcon.value
@@ -41629,7 +41660,30 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3 = { class: "datastore-datepicker-wrapper" };
+const parseLooseDateInput = (text) => {
+  const trimmed = text.trim();
+  const m = LOOSE_DATE_REGEX.exec(trimmed);
+  if (!m) return null;
+  const y = Number(m[1]);
+  const mo = Number(m[2]);
+  const d = Number(m[3]);
+  const hh = m[4] !== void 0 ? Number(m[4]) : 0;
+  const mm = m[5] !== void 0 ? Number(m[5]) : 0;
+  const ss = m[6] !== void 0 ? Number(m[6]) : 0;
+  const dt = new Date(y, mo - 1, d, hh, mm, ss, 0);
+  if (dt.getFullYear() !== y || dt.getMonth() !== mo - 1 || dt.getDate() !== d || dt.getHours() !== hh || dt.getMinutes() !== mm || dt.getSeconds() !== ss) {
+    return null;
+  }
+  return dt;
+};
+const areValuesEqual = (oldValue, newValue, type) => {
+  if (type && type === "date") {
+    if (oldValue instanceof Date && newValue instanceof Date) {
+      return oldValue.getTime() === newValue.getTime();
+    }
+  }
+  return oldValue === newValue;
+};
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "ElDatePickerCellEditor",
   props: {
@@ -41637,17 +41691,53 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
-    const pickerRef = ref(null);
+    const pickerRef = useTemplateRef("pickerRef");
+    const wrapperRef = useTemplateRef("wrapperRef");
     const dateValue = ref(null);
     const initialValue = ref(null);
     const inputWidth = ref(props.params.column.getActualWidth() - 4);
+    function commitIfParsedFromInput(target) {
+      const input = target instanceof HTMLInputElement ? target : null;
+      const value = input?.value ?? "";
+      const parsed = parseLooseDateInput(value);
+      if (parsed) {
+        dateValue.value = parsed;
+        props.params.stopEditing();
+        return true;
+      }
+      return false;
+    }
+    function onKeydown(e) {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        dateValue.value = initialValue.value;
+        props.params.stopEditing();
+        return;
+      }
+      if (e.key === "Enter") {
+        const committed = commitIfParsedFromInput(e.target);
+        if (committed) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }
+    }
+    function getInnerInput() {
+      return wrapperRef.value?.querySelector("input") ?? null;
+    }
+    function onChange() {
+      props.params.stopEditing();
+    }
+    function onClear() {
+      dateValue.value = null;
+      props.params.stopEditing();
+    }
     onMounted(async () => {
       const initial = props.params.value;
       if (initial === null || initial === void 0) {
         dateValue.value = null;
       } else if (initial instanceof Date) {
-        const dt = DateTime.fromJSDate(initial);
-        dateValue.value = dt.minus({ minutes: dt.offset }).toJSDate();
+        dateValue.value = initial;
       }
       initialValue.value = dateValue.value;
       await nextTick();
@@ -41656,35 +41746,25 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       } catch {
       }
     });
-    function onChange() {
-      props.params.stopEditing();
-    }
-    function onClear() {
-      dateValue.value = null;
-      props.params.stopEditing();
-    }
-    function onKeydown(e) {
-      if (e.key === "Escape") {
-        e.stopPropagation();
-        dateValue.value = initialValue.value;
-        props.params.stopEditing();
-      } else if (e.key === "Enter") {
-        e.stopPropagation();
-        props.params.stopEditing();
-      }
-    }
     __expose({
       getValue: () => {
-        if (dateValue.value === null) return null;
-        const dt = DateTime.fromJSDate(dateValue.value);
-        return dt.plus({ minutes: dt.offset }).toJSDate();
+        const input = getInnerInput();
+        const typed = input?.value ?? "";
+        const parsed = parseLooseDateInput(typed);
+        if (parsed) return parsed;
+        return dateValue.value;
       },
       isPopup: () => true
     });
     return (_ctx, _cache) => {
       const _component_el_date_picker = resolveComponent("el-date-picker");
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+      return openBlock(), createElementBlock("div", {
+        ref_key: "wrapperRef",
+        ref: wrapperRef,
+        class: "datastore-datepicker-wrapper"
+      }, [
         createVNode(_component_el_date_picker, {
+          id: "datastore-datepicker",
           ref_key: "pickerRef",
           ref: pickerRef,
           modelValue: dateValue.value,
@@ -41692,19 +41772,24 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           type: "datetime",
           style: normalizeStyle({ width: `${inputWidth.value}px` }),
           clearable: true,
-          editable: false,
+          editable: true,
           teleported: false,
-          placeholder: "",
+          "popper-class": "ag-custom-component-popup datastore-datepicker-popper",
+          placeholder: "YYYY-MM-DD (HH:mm:ss)",
+          size: "small",
           onChange,
           onClear,
           onKeydown
         }, null, 8, ["modelValue", "style"])
-      ]);
+      ], 512);
     };
   }
 });
 const _hoisted_1$2 = { class: "add-column-header-component-wrapper" };
-const _hoisted_2$1 = { class: "add-ds-column-header-popover-content" };
+const _hoisted_2$1 = {
+  class: "add-ds-column-header-popover-content",
+  "data-test-id": "add-column-popover-content"
+};
 const _hoisted_3 = { class: "popover-body" };
 const _hoisted_4 = {
   key: 0,
@@ -41726,21 +41811,39 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const nameInputRef = ref(null);
     const columnName = ref("");
     const columnType = ref("string");
-    const columnTypes = ["string", "number", "boolean", "date"];
+    const columnTypes = [...DATA_STORE_COLUMN_TYPES];
     const error = ref(null);
     const popoverOpen = ref(false);
     const isSelectOpen = ref(false);
     const popoverId = computed(() => props.popoverId ?? "add-column-popover");
+    const columnTypeOptions = computed(() => {
+      return columnTypes.map((type) => ({
+        label: type === "date" ? "datetime" : type,
+        value: type
+      }));
+    });
     const onAddButtonClicked = async () => {
       validateName();
       if (!columnName.value || !columnType.value || error.value) {
         return;
       }
-      const success = await props.params.onAddColumn({
+      const response = await props.params.onAddColumn({
         name: columnName.value,
         type: columnType.value
       });
-      if (!success) {
+      if (!response.success) {
+        let errorMessage = i18n.baseText("dataStore.addColumn.error");
+        let errorDescription = response.errorMessage;
+        if (response.httpStatus === 409) {
+          errorMessage = i18n.baseText("dataStore.addColumn.alreadyExistsError", {
+            interpolate: { name: columnName.value }
+          });
+          errorDescription = i18n.baseText("dataStore.addColumn.alreadyExistsDescription");
+        }
+        error.value = {
+          message: errorMessage,
+          description: errorDescription
+        };
         return;
       }
       columnName.value = "";
@@ -41763,7 +41866,10 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         error.value = null;
       }
       if (columnName.value && !COLUMN_NAME_REGEX.test(columnName.value)) {
-        error.value = i18n.baseText("dataStore.addColumn.invalidName.error");
+        error.value = {
+          message: i18n.baseText("dataStore.addColumn.invalidName.error"),
+          description: i18n.baseText("dataStore.addColumn.invalidName.description")
+        };
       }
     };
     const onInput = debounce(validateName, { debounceTime: 100 });
@@ -41830,18 +41936,21 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                           onInput: unref(onInput)
                         }, null, 8, ["modelValue", "placeholder", "maxlength", "onInput"]),
                         error.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
-                          createVNode(_component_n8n_text, {
+                          error.value.message ? (openBlock(), createBlock(_component_n8n_text, {
+                            key: 0,
                             size: "small",
                             color: "danger",
                             tag: "span"
                           }, {
                             default: withCtx(() => [
-                              createTextVNode(toDisplayString(error.value), 1)
+                              createTextVNode(toDisplayString(error.value.message), 1)
                             ]),
                             _: 1
-                          }),
+                          })) : createCommentVNode("", true),
                           createVNode(Tooltip, {
-                            content: unref(i18n).baseText("dataStore.addColumn.invalidName.description")
+                            content: error.value.description,
+                            placement: "top",
+                            disabled: !error.value.description
                           }, {
                             default: withCtx(() => [
                               createVNode(_component_N8nIcon, {
@@ -41853,7 +41962,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                               })
                             ]),
                             _: 1
-                          }, 8, ["content"])
+                          }, 8, ["content", "disabled"])
                         ])) : createCommentVNode("", true)
                       ]),
                       _: 1
@@ -41871,27 +41980,28 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                           onVisibleChange: _cache[2] || (_cache[2] = ($event) => isSelectOpen.value = $event)
                         }, {
                           default: withCtx(() => [
-                            (openBlock(), createElementBlock(Fragment, null, renderList(columnTypes, (type) => {
-                              return createVNode(_component_N8nOption, {
-                                key: type,
-                                value: type
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(columnTypeOptions.value, (option) => {
+                              return openBlock(), createBlock(_component_N8nOption, {
+                                key: option.value,
+                                label: option.label,
+                                value: option.value
                               }, {
                                 default: withCtx(() => [
                                   createBaseVNode("div", _hoisted_5, [
                                     createVNode(_component_N8nIcon, {
-                                      icon: unref(getIconForType)(type)
+                                      icon: unref(getIconForType)(option.value)
                                     }, null, 8, ["icon"]),
                                     createVNode(_component_N8nText, null, {
                                       default: withCtx(() => [
-                                        createTextVNode(toDisplayString(type), 1)
+                                        createTextVNode(toDisplayString(option.label), 1)
                                       ]),
                                       _: 2
                                     }, 1024)
                                   ])
                                 ]),
                                 _: 2
-                              }, 1032, ["value"]);
-                            }), 64))
+                              }, 1032, ["label", "value"]);
+                            }), 128))
                           ]),
                           _: 1
                         }, 8, ["modelValue", "append-to"])
@@ -42023,7 +42133,17 @@ const stringCellEditorParams = (params) => ({
 const dateValueFormatter = (params) => {
   const value = params.value;
   if (value === null || value === void 0) return "";
-  return value.toISOString();
+  return DateTime.fromJSDate(value).toISO() ?? "";
+};
+const numberWithSpaces = (num) => {
+  const parts = num.toString().split(".");
+  parts[0] = parts[0].replace(NUMBER_WITH_SPACES_REGEX, NUMBER_THOUSAND_SEPARATOR);
+  return parts.join(NUMBER_DECIMAL_SEPARATOR);
+};
+const numberValueFormatter = (params) => {
+  const value = params.value;
+  if (value === null || value === void 0) return "";
+  return numberWithSpaces(value);
 };
 const useDataStoreGridBase = ({
   gridContainerRef,
@@ -42066,13 +42186,25 @@ const useDataStoreGridBase = ({
   const focusFirstEditableCell = (rowId) => {
     const rowNode = initializedGridApi.value.getRowNode(String(rowId));
     if (rowNode?.rowIndex === null) return;
-    const firstEditableCol = colDefs.value[1];
-    if (!firstEditableCol?.colId) return;
-    initializedGridApi.value.ensureIndexVisible(rowNode.rowIndex);
-    initializedGridApi.value.setFocusedCell(rowNode.rowIndex, firstEditableCol.colId);
-    initializedGridApi.value.startEditingCell({
-      rowIndex: rowNode.rowIndex,
-      colKey: firstEditableCol.colId
+    const rowIndex = rowNode.rowIndex;
+    const displayed = initializedGridApi.value.getAllDisplayedColumns();
+    const firstEditable = displayed.find((col) => {
+      const def = col.getColDef();
+      if (!def) return false;
+      if (def.colId === DEFAULT_ID_COLUMN_NAME) return false;
+      return !!def.editable;
+    });
+    if (!firstEditable) return;
+    const columnId = firstEditable.getColId();
+    requestAnimationFrame(() => {
+      initializedGridApi.value.ensureIndexVisible(rowIndex);
+      requestAnimationFrame(() => {
+        initializedGridApi.value.setFocusedCell(rowIndex, columnId);
+        initializedGridApi.value.startEditingCell({
+          rowIndex,
+          colKey: columnId
+        });
+      });
     });
   };
   const createColumnDef = (col, extraProps = {}) => {
@@ -42081,7 +42213,6 @@ const useDataStoreGridBase = ({
       field: col.name,
       headerName: col.name,
       sortable: true,
-      flex: 1,
       editable: (params) => params.data?.id !== ADD_ROW_ROW_ID,
       resizable: true,
       lockPinned: true,
@@ -42091,7 +42222,8 @@ const useDataStoreGridBase = ({
       cellDataType: mapToAGCellType(col.type),
       cellClass: getCellClass,
       valueGetter: createValueGetter(col),
-      cellRendererSelector: createCellRendererSelector(col)
+      cellRendererSelector: createCellRendererSelector(col),
+      width: DEFAULT_COLUMN_WIDTH
     };
     if (col.type === "string") {
       columnDef.cellEditor = "agLargeTextCellEditor";
@@ -42104,6 +42236,9 @@ const useDataStoreGridBase = ({
         component: _sfc_main$5
       });
       columnDef.valueFormatter = dateValueFormatter;
+      columnDef.cellEditorPopup = true;
+    } else if (col.type === "number") {
+      columnDef.valueFormatter = numberValueFormatter;
     }
     return {
       ...columnDef,
@@ -42130,7 +42265,10 @@ const useDataStoreGridBase = ({
       lockPosition: "right",
       headerComponentParams: {
         allowMenuActions: false
-      }
+      },
+      cellClass: (params) => params.data?.id === ADD_ROW_ROW_ID ? "add-row-cell" : "system-cell",
+      headerClass: "system-column",
+      width: DEFAULT_COLUMN_WIDTH
     };
     return [
       // Always add the ID column, it's not returned by the back-end but all data stores have it
@@ -42143,13 +42281,14 @@ const useDataStoreGridBase = ({
         },
         {
           editable: false,
-          sortable: false,
+          sortable: true,
           suppressMovable: true,
           headerComponent: null,
           lockPosition: true,
           minWidth: DATA_STORE_ID_COLUMN_WIDTH,
           maxWidth: DATA_STORE_ID_COLUMN_WIDTH,
           resizable: false,
+          headerClass: "system-column",
           cellClass: (params) => params.data?.id === ADD_ROW_ROW_ID ? "add-row-cell" : "id-column",
           cellRendererSelector: (params) => {
             if (params.value === ADD_ROW_ROW_ID) {
@@ -42195,6 +42334,7 @@ const useDataStoreGridBase = ({
           lockPinned: true,
           lockPosition: "right",
           resizable: false,
+          flex: 1,
           headerComponent: _sfc_main$4,
           headerComponentParams: { onAddColumn }
         }
@@ -42390,6 +42530,7 @@ const useDataStoreOperations = ({
   const dataStoreStore = useDataStoreStore();
   const contentLoading = ref(false);
   const telemetry2 = useTelemetry();
+  const dataStoreTypes = useDataStoreTypes();
   async function onDeleteColumn(columnId) {
     const columnToDelete = colDefs.value.find((col) => col.colId === columnId);
     if (!columnToDelete) return;
@@ -42441,10 +42582,14 @@ const useDataStoreOperations = ({
         column_type: newColumn.type,
         data_table_id: dataStoreId
       });
-      return true;
+      return { success: true, httpStatus: 200 };
     } catch (error) {
-      toast.showError(error, i18n.baseText("dataStore.addColumn.error"));
-      return false;
+      const addColumnError = dataStoreTypes.getAddColumnError(error);
+      return {
+        success: false,
+        httpStatus: addColumnError.httpStatus,
+        errorMessage: addColumnError.message
+      };
     }
   }
   const onColumnMoved = async (moveEvent) => {
@@ -42490,7 +42635,8 @@ const useDataStoreOperations = ({
   const onCellValueChanged = async (params) => {
     const { data, api, oldValue, colDef } = params;
     const value = params.data[colDef.field];
-    if (value === void 0 || value === oldValue) {
+    const cellType = isAGGridCellType(colDef.cellDataType) ? dataStoreTypes.mapToDataStoreColumnType(colDef.cellDataType) : void 0;
+    if (value === void 0 || areValuesEqual(oldValue, value, cellType)) {
       return;
     }
     if (typeof data.id !== "number") {
@@ -42560,11 +42706,6 @@ const useDataStoreOperations = ({
       const idsToDelete = Array.from(selectedRowIds.value);
       await dataStoreStore.deleteRows(dataStoreId, projectId, idsToDelete);
       await fetchDataStoreRows();
-      toast.showToast({
-        title: i18n.baseText("dataStore.deleteRows.success"),
-        message: "",
-        type: "success"
-      });
       telemetry2.track("User deleted rows in data table", {
         data_table_id: dataStoreId,
         deleted_row_count: idsToDelete.length
@@ -42576,15 +42717,22 @@ const useDataStoreOperations = ({
     }
   };
   const onCellKeyDown = async (params) => {
-    if (params.api.getEditingCells().length > 0) {
+    const event = params.event;
+    const target = event.target;
+    const isSelectionColumn = params.column.getColId() === "ag-Grid-SelectionColumn";
+    const isEditing2 = params.api.getEditingCells().length > 0 || target instanceof HTMLInputElement && !isSelectionColumn;
+    if (isEditing2) {
       return;
     }
-    const event = params.event;
     if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "c") {
       event.preventDefault();
       await handleCopyFocusedCell(params);
       return;
     }
+    if (event.key === "Escape") {
+      handleClearSelection();
+      return;
+    }
     if (event.key !== "Delete" && event.key !== "Backspace" || selectedRowIds.value.size === 0) {
       return;
     }
@@ -42632,6 +42780,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const gridContainerRef = useTemplateRef("gridContainerRef");
+    const i18n = useI18n();
     const dataStoreGridBase = useDataStoreGridBase({
       gridContainerRef,
       onDeleteColumn: onDeleteColumnFunction,
@@ -42640,7 +42789,18 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     });
     const rowData = ref([]);
     const hasRecords = computed(() => rowData.value.length > 0);
-    const pagination = useDataStorePagination({ onChange: fetchDataStoreRowsFunction });
+    const {
+      currentPage,
+      pageSize,
+      totalItems,
+      pageSizeOptions,
+      ensureItemOnPage,
+      setTotalItems,
+      setCurrentPage,
+      setPageSize
+    } = useDataStorePagination({
+      onChange: fetchDataStoreRowsFunction
+    });
     const selection = useDataStoreSelection({
       gridApi: dataStoreGridBase.gridApi
     });
@@ -42655,13 +42815,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       addGridColumn: dataStoreGridBase.addColumn,
       moveGridColumn: dataStoreGridBase.moveColumn,
       gridApi: dataStoreGridBase.gridApi,
-      totalItems: pagination.totalItems,
-      setTotalItems: pagination.setTotalItems,
-      ensureItemOnPage: pagination.ensureItemOnPage,
+      totalItems,
+      setTotalItems,
+      ensureItemOnPage,
       focusFirstEditableCell: dataStoreGridBase.focusFirstEditableCell,
       toggleSave: emit.bind(null, "toggleSave"),
-      currentPage: pagination.currentPage,
-      pageSize: pagination.pageSize,
+      currentPage,
+      pageSize,
       currentSortBy: dataStoreGridBase.currentSortBy,
       currentSortOrder: dataStoreGridBase.currentSortOrder,
       handleClearSelection: selection.handleClearSelection,
@@ -42685,8 +42845,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       dataStoreGridBase.loadColumns(props.dataStore.columns);
       await dataStoreOperations.fetchDataStoreRows();
     };
+    const customNoRowsOverlay = `<div class="no-rows-overlay ag-overlay-no-rows-center" data-test-id="data-store-no-rows-overlay">${i18n.baseText("dataStore.noRows")}</div>`;
     watch([dataStoreGridBase.currentSortBy, dataStoreGridBase.currentSortOrder], async () => {
-      await pagination.setCurrentPage(1);
+      await setCurrentPage(1);
     });
     __expose({
       addRow: dataStoreOperations.onAddRowClick,
@@ -42717,6 +42878,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             "stop-editing-when-cells-lose-focus": true,
             "undo-redo-cell-editing": true,
             "suppress-multi-sort": true,
+            "overlay-no-rows-template": customNoRowsOverlay,
             onGridReady: initialize,
             onCellValueChanged: unref(dataStoreOperations).onCellValueChanged,
             onColumnMoved: unref(dataStoreOperations).onColumnMoved,
@@ -42733,19 +42895,19 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           class: normalizeClass(_ctx.$style.footer)
         }, [
           createVNode(_component_el_pagination, {
-            "current-page": unref(pagination).currentPage,
+            "current-page": unref(currentPage),
             "onUpdate:currentPage": [
-              _cache[0] || (_cache[0] = ($event) => unref(pagination).currentPage = $event),
-              unref(pagination).setCurrentPage
+              _cache[0] || (_cache[0] = ($event) => isRef(currentPage) ? currentPage.value = $event : null),
+              unref(setCurrentPage)
             ],
-            "page-size": unref(pagination).pageSize,
-            "onUpdate:pageSize": _cache[1] || (_cache[1] = ($event) => unref(pagination).pageSize = $event),
+            "page-size": unref(pageSize),
+            "onUpdate:pageSize": _cache[1] || (_cache[1] = ($event) => isRef(pageSize) ? pageSize.value = $event : null),
             "data-test-id": "data-store-content-pagination",
             background: "",
-            total: unref(pagination).totalItems,
-            "page-sizes": unref(pagination).pageSizeOptions,
+            total: unref(totalItems),
+            "page-sizes": unref(pageSizeOptions),
             layout: "total, prev, pager, next, sizes",
-            onSizeChange: unref(pagination).setPageSize
+            onSizeChange: unref(setPageSize)
           }, null, 8, ["current-page", "page-size", "total", "page-sizes", "onUpdate:currentPage", "onSizeChange"])
         ], 2),
         createVNode(SelectedItemsInfo, {
@@ -42757,12 +42919,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const wrapper = "_wrapper_1bnk4_123";
-const footer = "_footer_1bnk4_241";
+const wrapper = "_wrapper_1x5db_123";
+const footer = "_footer_1x5db_252";
 const style0$1 = {
   wrapper,
-  "grid-container": "_grid-container_1bnk4_130",
-  "has-records": "_has-records_1bnk4_234",
+  "grid-container": "_grid-container_1x5db_130",
+  "has-records": "_has-records_1x5db_242",
   footer
 };
 const cssModules$1 = {
@@ -42836,7 +42998,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const onAddColumn = async (column) => {
       if (!dataStoreTableRef.value) {
-        return false;
+        return {
+          success: false,
+          errorMessage: i18n.baseText("dataStore.error.tableNotInitialized")
+        };
       }
       return await dataStoreTableRef.value.addColumn(column);
     };