n8n-editor-ui 1.112.1 → 1.113.0

package/dist/assets/{ProjectSettings-CYy5LBLu.js → ProjectSettings-BLw1-aa2.js}

@@ -1,8 +1,8 @@
-import { d as defineComponent, r as ref, x as computed, e as createBlock, g as openBlock, bs as createSlots, w as withCtx, Y as renderSlot, h as createElementBlock, F as Fragment, A as renderList, l as unref, ed as _sfc_main$5, n as normalizeClass, i as createVNode, J as N8nUserInfo, K as mergeProps, D as useI18n, ec as N8nSelect, _ as _export_sfc, ej as mergeModels, ek as useModel, br as onClickOutside, j as createBaseVNode, f as createCommentVNode, aa as Tooltip, ab as _sfc_main$6, q as N8nButton, k as createTextVNode, t as toDisplayString, gn as N8nTabs, N as N8nIcon, c as useI18n$1, a9 as resolveComponent, p as N8nText, fI as ProjectSharing, e9 as N8nInputLabel, d2 as N8nInput, B as withModifiers, aB as usePageRedirectionHelper, ac as I18nT, u as useUsersStore, av as useProjectsStore, gA as useRolesStore, bc as useCloudPlanStore, a as useToast, b as useRouter, ay as useDocumentTitle, a8 as watch, b2 as onBeforeMount, o as onMounted, e$ as N8nFormInput, gB as N8nUsersList, dT as deepCopy, am as useTelemetry, Z as nextTick, fx as isIconOrEmoji, V as VIEWS } from "./index-BqqmY62y.js";
-import { P as ProjectHeader } from "./ProjectHeader-CsH8YD16.js";
-import "./useProjectPages-DGeR5Bq7.js";
-import "./readyToRunWorkflowsV2.store-ZhxGm4dM.js";
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+import { d as defineComponent, r as ref, x as computed, e as createBlock, g as openBlock, bs as createSlots, w as withCtx, Y as renderSlot, h as createElementBlock, F as Fragment, A as renderList, l as unref, ed as _sfc_main$8, n as normalizeClass, i as createVNode, J as N8nUserInfo, K as mergeProps, D as useI18n, ec as N8nSelect, _ as _export_sfc, el as mergeModels, em as useModel, br as onClickOutside, j as createBaseVNode, f as createCommentVNode, aa as Tooltip, ab as _sfc_main$9, q as N8nButton, k as createTextVNode, t as toDisplayString, gn as N8nTabs, N as N8nIcon, c as useI18n$1, a9 as resolveComponent, p as N8nText, fI as ProjectSharing, e9 as N8nInputLabel, d2 as N8nInput, B as withModifiers, aB as usePageRedirectionHelper, ac as I18nT, a8 as watch, gA as isProjectRole, gB as ElRadio, aN as N8nActionDropdown, ej as N8nActionToggle, en as N8nDataTableServer, c3 as normalizeProps, c4 as guardReactiveProps, u as useUsersStore, av as useProjectsStore, gC as useRolesStore, bc as useCloudPlanStore, a as useToast, b as useRouter, ay as useDocumentTitle, b2 as onBeforeMount, o as onMounted, f1 as N8nFormInput, dT as deepCopy, am as useTelemetry, Z as nextTick, fx as isIconOrEmoji, V as VIEWS, er as useDebounceFn } from "./index-DGLJxfnn.js";
+import { P as ProjectHeader } from "./ProjectHeader-CmNr3RiV.js";
+import "./useProjectPages-eaNvpOz-.js";
+import "./readyToRunWorkflowsV2.store-Dl9lSVnl.js";
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "UserSelect",
   props: {
     users: { default: () => [] },
@@ -68,7 +68,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }), createSlots({
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(sortedUsers.value, (user) => {
-            return openBlock(), createBlock(unref(_sfc_main$5), {
+            return openBlock(), createBlock(unref(_sfc_main$8), {
               id: `user-select-option-id-${user.id}`,
               key: user.id,
               value: user.id,
@@ -100,14 +100,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 });
 const itemContainer = "_itemContainer_9rnse_123";
 const limitPopperWidth = "_limitPopperWidth_9rnse_128";
-const style0$3 = {
+const style0$4 = {
   itemContainer,
   limitPopperWidth
 };
-const cssModules$3 = {
-  "$style": style0$3
+const cssModules$4 = {
+  "$style": style0$4
 };
-const N8nUserSelect = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$3]]);
+const N8nUserSelect = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$4]]);
 var cache = /* @__PURE__ */ new Map();
 function isEmojiSupported(unicode) {
   if (cache.has(unicode)) {
@@ -343,9 +343,9 @@ const ALL_ICON_PICKER_ICONS = [
   "toolbox",
   "spinner"
 ];
-const _hoisted_1$3 = ["aria-expanded"];
+const _hoisted_1$5 = ["aria-expanded"];
 const _hoisted_2$2 = ["onClick"];
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   ...{ name: "N8nIconPicker" },
   __name: "IconPicker",
   props: /* @__PURE__ */ mergeModels({
@@ -430,7 +430,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
               createTextVNode(toDisplayString(props.buttonTooltip ?? unref(t)("iconPicker.button.defaultToolTip")), 1)
             ]),
             default: withCtx(() => [
-              model.value.type === "icon" ? (openBlock(), createBlock(unref(_sfc_main$6), {
+              model.value.type === "icon" ? (openBlock(), createBlock(unref(_sfc_main$9), {
                 key: 0,
                 class: normalizeClass(_ctx.$style["icon-button"]),
                 icon: model.value.value,
@@ -501,7 +501,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             }), 128))
           ], 2)) : createCommentVNode("", true)
         ], 2)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$3);
+      ], 10, _hoisted_1$5);
     };
   }
 });
@@ -511,7 +511,7 @@ const tabs = "_tabs_15yfs_144";
 const content = "_content_15yfs_148";
 const icon = "_icon_15yfs_154";
 const emoji = "_emoji_15yfs_127";
-const style0$2 = {
+const style0$3 = {
   container,
   "emoji-button": "_emoji-button_15yfs_127",
   popup,
@@ -520,18 +520,18 @@ const style0$2 = {
   icon,
   emoji
 };
-const cssModules$2 = {
-  "$style": style0$2
+const cssModules$3 = {
+  "$style": style0$3
 };
-const IconPicker = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$2]]);
-const _hoisted_1$2 = { key: 1 };
+const IconPicker = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__cssModules", cssModules$3]]);
+const _hoisted_1$4 = { key: 1 };
 const _hoisted_2$1 = { class: "pt-l" };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "ProjectDeleteDialog",
   props: /* @__PURE__ */ mergeModels({
     currentProject: {},
     projects: {},
-    isCurrentProjectEmpty: { type: Boolean }
+    resourceCounts: {}
   }, {
     "modelValue": { type: Boolean },
     "modelModifiers": {}
@@ -545,11 +545,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const selectedProject = ref(null);
     const operation2 = ref(null);
     const wipeConfirmText = ref("");
+    const hasMovableResources = computed(
+      () => props.resourceCounts.credentials + props.resourceCounts.workflows + props.resourceCounts.dataTables > 0
+    );
     const isValid = computed(() => {
       const expectedWipeConfirmation = locale.baseText(
         "projects.settings.delete.question.wipe.placeholder"
       );
-      return props.isCurrentProjectEmpty || operation2.value === "transfer" && !!selectedProject.value || operation2.value === "wipe" && wipeConfirmText.value === expectedWipeConfirmation;
+      return !hasMovableResources.value || operation2.value === "transfer" && !!selectedProject.value || operation2.value === "wipe" && wipeConfirmText.value === expectedWipeConfirmation;
     });
     const onDelete = () => {
       if (!isValid.value) {
@@ -573,7 +576,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         title: unref(locale).baseText("projects.settings.delete.title", {
           interpolate: { projectName: props.currentProject?.name ?? "" }
         }),
-        width: "500"
+        width: "650"
       }, {
         footer: withCtx(() => [
           createVNode(_component_N8nButton, {
@@ -590,7 +593,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           }, 8, ["disabled"])
         ]),
         default: withCtx(() => [
-          _ctx.isCurrentProjectEmpty ? (openBlock(), createBlock(_component_n8n_text, {
+          !hasMovableResources.value ? (openBlock(), createBlock(_component_n8n_text, {
             key: 0,
             color: "text-base"
           }, {
@@ -598,7 +601,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               createTextVNode(toDisplayString(unref(locale).baseText("projects.settings.delete.message.empty")), 1)
             ]),
             _: 1
-          })) : (openBlock(), createElementBlock("div", _hoisted_1$2, [
+          })) : hasMovableResources.value ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
             createVNode(_component_n8n_text, { color: "text-base" }, {
               default: withCtx(() => [
                 createTextVNode(toDisplayString(unref(locale).baseText("projects.settings.delete.message")), 1)
@@ -675,7 +678,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 }, 8, ["label"])
               ], 2)) : createCommentVNode("", true)
             ])
-          ]))
+          ])) : createCommentVNode("", true)
         ]),
         _: 1
       }, 8, ["modelValue", "title"]);
@@ -683,15 +686,15 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 const operation = "_operation_18zmn_123";
-const style0$1 = {
+const style0$2 = {
   operation
 };
-const cssModules$1 = {
-  "$style": style0$1
+const cssModules$2 = {
+  "$style": style0$2
 };
-const ProjectDeleteDialog = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$1]]);
-const _hoisted_1$1 = { class: "pt-l" };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const ProjectDeleteDialog = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$2]]);
+const _hoisted_1$3 = { class: "pt-l" };
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "ProjectRoleUpgradeDialog",
   props: /* @__PURE__ */ mergeModels({
     limit: {},
@@ -742,7 +745,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           })
         ]),
         default: withCtx(() => [
-          createBaseVNode("div", _hoisted_1$1, [
+          createBaseVNode("div", _hoisted_1$3, [
             createVNode(unref(I18nT), {
               keypath: "projects.settings.role.upgrade.message",
               scope: "global"
@@ -765,6 +768,269 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$2 = { key: 1 };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "ProjectMembersRoleCell",
+  props: {
+    data: {},
+    roles: {},
+    actions: {}
+  },
+  emits: ["update:role"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const selectedRole = ref(props.data.role);
+    const isEditable = computed(() => props.data.role !== "project:personalOwner");
+    watch(
+      () => props.data.role,
+      (newRole) => {
+        selectedRole.value = newRole;
+      }
+    );
+    const roleLabel2 = computed(
+      () => isProjectRole(selectedRole.value) ? props.roles[selectedRole.value]?.label || selectedRole.value : selectedRole.value
+    );
+    const onActionSelect = (role) => {
+      emit("update:role", {
+        role,
+        userId: props.data.id
+      });
+    };
+    return (_ctx, _cache) => {
+      return isEditable.value ? (openBlock(), createBlock(unref(N8nActionDropdown), {
+        key: 0,
+        placement: "bottom-start",
+        items: props.actions,
+        "max-height": 280,
+        "data-test-id": "project-member-role-dropdown",
+        onSelect: onActionSelect
+      }, {
+        activator: withCtx(() => [
+          createBaseVNode("button", {
+            class: normalizeClass(_ctx.$style.roleLabel),
+            type: "button"
+          }, [
+            createVNode(unref(N8nText), { color: "text-dark" }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(roleLabel2.value), 1)
+              ]),
+              _: 1
+            }),
+            createVNode(unref(N8nIcon), {
+              color: "text-dark",
+              icon: "chevron-down",
+              size: "large"
+            })
+          ], 2)
+        ]),
+        menuItem: withCtx((item) => [
+          createVNode(unref(ElRadio), {
+            "model-value": selectedRole.value,
+            label: item.id,
+            disabled: item.disabled,
+            "onUpdate:modelValue": ($event) => selectedRole.value = item.id
+          }, {
+            default: withCtx(() => [
+              createBaseVNode("span", {
+                class: normalizeClass(_ctx.$style.radioLabel)
+              }, [
+                createVNode(unref(N8nText), {
+                  color: "text-dark",
+                  class: "pb-3xs"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(item.label), 1)
+                  ]),
+                  _: 2
+                }, 1024),
+                createVNode(unref(N8nText), {
+                  color: "text-dark",
+                  size: "small"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(isProjectRole)(item.id) ? props.roles[item.id]?.desc || "" : ""), 1)
+                  ]),
+                  _: 2
+                }, 1024)
+              ], 2)
+            ]),
+            _: 2
+          }, 1032, ["model-value", "label", "disabled", "onUpdate:modelValue"])
+        ]),
+        _: 1
+      }, 8, ["items"])) : (openBlock(), createElementBlock("span", _hoisted_1$2, toDisplayString(roleLabel2.value), 1));
+    };
+  }
+});
+const roleLabel = "_roleLabel_1hpnu_123";
+const radioLabel = "_radioLabel_1hpnu_133";
+const style0$1 = {
+  roleLabel,
+  radioLabel
+};
+const cssModules$1 = {
+  "$style": style0$1
+};
+const ProjectMembersRoleCell = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$1]]);
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "ProjectMembersActionsCell",
+  props: {
+    data: {},
+    actions: {}
+  },
+  emits: ["action"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const onAction = (action) => {
+      emit("action", { action, userId: props.data.id });
+    };
+    return (_ctx, _cache) => {
+      const _component_N8nActionToggle = N8nActionToggle;
+      return props.actions.length > 0 ? (openBlock(), createBlock(_component_N8nActionToggle, {
+        key: 0,
+        placement: "bottom",
+        actions: props.actions,
+        theme: "dark",
+        onAction
+      }, null, 8, ["actions"])) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$1 = { class: "pt-xs pb-xs" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "ProjectMembersTable",
+  props: /* @__PURE__ */ mergeModels({
+    data: {},
+    loading: { type: Boolean },
+    currentUserId: {},
+    projectRoles: {},
+    actions: {}
+  }, {
+    "tableOptions": {
+      default: () => ({
+        page: 0,
+        itemsPerPage: 10,
+        sortBy: []
+      })
+    },
+    "tableOptionsModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["update:options", "update:role", "action"], ["update:tableOptions"]),
+  setup(__props, { emit: __emit }) {
+    const i18n = useI18n$1();
+    const props = __props;
+    const emit = __emit;
+    const tableOptions = useModel(__props, "tableOptions");
+    const rows = computed(() => props.data.items);
+    const headers = ref([
+      {
+        title: i18n.baseText("projects.settings.table.header.user"),
+        key: "name",
+        width: 400,
+        disableSort: true,
+        value: (row) => row
+      },
+      {
+        title: i18n.baseText("projects.settings.table.header.role"),
+        key: "role",
+        disableSort: true
+      },
+      {
+        title: "",
+        key: "actions",
+        align: "end",
+        width: 46,
+        disableSort: true,
+        value() {
+          return;
+        }
+      }
+    ]);
+    const roles = computed(() => ({
+      "project:admin": {
+        label: i18n.baseText("projects.settings.role.admin"),
+        desc: i18n.baseText("projects.settings.role.admin.description")
+      },
+      "project:editor": {
+        label: i18n.baseText("projects.settings.role.editor"),
+        desc: i18n.baseText("projects.settings.role.editor.description")
+      },
+      "project:viewer": {
+        label: i18n.baseText("projects.settings.role.viewer"),
+        desc: i18n.baseText("projects.settings.role.viewer.description")
+      },
+      "project:personalOwner": {
+        label: i18n.baseText("projects.settings.role.personalOwner"),
+        desc: ""
+      }
+    }));
+    const roleActions = computed(() => [
+      ...props.projectRoles.map((role) => ({
+        id: role.slug,
+        label: role.displayName,
+        disabled: !role.licensed
+      }))
+    ]);
+    const canUpdateRole = (member) => member.id !== props.currentUserId;
+    const onRoleChange = ({ role, userId }) => {
+      emit("update:role", { role, userId });
+    };
+    const filterActions = (member) => {
+      if (member.id === props.currentUserId || member.role === "project:personalOwner") return [];
+      return (props.actions ?? []).filter((action) => action.guard?.(member) ?? true);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createVNode(unref(N8nDataTableServer), {
+          "sort-by": tableOptions.value.sortBy,
+          "onUpdate:sortBy": _cache[1] || (_cache[1] = ($event) => tableOptions.value.sortBy = $event),
+          page: tableOptions.value.page,
+          "onUpdate:page": _cache[2] || (_cache[2] = ($event) => tableOptions.value.page = $event),
+          "items-per-page": _ctx.data.count,
+          headers: headers.value,
+          items: rows.value,
+          "items-length": _ctx.data.count,
+          loading: _ctx.loading,
+          "page-sizes": [_ctx.data.count + 1],
+          "onUpdate:options": _cache[3] || (_cache[3] = ($event) => emit("update:options", $event))
+        }, {
+          [`item.name`]: withCtx(({ value }) => [
+            createBaseVNode("div", _hoisted_1$1, [
+              createVNode(unref(N8nUserInfo), normalizeProps(guardReactiveProps(value)), null, 16)
+            ])
+          ]),
+          [`item.role`]: withCtx(({ item }) => [
+            canUpdateRole(item) ? (openBlock(), createBlock(ProjectMembersRoleCell, {
+              key: 0,
+              data: item,
+              roles: roles.value,
+              actions: roleActions.value,
+              "onUpdate:role": onRoleChange
+            }, null, 8, ["data", "roles", "actions"])) : (openBlock(), createBlock(unref(N8nText), {
+              key: 1,
+              color: "text-dark"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(roles.value[item.role]?.label ?? item.role), 1)
+              ]),
+              _: 2
+            }, 1024))
+          ]),
+          [`item.actions`]: withCtx(({ item }) => [
+            createVNode(_sfc_main$2, {
+              data: item,
+              actions: filterActions(item),
+              onAction: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("action", $event))
+            }, null, 8, ["data", "actions"])
+          ]),
+          _: 2
+        }, 1032, ["sort-by", "page", "items-per-page", "headers", "items", "items-length", "loading", "page-sizes"])
+      ]);
+    };
+  }
+});
 const _hoisted_1 = { for: "projectName" };
 const _hoisted_2 = { for: "projectDescription" };
 const _hoisted_3 = { for: "projectMembers" };
@@ -789,12 +1055,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const upgradeDialogVisible = ref(false);
     const isDirty = ref(false);
     const isValid = ref(false);
-    const isCurrentProjectEmpty = ref(true);
+    const resourceCounts = ref({
+      credentials: -1,
+      dataTables: -1,
+      workflows: -1
+    });
     const formData = ref({
       name: "",
       description: "",
       relations: []
     });
+    const suppressNextSync = ref(false);
     const projectRoleTranslations = ref({
       "project:viewer": i18n.baseText("projects.settings.role.viewer"),
       "project:editor": i18n.baseText("projects.settings.role.editor"),
@@ -805,6 +1076,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       type: "icon",
       value: "layers"
     });
+    const search2 = ref("");
+    const membersTableState = ref({
+      page: 0,
+      itemsPerPage: 10,
+      sortBy: [
+        { id: "firstName", desc: false },
+        { id: "lastName", desc: false },
+        { id: "email", desc: false }
+      ]
+    });
     const usersList = computed(
       () => usersStore.allUsers.filter((user) => {
         const isAlreadySharedWithUser = (formData.value.relations || []).find(
@@ -825,6 +1106,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }))
     );
     const firstLicensedRole = computed(() => projectRoles.value.find((role) => role.licensed)?.slug);
+    const projectMembersActions = computed(() => [
+      {
+        label: i18n.baseText("projects.settings.table.row.removeUser"),
+        value: "remove",
+        guard: (member) => member.id !== usersStore.currentUser?.id && member.role !== "project:personalOwner"
+      }
+    ]);
     const onAddMember = (userId) => {
       isDirty.value = true;
       const user = usersStore.usersById[userId];
@@ -836,18 +1124,73 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       formData.value.relations.push(relation);
     };
-    const onRoleAction = (userId, role) => {
-      isDirty.value = true;
-      const index = formData.value.relations.findIndex((r) => r.id === userId);
-      if (role === "remove") {
-        formData.value.relations.splice(index, 1);
-      } else {
-        formData.value.relations[index].role = role;
+    const onUpdateMemberRole = async ({ userId, role }) => {
+      if (!projectsStore.currentProject) {
+        return;
+      }
+      const memberIndex = formData.value.relations.findIndex((r) => r.id === userId);
+      if (memberIndex === -1) {
+        return;
+      }
+      const originalRole = formData.value.relations[memberIndex].role;
+      formData.value.relations[memberIndex].role = role;
+      try {
+        await projectsStore.updateProject(projectsStore.currentProject.id, {
+          relations: formData.value.relations.map((r) => ({
+            userId: r.id,
+            role: r.role
+          }))
+        });
+        toast.showMessage({
+          type: "success",
+          title: i18n.baseText("projects.settings.memberRole.updated.title")
+        });
+        telemetry.track("User changed member role on project", {
+          project_id: projectsStore.currentProject.id,
+          target_user_id: userId,
+          role
+        });
+      } catch (error) {
+        formData.value.relations[memberIndex].role = originalRole;
+        toast.showError(error, i18n.baseText("projects.settings.memberRole.update.error.title"));
       }
     };
     const onTextInput = () => {
       isDirty.value = true;
     };
+    async function onRemoveMember(userId) {
+      const current = projectsStore.currentProject;
+      if (!current) return;
+      const idx = formData.value.relations.findIndex((r) => r.id === userId);
+      if (idx === -1) return;
+      const removed = formData.value.relations.splice(idx, 1)[0];
+      const isPersisted = current.relations.some((r) => r.id === userId);
+      if (!isPersisted) return;
+      try {
+        suppressNextSync.value = true;
+        await projectsStore.updateProject(current.id, {
+          relations: current.relations.filter((r) => r.id !== userId).map((r) => ({ userId: r.id, role: r.role }))
+        });
+        toast.showMessage({
+          type: "success",
+          title: i18n.baseText("projects.settings.member.removed.title")
+        });
+        telemetry.track("User removed member from project", {
+          project_id: current.id,
+          target_user_id: userId
+        });
+      } catch (error) {
+        formData.value.relations.splice(idx, 0, removed);
+        toast.showError(error, i18n.baseText("projects.settings.save.error.title"));
+      }
+    }
+    const onMembersListAction = async ({ action, userId }) => {
+      switch (action) {
+        case "remove":
+          await onRemoveMember(userId);
+          break;
+      }
+    };
     const onCancel = () => {
       formData.value.relations = projectsStore.currentProject?.relations ? deepCopy(projectsStore.currentProject.relations) : [];
       formData.value.name = projectsStore.currentProject?.name ?? "";
@@ -922,9 +1265,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           throw new Error("Invalid role selected for this project.");
         }
         await projectsStore.updateProject(projectsStore.currentProject.id, {
-          name: formData.value.name,
+          name: formData.value.name ?? "",
           icon: projectIcon.value,
-          description: formData.value.description,
+          description: formData.value.description ?? "",
           relations: formData.value.relations.map((r) => ({
             userId: r.id,
             role: r.role
@@ -933,28 +1276,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         isDirty.value = false;
       } catch (error) {
         toast.showError(error, i18n.baseText("projects.settings.save.error.title"));
+        throw error;
       }
     };
     const onSubmit = async () => {
       if (!isDirty.value) {
         return;
       }
-      await updateProject();
-      const diff = makeFormDataDiff();
-      sendTelemetry(diff);
-      toast.showMessage({
-        title: i18n.baseText("projects.settings.save.successful.title", {
-          interpolate: { projectName: formData.value.name ?? "" }
-        }),
-        type: "success"
-      });
+      try {
+        await updateProject();
+        const diff = makeFormDataDiff();
+        sendTelemetry(diff);
+        toast.showMessage({
+          title: i18n.baseText("projects.settings.save.successful.title", {
+            interpolate: { projectName: formData.value.name ?? "" }
+          }),
+          type: "success"
+        });
+      } catch (error) {
+      }
     };
     const onDelete = async () => {
       await projectsStore.getAvailableProjects();
       if (projectsStore.currentProjectId) {
-        isCurrentProjectEmpty.value = await projectsStore.isProjectEmpty(
-          projectsStore.currentProjectId
-        );
+        resourceCounts.value = await projectsStore.getResourceCounts(projectsStore.currentProjectId);
       }
       dialogVisible.value = true;
     };
@@ -992,6 +1337,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(
       () => projectsStore.currentProject,
       async () => {
+        if (suppressNextSync.value) {
+          suppressNextSync.value = false;
+          return;
+        }
         formData.value.name = projectsStore.currentProject?.name ?? "";
         formData.value.description = projectsStore.currentProject?.description ?? "";
         formData.value.relations = projectsStore.currentProject?.relations ? deepCopy(projectsStore.currentProject.relations) : [];
@@ -1006,13 +1355,52 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const relationUsers = computed(
       () => formData.value.relations.map((relation) => {
         const user = usersStore.usersById[relation.id];
-        if (!user) return relation;
+        const safeRole = isProjectRole(relation.role) ? relation.role : "project:viewer";
+        if (!user) {
+          return {
+            ...relation,
+            role: safeRole,
+            firstName: null,
+            lastName: null,
+            email: null
+          };
+        }
         return {
           ...user,
-          ...relation
+          ...relation,
+          role: safeRole
         };
       })
     );
+    const membersTableData = computed(() => ({
+      items: relationUsers.value,
+      count: relationUsers.value.length
+    }));
+    const filteredMembersData = computed(() => {
+      if (!search2.value.trim()) {
+        return membersTableData.value;
+      }
+      const searchTerm = search2.value.toLowerCase();
+      const filtered = relationUsers.value.filter((member) => {
+        const fullName = `${member.firstName || ""} ${member.lastName || ""}`.toLowerCase();
+        const email = (member.email || "").toLowerCase();
+        return fullName.includes(searchTerm) || email.includes(searchTerm);
+      });
+      return {
+        items: filtered,
+        count: filtered.length
+      };
+    });
+    const debouncedSearch = useDebounceFn(() => {
+      membersTableState.value.page = 0;
+    }, 300);
+    const onSearch = (value) => {
+      search2.value = value;
+      void debouncedSearch();
+    };
+    const onUpdateMembersTableOptions = (options) => {
+      membersTableState.value = options;
+    };
     onBeforeMount(async () => {
       await usersStore.fetchUsers();
     });
@@ -1024,12 +1412,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       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)
+        class: normalizeClass(_ctx.$style.projectSettings),
+        "data-test-id": "project-settings-container"
       }, [
         createBaseVNode("div", {
           class: normalizeClass(_ctx.$style.header)
@@ -1104,57 +1490,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }, 8, ["users", "current-user-id", "placeholder"]),
-            createVNode(_component_N8nUsersList, {
-              actions: [],
-              users: relationUsers.value,
-              "current-user-id": unref(usersStore).currentUser?.id,
-              "delete-label": unref(i18n).baseText("workflows.shareModal.list.delete")
-            }, {
-              actions: withCtx(({ user }) => [
-                createBaseVNode("div", {
-                  class: normalizeClass(_ctx.$style.buttons)
-                }, [
-                  createVNode(_component_N8nSelect, {
-                    class: "mr-2xs",
-                    "model-value": user?.role || projectRoles.value[0].slug,
-                    size: "small",
-                    "data-test-id": "projects-settings-user-role-select",
-                    "onUpdate:modelValue": ($event) => onRoleAction(user.id, $event)
-                  }, {
-                    default: withCtx(() => [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(projectRoles.value, (role) => {
-                        return openBlock(), createBlock(_component_N8nOption, {
-                          key: role.slug,
-                          value: role.slug,
-                          label: role.displayName,
-                          disabled: !role.licensed
-                        }, {
-                          default: withCtx(() => [
-                            createTextVNode(toDisplayString(role.displayName), 1),
-                            !role.licensed ? (openBlock(), createElementBlock("span", {
-                              key: 0,
-                              class: normalizeClass(_ctx.$style.upgrade),
-                              onClick: _cache[5] || (_cache[5] = ($event) => upgradeDialogVisible.value = true)
-                            }, "  - " + toDisplayString(unref(i18n).baseText("generic.upgrade")), 3)) : createCommentVNode("", true)
-                          ]),
-                          _: 2
-                        }, 1032, ["value", "label", "disabled"]);
-                      }), 128))
-                    ]),
-                    _: 2
-                  }, 1032, ["model-value", "onUpdate:modelValue"]),
-                  createVNode(_component_N8nButton, {
-                    type: "tertiary",
-                    "native-type": "button",
-                    square: "",
-                    icon: "trash-2",
-                    "data-test-id": "project-user-remove",
-                    onClick: ($event) => onRoleAction(user.id, "remove")
-                  }, null, 8, ["onClick"])
-                ], 2)
-              ]),
-              _: 1
-            }, 8, ["users", "current-user-id", "delete-label"])
+            relationUsers.value.length > 0 ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(_ctx.$style.membersTableContainer)
+            }, [
+              createVNode(unref(N8nInput), {
+                class: normalizeClass(_ctx.$style.search),
+                "model-value": search2.value,
+                placeholder: unref(i18n).baseText("projects.settings.members.search.placeholder"),
+                clearable: "",
+                "data-test-id": "project-members-search",
+                "onUpdate:modelValue": onSearch
+              }, {
+                prefix: withCtx(() => [
+                  createVNode(_component_N8nIcon, { icon: "search" })
+                ]),
+                _: 1
+              }, 8, ["class", "model-value", "placeholder"]),
+              createVNode(_sfc_main$1, {
+                "table-options": membersTableState.value,
+                "onUpdate:tableOptions": _cache[5] || (_cache[5] = ($event) => membersTableState.value = $event),
+                "data-test-id": "project-members-table",
+                data: filteredMembersData.value,
+                "current-user-id": unref(usersStore).currentUser?.id,
+                "project-roles": projectRoles.value,
+                actions: projectMembersActions.value,
+                "onUpdate:options": onUpdateMembersTableOptions,
+                "onUpdate:role": onUpdateMemberRole,
+                onAction: onMembersListAction
+              }, null, 8, ["table-options", "data", "current-user-id", "project-roles", "actions"])
+            ], 2)) : createCommentVNode("", true)
           ]),
           createBaseVNode("fieldset", {
             class: normalizeClass(_ctx.$style.buttons)
@@ -1209,11 +1574,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           modelValue: dialogVisible.value,
           "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => dialogVisible.value = $event),
           "current-project": unref(projectsStore).currentProject,
-          "is-current-project-empty": isCurrentProjectEmpty.value,
+          "resource-counts": resourceCounts.value,
           projects: projects.value,
           onConfirmDelete
-        }, null, 8, ["modelValue", "current-project", "is-current-project-empty", "projects"]),
-        createVNode(_sfc_main$1, {
+        }, null, 8, ["modelValue", "current-project", "resource-counts", "projects"]),
+        createVNode(_sfc_main$4, {
           modelValue: upgradeDialogVisible.value,
           "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => upgradeDialogVisible.value = $event),
           limit: unref(projectsStore).teamProjectsLimit,
@@ -1223,17 +1588,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const projectSettings = "_projectSettings_g68s8_123";
-const header = "_header_g68s8_143";
-const upgrade = "_upgrade_g68s8_149";
-const buttons = "_buttons_g68s8_153";
+const projectSettings = "_projectSettings_2n0pf_123";
+const header = "_header_2n0pf_143";
+const upgrade = "_upgrade_2n0pf_149";
+const buttons = "_buttons_2n0pf_153";
+const membersTableContainer = "_membersTableContainer_2n0pf_159";
+const search = "_search_2n0pf_163";
 const style0 = {
   projectSettings,
   header,
   upgrade,
   buttons,
-  "project-name": "_project-name_g68s8_159",
-  "project-name-input": "_project-name-input_g68s8_163"
+  membersTableContainer,
+  search,
+  "project-name": "_project-name_2n0pf_168",
+  "project-name-input": "_project-name-input_2n0pf_172"
 };
 const cssModules = {
   "$style": style0