n8n-editor-ui 1.67.0 → 1.68.0

package/dist/assets/RunDataTable-DISLWxMc.js

@@ -1,608 +0,0 @@
-import { d as defineComponent, dT as Draggable, jj as MappingPill, jk as TextWithHighlights, e5 as mapStores, T as useWorkflowsStore, ap as useNDVStore, s as shorten, jl as getPairedItemId, jm as getMappedExpression, aG as useExternalHooks, _ as _export_sfc, l as resolveComponent, c as openBlock, h as createElementBlock, n as normalizeClass, j as createBaseVNode, F as Fragment, z as renderList, i as createVNode, w as withCtx, k as createTextVNode, t as toDisplayString, f as createCommentVNode, e as createBlock } from "./index-7YFQEQmt.js";
-const MAX_COLUMNS_LIMIT = 40;
-const _sfc_main = defineComponent({
-  name: "RunDataTable",
-  components: { Draggable, MappingPill, TextWithHighlights },
-  props: {
-    node: {
-      type: Object,
-      required: true
-    },
-    inputData: {
-      type: Array,
-      required: true
-    },
-    mappingEnabled: {
-      type: Boolean
-    },
-    distanceFromActive: {
-      type: Number,
-      required: true
-    },
-    runIndex: {
-      type: Number
-    },
-    outputIndex: {
-      type: Number
-    },
-    totalRuns: {
-      type: Number
-    },
-    pageOffset: {
-      type: Number,
-      required: true
-    },
-    hasDefaultHoverState: {
-      type: Boolean
-    },
-    search: {
-      type: String
-    }
-  },
-  setup() {
-    const externalHooks = useExternalHooks();
-    return {
-      externalHooks
-    };
-  },
-  data() {
-    return {
-      activeColumn: -1,
-      forceShowGrip: false,
-      draggedColumn: false,
-      draggingPath: null,
-      hoveringPath: null,
-      mappingHintVisible: false,
-      activeRow: null,
-      columnLimit: MAX_COLUMNS_LIMIT,
-      columnLimitExceeded: false
-    };
-  },
-  mounted() {
-    if (this.tableData && this.tableData.columns && this.$refs.draggable) {
-      const tbody = this.$refs.draggable.$refs.wrapper;
-      if (tbody) {
-        this.$emit("mounted", {
-          avgRowHeight: tbody.offsetHeight / this.tableData.data.length
-        });
-      }
-    }
-  },
-  computed: {
-    ...mapStores(useNDVStore, useWorkflowsStore),
-    hoveringItem() {
-      return this.ndvStore.hoveringItem;
-    },
-    pairedItemMappings() {
-      return this.workflowsStore.workflowExecutionPairedItemMappings;
-    },
-    tableData() {
-      return this.convertToTable(this.inputData);
-    },
-    focusedMappableInput() {
-      return this.ndvStore.focusedMappableInput;
-    },
-    highlight() {
-      return this.ndvStore.highlightDraggables;
-    }
-  },
-  methods: {
-    shorten,
-    isHoveringRow(row) {
-      var _a;
-      if (row === this.activeRow) {
-        return true;
-      }
-      const itemIndex = this.pageOffset + row;
-      if (itemIndex === 0 && !this.hoveringItem && this.hasDefaultHoverState && this.distanceFromActive === 1) {
-        return true;
-      }
-      const itemNodeId = getPairedItemId(
-        ((_a = this.node) == null ? void 0 : _a.name) ?? "",
-        this.runIndex || 0,
-        this.outputIndex || 0,
-        itemIndex
-      );
-      if (!this.hoveringItem || !this.pairedItemMappings[itemNodeId]) {
-        return false;
-      }
-      const hoveringItemId = getPairedItemId(
-        this.hoveringItem.nodeName,
-        this.hoveringItem.runIndex,
-        this.hoveringItem.outputIndex,
-        this.hoveringItem.itemIndex
-      );
-      return this.pairedItemMappings[itemNodeId].has(hoveringItemId);
-    },
-    onMouseEnterCell(e) {
-      const target = e.target;
-      if (target && this.mappingEnabled) {
-        const col = target.dataset.col;
-        if (col && !isNaN(parseInt(col, 10))) {
-          this.activeColumn = parseInt(col, 10);
-        }
-      }
-      if (target) {
-        const row = target.dataset.row;
-        if (row && !isNaN(parseInt(row, 10))) {
-          this.activeRow = parseInt(row, 10);
-          this.$emit("activeRowChanged", this.pageOffset + this.activeRow);
-        }
-      }
-    },
-    onMouseLeaveCell() {
-      this.activeColumn = -1;
-      this.activeRow = null;
-      this.$emit("activeRowChanged", null);
-    },
-    onMouseEnterKey(path, colIndex) {
-      this.hoveringPath = this.getCellExpression(path, colIndex);
-    },
-    onMouseLeaveKey() {
-      this.hoveringPath = null;
-    },
-    isHovering(path, colIndex) {
-      const expr = this.getCellExpression(path, colIndex);
-      return this.hoveringPath === expr;
-    },
-    getExpression(column) {
-      if (!this.node) {
-        return "";
-      }
-      return getMappedExpression({
-        nodeName: this.node.name,
-        distanceFromActive: this.distanceFromActive,
-        path: [column]
-      });
-    },
-    getPathNameFromTarget(el) {
-      if (!el) {
-        return "";
-      }
-      return el.dataset.name;
-    },
-    getCellPathName(path, colIndex) {
-      const lastKey = path[path.length - 1];
-      if (typeof lastKey === "string") {
-        return lastKey;
-      }
-      if (path.length > 1) {
-        const prevKey = path[path.length - 2];
-        return `${prevKey}[${lastKey}]`;
-      }
-      const column = this.tableData.columns[colIndex];
-      return `${column}[${lastKey}]`;
-    },
-    getCellExpression(path, colIndex) {
-      if (!this.node) {
-        return "";
-      }
-      const column = this.tableData.columns[colIndex];
-      return getMappedExpression({
-        nodeName: this.node.name,
-        distanceFromActive: this.distanceFromActive,
-        path: [column, ...path]
-      });
-    },
-    isEmpty(value2) {
-      return value2 === "" || Array.isArray(value2) && value2.length === 0 || typeof value2 === "object" && value2 !== null && Object.keys(value2).length === 0 || value2 === null || value2 === void 0;
-    },
-    getValueToRender(value2) {
-      if (value2 === "") {
-        return this.$locale.baseText("runData.emptyString");
-      }
-      if (typeof value2 === "string") {
-        return value2;
-      }
-      if (Array.isArray(value2) && value2.length === 0) {
-        return this.$locale.baseText("runData.emptyArray");
-      }
-      if (typeof value2 === "object" && value2 !== null && Object.keys(value2).length === 0) {
-        return this.$locale.baseText("runData.emptyObject");
-      }
-      if (value2 === null || value2 === void 0) {
-        return `[${value2}]`;
-      }
-      if (value2 === true || value2 === false || typeof value2 === "number") {
-        return value2.toString();
-      }
-      return JSON.stringify(value2);
-    },
-    onDragStart() {
-      this.draggedColumn = true;
-      this.ndvStore.resetMappingTelemetry();
-    },
-    onCellDragStart(el) {
-      if (el == null ? void 0 : el.dataset.value) {
-        this.draggingPath = el.dataset.value;
-      }
-      this.onDragStart();
-    },
-    onCellDragEnd(el) {
-      this.draggingPath = null;
-      this.onDragEnd(el.dataset.name || "", "tree", el.dataset.depth || "0");
-    },
-    isDraggingKey(path, colIndex) {
-      if (!this.draggingPath) {
-        return;
-      }
-      return this.draggingPath === this.getCellExpression(path, colIndex);
-    },
-    onDragEnd(column, src, depth = "0") {
-      setTimeout(() => {
-        const mappingTelemetry = this.ndvStore.mappingTelemetry;
-        const telemetryPayload = {
-          src_node_type: this.node.type,
-          src_field_name: column,
-          src_nodes_back: this.distanceFromActive,
-          src_run_index: this.runIndex,
-          src_runs_total: this.totalRuns,
-          src_field_nest_level: parseInt(depth, 10),
-          src_view: "table",
-          src_element: src,
-          success: false,
-          ...mappingTelemetry
-        };
-        void this.externalHooks.run("runDataTable.onDragEnd", telemetryPayload);
-        this.$telemetry.track("User dragged data for mapping", telemetryPayload, {
-          withPostHog: true
-        });
-      }, 1e3);
-    },
-    isSimple(data) {
-      return typeof data !== "object" || data === null || Array.isArray(data) && data.length === 0 || typeof data === "object" && Object.keys(data).length === 0;
-    },
-    hasJsonInColumn(colIndex) {
-      return this.tableData.hasJson[this.tableData.columns[colIndex]];
-    },
-    convertToTable(inputData) {
-      const tableData = [];
-      const tableColumns = [];
-      let leftEntryColumns, entryRows;
-      let entry;
-      const hasJson = {};
-      inputData.forEach((data) => {
-        if (!data.hasOwnProperty("json")) {
-          return;
-        }
-        entry = data.json;
-        entryRows = [];
-        const entryColumns = Object.keys(entry || {});
-        if (entryColumns.length > MAX_COLUMNS_LIMIT) {
-          this.columnLimitExceeded = true;
-          leftEntryColumns = entryColumns.slice(0, MAX_COLUMNS_LIMIT);
-        } else {
-          leftEntryColumns = entryColumns;
-        }
-        tableColumns.forEach((key) => {
-          if (entry.hasOwnProperty(key)) {
-            entryRows.push(entry[key]);
-            leftEntryColumns.splice(leftEntryColumns.indexOf(key), 1);
-            hasJson[key] = hasJson[key] || typeof entry[key] === "object" && Object.keys(entry[key] || {}).length > 0 || false;
-          } else {
-            entryRows.push(void 0);
-          }
-        });
-        leftEntryColumns.forEach((key) => {
-          tableColumns.push(key);
-          entryRows.push(entry[key]);
-          hasJson[key] = hasJson[key] || typeof entry[key] === "object" && Object.keys(entry[key] || {}).length > 0 || false;
-        });
-        tableData.push(entryRows);
-      });
-      tableData.forEach((entryRows2) => {
-        if (tableColumns.length > entryRows2.length) {
-          entryRows2.push(...new Array(tableColumns.length - entryRows2.length));
-        }
-      });
-      return {
-        hasJson,
-        columns: tableColumns,
-        data: tableData
-      };
-    },
-    switchToJsonView() {
-      this.$emit("displayModeChange", "json");
-    }
-  },
-  watch: {
-    focusedMappableInput(curr) {
-      setTimeout(
-        () => {
-          this.forceShowGrip = !!this.focusedMappableInput;
-        },
-        curr ? 300 : 150
-      );
-    }
-  }
-});
-const _imports_0 = "/%7B%7BBASE_PATH%7D%7D/static/data-mapping-gif.gif";
-const dataDisplay = "_dataDisplay_5ss8n_1";
-const table = "_table_5ss8n_14";
-const nodeClass = "_nodeClass_5ss8n_63";
-const emptyCell = "_emptyCell_5ss8n_67";
-const header = "_header_5ss8n_71";
-const draggableHeader = "_draggableHeader_5ss8n_83";
-const dragButton = "_dragButton_5ss8n_87";
-const highlight = "_highlight_5ss8n_91";
-const draggingHeader = "_draggingHeader_5ss8n_95";
-const activeHeader = "_activeHeader_5ss8n_100";
-const dataKey = "_dataKey_5ss8n_109";
-const value = "_value_5ss8n_118";
-const nestedValue = "_nestedValue_5ss8n_122 _value_5ss8n_118";
-const mappable = "_mappable_5ss8n_127";
-const empty = "_empty_5ss8n_67";
-const limitColWidth = "_limitColWidth_5ss8n_135";
-const minColWidth = "_minColWidth_5ss8n_139";
-const hoveringKey = "_hoveringKey_5ss8n_143";
-const draggingKey = "_draggingKey_5ss8n_147";
-const tableRightMargin = "_tableRightMargin_5ss8n_151";
-const hoveringRow = "_hoveringRow_5ss8n_159";
-const warningTooltip = "_warningTooltip_5ss8n_164";
-const style0 = {
-  dataDisplay,
-  table,
-  nodeClass,
-  emptyCell,
-  header,
-  draggableHeader,
-  dragButton,
-  highlight,
-  draggingHeader,
-  activeHeader,
-  dataKey,
-  value,
-  nestedValue,
-  mappable,
-  empty,
-  limitColWidth,
-  minColWidth,
-  hoveringKey,
-  draggingKey,
-  tableRightMargin,
-  hoveringRow,
-  warningTooltip
-};
-const _hoisted_1 = ["data-row"];
-const _hoisted_2 = ["data-test-id"];
-const _hoisted_3 = ["data-row", "data-col"];
-const _hoisted_4 = ["data-name", "data-value", "data-depth", "onMouseenter"];
-const _hoisted_5 = { key: 0 };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_n8n_info_tip = resolveComponent("n8n-info-tip");
-  const _component_MappingPill = MappingPill;
-  const _component_TextWithHighlights = TextWithHighlights;
-  const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
-  const _component_Draggable = Draggable;
-  const _component_n8n_tooltip = resolveComponent("n8n-tooltip");
-  const _component_i18n_t = resolveComponent("i18n-t");
-  const _component_n8n_tree = resolveComponent("n8n-tree");
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass([_ctx.$style.dataDisplay, { [_ctx.$style.highlight]: _ctx.highlight }])
-  }, [
-    _ctx.tableData.columns && _ctx.tableData.columns.length === 0 ? (openBlock(), createElementBlock("table", {
-      key: 0,
-      class: normalizeClass(_ctx.$style.table)
-    }, [
-      createBaseVNode("thead", null, [
-        createBaseVNode("tr", null, [
-          createBaseVNode("th", {
-            class: normalizeClass(_ctx.$style.emptyCell)
-          }, null, 2),
-          createBaseVNode("th", {
-            class: normalizeClass(_ctx.$style.tableRightMargin)
-          }, null, 2)
-        ])
-      ]),
-      createBaseVNode("tbody", null, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tableData.data, (_, index1) => {
-          return openBlock(), createElementBlock("tr", {
-            key: index1,
-            class: normalizeClass({ [_ctx.$style.hoveringRow]: _ctx.isHoveringRow(index1) })
-          }, [
-            createBaseVNode("td", {
-              "data-row": index1,
-              "data-col": 0,
-              onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.onMouseEnterCell && _ctx.onMouseEnterCell(...args)),
-              onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.onMouseLeaveCell && _ctx.onMouseLeaveCell(...args))
-            }, [
-              createVNode(_component_n8n_info_tip, null, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(_ctx.$locale.baseText("runData.emptyItemHint")), 1)
-                ]),
-                _: 1
-              })
-            ], 40, _hoisted_1),
-            createBaseVNode("td", {
-              class: normalizeClass(_ctx.$style.tableRightMargin)
-            }, null, 2)
-          ], 2);
-        }), 128))
-      ])
-    ], 2)) : (openBlock(), createElementBlock("table", {
-      key: 1,
-      class: normalizeClass(_ctx.$style.table)
-    }, [
-      createBaseVNode("thead", null, [
-        createBaseVNode("tr", null, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tableData.columns || [], (column, i) => {
-            return openBlock(), createElementBlock("th", { key: column }, [
-              createVNode(_component_n8n_tooltip, {
-                placement: "bottom-start",
-                disabled: !_ctx.mappingEnabled,
-                "show-after": 1e3
-              }, {
-                content: withCtx(() => [
-                  createBaseVNode("div", null, [
-                    _cache[6] || (_cache[6] = createBaseVNode("img", { src: _imports_0 }, null, -1)),
-                    createTextVNode(" " + toDisplayString(_ctx.$locale.baseText("dataMapping.dragColumnToFieldHint")), 1)
-                  ])
-                ]),
-                default: withCtx(() => [
-                  createVNode(_component_Draggable, {
-                    type: "mapping",
-                    data: _ctx.getExpression(column),
-                    disabled: !_ctx.mappingEnabled,
-                    onDragstart: _ctx.onDragStart,
-                    onDragend: (column2) => _ctx.onDragEnd((column2 == null ? void 0 : column2.textContent) ?? "", "column")
-                  }, {
-                    preview: withCtx(({ canDrop }) => [
-                      createVNode(_component_MappingPill, {
-                        html: _ctx.shorten(column, 16, 2),
-                        "can-drop": canDrop
-                      }, null, 8, ["html", "can-drop"])
-                    ]),
-                    default: withCtx(({ isDragging }) => [
-                      createBaseVNode("div", {
-                        class: normalizeClass({
-                          [_ctx.$style.header]: true,
-                          [_ctx.$style.draggableHeader]: _ctx.mappingEnabled,
-                          [_ctx.$style.activeHeader]: (i === _ctx.activeColumn || _ctx.forceShowGrip) && _ctx.mappingEnabled,
-                          [_ctx.$style.draggingHeader]: isDragging
-                        })
-                      }, [
-                        createVNode(_component_TextWithHighlights, {
-                          content: _ctx.getValueToRender(column || ""),
-                          search: _ctx.search
-                        }, null, 8, ["content", "search"]),
-                        createBaseVNode("div", {
-                          class: normalizeClass(_ctx.$style.dragButton)
-                        }, [
-                          createVNode(_component_font_awesome_icon, { icon: "grip-vertical" })
-                        ], 2)
-                      ], 2)
-                    ]),
-                    _: 2
-                  }, 1032, ["data", "disabled", "onDragstart", "onDragend"])
-                ]),
-                _: 2
-              }, 1032, ["disabled"])
-            ]);
-          }), 128)),
-          _ctx.columnLimitExceeded ? (openBlock(), createElementBlock("th", {
-            key: 0,
-            class: normalizeClass(_ctx.$style.header)
-          }, [
-            createVNode(_component_n8n_tooltip, { placement: "bottom-end" }, {
-              content: withCtx(() => [
-                createBaseVNode("div", null, [
-                  createVNode(_component_i18n_t, {
-                    tag: "span",
-                    keypath: "dataMapping.tableView.tableColumnsExceeded.tooltip"
-                  }, {
-                    columnLimit: withCtx(() => [
-                      createTextVNode(toDisplayString(_ctx.columnLimit), 1)
-                    ]),
-                    link: withCtx(() => [
-                      createBaseVNode("a", {
-                        onClick: _cache[2] || (_cache[2] = (...args) => _ctx.switchToJsonView && _ctx.switchToJsonView(...args))
-                      }, toDisplayString(_ctx.$locale.baseText("dataMapping.tableView.tableColumnsExceeded.tooltip.link")), 1)
-                    ]),
-                    _: 1
-                  })
-                ])
-              ]),
-              default: withCtx(() => [
-                createBaseVNode("span", null, [
-                  createVNode(_component_font_awesome_icon, {
-                    class: normalizeClass(_ctx.$style["warningTooltip"]),
-                    icon: "exclamation-triangle"
-                  }, null, 8, ["class"]),
-                  createTextVNode(" " + toDisplayString(_ctx.$locale.baseText("dataMapping.tableView.tableColumnsExceeded")), 1)
-                ])
-              ]),
-              _: 1
-            })
-          ], 2)) : createCommentVNode("", true),
-          createBaseVNode("th", {
-            class: normalizeClass(_ctx.$style.tableRightMargin)
-          }, null, 2)
-        ])
-      ]),
-      createVNode(_component_Draggable, {
-        ref: "draggable",
-        tag: "tbody",
-        type: "mapping",
-        "target-data-key": "mappable",
-        disabled: !_ctx.mappingEnabled,
-        onDragstart: _ctx.onCellDragStart,
-        onDragend: _ctx.onCellDragEnd
-      }, {
-        preview: withCtx(({ canDrop, el }) => [
-          createVNode(_component_MappingPill, {
-            html: _ctx.shorten(_ctx.getPathNameFromTarget(el) || "", 16, 2),
-            "can-drop": canDrop
-          }, null, 8, ["html", "can-drop"])
-        ]),
-        default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tableData.data, (row, index1) => {
-            return openBlock(), createElementBlock("tr", {
-              key: index1,
-              class: normalizeClass({ [_ctx.$style.hoveringRow]: _ctx.isHoveringRow(index1) }),
-              "data-test-id": _ctx.isHoveringRow(index1) ? "hovering-item" : void 0
-            }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(row, (data, index2) => {
-                return openBlock(), createElementBlock("td", {
-                  key: index2,
-                  "data-row": index1,
-                  "data-col": index2,
-                  class: normalizeClass(_ctx.hasJsonInColumn(index2) ? _ctx.$style.minColWidth : _ctx.$style.limitColWidth),
-                  onMouseenter: _cache[4] || (_cache[4] = (...args) => _ctx.onMouseEnterCell && _ctx.onMouseEnterCell(...args)),
-                  onMouseleave: _cache[5] || (_cache[5] = (...args) => _ctx.onMouseLeaveCell && _ctx.onMouseLeaveCell(...args))
-                }, [
-                  _ctx.isSimple(data) ? (openBlock(), createBlock(_component_TextWithHighlights, {
-                    key: 0,
-                    content: _ctx.getValueToRender(data),
-                    search: _ctx.search,
-                    class: normalizeClass({ [_ctx.$style.value]: true, [_ctx.$style.empty]: _ctx.isEmpty(data) })
-                  }, null, 8, ["content", "search", "class"])) : (openBlock(), createBlock(_component_n8n_tree, {
-                    key: 1,
-                    "node-class": _ctx.$style.nodeClass,
-                    value: data
-                  }, {
-                    label: withCtx(({ label, path }) => [
-                      createBaseVNode("span", {
-                        class: normalizeClass({
-                          [_ctx.$style.hoveringKey]: _ctx.mappingEnabled && _ctx.isHovering(path, index2),
-                          [_ctx.$style.draggingKey]: _ctx.isDraggingKey(path, index2),
-                          [_ctx.$style.dataKey]: true,
-                          [_ctx.$style.mappable]: _ctx.mappingEnabled
-                        }),
-                        "data-target": "mappable",
-                        "data-name": _ctx.getCellPathName(path, index2),
-                        "data-value": _ctx.getCellExpression(path, index2),
-                        "data-depth": path.length,
-                        onMouseenter: () => _ctx.onMouseEnterKey(path, index2),
-                        onMouseleave: _cache[3] || (_cache[3] = (...args) => _ctx.onMouseLeaveKey && _ctx.onMouseLeaveKey(...args))
-                      }, toDisplayString(label || _ctx.$locale.baseText("runData.unnamedField")), 43, _hoisted_4)
-                    ]),
-                    value: withCtx(({ value: value2 }) => [
-                      createVNode(_component_TextWithHighlights, {
-                        content: _ctx.getValueToRender(value2),
-                        search: _ctx.search,
-                        class: normalizeClass({ [_ctx.$style.nestedValue]: true, [_ctx.$style.empty]: _ctx.isEmpty(value2) })
-                      }, null, 8, ["content", "search", "class"])
-                    ]),
-                    _: 2
-                  }, 1032, ["node-class", "value"]))
-                ], 42, _hoisted_3);
-              }), 128)),
-              _ctx.columnLimitExceeded ? (openBlock(), createElementBlock("td", _hoisted_5)) : createCommentVNode("", true),
-              createBaseVNode("td", {
-                class: normalizeClass(_ctx.$style.tableRightMargin)
-              }, null, 2)
-            ], 10, _hoisted_2);
-          }), 128))
-        ]),
-        _: 1
-      }, 8, ["disabled", "onDragstart", "onDragend"])
-    ], 2))
-  ], 2);
-}
-const cssModules = {
-  "$style": style0
-};
-const RunDataTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__cssModules", cssModules]]);
-export {
-  RunDataTable as default
-};