n8n-editor-ui 1.100.0 → 1.101.0

package/dist/assets/{ProjectHeader-C7A20kgK.js → ProjectHeader-DSKKwiQ0.js}

@@ -1,5 +1,5 @@
-import { d as defineComponent, U as useRoute, r as ref, x as computed, V as VIEWS, c as useI18n, $ as watch, h as resolveComponent, e as createBlock, g as openBlock, i as createElementBlock, n as normalizeClass, A as renderSlot, j as createVNode, m as unref, g$ as N8nActionToggle, w as withCtx, a$ as _sfc_main$3, _ as _export_sfc, b as useRouter, a4 as useProjectsStore, a3 as useSourceControlStore, v as useSettingsStore, af as ProjectTypes, ab as getResourcePermissions, cP as useElementSize, h0 as useResizeObserver, k as createBaseVNode, f as createCommentVNode, fH as ProjectIcon, l as createTextVNode, t as toDisplayString, q as N8nButton, bK as mergeProps, aZ as N8nTooltip } from "./index-ZImlcrmd.js";
-import { u as useProjectPages } from "./useProjectPages-wyiRSAYY.js";
+import { d as defineComponent, a4 as useRoute, r as ref, x as computed, V as VIEWS, c as useI18n, a9 as watch, e as createBlock, g as openBlock, d3 as N8nTabs, aq as useTemplateRef, i as createElementBlock, n as normalizeClass, J as renderSlot, j as createVNode, m as unref, fl as N8nActionToggle, w as withCtx, $ as _sfc_main$3, _ as _export_sfc, b as useRouter, ae as useProjectsStore, ad as useSourceControlStore, v as useSettingsStore, ap as ProjectTypes, al as getResourcePermissions, d4 as useElementSize, dC as useResizeObserver, k as createBaseVNode, f as createCommentVNode, g8 as ProjectIcon, N as N8nHeading, l as createTextVNode, t as toDisplayString, p as N8nText, q as N8nButton, D as mergeProps, Z as N8nTooltip } from "./index-7S5ADieN.js";
+import { u as useProjectPages } from "./useProjectPages-DgMGWOaO.js";
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "ProjectTabs",
   props: {
@@ -12,6 +12,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const locale = useI18n();
     const route = useRoute();
     const selectedTab = ref("");
+    const selectedTabLabel = computed(() => selectedTab.value ? String(selectedTab.value) : "");
     const projectId = computed(() => {
       return Array.isArray(route?.params?.projectId) ? route.params.projectId[0] : route?.params?.projectId;
     });
@@ -77,14 +78,17 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       },
       { immediate: true }
     );
+    function onSelectTab(value) {
+      selectedTab.value = value;
+    }
     return (_ctx, _cache) => {
-      const _component_N8nTabs = resolveComponent("N8nTabs");
+      const _component_N8nTabs = N8nTabs;
       return openBlock(), createBlock(_component_N8nTabs, {
-        modelValue: selectedTab.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedTab.value = $event),
+        "model-value": selectedTabLabel.value,
         options: options.value,
-        "data-test-id": "project-tabs"
-      }, null, 8, ["modelValue", "options"]);
+        "data-test-id": "project-tabs",
+        "onUpdate:modelValue": onSelectTab
+      }, null, 8, ["model-value", "options"]);
     };
   }
 });
@@ -98,7 +102,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   emits: ["action"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const emit = __emit;
-    const actionToggleRef = ref(null);
+    const actionToggleRef = useTemplateRef("actionToggleRef");
     __expose({
       openActionToggle: (isOpen) => actionToggleRef.value?.openActionToggle(isOpen)
     });
@@ -314,8 +318,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       executableAction(homeProject.value.id);
     };
     return (_ctx, _cache) => {
-      const _component_N8nHeading = resolveComponent("N8nHeading");
-      const _component_N8nText = resolveComponent("N8nText");
+      const _component_N8nHeading = N8nHeading;
+      const _component_N8nText = N8nText;
       return openBlock(), createElementBlock("div", null, [
         createBaseVNode("div", {
           ref_key: "projectHeaderRef",

package/dist/assets/{ProjectSettings-DVNR9FN4.js → ProjectSettings-C3sMIDHh.js}

@@ -1,6 +1,350 @@
-import { d as defineComponent, cK as mergeModels, cL as useModel, r as ref, x as computed, c as useI18n, h as resolveComponent, e as createBlock, g as openBlock, w as withCtx, i as createElementBlock, l as createTextVNode, t as toDisplayString, m as unref, j as createVNode, k as createBaseVNode, f as createCommentVNode, n as normalizeClass, gr as ProjectSharing, bE as withModifiers, _ as _export_sfc, aa as usePageRedirectionHelper, u as useUsersStore, a4 as useProjectsStore, ha as useRolesStore, aQ as useCloudPlanStore, a as useToast, b as useRouter, a7 as useDocumentTitle, hb as getAllIconNames, $ as watch, aH as onBeforeMount, o as onMounted, fj as N8nFormInput, F as Fragment, G as renderList, di as deepCopy, am as useTelemetry, B as nextTick, V as VIEWS } from "./index-ZImlcrmd.js";
-import { P as ProjectHeader } from "./ProjectHeader-C7A20kgK.js";
-import "./useProjectPages-wyiRSAYY.js";
+import { d as defineComponent, r as ref, x as computed, e as createBlock, g as openBlock, bh as createSlots, w as withCtx, J as renderSlot, i as createElementBlock, F as Fragment, y as renderList, m as unref, fe as _sfc_main$5, n as normalizeClass, j as createVNode, C as N8nUserInfo, D as mergeProps, gM as useI18n, fd as N8nSelect, _ as _export_sfc, cW as mergeModels, cX as useModel, bg as onClickOutside, k as createBaseVNode, f as createCommentVNode, Z as N8nTooltip, $ as _sfc_main$6, q as N8nButton, l as createTextVNode, t as toDisplayString, d3 as N8nTabs, aW as N8nIcon, c as useI18n$1, h as resolveComponent, p as N8nText, gR as ProjectSharing, fb as N8nInputLabel, dU as N8nInput, bV as withModifiers, ak as usePageRedirectionHelper, u as useUsersStore, ae as useProjectsStore, hy as useRolesStore, b5 as useCloudPlanStore, a as useToast, b as useRouter, ah as useDocumentTitle, hz as getAllIconNames, a9 as watch, aS as onBeforeMount, o as onMounted, fQ as N8nFormInput, fi as N8nUsersList, dx as deepCopy, V as VIEWS, ax as useTelemetry, K as nextTick } from "./index-7S5ADieN.js";
+import { P as ProjectHeader } from "./ProjectHeader-DSKKwiQ0.js";
+import "./useProjectPages-DgMGWOaO.js";
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "UserSelect",
+  props: {
+    users: { default: () => [] },
+    modelValue: { default: "" },
+    ignoreIds: { default: () => [] },
+    currentUserId: { default: "" },
+    placeholder: {},
+    size: {}
+  },
+  emits: ["blur", "focus"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useI18n();
+    const filter = ref("");
+    const filteredUsers = computed(
+      () => props.users.filter((user) => {
+        if (props.ignoreIds.includes(user.id)) {
+          return false;
+        }
+        if (user.fullName && user.email) {
+          const match = user.fullName.toLowerCase().includes(filter.value.toLowerCase());
+          if (match) {
+            return true;
+          }
+        }
+        return user.email?.includes(filter.value) ?? false;
+      })
+    );
+    const sortedUsers = computed(
+      () => [...filteredUsers.value].sort((a, b) => {
+        if (a.lastName && b.lastName && a.lastName !== b.lastName) {
+          return a.lastName > b.lastName ? 1 : -1;
+        }
+        if (a.firstName && b.firstName && a.firstName !== b.firstName) {
+          return a.firstName > b.firstName ? 1 : -1;
+        }
+        if (!a.email || !b.email) {
+          throw new Error("Expected all users to have email");
+        }
+        return a.email > b.email ? 1 : -1;
+      })
+    );
+    const setFilter = (value = "") => {
+      filter.value = value;
+    };
+    const onBlur = () => emit("blur");
+    const onFocus = () => emit("focus");
+    const getLabel = (user) => (!user.fullName ? user.email : `${user.fullName} (${user.email})`) ?? "";
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(N8nSelect), mergeProps({ "data-test-id": "user-select-trigger" }, _ctx.$attrs, {
+        "model-value": _ctx.modelValue,
+        filterable: true,
+        "filter-method": setFilter,
+        placeholder: _ctx.placeholder || unref(t)("nds.userSelect.selectUser"),
+        "default-first-option": true,
+        teleported: "",
+        "popper-class": _ctx.$style.limitPopperWidth,
+        "no-data-text": unref(t)("nds.userSelect.noMatchingUsers"),
+        size: _ctx.size,
+        onBlur,
+        onFocus
+      }), createSlots({
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(sortedUsers.value, (user) => {
+            return openBlock(), createBlock(unref(_sfc_main$5), {
+              id: `user-select-option-id-${user.id}`,
+              key: user.id,
+              value: user.id,
+              class: normalizeClass(_ctx.$style.itemContainer),
+              label: getLabel(user),
+              disabled: user.disabled
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(N8nUserInfo), mergeProps({ ref_for: true }, user, {
+                  "is-current-user": _ctx.currentUserId === user.id
+                }), null, 16, ["is-current-user"])
+              ]),
+              _: 2
+            }, 1032, ["id", "value", "class", "label", "disabled"]);
+          }), 128))
+        ]),
+        _: 2
+      }, [
+        _ctx.$slots.prefix ? {
+          name: "prefix",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "prefix")
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040, ["model-value", "placeholder", "popper-class", "no-data-text", "size"]);
+    };
+  }
+});
+const itemContainer = "_itemContainer_9rnse_123";
+const limitPopperWidth = "_limitPopperWidth_9rnse_128";
+const style0$3 = {
+  itemContainer,
+  limitPopperWidth
+};
+const cssModules$3 = {
+  "$style": style0$3
+};
+const N8nUserSelect = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$3]]);
+var cache = /* @__PURE__ */ new Map();
+function isEmojiSupported(unicode) {
+  if (cache.has(unicode)) {
+    return cache.get(unicode);
+  }
+  var supported = isSupported(unicode);
+  cache.set(unicode, supported);
+  return supported;
+}
+var isSupported = function() {
+  var ctx = null;
+  try {
+    ctx = document.createElement("canvas").getContext("2d");
+  } catch (_a) {
+  }
+  if (!ctx) {
+    return function() {
+      return false;
+    };
+  }
+  var CANVAS_HEIGHT = 25;
+  var CANVAS_WIDTH = 20;
+  var textSize = Math.floor(CANVAS_HEIGHT / 2);
+  ctx.font = textSize + "px Arial, Sans-Serif";
+  ctx.textBaseline = "top";
+  ctx.canvas.width = CANVAS_WIDTH * 2;
+  ctx.canvas.height = CANVAS_HEIGHT;
+  return function(unicode) {
+    ctx.clearRect(0, 0, CANVAS_WIDTH * 2, CANVAS_HEIGHT);
+    ctx.fillStyle = "#FF0000";
+    ctx.fillText(unicode, 0, 22);
+    ctx.fillStyle = "#0000FF";
+    ctx.fillText(unicode, CANVAS_WIDTH, 22);
+    var a = ctx.getImageData(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT).data;
+    var count = a.length;
+    var i = 0;
+    for (; i < count && !a[i + 3]; i += 4)
+      ;
+    if (i >= count) {
+      return false;
+    }
+    var x = CANVAS_WIDTH + i / 4 % CANVAS_WIDTH;
+    var y = Math.floor(i / 4 / CANVAS_WIDTH);
+    var b = ctx.getImageData(x, y, 1, 1).data;
+    if (a[i] !== b[0] || a[i + 2] !== b[2]) {
+      return false;
+    }
+    if (ctx.measureText(unicode).width >= CANVAS_WIDTH) {
+      return false;
+    }
+    return true;
+  };
+}();
+const _hoisted_1$3 = ["aria-expanded"];
+const _hoisted_2$2 = ["onClick"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...{ name: "N8nIconPicker" },
+  __name: "IconPicker",
+  props: /* @__PURE__ */ mergeModels({
+    buttonTooltip: {},
+    availableIcons: { default: () => [] },
+    buttonSize: { default: "large" }
+  }, {
+    "modelValue": { default: { type: "icon", value: "smile" } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const emojiRanges = [
+      [128512, 128591],
+      // Emoticons
+      [127744, 128511],
+      // Symbols & Pictographs
+      [128640, 128767],
+      // Transport & Map Symbols
+      [9728, 9983],
+      // Miscellaneous Symbols
+      [9984, 10175],
+      // Dingbats
+      [129280, 129535],
+      // Supplemental Symbols
+      [127462, 127487],
+      // Regional Indicator Symbols
+      [128e3, 128255]
+      // Additional pictographs
+    ];
+    const { t } = useI18n();
+    const props = __props;
+    const model = useModel(__props, "modelValue");
+    const hasAvailableIcons = computed(() => props.availableIcons.length > 0);
+    const emojis = computed(() => {
+      const emojisArray = [];
+      emojiRanges.forEach(([start, end]) => {
+        for (let i = start; i <= end; i++) {
+          const emoji2 = String.fromCodePoint(i);
+          if (isEmojiSupported(emoji2)) {
+            emojisArray.push(emoji2);
+          }
+        }
+      });
+      return emojisArray;
+    });
+    const popupVisible = ref(false);
+    const tabs2 = ref(
+      hasAvailableIcons.value ? [
+        { value: "icons", label: t("iconPicker.tabs.icons") },
+        { value: "emojis", label: t("iconPicker.tabs.emojis") }
+      ] : [{ value: "emojis", label: t("iconPicker.tabs.emojis") }]
+    );
+    const selectedTab = ref(tabs2.value[0].value);
+    const container2 = ref();
+    onClickOutside(container2, () => {
+      popupVisible.value = false;
+    });
+    const selectIcon = (value) => {
+      model.value = value;
+      popupVisible.value = false;
+    };
+    const togglePopup = () => {
+      popupVisible.value = !popupVisible.value;
+      if (popupVisible.value) {
+        selectedTab.value = tabs2.value[0].value;
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "container",
+        ref: container2,
+        class: normalizeClass(_ctx.$style.container),
+        "aria-expanded": popupVisible.value,
+        role: "button",
+        "aria-haspopup": "true"
+      }, [
+        createBaseVNode("div", {
+          class: normalizeClass(_ctx.$style["icon-picker-button"])
+        }, [
+          createVNode(unref(N8nTooltip), {
+            placement: "right",
+            "data-test-id": "icon-picker-tooltip"
+          }, {
+            content: withCtx(() => [
+              createTextVNode(toDisplayString(props.buttonTooltip ?? unref(t)("iconPicker.button.defaultToolTip")), 1)
+            ]),
+            default: withCtx(() => [
+              model.value.type === "icon" ? (openBlock(), createBlock(unref(_sfc_main$6), {
+                key: 0,
+                class: normalizeClass(_ctx.$style["icon-button"]),
+                icon: model.value.value ?? "smile",
+                size: _ctx.buttonSize,
+                square: true,
+                type: "tertiary",
+                "data-test-id": "icon-picker-button",
+                onClick: togglePopup
+              }, null, 8, ["class", "icon", "size"])) : model.value.type === "emoji" ? (openBlock(), createBlock(unref(N8nButton), {
+                key: 1,
+                class: normalizeClass(_ctx.$style["emoji-button"]),
+                size: _ctx.buttonSize,
+                square: true,
+                type: "tertiary",
+                "data-test-id": "icon-picker-button",
+                onClick: togglePopup
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(model.value.value), 1)
+                ]),
+                _: 1
+              }, 8, ["class", "size"])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ], 2),
+        popupVisible.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(_ctx.$style.popup),
+          "data-test-id": "icon-picker-popup"
+        }, [
+          createBaseVNode("div", {
+            class: normalizeClass(_ctx.$style.tabs)
+          }, [
+            createVNode(unref(N8nTabs), {
+              modelValue: selectedTab.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedTab.value = $event),
+              options: tabs2.value,
+              "data-test-id": "icon-picker-tabs"
+            }, null, 8, ["modelValue", "options"])
+          ], 2),
+          selectedTab.value === "icons" ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.$style.content)
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.availableIcons, (icon2) => {
+              return openBlock(), createBlock(unref(N8nIcon), {
+                key: icon2,
+                icon: icon2,
+                class: normalizeClass(_ctx.$style.icon),
+                size: "large",
+                "data-test-id": "icon-picker-icon",
+                onClick: ($event) => selectIcon({ type: "icon", value: icon2 })
+              }, null, 8, ["icon", "class", "onClick"]);
+            }), 128))
+          ], 2)) : createCommentVNode("", true),
+          selectedTab.value === "emojis" ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(_ctx.$style.content)
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(emojis.value, (emoji2) => {
+              return openBlock(), createElementBlock("span", {
+                key: emoji2,
+                class: normalizeClass(_ctx.$style.emoji),
+                "data-test-id": "icon-picker-emoji",
+                onClick: ($event) => selectIcon({ type: "emoji", value: emoji2 })
+              }, toDisplayString(emoji2), 11, _hoisted_2$2);
+            }), 128))
+          ], 2)) : createCommentVNode("", true)
+        ], 2)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$3);
+    };
+  }
+});
+const container = "_container_15yfs_123";
+const popup = "_popup_15yfs_131";
+const tabs = "_tabs_15yfs_144";
+const content = "_content_15yfs_148";
+const icon = "_icon_15yfs_154";
+const emoji = "_emoji_15yfs_127";
+const style0$2 = {
+  container,
+  "emoji-button": "_emoji-button_15yfs_127",
+  popup,
+  tabs,
+  content,
+  icon,
+  emoji
+};
+const cssModules$2 = {
+  "$style": style0$2
+};
+const IconPicker = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$2]]);
 const _hoisted_1$2 = { key: 1 };
 const _hoisted_2$1 = { class: "pt-l" };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
@@ -18,7 +362,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const visible = useModel(__props, "modelValue");
     const emit = __emit;
-    const locale = useI18n();
+    const locale = useI18n$1();
     const selectedProject = ref(null);
     const operation2 = ref(null);
     const wipeConfirmText = ref("");
@@ -38,11 +382,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       emit("confirmDelete", selectedProject.value?.id);
     };
     return (_ctx, _cache) => {
-      const _component_n8n_text = resolveComponent("n8n-text");
+      const _component_n8n_text = N8nText;
       const _component_el_radio = resolveComponent("el-radio");
-      const _component_n8n_input = resolveComponent("n8n-input");
-      const _component_n8n_input_label = resolveComponent("n8n-input-label");
-      const _component_N8nButton = resolveComponent("N8nButton");
+      const _component_n8n_input = N8nInput;
+      const _component_n8n_input_label = N8nInputLabel;
+      const _component_N8nButton = N8nButton;
       const _component_el_dialog = resolveComponent("el-dialog");
       return openBlock(), createBlock(_component_el_dialog, {
         modelValue: visible.value,
@@ -182,14 +526,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const visible = useModel(__props, "modelValue");
     const pageRedirectionHelper = usePageRedirectionHelper();
-    const locale = useI18n();
+    const locale = useI18n$1();
     const goToUpgrade = async () => {
       await pageRedirectionHelper.goToUpgrade("rbac", "upgrade-rbac");
       visible.value = false;
     };
     return (_ctx, _cache) => {
       const _component_i18n_t = resolveComponent("i18n-t");
-      const _component_N8nButton = resolveComponent("N8nButton");
+      const _component_N8nButton = N8nButton;
       const _component_el_dialog = resolveComponent("el-dialog");
       return openBlock(), createBlock(_component_el_dialog, {
         modelValue: visible.value,
@@ -252,7 +596,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ProjectSettings",
   setup(__props) {
     const usersStore = useUsersStore();
-    const i18n = useI18n();
+    const i18n = useI18n$1();
     const projectsStore = useProjectsStore();
     const rolesStore = useRolesStore();
     const cloudPlanStore = useCloudPlanStore();
@@ -312,9 +656,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       formData.value.relations.push(relation);
     };
-    const onRoleAction = (user, role) => {
+    const onRoleAction = (userId, role) => {
       isDirty.value = true;
-      const index = formData.value.relations.findIndex((r) => r.id === user.id);
+      const index = formData.value.relations.findIndex((r) => r.id === userId);
       if (role === "remove") {
         formData.value.relations.splice(index, 1);
       } else {
@@ -497,13 +841,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       selectProjectNameIfMatchesDefault();
     });
     return (_ctx, _cache) => {
-      const _component_N8nIconPicker = resolveComponent("N8nIconPicker");
-      const _component_N8nIcon = resolveComponent("N8nIcon");
-      const _component_N8nUserSelect = resolveComponent("N8nUserSelect");
-      const _component_N8nOption = resolveComponent("N8nOption");
-      const _component_N8nSelect = resolveComponent("N8nSelect");
-      const _component_N8nButton = resolveComponent("N8nButton");
-      const _component_N8nUsersList = resolveComponent("N8nUsersList");
+      const _component_N8nIconPicker = IconPicker;
+      const _component_N8nIcon = N8nIcon;
+      const _component_N8nUserSelect = N8nUserSelect;
+      const _component_N8nOption = _sfc_main$5;
+      const _component_N8nSelect = N8nSelect;
+      const _component_N8nButton = N8nButton;
+      const _component_N8nUsersList = N8nUsersList;
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(_ctx.$style.projectSettings)
       }, [
@@ -596,7 +940,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     "model-value": user?.role || projectRoles.value[0].role,
                     size: "small",
                     "data-test-id": "projects-settings-user-role-select",
-                    "onUpdate:modelValue": ($event) => onRoleAction(user, $event)
+                    "onUpdate:modelValue": ($event) => onRoleAction(user.id, $event)
                   }, {
                     default: withCtx(() => [
                       (openBlock(true), createElementBlock(Fragment, null, renderList(projectRoles.value, (role) => {
@@ -626,7 +970,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     square: "",
                     icon: "trash",
                     "data-test-id": "project-user-remove",
-                    onClick: ($event) => onRoleAction(user, "remove")
+                    onClick: ($event) => onRoleAction(user.id, "remove")
                   }, null, 8, ["onClick"])
                 ], 2)
               ]),

package/dist/assets/{WorkflowActivator-C0R6Yly0.css → ProjectSettings-CCVXNK3G.css}

@@ -120,32 +120,16 @@
  -------------------------- */
 /* BEM
  -------------------------- */
-._home-project_1gp09_123 {
-  display: flex;
-  padding: var(--spacing-3xs) var(--spacing-4xs) var(--spacing-4xs);
-  border: var(--border-width-base) var(--border-style-base) transparent;
-}
-._home-project_1gp09_123._dragging_1gp09_128:hover {
-  border: var(--border-width-base) var(--border-style-base) var(--color-secondary);
-  border-radius: var(--border-radius-base);
-  background-color: var(--color-callout-secondary-background);
-}
-._home-project_1gp09_123._dragging_1gp09_128:hover * {
-  cursor: grabbing;
-  color: var(--color-text-base);
+._itemContainer_9rnse_123 {
+  --select-option-padding: var(--spacing-2xs) var(--spacing-s);
+  --select-option-line-height: 1;
 }
-._home-project_1gp09_123:hover .n8n-text {
-  color: var(--color-text-dark);
-}
-._project-link_1gp09_141 .n8n-text {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-4xs);
-}
-@media (max-width: 992px) {
-.n8n-text._project-label_1gp09_148 {
-    display: none;
+:root ._limitPopperWidth_9rnse_128 {
+  width: 0;
 }
+:root ._limitPopperWidth_9rnse_128 li > span {
+  text-overflow: ellipsis;
+  overflow-x: hidden;
 }/* BEM support Func
  -------------------------- */
 /* Transition
@@ -268,16 +252,61 @@
  -------------------------- */
 /* BEM
  -------------------------- */
-._container_p73tp_123 {
+._container_15yfs_123 {
+  position: relative;
+}
+._emoji-button_15yfs_127 {
+  padding: 0;
+}
+._popup_15yfs_131 {
+  position: absolute;
+  z-index: 1;
+  width: 426px;
+  max-height: 300px;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  align-items: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  margin-top: var(--spacing-4xs);
+  background-color: var(--color-background-xlight);
+  border-radius: var(--border-radius-base);
+  border: var(--border-base);
+  border-color: var(--color-foreground-dark);
+}
+._popup_15yfs_131 ._tabs_15yfs_144 {
+  padding: var(--spacing-2xs);
+  padding-bottom: var(--spacing-5xs);
 }
-._home-project_p73tp_128 {
+._popup_15yfs_131 ._content_15yfs_148 {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  align-items: center;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  padding: var(--spacing-2xs);
+  overflow-y: auto;
 }
-._action-toggle_p73tp_133 span[role=button] {
-  color: var(--color-text-base);
+._popup_15yfs_131 ._icon_15yfs_154,
+._popup_15yfs_131 ._emoji_15yfs_127 {
+  cursor: pointer;
+  padding: var(--spacing-4xs);
+  border-radius: var(--border-radius-small);
+}
+._popup_15yfs_131 ._icon_15yfs_154:hover,
+._popup_15yfs_131 ._emoji_15yfs_127:hover {
+  background-color: var(--color-background-medium);
+}
+._popup_15yfs_131 ._icon_15yfs_154 {
+  color: var(--color-text-light);
+}
+._popup_15yfs_131 ._icon_15yfs_154:hover {
+  color: var(--color-text-dark);
+}
+._popup_15yfs_131 ._emoji_15yfs_127 {
+  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji", sans-serif;
 }/* BEM support Func
  -------------------------- */
 /* Transition
@@ -400,12 +429,8 @@
  -------------------------- */
 /* BEM
  -------------------------- */
-._activeStatusText_13o3x_123 {
-  width: 64px;
-  padding-right: var(--spacing-2xs);
-  box-sizing: border-box;
-  display: inline-block;
-  text-align: right;
+._operation_18zmn_123 {
+  padding: 0 0 var(--spacing-l) var(--spacing-l);
 }/* BEM support Func
  -------------------------- */
 /* Transition
@@ -528,13 +553,42 @@
  -------------------------- */
 /* BEM
  -------------------------- */
-.workflow-activator[data-v-417f440f] {
-  display: inline-flex;
-  flex-wrap: nowrap;
+._projectSettings_g68s8_123 {
+  display: grid;
+  width: 100%;
+  justify-items: center;
+  grid-auto-rows: max-content;
+}
+._projectSettings_g68s8_123 form {
+  width: 100%;
+  max-width: var(--content-container-width);
+  padding: 0 var(--spacing-2xl);
+}
+._projectSettings_g68s8_123 form fieldset {
+  padding-bottom: var(--spacing-2xl);
+}
+._projectSettings_g68s8_123 form fieldset label {
+  display: block;
+  margin-bottom: var(--spacing-xs);
+  font-size: var(--font-size-xl);
+}
+._header_g68s8_143 {
+  width: 100%;
+  max-width: var(--content-container-width);
+  padding: var(--spacing-l) var(--spacing-2xl) 0;
+}
+._upgrade_g68s8_149 {
+  cursor: pointer;
+}
+._buttons_g68s8_153 {
+  display: flex;
+  justify-content: flex-end;
   align-items: center;
 }
-.could-not-be-started[data-v-417f440f] {
-  display: inline-block;
-  color: var(--color-text-danger);
-  margin-left: 0.5em;
+._project-name_g68s8_159 {
+  display: flex;
+  gap: var(--spacing-2xs);
+}
+._project-name_g68s8_159 ._project-name-input_g68s8_163 {
+  flex: 1;
 }