n8n-editor-ui 1.113.1 → 1.114.0

package/dist/assets/{ProjectSettings-C1kZ9wA5.js → ProjectSettings-Bie7IE72.js}

@@ -1,7 +1,7 @@
-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-BDDH_NIA.js";
-import { P as ProjectHeader } from "./ProjectHeader-PFXNU0--.js";
-import "./useProjectPages-B5KBSvIU.js";
-import "./readyToRunWorkflowsV2.store-Bl7jk-i9.js";
+import { d as defineComponent, r as ref, x as computed, e as createBlock, g as openBlock, bv as createSlots, w as withCtx, Y as renderSlot, h as createElementBlock, F as Fragment, A as renderList, l as unref, eh as _sfc_main$8, n as normalizeClass, i as createVNode, J as N8nUserInfo, K as mergeProps, D as useI18n, eg as N8nSelect, _ as _export_sfc, ep as mergeModels, eq as useModel, bu 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, gr as N8nTabs, N as N8nIcon, c as useI18n$1, a9 as resolveComponent, p as N8nText, fM as ProjectSharing, ed as N8nInputLabel, d6 as N8nInput, B as withModifiers, aB as usePageRedirectionHelper, ac as I18nT, a8 as watch, gE as isProjectRole, gF as ElRadio, aN as N8nActionDropdown, en as N8nActionToggle, er as N8nDataTableServer, c7 as normalizeProps, c8 as guardReactiveProps, u as useUsersStore, av as useProjectsStore, gG as useRolesStore, bc as useCloudPlanStore, a as useToast, b as useRouter, ay as useDocumentTitle, b2 as onBeforeMount, o as onMounted, f5 as N8nFormInput, dX as deepCopy, am as useTelemetry, Z as nextTick, fB as isIconOrEmoji, V as VIEWS, ev as useDebounceFn } from "./index-BOW55EQc.js";
+import { P as ProjectHeader } from "./ProjectHeader-DeQSPU2Z.js";
+import "./useProjectPages-D2nu5pZ9.js";
+import "./readyToRunWorkflowsV2.store-BJY-F_Le.js";
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "UserSelect",
   props: {
@@ -224,6 +224,7 @@ const ALL_ICON_PICKER_ICONS = [
   "triangle-alert",
   "maximize",
   "maximize-2",
+  "mcp",
   "external-link",
   "arrow-left-right",
   "file",
@@ -564,13 +565,13 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       emit("confirmDelete", selectedProject.value?.id);
     };
     return (_ctx, _cache) => {
-      const _component_n8n_text = N8nText;
-      const _component_el_radio = resolveComponent("el-radio");
-      const _component_n8n_input = N8nInput;
-      const _component_n8n_input_label = N8nInputLabel;
+      const _component_N8nText = N8nText;
+      const _component_ElRadio = resolveComponent("ElRadio");
+      const _component_N8nInput = N8nInput;
+      const _component_N8nInputLabel = N8nInputLabel;
       const _component_N8nButton = N8nButton;
-      const _component_el_dialog = resolveComponent("el-dialog");
-      return openBlock(), createBlock(_component_el_dialog, {
+      const _component_ElDialog = resolveComponent("ElDialog");
+      return openBlock(), createBlock(_component_ElDialog, {
         modelValue: visible.value,
         "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => visible.value = $event),
         title: unref(locale).baseText("projects.settings.delete.title", {
@@ -593,7 +594,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           }, 8, ["disabled"])
         ]),
         default: withCtx(() => [
-          !hasMovableResources.value ? (openBlock(), createBlock(_component_n8n_text, {
+          !hasMovableResources.value ? (openBlock(), createBlock(_component_N8nText, {
             key: 0,
             color: "text-base"
           }, {
@@ -602,21 +603,21 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           })) : hasMovableResources.value ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
-            createVNode(_component_n8n_text, { color: "text-base" }, {
+            createVNode(_component_N8nText, { color: "text-base" }, {
               default: withCtx(() => [
                 createTextVNode(toDisplayString(unref(locale).baseText("projects.settings.delete.message")), 1)
               ]),
               _: 1
             }),
             createBaseVNode("div", _hoisted_2$1, [
-              createVNode(_component_el_radio, {
+              createVNode(_component_ElRadio, {
                 "model-value": operation2.value,
                 label: "transfer",
                 class: "mb-s",
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => operation2.value = "transfer")
               }, {
                 default: withCtx(() => [
-                  createVNode(_component_n8n_text, { color: "text-dark" }, {
+                  createVNode(_component_N8nText, { color: "text-dark" }, {
                     default: withCtx(() => [
                       createTextVNode(toDisplayString(unref(locale).baseText("projects.settings.delete.question.transfer.label")), 1)
                     ]),
@@ -629,7 +630,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 key: 0,
                 class: normalizeClass(_ctx.$style.operation)
               }, [
-                createVNode(_component_n8n_text, { color: "text-dark" }, {
+                createVNode(_component_N8nText, { color: "text-dark" }, {
                   default: withCtx(() => [
                     createTextVNode(toDisplayString(unref(locale).baseText("projects.settings.delete.question.transfer.title")), 1)
                   ]),
@@ -643,14 +644,14 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                   "empty-options-text": unref(locale).baseText("projects.sharing.noMatchingProjects")
                 }, null, 8, ["modelValue", "projects", "empty-options-text"])
               ], 2)) : createCommentVNode("", true),
-              createVNode(_component_el_radio, {
+              createVNode(_component_ElRadio, {
                 "model-value": operation2.value,
                 label: "wipe",
                 class: "mb-s",
                 "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => operation2.value = "wipe")
               }, {
                 default: withCtx(() => [
-                  createVNode(_component_n8n_text, { color: "text-dark" }, {
+                  createVNode(_component_N8nText, { color: "text-dark" }, {
                     default: withCtx(() => [
                       createTextVNode(toDisplayString(unref(locale).baseText("projects.settings.delete.question.wipe.label")), 1)
                     ]),
@@ -663,11 +664,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 key: 1,
                 class: normalizeClass(_ctx.$style.operation)
               }, [
-                createVNode(_component_n8n_input_label, {
+                createVNode(_component_N8nInputLabel, {
                   label: unref(locale).baseText("projects.settings.delete.question.wipe.title")
                 }, {
                   default: withCtx(() => [
-                    createVNode(_component_n8n_input, {
+                    createVNode(_component_N8nInput, {
                       modelValue: wipeConfirmText.value,
                       "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => wipeConfirmText.value = $event),
                       "data-test-id": "project-delete-confirm-input",
@@ -715,8 +716,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_N8nButton = N8nButton;
-      const _component_el_dialog = resolveComponent("el-dialog");
-      return openBlock(), createBlock(_component_el_dialog, {
+      const _component_ElDialog = resolveComponent("ElDialog");
+      return openBlock(), createBlock(_component_ElDialog, {
         modelValue: visible.value,
         "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
         title: unref(locale).baseText("projects.settings.role.upgrade.title"),
@@ -1033,11 +1034,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1 = { for: "projectName" };
 const _hoisted_2 = { for: "projectDescription" };
-const _hoisted_3 = { for: "projectMembers" };
-const _hoisted_4 = {
-  key: 0,
-  class: "mr-2xs"
-};
+const _hoisted_3 = { class: "mr-2xs" };
+const _hoisted_4 = { for: "projectMembers" };
 const _hoisted_5 = { class: "mb-xs" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ProjectSettings",
@@ -1051,6 +1049,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const router = useRouter();
     const telemetry = useTelemetry();
     const documentTitle = useDocumentTitle();
+    const showSaveError = (error) => {
+      toast.showError(error, i18n.baseText("projects.settings.save.error.title"));
+    };
     const dialogVisible = ref(false);
     const upgradeDialogVisible = ref(false);
     const isDirty = ref(false);
@@ -1088,9 +1089,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const usersList = computed(
       () => usersStore.allUsers.filter((user) => {
-        const isAlreadySharedWithUser = (formData.value.relations || []).find(
-          (r) => r.id === user.id
-        );
+        const isAlreadySharedWithUser = (formData.value.relations || []).find((r) => r.id === user.id);
         return !isAlreadySharedWithUser;
       })
     );
@@ -1113,16 +1112,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         guard: (member) => member.id !== usersStore.currentUser?.id && member.role !== "project:personalOwner"
       }
     ]);
-    const onAddMember = (userId) => {
-      isDirty.value = true;
+    const onAddMember = async (userId) => {
+      if (!projectsStore.currentProject) return;
       const user = usersStore.usersById[userId];
       if (!user) return;
-      const { id, firstName, lastName, email } = user;
-      const relation = { id, firstName, lastName, email };
-      if (firstLicensedRole.value) {
-        relation.role = firstLicensedRole.value;
+      const role = firstLicensedRole.value;
+      if (!role) return;
+      if (!formData.value.relations.find((r) => r.id === userId)) {
+        formData.value.relations.push({ id: userId, role });
+      }
+      try {
+        suppressNextSync.value = true;
+        await projectsStore.addMember(projectsStore.currentProject.id, { userId, role });
+        toast.showMessage({
+          type: "success",
+          title: i18n.baseText("projects.settings.member.added.title")
+        });
+        telemetry.track("User added member to project", {
+          project_id: projectsStore.currentProject.id,
+          target_user_id: userId,
+          role
+        });
+      } catch (error) {
+        formData.value.relations = formData.value.relations.filter((r) => r.id !== userId);
+        showSaveError(error);
       }
-      formData.value.relations.push(relation);
     };
     const onUpdateMemberRole = async ({ userId, role }) => {
       if (!projectsStore.currentProject) {
@@ -1135,12 +1149,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       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
-          }))
-        });
+        suppressNextSync.value = true;
+        await projectsStore.updateMemberRole(projectsStore.currentProject.id, userId, role);
         toast.showMessage({
           type: "success",
           title: i18n.baseText("projects.settings.memberRole.updated.title")
@@ -1168,9 +1178,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       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 }))
-        });
+        await projectsStore.removeMember(current.id, userId);
         toast.showMessage({
           type: "success",
           title: i18n.baseText("projects.settings.member.removed.title")
@@ -1181,7 +1189,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         });
       } catch (error) {
         formData.value.relations.splice(idx, 0, removed);
-        toast.showError(error, i18n.baseText("projects.settings.save.error.title"));
+        showSaveError(error);
       }
     }
     const onMembersListAction = async ({ action, userId }) => {
@@ -1191,10 +1199,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           break;
       }
     };
-    const onCancel = () => {
+    const resetFormData = () => {
       formData.value.relations = projectsStore.currentProject?.relations ? deepCopy(projectsStore.currentProject.relations) : [];
       formData.value.name = projectsStore.currentProject?.name ?? "";
       formData.value.description = projectsStore.currentProject?.description ?? "";
+    };
+    const onCancel = () => {
+      resetFormData();
       isDirty.value = false;
     };
     const makeFormDataDiff = () => {
@@ -1223,59 +1234,43 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return diff;
     };
     const sendTelemetry = (diff) => {
+      const projectId = projectsStore.currentProject?.id;
       if (diff.name) {
-        telemetry.track("User changed project name", {
-          project_id: projectsStore.currentProject?.id,
-          name: diff.name
-        });
+        telemetry.track("User changed project name", { project_id: projectId, name: diff.name });
       }
-      if (diff.memberAdded) {
-        diff.memberAdded.forEach((r) => {
-          telemetry.track("User added member to project", {
-            project_id: projectsStore.currentProject?.id,
-            target_user_id: r.id,
-            role: r.role
-          });
+      diff.memberAdded?.forEach((r) => {
+        telemetry.track("User added member to project", {
+          project_id: projectId,
+          target_user_id: r.id,
+          role: r.role
         });
-      }
-      if (diff.memberRemoved) {
-        diff.memberRemoved.forEach((r) => {
-          telemetry.track("User removed member from project", {
-            project_id: projectsStore.currentProject?.id,
-            target_user_id: r.id
-          });
+      });
+      diff.memberRemoved?.forEach((r) => {
+        telemetry.track("User removed member from project", {
+          project_id: projectId,
+          target_user_id: r.id
         });
-      }
-      if (diff.role) {
-        diff.role.forEach((r) => {
-          telemetry.track("User changed member role on project", {
-            project_id: projectsStore.currentProject?.id,
-            target_user_id: r.id,
-            role: r.role
-          });
+      });
+      diff.role?.forEach((r) => {
+        telemetry.track("User changed member role on project", {
+          project_id: projectId,
+          target_user_id: r.id,
+          role: r.role
         });
-      }
+      });
     };
     const updateProject = async () => {
       if (!projectsStore.currentProject) {
         return;
       }
       try {
-        if (formData.value.relations.some((r) => r.role === "project:personalOwner")) {
-          throw new Error("Invalid role selected for this project.");
-        }
         await projectsStore.updateProject(projectsStore.currentProject.id, {
           name: formData.value.name ?? "",
-          icon: projectIcon.value,
-          description: formData.value.description ?? "",
-          relations: formData.value.relations.map((r) => ({
-            userId: r.id,
-            role: r.role
-          }))
+          description: formData.value.description ?? ""
         });
         isDirty.value = false;
       } catch (error) {
-        toast.showError(error, i18n.baseText("projects.settings.save.error.title"));
+        showSaveError(error);
         throw error;
       }
     };
@@ -1306,12 +1301,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const onConfirmDelete = async (transferId) => {
       try {
         if (projectsStore.currentProject) {
-          const projectName = projectsStore.currentProject?.name ?? "";
+          const projectName2 = projectsStore.currentProject?.name ?? "";
           await projectsStore.deleteProject(projectsStore.currentProject.id, transferId);
           await router.push({ name: VIEWS.HOMEPAGE });
           toast.showMessage({
             title: i18n.baseText("projects.settings.delete.successful.title", {
-              interpolate: { projectName }
+              interpolate: { projectName: projectName2 }
             }),
             type: "success"
           });
@@ -1328,11 +1323,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const onIconUpdated = async () => {
-      await updateProject();
-      toast.showMessage({
-        title: i18n.baseText("projects.settings.icon.update.successful.title"),
-        type: "success"
-      });
+      if (!projectsStore.currentProject) return;
+      try {
+        await projectsStore.updateProject(projectsStore.currentProject.id, {
+          icon: projectIcon.value
+        });
+        toast.showMessage({
+          title: i18n.baseText("projects.settings.icon.update.successful.title"),
+          type: "success"
+        });
+      } catch (error) {
+        showSaveError(error);
+      }
     };
     watch(
       () => projectsStore.currentProject,
@@ -1341,9 +1343,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           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) : [];
+        resetFormData();
         await nextTick();
         selectProjectNameIfMatchesDefault();
         if (projectsStore.currentProject?.icon && isIconOrEmoji(projectsStore.currentProject.icon)) {
@@ -1356,19 +1356,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => formData.value.relations.map((relation) => {
         const user = usersStore.usersById[relation.id];
         const safeRole = isProjectRole(relation.role) ? relation.role : "project:viewer";
-        if (!user) {
-          return {
-            ...relation,
-            role: safeRole,
-            firstName: null,
-            lastName: null,
-            email: null
-          };
-        }
         return {
           ...user,
           ...relation,
-          role: safeRole
+          role: safeRole,
+          firstName: user?.firstName ?? null,
+          lastName: user?.lastName ?? null,
+          email: user?.email ?? null
         };
       })
     );
@@ -1377,19 +1371,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       count: relationUsers.value.length
     }));
     const filteredMembersData = computed(() => {
-      if (!search2.value.trim()) {
-        return membersTableData.value;
-      }
+      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();
+        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
-      };
+      return { items: filtered, count: filtered.length };
     });
     const debouncedSearch = useDebounceFn(() => {
       membersTableState.value.page = 0;
@@ -1409,10 +1398,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       selectProjectNameIfMatchesDefault();
     });
     return (_ctx, _cache) => {
+      const _component_N8nText = N8nText;
       const _component_N8nIconPicker = IconPicker;
+      const _component_N8nButton = N8nButton;
       const _component_N8nIcon = N8nIcon;
       const _component_N8nUserSelect = N8nUserSelect;
-      const _component_N8nButton = N8nButton;
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(_ctx.$style.projectSettings),
         "data-test-id": "project-settings-container"
@@ -1420,7 +1410,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createBaseVNode("div", {
           class: normalizeClass(_ctx.$style.header)
         }, [
-          createVNode(ProjectHeader)
+          createVNode(ProjectHeader),
+          createVNode(_component_N8nText, {
+            tag: "h1",
+            size: "xlarge",
+            class: "pt-xs pb-m"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(i18n).baseText("projects.settings.info")), 1)
+            ]),
+            _: 1
+          })
         ], 2),
         createBaseVNode("form", {
           onSubmit: withModifiers(onSubmit, ["prevent"])
@@ -1428,7 +1428,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createBaseVNode("fieldset", null, [
             createBaseVNode("label", _hoisted_1, toDisplayString(unref(i18n).baseText("projects.settings.name")), 1),
             createBaseVNode("div", {
-              class: normalizeClass(_ctx.$style["project-name"])
+              class: normalizeClass(_ctx.$style.projectName)
             }, [
               createVNode(_component_N8nIconPicker, {
                 modelValue: projectIcon.value,
@@ -1449,7 +1449,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 name: "name",
                 required: "",
                 "data-test-id": "project-settings-name-input",
-                class: normalizeClass(_ctx.$style["project-name-input"]),
+                class: normalizeClass(_ctx.$style.projectNameInput),
                 onEnter: onSubmit,
                 onInput: onTextInput,
                 onValidate: _cache[2] || (_cache[2] = ($event) => isValid.value = $event)
@@ -1468,16 +1468,49 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               maxlength: 512,
               autosize: true,
               "data-test-id": "project-settings-description-input",
+              class: normalizeClass(_ctx.$style.projectDescriptionInput),
               onEnter: onSubmit,
               onInput: onTextInput,
               onValidate: _cache[4] || (_cache[4] = ($event) => isValid.value = $event)
-            }, null, 8, ["modelValue"])
+            }, null, 8, ["modelValue", "class"])
           ]),
+          isDirty.value ? (openBlock(), createElementBlock("fieldset", {
+            key: 0,
+            class: normalizeClass(_ctx.$style.buttons)
+          }, [
+            createBaseVNode("div", null, [
+              createBaseVNode("small", _hoisted_3, toDisplayString(unref(i18n).baseText("projects.settings.message.unsavedChanges")), 1),
+              createVNode(_component_N8nButton, {
+                type: "secondary",
+                "native-type": "button",
+                class: "mr-2xs",
+                "data-test-id": "project-settings-cancel-button",
+                onClick: withModifiers(onCancel, ["stop", "prevent"])
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(i18n).baseText("projects.settings.button.cancel")), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            createVNode(_component_N8nButton, {
+              disabled: !isValid.value,
+              type: "primary",
+              "data-test-id": "project-settings-save-button"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18n).baseText("projects.settings.button.save")), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ], 2)) : createCommentVNode("", true),
           createBaseVNode("fieldset", null, [
-            createBaseVNode("label", _hoisted_3, toDisplayString(unref(i18n).baseText("projects.settings.projectMembers")), 1),
+            createBaseVNode("h3", null, [
+              createBaseVNode("label", _hoisted_4, toDisplayString(unref(i18n).baseText("projects.settings.projectMembers")), 1)
+            ]),
             createVNode(_component_N8nUserSelect, {
               id: "projectMembers",
-              class: "mb-s",
+              class: normalizeClass([_ctx.$style.userSelect, "mb-s"]),
               size: "large",
               users: usersList.value,
               "current-user-id": unref(usersStore).currentUser?.id,
@@ -1489,7 +1522,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 createVNode(_component_N8nIcon, { icon: "search" })
               ]),
               _: 1
-            }, 8, ["users", "current-user-id", "placeholder"]),
+            }, 8, ["class", "users", "current-user-id", "placeholder"]),
             relationUsers.value.length > 0 ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: normalizeClass(_ctx.$style.membersTableContainer)
@@ -1521,41 +1554,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, null, 8, ["table-options", "data", "current-user-id", "project-roles", "actions"])
             ], 2)) : createCommentVNode("", true)
           ]),
-          createBaseVNode("fieldset", {
-            class: normalizeClass(_ctx.$style.buttons)
-          }, [
-            createBaseVNode("div", null, [
-              isDirty.value ? (openBlock(), createElementBlock("small", _hoisted_4, toDisplayString(unref(i18n).baseText("projects.settings.message.unsavedChanges")), 1)) : createCommentVNode("", true),
-              createVNode(_component_N8nButton, {
-                disabled: !isDirty.value,
-                type: "secondary",
-                "native-type": "button",
-                class: "mr-2xs",
-                "data-test-id": "project-settings-cancel-button",
-                onClick: withModifiers(onCancel, ["stop", "prevent"])
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(i18n).baseText("projects.settings.button.cancel")), 1)
-                ]),
-                _: 1
-              }, 8, ["disabled"])
-            ]),
-            createVNode(_component_N8nButton, {
-              disabled: !isDirty.value || !isValid.value,
-              type: "primary",
-              "data-test-id": "project-settings-save-button"
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(i18n).baseText("projects.settings.button.save")), 1)
-              ]),
-              _: 1
-            }, 8, ["disabled"])
-          ], 2),
           createBaseVNode("fieldset", null, [
-            _cache[8] || (_cache[8] = createBaseVNode("hr", { class: "mb-2xl" }, null, -1)),
             createBaseVNode("h3", _hoisted_5, toDisplayString(unref(i18n).baseText("projects.settings.danger.title")), 1),
             createBaseVNode("small", null, toDisplayString(unref(i18n).baseText("projects.settings.danger.message")), 1),
-            _cache[9] || (_cache[9] = createBaseVNode("br", null, null, -1)),
+            _cache[8] || (_cache[8] = createBaseVNode("br", null, null, -1)),
             createVNode(_component_N8nButton, {
               type: "tertiary",
               "native-type": "button",
@@ -1588,12 +1590,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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 projectSettings = "_projectSettings_1kv8e_123";
+const header = "_header_1kv8e_147";
+const upgrade = "_upgrade_1kv8e_153";
+const buttons = "_buttons_1kv8e_157";
+const membersTableContainer = "_membersTableContainer_1kv8e_163";
+const search = "_search_1kv8e_167";
+const projectName = "_projectName_1kv8e_172";
+const projectNameInput = "_projectNameInput_1kv8e_177";
+const projectDescriptionInput = "_projectDescriptionInput_1kv8e_181";
+const userSelect = "_userSelect_1kv8e_182";
 const style0 = {
   projectSettings,
   header,
@@ -1601,8 +1607,10 @@ const style0 = {
   buttons,
   membersTableContainer,
   search,
-  "project-name": "_project-name_2n0pf_168",
-  "project-name-input": "_project-name-input_2n0pf_172"
+  projectName,
+  projectNameInput,
+  projectDescriptionInput,
+  userSelect
 };
 const cssModules = {
   "$style": style0