n8n-editor-ui 1.75.1 → 1.77.0

package/dist/assets/VariablesView-BBjPCn4K.js

@@ -0,0 +1,509 @@
+import { d as defineComponent, b6 as useClipboard, a as useToast, q as computed, c as openBlock, e as createBlock, w as withCtx, k as createTextVNode, t as toDisplayString, l as unref, j as createBaseVNode, aP as N8nTooltip, g as useI18n, _ as _export_sfc, dy as reactive, fL as toRaw, r as ref, h as createElementBlock, i as createVNode, fM as N8nFormInput, f as createCommentVNode, ct as N8nButton, p as useSettingsStore, dI as useEnvironmentsStore, u as useUsersStore, K as useUIStore, a0 as useSourceControlStore, U as useRoute, b as useRouter, fN as useTemplateRef, fO as useAsyncState, o as onMounted, a3 as useDocumentTitle, aS as createSlots, a$ as mergeProps, fP as N8nActionBox, aZ as normalizeProps, fQ as N8nInputLabel, fR as N8nCheckbox, F as Fragment, fS as N8nBadge, fT as uid, ae as MODAL_CONFIRM, a5 as usePageRedirectionHelper, m as resolveComponent, aj as useTelemetry, ak as useMessage, al as getResourcePermissions, a8 as EnterpriseEditionFeature } from "./index-BW7gX0J2.js";
+import { R as ResourcesListLayout, p as pickBy } from "./ResourcesListLayout-Bm25PbPe.js";
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "VariablesUsageBadge",
+  props: {
+    name: {}
+  },
+  setup(__props) {
+    const i18n = useI18n();
+    const clipboard = useClipboard();
+    const { showMessage } = useToast();
+    const props = __props;
+    const usage = computed(() => `$vars.${props.name}`);
+    const handleClick = () => {
+      void clipboard.copy(usage.value);
+      showMessage({
+        title: i18n.baseText("variables.row.usage.copiedToClipboard"),
+        type: "success"
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(N8nTooltip), { placement: "top" }, {
+        content: withCtx(() => [
+          createTextVNode(toDisplayString(unref(i18n).baseText("variables.row.usage.copyToClipboard")), 1)
+        ]),
+        default: withCtx(() => [
+          createBaseVNode("span", {
+            class: "usageSyntax",
+            onClick: handleClick
+          }, toDisplayString(usage.value), 1)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const VariablesUsageBadge = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-513b2829"]]);
+const _hoisted_1$1 = { class: "key-cell" };
+const _hoisted_2$1 = {
+  class: "value-cell",
+  width: "100%"
+};
+const _hoisted_3$1 = { align: "right" };
+const VALUE_MAX_LENGTH = 220;
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "VariablesForm",
+  props: {
+    variable: {}
+  },
+  emits: ["submit", "cancel"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const i18n = useI18n();
+    const keyValidationRules = [
+      { name: "REQUIRED" },
+      { name: "MAX_LENGTH", config: { maximum: 50 } },
+      {
+        name: "MATCH_REGEX",
+        config: {
+          regex: /^[a-zA-Z]/,
+          message: i18n.baseText("variables.editing.key.error.startsWithLetter")
+        }
+      },
+      {
+        name: "MATCH_REGEX",
+        config: {
+          regex: /^[a-zA-Z][a-zA-Z0-9_]*$/,
+          message: i18n.baseText("variables.editing.key.error.jsonKey")
+        }
+      }
+    ];
+    const valueValidationRules = [
+      { name: "MAX_LENGTH", config: { maximum: VALUE_MAX_LENGTH } }
+    ];
+    const form = reactive(structuredClone(toRaw(props.variable)));
+    const formValidation = reactive({
+      key: false,
+      value: false
+    });
+    const isValid = computed(() => Object.values(formValidation).every((value) => value));
+    const handleCancel = () => emit("cancel");
+    const validateOnBlur = ref(false);
+    const handleSubmit = () => {
+      validateOnBlur.value = true;
+      if (isValid.value) {
+        emit("submit", form);
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("tr", null, [
+        createBaseVNode("td", _hoisted_1$1, [
+          createVNode(unref(N8nFormInput), {
+            modelValue: form.key,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => form.key = $event),
+            label: "",
+            name: "key",
+            "data-test-id": "variable-row-key-input",
+            placeholder: unref(i18n).baseText("variables.editing.key.placeholder"),
+            required: "",
+            "validate-on-blur": validateOnBlur.value,
+            "validation-rules": keyValidationRules,
+            "focus-initially": "",
+            onValidate: _cache[1] || (_cache[1] = (value) => formValidation.key = value)
+          }, null, 8, ["modelValue", "placeholder", "validate-on-blur"])
+        ]),
+        createBaseVNode("td", _hoisted_2$1, [
+          createVNode(unref(N8nFormInput), {
+            modelValue: form.value,
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => form.value = $event),
+            class: "key-input",
+            label: "",
+            name: "value",
+            "data-test-id": "variable-row-value-input",
+            placeholder: unref(i18n).baseText("variables.editing.value.placeholder"),
+            type: "textarea",
+            autosize: { minRows: 1, maxRows: 6 },
+            size: "medium",
+            maxlength: VALUE_MAX_LENGTH,
+            "validate-on-blur": validateOnBlur.value,
+            "validation-rules": valueValidationRules,
+            onValidate: _cache[3] || (_cache[3] = (value) => formValidation.value = value)
+          }, null, 8, ["modelValue", "placeholder", "validate-on-blur"])
+        ]),
+        createBaseVNode("td", null, [
+          formValidation.key ? (openBlock(), createBlock(VariablesUsageBadge, {
+            key: 0,
+            name: form.key
+          }, null, 8, ["name"])) : createCommentVNode("", true)
+        ]),
+        createBaseVNode("td", _hoisted_3$1, [
+          createVNode(unref(N8nButton), {
+            "data-test-id": "variable-row-cancel-button",
+            type: "tertiary",
+            class: "mr-xs",
+            onClick: handleCancel
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(i18n).baseText("variables.row.button.cancel")), 1)
+            ]),
+            _: 1
+          }),
+          createVNode(unref(N8nButton), {
+            "data-test-id": "variable-row-save-button",
+            type: "primary",
+            onClick: handleSubmit
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(i18n).baseText("variables.row.button.save")), 1)
+            ]),
+            _: 1
+          })
+        ])
+      ]);
+    };
+  }
+});
+const VariablesForm = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-5059e945"]]);
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = { key: 1 };
+const _hoisted_3 = { class: "mb-s" };
+const _hoisted_4 = {
+  key: 1,
+  "data-test-id": "variables-row"
+};
+const _hoisted_5 = {
+  key: 0,
+  align: "right"
+};
+const _hoisted_6 = { class: "action-buttons" };
+const TEMPORARY_VARIABLE_UID_BASE = "@tmpvar";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VariablesView",
+  setup(__props) {
+    const settingsStore = useSettingsStore();
+    const environmentsStore = useEnvironmentsStore();
+    const usersStore = useUsersStore();
+    const uiStore = useUIStore();
+    const telemetry = useTelemetry();
+    const i18n = useI18n();
+    const message = useMessage();
+    const sourceControlStore = useSourceControlStore();
+    const route = useRoute();
+    const router = useRouter();
+    const layoutRef = useTemplateRef("layoutRef");
+    const { showError } = useToast();
+    const permissions = computed(
+      () => getResourcePermissions(usersStore.currentUser?.globalScopes).variable
+    );
+    const { isLoading, execute } = useAsyncState(environmentsStore.fetchAllVariables, [], {
+      immediate: true
+    });
+    const isFeatureEnabled = computed(
+      () => settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Variables]
+    );
+    const variableForms = ref(/* @__PURE__ */ new Map());
+    const editableVariables = ref([]);
+    const addToEditableVariables = (variableId) => editableVariables.value.push(variableId);
+    const removeEditableVariable = (variableId) => {
+      editableVariables.value = editableVariables.value.filter((id) => id !== variableId);
+      variableForms.value.delete(variableId);
+    };
+    const addEmptyVariableForm = () => {
+      const variable = { id: uid(TEMPORARY_VARIABLE_UID_BASE), key: "", value: "" };
+      variableForms.value.set(variable.id, variable);
+      if (layoutRef.value?.currentPage !== 1) {
+        layoutRef.value?.setCurrentPage(1);
+      }
+      addToEditableVariables(variable.id);
+      telemetry.track("User clicked add variable button");
+    };
+    const variables = computed(() => [...variableForms.value.values(), ...environmentsStore.variables]);
+    const canCreateVariables = computed(() => isFeatureEnabled.value && permissions.value.create);
+    const columns = computed(() => {
+      const cols = [
+        {
+          id: 0,
+          path: "name",
+          label: i18n.baseText("variables.table.key"),
+          classes: ["variables-key-column"]
+        },
+        {
+          id: 1,
+          path: "value",
+          label: i18n.baseText("variables.table.value"),
+          classes: ["variables-value-column"]
+        },
+        {
+          id: 2,
+          path: "usage",
+          label: i18n.baseText("variables.table.usage"),
+          classes: ["variables-usage-column"]
+        }
+      ];
+      if (!isFeatureEnabled.value) return cols;
+      return cols.concat({ id: 3, path: "actions", label: "", classes: ["variables-actions-column"] });
+    });
+    const handleSubmit = async (variable) => {
+      try {
+        const { id, ...rest } = variable;
+        if (id.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
+          await environmentsStore.createVariable(rest);
+        } else {
+          await environmentsStore.updateVariable(variable);
+        }
+        removeEditableVariable(id);
+      } catch (error) {
+        showError(error, i18n.baseText("variables.errors.save"));
+      }
+    };
+    const handleDeleteVariable = async (variable) => {
+      try {
+        const confirmed = await message.confirm(
+          i18n.baseText("variables.modals.deleteConfirm.message", {
+            interpolate: { name: variable.key }
+          }),
+          i18n.baseText("variables.modals.deleteConfirm.title"),
+          {
+            confirmButtonText: i18n.baseText("variables.modals.deleteConfirm.confirmButton"),
+            cancelButtonText: i18n.baseText("variables.modals.deleteConfirm.cancelButton")
+          }
+        );
+        if (confirmed !== MODAL_CONFIRM) {
+          return;
+        }
+        await environmentsStore.deleteVariable(variable);
+        removeEditableVariable(variable.id);
+      } catch (error) {
+        showError(error, i18n.baseText("variables.errors.delete"));
+      }
+    };
+    const updateFilter = (state) => {
+      void router.replace({ query: pickBy(state) });
+    };
+    const filters = computed(
+      () => ({ ...route.query, incomplete: route.query.incomplete?.toString() === "true" })
+    );
+    const handleFilter = (resource, newFilters, matches) => {
+      const iResource = resource;
+      const filtersToApply = newFilters;
+      if (filtersToApply.incomplete) {
+        matches = matches && !iResource.value;
+      }
+      return matches;
+    };
+    const nameSortFn = (a, b, direction) => {
+      if (`${a.id}`.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
+        return -1;
+      } else if (`${b.id}`.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
+        return 1;
+      }
+      return direction === "asc" ? displayName(a).trim().localeCompare(displayName(b).trim()) : displayName(b).trim().localeCompare(displayName(a).trim());
+    };
+    const sortFns = {
+      nameAsc: (a, b) => nameSortFn(a, b, "asc"),
+      nameDesc: (a, b) => nameSortFn(a, b, "desc")
+    };
+    const unavailableNoticeProps = computed(() => ({
+      emoji: "👋",
+      heading: i18n.baseText(uiStore.contextBasedTranslationKeys.variables.unavailable.title),
+      description: i18n.baseText(uiStore.contextBasedTranslationKeys.variables.unavailable.description),
+      buttonText: i18n.baseText(uiStore.contextBasedTranslationKeys.variables.unavailable.button),
+      buttonType: "secondary",
+      "onClick:button": goToUpgrade,
+      "data-test-id": "unavailable-resources-list"
+    }));
+    function goToUpgrade() {
+      void usePageRedirectionHelper().goToUpgrade("variables", "upgrade-variables");
+    }
+    function displayName(resource) {
+      return resource.key;
+    }
+    sourceControlStore.$onAction(({ name, after }) => {
+      if (name === "pullWorkfolder" && after) {
+        after(() => {
+          void execute();
+        });
+      }
+    });
+    onMounted(() => {
+      useDocumentTitle().set(i18n.baseText("variables.heading"));
+    });
+    return (_ctx, _cache) => {
+      const _component_n8n_heading = resolveComponent("n8n-heading");
+      return openBlock(), createBlock(ResourcesListLayout, {
+        ref_key: "layoutRef",
+        ref: layoutRef,
+        "resource-key": "variables",
+        disabled: !isFeatureEnabled.value,
+        resources: variables.value,
+        filters: filters.value,
+        "additional-filters-handler": handleFilter,
+        shareable: false,
+        "display-name": displayName,
+        "sort-fns": sortFns,
+        "sort-options": ["nameAsc", "nameDesc"],
+        type: "datatable",
+        "type-props": { columns: columns.value },
+        loading: unref(isLoading),
+        "onUpdate:filters": updateFilter,
+        "onClick:add": addEmptyVariableForm
+      }, createSlots({
+        header: withCtx(() => [
+          createVNode(_component_n8n_heading, {
+            size: "2xlarge",
+            class: "mb-m"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(i18n).baseText("variables.heading")), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        "add-button": withCtx(() => [
+          createVNode(unref(N8nTooltip), {
+            placement: "top",
+            disabled: canCreateVariables.value
+          }, {
+            content: withCtx(() => [
+              !isFeatureEnabled.value ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(unref(i18n).baseText(`variables.add.unavailable${variables.value.length === 0 ? ".empty" : ""}`)), 1)) : (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(unref(i18n).baseText("variables.add.onlyOwnerCanCreate")), 1))
+            ]),
+            default: withCtx(() => [
+              createBaseVNode("div", null, [
+                createVNode(unref(N8nButton), {
+                  size: "large",
+                  block: "",
+                  disabled: !canCreateVariables.value,
+                  "data-test-id": "resources-list-add",
+                  onClick: addEmptyVariableForm
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(i18n).baseText(`variables.add`)), 1)
+                  ]),
+                  _: 1
+                }, 8, ["disabled"])
+              ])
+            ]),
+            _: 1
+          }, 8, ["disabled"])
+        ]),
+        filters: withCtx(({ setKeyValue }) => [
+          createBaseVNode("div", _hoisted_3, [
+            createVNode(unref(N8nInputLabel), {
+              label: unref(i18n).baseText("credentials.filters.status"),
+              bold: false,
+              size: "small",
+              color: "text-base",
+              class: "mb-3xs"
+            }, null, 8, ["label"]),
+            createVNode(unref(N8nCheckbox), {
+              label: "Value missing",
+              "data-test-id": "variable-filter-incomplete",
+              "model-value": filters.value.incomplete,
+              "onUpdate:modelValue": ($event) => setKeyValue("incomplete", $event)
+            }, null, 8, ["model-value", "onUpdate:modelValue"])
+          ])
+        ]),
+        default: withCtx(({ data }) => [
+          editableVariables.value.includes(data.id) ? (openBlock(), createBlock(VariablesForm, {
+            key: data.id,
+            "data-test-id": "variables-row",
+            variable: data,
+            onSubmit: handleSubmit,
+            onCancel: ($event) => removeEditableVariable(data.id)
+          }, null, 8, ["variable", "onCancel"])) : (openBlock(), createElementBlock("tr", _hoisted_4, [
+            createBaseVNode("td", null, toDisplayString(data.key), 1),
+            createBaseVNode("td", null, [
+              data.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                createTextVNode(toDisplayString(data.value), 1)
+              ], 64)) : (openBlock(), createBlock(unref(N8nBadge), {
+                key: 1,
+                theme: "warning"
+              }, {
+                default: withCtx(() => _cache[0] || (_cache[0] = [
+                  createTextVNode(" Value missing ")
+                ])),
+                _: 1
+              }))
+            ]),
+            createBaseVNode("td", null, [
+              data.key ? (openBlock(), createBlock(VariablesUsageBadge, {
+                key: 0,
+                name: data.key
+              }, null, 8, ["name"])) : createCommentVNode("", true)
+            ]),
+            isFeatureEnabled.value ? (openBlock(), createElementBlock("td", _hoisted_5, [
+              createBaseVNode("div", _hoisted_6, [
+                createVNode(unref(N8nTooltip), {
+                  disabled: permissions.value.update,
+                  placement: "top"
+                }, {
+                  content: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(i18n).baseText("variables.row.button.edit.onlyRoleCanEdit")), 1)
+                  ]),
+                  default: withCtx(() => [
+                    createVNode(unref(N8nButton), {
+                      "data-test-id": "variable-row-edit-button",
+                      type: "tertiary",
+                      class: "mr-xs",
+                      disabled: !permissions.value.update,
+                      onClick: ($event) => addToEditableVariables(data.id)
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref(i18n).baseText("variables.row.button.edit")), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["disabled", "onClick"])
+                  ]),
+                  _: 2
+                }, 1032, ["disabled"]),
+                createVNode(unref(N8nTooltip), {
+                  disabled: permissions.value.delete,
+                  placement: "top"
+                }, {
+                  content: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(i18n).baseText("variables.row.button.delete.onlyRoleCanDelete")), 1)
+                  ]),
+                  default: withCtx(() => [
+                    createVNode(unref(N8nButton), {
+                      "data-test-id": "variable-row-delete-button",
+                      type: "tertiary",
+                      disabled: !permissions.value.delete,
+                      onClick: ($event) => handleDeleteVariable(data)
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref(i18n).baseText("variables.row.button.delete")), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["disabled", "onClick"])
+                  ]),
+                  _: 2
+                }, 1032, ["disabled"])
+              ])
+            ])) : createCommentVNode("", true)
+          ]))
+        ]),
+        _: 2
+      }, [
+        !isFeatureEnabled.value ? {
+          name: "preamble",
+          fn: withCtx(() => [
+            createVNode(unref(N8nActionBox), mergeProps({ class: "mb-m" }, unavailableNoticeProps.value), null, 16)
+          ]),
+          key: "0"
+        } : void 0,
+        !isFeatureEnabled.value || isFeatureEnabled.value && !canCreateVariables.value ? {
+          name: "empty",
+          fn: withCtx(() => [
+            !isFeatureEnabled.value ? (openBlock(), createBlock(unref(N8nActionBox), normalizeProps(mergeProps({ key: 0 }, unavailableNoticeProps.value)), null, 16)) : !canCreateVariables.value ? (openBlock(), createBlock(unref(N8nActionBox), {
+              key: 1,
+              "data-test-id": "cannot-create-variables",
+              emoji: "👋",
+              heading: unref(i18n).baseText("variables.empty.notAllowedToCreate.heading", {
+                interpolate: { name: unref(usersStore).currentUser?.firstName ?? "" }
+              }),
+              description: unref(i18n).baseText("variables.empty.notAllowedToCreate.description"),
+              onClick: goToUpgrade
+            }, null, 8, ["heading", "description"])) : createCommentVNode("", true)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["disabled", "resources", "filters", "type-props", "loading"]);
+    };
+  }
+});
+const VariablesView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b8af30c2"]]);
+export {
+  VariablesView as default
+};

package/dist/assets/{VariablesView-D4pRzSuY.css → VariablesView-CIfrpJdg.css}

@@ -120,24 +120,7 @@
  -------------------------- */
 /* BEM
  -------------------------- */
-._variablesRow_1wkcr_123:hover ._hoverButtons_1wkcr_123 {
-  opacity: 1;
-}
-._variablesRow_1wkcr_123 td > div {
-  display: flex;
-  align-items: center;
-  min-height: 40px;
-}
-._buttons_1wkcr_132 {
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: flex-end;
-}
-._hoverButtons_1wkcr_123 {
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-._usageSyntax_1wkcr_143 {
+.usageSyntax[data-v-513b2829] {
   cursor: pointer;
   background: var(--color-variables-usage-syntax-bg);
   color: var(--color-variables-usage-font);
@@ -265,11 +248,17 @@
  -------------------------- */
 /* BEM
  -------------------------- */
-._type-input_d99g5_123 {
-  --max-width: 265px;
+.key-cell[data-v-5059e945],
+.value-cell[data-v-5059e945] {
+  vertical-align: top;
 }
-._sidebarContainer_d99g5_127 ul {
-  padding: 0 !important;
+.value-cell[data-v-5059e945] {
+  width: 100%;
+  max-width: 50%;
+}
+.key-input[data-v-5059e945] textarea {
+  min-height: 40px !important;
+  resize: none;
 }/* BEM support Func
  -------------------------- */
 /* Transition
@@ -392,43 +381,21 @@
  -------------------------- */
 /* BEM
  -------------------------- */
-.variables-view[data-v-626399fb] .datatable table {
-  table-layout: fixed;
-}
-.variables-view[data-v-626399fb] .datatable th,
-.variables-view[data-v-626399fb] .datatable td {
-  width: 25%;
-}
-@media screen and (max-width: 992px) {
-.variables-view[data-v-626399fb] .datatable th,
-  .variables-view[data-v-626399fb] .datatable td {
-    width: 33.33%;
-}
-}
-.variables-view[data-v-626399fb] .datatable th.variables-value-column > div, .variables-view[data-v-626399fb] .datatable th.variables-key-column > div, .variables-view[data-v-626399fb] .datatable th.variables-usage-column > div,
-.variables-view[data-v-626399fb] .datatable td.variables-value-column > div,
-.variables-view[data-v-626399fb] .datatable td.variables-key-column > div,
-.variables-view[data-v-626399fb] .datatable td.variables-usage-column > div {
-  width: 100%;
+.action-buttons[data-v-b8af30c2] {
+  opacity: 0;
+  transition: opacity 0.2s ease;
 }
-.variables-view[data-v-626399fb] .datatable th.variables-value-column > div > span, .variables-view[data-v-626399fb] .datatable th.variables-key-column > div > span, .variables-view[data-v-626399fb] .datatable th.variables-usage-column > div > span,
-.variables-view[data-v-626399fb] .datatable td.variables-value-column > div > span,
-.variables-view[data-v-626399fb] .datatable td.variables-key-column > div > span,
-.variables-view[data-v-626399fb] .datatable td.variables-usage-column > div > span {
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
+[data-v-b8af30c2] .datatable {
   white-space: nowrap;
-  height: 18px;
 }
-.variables-view[data-v-626399fb] .datatable th.variables-value-column > div > div, .variables-view[data-v-626399fb] .datatable th.variables-key-column > div > div, .variables-view[data-v-626399fb] .datatable th.variables-usage-column > div > div,
-.variables-view[data-v-626399fb] .datatable td.variables-value-column > div > div,
-.variables-view[data-v-626399fb] .datatable td.variables-key-column > div > div,
-.variables-view[data-v-626399fb] .datatable td.variables-usage-column > div > div {
-  width: 100%;
+[data-v-b8af30c2] .datatable table tr:hover .action-buttons {
+  opacity: 1;
 }
 @media screen and (max-width: 992px) {
-.variables-view[data-v-626399fb] .datatable .variables-usage-column {
+[data-v-b8af30c2] .datatable table tr th:nth-child(3),[data-v-b8af30c2] .datatable table tr td:nth-child(3) {
     display: none;
 }
+}
+[data-v-b8af30c2] .datatable .variables-actions-column {
+  width: 170px;
 }

package/dist/assets/{WorkerView-CbqToUTB.js → WorkerView-wAx-DxZp.js}

@@ -1,8 +1,8 @@
-import { _ as _sfc_main$7 } from "./PushConnectionTracker.vue_vue_type_script_setup_true_lang-BPBen7Li.js";
-import { d as defineComponent, r as ref, m as resolveComponent, c as openBlock, h as createElementBlock, j as createBaseVNode, i as createVNode, w as withCtx, s as renderSlot, n as normalizeClass, f as createCommentVNode, _ as _export_sfc, e as createBlock, k as createTextVNode, t as toDisplayString, l as unref, F as Fragment, A as renderList, g as useI18n, b7 as useClipboard, a as useToast, hI as Chart, q as computed, aM as sortByProperty, o as onMounted, x as onBeforeUnmount, b as useRouter, a3 as useDocumentTitle, Z as useRootStore, ax as onBeforeMount, ak as useTelemetry, p as useSettingsStore, a5 as usePageRedirectionHelper } from "./index-CWcTt6jd.js";
-import { a as useOrchestrationStore, W as WORKER_HISTORY_LENGTH, u as usePushConnection } from "./usePushConnection-CGv57TM5.js";
-import { u as usePushConnectionStore } from "./pushConnection.store-CTrZ_kO6.js";
-import "./easyAiWorkflowUtils-eykvtlKm.js";
+import { _ as _sfc_main$7 } from "./PushConnectionTracker.vue_vue_type_script_setup_true_lang-vHkaCcgH.js";
+import { d as defineComponent, r as ref, m as resolveComponent, c as openBlock, h as createElementBlock, j as createBaseVNode, i as createVNode, w as withCtx, s as renderSlot, n as normalizeClass, f as createCommentVNode, _ as _export_sfc, e as createBlock, k as createTextVNode, t as toDisplayString, l as unref, F as Fragment, A as renderList, g as useI18n, b6 as useClipboard, a as useToast, hQ as Chart, q as computed, aK as sortByProperty, o as onMounted, x as onBeforeUnmount, b as useRouter, a3 as useDocumentTitle, Z as useRootStore, aw as onBeforeMount, aj as useTelemetry, p as useSettingsStore, a5 as usePageRedirectionHelper } from "./index-BW7gX0J2.js";
+import { a as useOrchestrationStore, W as WORKER_HISTORY_LENGTH, u as usePushConnection } from "./usePushConnection-3HzYJp1-.js";
+import { u as usePushConnectionStore } from "./pushConnection.store-C6PSl50Z.js";
+import "./easyAiWorkflowUtils-B7xBZAZO.js";
 function averageWorkerLoadFromLoads(loads) {
   return loads.reduce((prev, curr) => prev + curr, 0) / loads.length;
 }

package/dist/assets/{WorkflowActivator-BaM6Tydw.js → WorkflowActivator-KzTynbZM.js}

@@ -1,5 +1,5 @@
-import { d as defineComponent, c as openBlock, h as createElementBlock, k as createTextVNode, t as toDisplayString, l as unref, j as createBaseVNode, g as useI18n, a as useToast, T as useWorkflowsStore, bS as useCredentialsStore, q as computed, H as watch, e as createBlock, w as withCtx, n as normalizeClass, i as createVNode, ay as withDirectives, f as createCommentVNode, aq as h, m as resolveComponent, cQ as resolveDirective, g3 as getActivatableTriggerNodes, g4 as EXECUTE_WORKFLOW_TRIGGER_NODE_TYPE, X as PLACEHOLDER_EMPTY_WORKFLOW_ID, bT as OPEN_AI_API_CREDENTIAL_TYPE, _ as _export_sfc } from "./index-CWcTt6jd.js";
-import { u as useWorkflowActivate } from "./useWorkflowActivate-Dxi5zSSs.js";
+import { d as defineComponent, c as openBlock, h as createElementBlock, k as createTextVNode, t as toDisplayString, l as unref, j as createBaseVNode, g as useI18n, a as useToast, T as useWorkflowsStore, bR as useCredentialsStore, q as computed, H as watch, e as createBlock, w as withCtx, n as normalizeClass, i as createVNode, ax as withDirectives, f as createCommentVNode, ap as h, m as resolveComponent, cO as resolveDirective, g8 as getActivatableTriggerNodes, g9 as EXECUTE_WORKFLOW_TRIGGER_NODE_TYPE, X as PLACEHOLDER_EMPTY_WORKFLOW_ID, bS as OPEN_AI_API_CREDENTIAL_TYPE, _ as _export_sfc } from "./index-BW7gX0J2.js";
+import { u as useWorkflowActivate } from "./useWorkflowActivate-BjJ3P-qa.js";
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "WorkflowActivationErrorMessage",
   props: {

package/dist/assets/{WorkflowExecutionsInfoAccordion-6kKOPXK7.js → WorkflowExecutionsInfoAccordion-BWYv1FIv.js}

@@ -1,4 +1,4 @@
-import { d as defineComponent, b as useRouter, a4 as useWorkflowHelpers, p as useSettingsStore, K as useUIStore, T as useWorkflowsStore, a2 as useNpsSurveyStore, r as ref, q as computed, H as watch, o as onMounted, c as openBlock, e as createBlock, w as withCtx, j as createBaseVNode, k as createTextVNode, t as toDisplayString, l as unref, i as createVNode, I as withModifiers, n as normalizeClass, g as useI18n, ag as WORKFLOW_SETTINGS_MODAL_KEY, m as resolveComponent, c1 as deepCopy, X as PLACEHOLDER_EMPTY_WORKFLOW_ID, _ as _export_sfc } from "./index-CWcTt6jd.js";
+import { d as defineComponent, b as useRouter, a4 as useWorkflowHelpers, p as useSettingsStore, K as useUIStore, T as useWorkflowsStore, a2 as useNpsSurveyStore, r as ref, q as computed, H as watch, o as onMounted, c as openBlock, e as createBlock, w as withCtx, j as createBaseVNode, k as createTextVNode, t as toDisplayString, l as unref, i as createVNode, I as withModifiers, n as normalizeClass, g as useI18n, af as WORKFLOW_SETTINGS_MODAL_KEY, m as resolveComponent, c0 as deepCopy, X as PLACEHOLDER_EMPTY_WORKFLOW_ID, _ as _export_sfc } from "./index-BW7gX0J2.js";
 const _hoisted_1 = { class: "mt-2xs" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "WorkflowExecutionsInfoAccordion",

package/dist/assets/{WorkflowExecutionsLandingPage-Cqq5FeZE.js → WorkflowExecutionsLandingPage-LwIHX7rs.js}

@@ -1,5 +1,5 @@
-import { d as defineComponent, b as useRouter, U as useRoute, K as useUIStore, T as useWorkflowsStore, q as computed, c as openBlock, h as createElementBlock, n as normalizeClass, i as createVNode, w as withCtx, k as createTextVNode, t as toDisplayString, l as unref, f as createCommentVNode, g as useI18n, X as PLACEHOLDER_EMPTY_WORKFLOW_ID, V as VIEWS, m as resolveComponent, _ as _export_sfc } from "./index-CWcTt6jd.js";
-import { W as WorkflowExecutionsInfoAccordion } from "./WorkflowExecutionsInfoAccordion-6kKOPXK7.js";
+import { d as defineComponent, b as useRouter, U as useRoute, K as useUIStore, T as useWorkflowsStore, q as computed, c as openBlock, h as createElementBlock, n as normalizeClass, i as createVNode, w as withCtx, k as createTextVNode, t as toDisplayString, l as unref, f as createCommentVNode, g as useI18n, X as PLACEHOLDER_EMPTY_WORKFLOW_ID, V as VIEWS, m as resolveComponent, _ as _export_sfc } from "./index-BW7gX0J2.js";
+import { W as WorkflowExecutionsInfoAccordion } from "./WorkflowExecutionsInfoAccordion-BWYv1FIv.js";
 const _hoisted_1 = {
   key: 0,
   "data-test-id": "workflow-execution-no-trigger-content"