n8n-editor-ui 1.72.1 → 1.74.0

package/dist/assets/{MainSidebar-Cm-l0HUG.js → MainSidebar-CgMZ_6w4.js}

@@ -1,6 +1,6 @@
-import { d as defineComponent, aD as useLoadingService, K as useUIStore, a0 as useSourceControlStore, a as useToast, r as ref, q as computed, c as openBlock, h as createElementBlock, l as unref, n as normalizeClass, j as createBaseVNode, i as createVNode, k as createTextVNode, t as toDisplayString, w as withCtx, e as createBlock, f as createCommentVNode, B as normalizeStyle, g as useI18n, an as hasPermission, ah as SOURCE_CONTROL_PUSH_MODAL_KEY, y as nextTick, aE as sourceControlEventBus, aF as SOURCE_CONTROL_PULL_MODAL_KEY, m as resolveComponent, C as createEventBus, _ as _export_sfc, aG as get, R as defineStore, S as STORES, aH as useCloudPlanStore, Z as useRootStore, aI as useStorage, aJ as DateTime, ak as useTelemetry, a1 as useProjectsStore, F as Fragment, A as renderList, V as VIEWS, aK as sortByProperty, p as useSettingsStore, aL as useTemplatesStore, u as useUsersStore, aM as useVersionsStore, T as useWorkflowsStore, J as useDebounce, U as useRoute, b as useRouter, a5 as usePageRedirectionHelper, o as onMounted, x as onBeforeUnmount, E as onClickOutside, aN as N8nNavigationDropdown, aO as createSlots, aP as useExternalHooks, aQ as VERSIONS_MODAL_KEY, aR as ABOUT_MODAL_KEY } from "./index-fCEqBD8K.js";
-import { u as useBugReporting } from "./useBugReporting-CbgIVUCL.js";
-import { u as useGlobalEntityCreation } from "./useGlobalEntityCreation-DGVSN-Im.js";
+import { d as defineComponent, aD as useLoadingService, K as useUIStore, a0 as useSourceControlStore, a as useToast, r as ref, q as computed, c as openBlock, h as createElementBlock, l as unref, n as normalizeClass, j as createBaseVNode, i as createVNode, k as createTextVNode, t as toDisplayString, w as withCtx, e as createBlock, f as createCommentVNode, B as normalizeStyle, g as useI18n, an as hasPermission, ah as SOURCE_CONTROL_PUSH_MODAL_KEY, y as nextTick, aE as sourceControlEventBus, aF as SOURCE_CONTROL_PULL_MODAL_KEY, m as resolveComponent, C as createEventBus, _ as _export_sfc, aG as get, R as defineStore, S as STORES, aH as useCloudPlanStore, Z as useRootStore, aI as useStorage, aJ as DateTime, ak as useTelemetry, p as useSettingsStore, a1 as useProjectsStore, b as useRouter, aK as sortByProperty, V as VIEWS, a5 as usePageRedirectionHelper, am as getResourcePermissions, F as Fragment, A as renderList, aL as useTemplatesStore, u as useUsersStore, aM as useVersionsStore, T as useWorkflowsStore, J as useDebounce, U as useRoute, o as onMounted, x as onBeforeUnmount, E as onClickOutside, aN as N8nLink, aO as N8nTooltip, aP as _sfc_main$5, aQ as N8nNavigationDropdown, aR as createSlots, aS as useExternalHooks, aT as VERSIONS_MODAL_KEY, aU as ABOUT_MODAL_KEY } from "./index-DWT5SiDA.js";
+import { u as useBugReporting } from "./useBugReporting-Bwqu07gb.js";
+import { L as Logo } from "./Logo-CSftxDSz.js";
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "MainSidebarSourceControl",
   props: {
@@ -28,6 +28,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       loadingService.setLoadingText(i18n.baseText("settings.sourceControl.loading.checkingForChanges"));
       try {
         const status = await sourceControlStore.getAggregatedStatus();
+        if (!status.length) {
+          toast.showMessage({
+            title: "No changes to commit",
+            message: "Everything is up to date",
+            type: "info"
+          });
+          return;
+        }
         uiStore.openModalWithData({
           name: SOURCE_CONTROL_PUSH_MODAL_KEY,
           data: { eventBus, status }
@@ -172,11 +180,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const sync = "_sync_15zv3_1";
-const isConnected = "_isConnected_15zv3_8";
-const collapsed$1 = "_collapsed_15zv3_12";
-const branchName = "_branchName_15zv3_22";
-const connected = "_connected_15zv3_32";
+const sync = "_sync_fv3ov_123";
+const isConnected = "_isConnected_fv3ov_130";
+const collapsed$1 = "_collapsed_fv3ov_134";
+const branchName = "_branchName_fv3ov_144";
+const connected = "_connected_fv3ov_154";
 const style0$4 = {
   sync,
   isConnected,
@@ -188,9 +196,9 @@ const cssModules$4 = {
   "$style": style0$4
 };
 const __unplugin_components_3 = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$4]]);
-const notification = "_notification_197jx_8";
+const notification = "_notification_1usal_130";
 const style0$3 = {
-  "gift-icon": "_gift-icon_197jx_1",
+  "gift-icon": "_gift-icon_1usal_123",
   notification
 };
 const _sfc_main$3 = {};
@@ -319,11 +327,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container = "_container_92ffs_1";
-const textAndCloseButton = "_textAndCloseButton_92ffs_9";
-const text = "_text_92ffs_9";
-const closeButton = "_closeButton_92ffs_22";
-const becomeCreatorButton = "_becomeCreatorButton_92ffs_35";
+const container = "_container_19by7_123";
+const textAndCloseButton = "_textAndCloseButton_19by7_131";
+const text = "_text_19by7_131";
+const closeButton = "_closeButton_19by7_144";
+const becomeCreatorButton = "_becomeCreatorButton_19by7_157";
 const style0$2 = {
   container,
   textAndCloseButton,
@@ -335,12 +343,212 @@ const cssModules$2 = {
   "$style": style0$2
 };
 const __unplugin_components_1 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$2]]);
+const useGlobalEntityCreation = () => {
+  const CREATE_PROJECT_ID = "create-project";
+  const WORKFLOWS_MENU_ID = "workflow";
+  const CREDENTIALS_MENU_ID = "credential";
+  const settingsStore = useSettingsStore();
+  const cloudPlanStore = useCloudPlanStore();
+  const projectsStore = useProjectsStore();
+  const sourceControlStore = useSourceControlStore();
+  const router = useRouter();
+  const i18n = useI18n();
+  const toast = useToast();
+  const isCreatingProject = ref(false);
+  const displayProjects = computed(
+    () => sortByProperty(
+      "name",
+      projectsStore.myProjects.filter((p) => p.type === "team")
+    )
+  );
+  const disabledWorkflow = (scopes = []) => sourceControlStore.preferences.branchReadOnly || !getResourcePermissions(scopes).workflow.create;
+  const disabledCredential = (scopes = []) => sourceControlStore.preferences.branchReadOnly || !getResourcePermissions(scopes).credential.create;
+  const menu = computed(() => {
+    if (!projectsStore.isTeamProjectFeatureEnabled) {
+      return [
+        {
+          id: "workflow",
+          title: "Workflow",
+          route: {
+            name: VIEWS.NEW_WORKFLOW,
+            query: {
+              projectId: projectsStore.personalProject?.id
+            }
+          }
+        },
+        {
+          id: "credential",
+          title: "Credential",
+          route: {
+            name: VIEWS.CREDENTIALS,
+            params: {
+              projectId: projectsStore.personalProject?.id,
+              credentialId: "create"
+            }
+          }
+        },
+        {
+          id: CREATE_PROJECT_ID,
+          title: "Project",
+          disabled: true
+        }
+      ];
+    }
+    return [
+      {
+        id: WORKFLOWS_MENU_ID,
+        title: "Workflow",
+        disabled: sourceControlStore.preferences.branchReadOnly,
+        ...!sourceControlStore.preferences.branchReadOnly && {
+          submenu: [
+            {
+              id: "workflow-title",
+              title: "Create in",
+              disabled: true
+            },
+            {
+              id: "workflow-personal",
+              title: i18n.baseText("projects.menu.personal"),
+              icon: "user",
+              disabled: disabledWorkflow(projectsStore.personalProject?.scopes),
+              route: {
+                name: VIEWS.NEW_WORKFLOW,
+                query: { projectId: projectsStore.personalProject?.id }
+              }
+            },
+            ...displayProjects.value.map((project) => ({
+              id: `workflow-${project.id}`,
+              title: project.name,
+              icon: "layer-group",
+              disabled: disabledWorkflow(project.scopes),
+              route: {
+                name: VIEWS.NEW_WORKFLOW,
+                query: { projectId: project.id }
+              }
+            }))
+          ]
+        }
+      },
+      {
+        id: CREDENTIALS_MENU_ID,
+        title: "Credential",
+        disabled: sourceControlStore.preferences.branchReadOnly,
+        ...!sourceControlStore.preferences.branchReadOnly && {
+          submenu: [
+            {
+              id: "credential-title",
+              title: "Create in",
+              disabled: true
+            },
+            {
+              id: "credential-personal",
+              title: i18n.baseText("projects.menu.personal"),
+              icon: "user",
+              disabled: disabledCredential(projectsStore.personalProject?.scopes),
+              route: {
+                name: VIEWS.PROJECTS_CREDENTIALS,
+                params: { projectId: projectsStore.personalProject?.id, credentialId: "create" }
+              }
+            },
+            ...displayProjects.value.map((project) => ({
+              id: `credential-${project.id}`,
+              title: project.name,
+              icon: "layer-group",
+              disabled: disabledCredential(project.scopes),
+              route: {
+                name: VIEWS.PROJECTS_CREDENTIALS,
+                params: { projectId: project.id, credentialId: "create" }
+              }
+            }))
+          ]
+        }
+      },
+      {
+        id: CREATE_PROJECT_ID,
+        title: "Project",
+        disabled: !projectsStore.canCreateProjects
+      }
+    ];
+  });
+  const createProject = async () => {
+    isCreatingProject.value = true;
+    try {
+      const newProject = await projectsStore.createProject({
+        name: i18n.baseText("projects.settings.newProjectName"),
+        icon: { type: "icon", value: "layer-group" }
+      });
+      await router.push({ name: VIEWS.PROJECT_SETTINGS, params: { projectId: newProject.id } });
+      toast.showMessage({
+        title: i18n.baseText("projects.settings.save.successful.title", {
+          interpolate: { projectName: newProject.name }
+        }),
+        type: "success"
+      });
+    } catch (error) {
+      toast.showError(error, i18n.baseText("projects.error.title"));
+    } finally {
+      isCreatingProject.value = false;
+    }
+  };
+  const handleSelect = (id) => {
+    if (id !== CREATE_PROJECT_ID) return;
+    if (projectsStore.canCreateProjects) {
+      void createProject();
+      return;
+    }
+    void usePageRedirectionHelper().goToUpgrade("rbac", "upgrade-rbac");
+  };
+  const projectsLimitReachedMessage = computed(() => {
+    if (settingsStore.isCloudDeployment) {
+      return i18n.baseText("projects.create.limitReached.cloud", {
+        adjustToNumber: projectsStore.teamProjectsLimit,
+        interpolate: {
+          planName: cloudPlanStore.currentPlanData?.displayName ?? "",
+          limit: projectsStore.teamProjectsLimit
+        }
+      });
+    }
+    if (!projectsStore.isTeamProjectFeatureEnabled) {
+      return i18n.baseText("projects.create.limitReached.self");
+    }
+    return i18n.baseText("projects.create.limitReached", {
+      adjustToNumber: projectsStore.teamProjectsLimit,
+      interpolate: {
+        limit: projectsStore.teamProjectsLimit
+      }
+    });
+  });
+  const createProjectAppendSlotName = computed(() => `item.append.${CREATE_PROJECT_ID}`);
+  const createWorkflowsAppendSlotName = computed(() => `item.append.${WORKFLOWS_MENU_ID}`);
+  const createCredentialsAppendSlotName = computed(() => `item.append.${CREDENTIALS_MENU_ID}`);
+  const upgradeLabel = computed(() => {
+    if (settingsStore.isCloudDeployment) {
+      return i18n.baseText("generic.upgrade");
+    }
+    if (!projectsStore.isTeamProjectFeatureEnabled) {
+      return i18n.baseText("generic.enterprise");
+    }
+    return i18n.baseText("generic.upgrade");
+  });
+  return {
+    menu,
+    handleSelect,
+    createProjectAppendSlotName,
+    createWorkflowsAppendSlotName,
+    createCredentialsAppendSlotName,
+    projectsLimitReachedMessage,
+    upgradeLabel,
+    createProject,
+    isCreatingProject,
+    displayProjects
+  };
+};
 const _hoisted_1$1 = {
   key: 0,
   class: "mt-m mb-m"
 };
-const _hoisted_2$1 = {
-  key: 3,
+const _hoisted_2 = {
+  key: 4,
   class: "mb-m"
 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
@@ -353,6 +561,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const locale = useI18n();
     const projectsStore = useProjectsStore();
+    const globalEntityCreation = useGlobalEntityCreation();
+    const isCreatingProject = computed(() => globalEntityCreation.isCreatingProject.value);
+    const displayProjects = computed(() => globalEntityCreation.displayProjects.value);
     const home = computed(() => ({
       id: "home",
       label: locale.baseText("projects.menu.overview"),
@@ -364,7 +575,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const getProjectMenuItem = (project) => ({
       id: project.id,
       label: project.name,
-      icon: props.collapsed ? void 0 : "layer-group",
+      icon: project.icon,
       route: {
         to: {
           name: VIEWS.PROJECTS_WORKFLOWS,
@@ -375,7 +586,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const personalProject = computed(() => ({
       id: projectsStore.personalProject?.id ?? "",
       label: locale.baseText("projects.menu.personal"),
-      icon: props.collapsed ? void 0 : "user",
+      icon: "user",
       route: {
         to: {
           name: VIEWS.PROJECTS_WORKFLOWS,
@@ -383,15 +594,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }
       }
     }));
-    const displayProjects = computed(
-      () => sortByProperty(
-        "name",
-        projectsStore.myProjects.filter((p) => p.type === "team")
-      )
+    const showAddFirstProject = computed(
+      () => projectsStore.isTeamProjectFeatureEnabled && !displayProjects.value.length
     );
     return (_ctx, _cache) => {
       const _component_N8nMenuItem = resolveComponent("N8nMenuItem");
       const _component_ElMenu = resolveComponent("ElMenu");
+      const _component_N8nButton = resolveComponent("N8nButton");
       const _component_N8nText = resolveComponent("N8nText");
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(_ctx.$style.projects)
@@ -414,12 +623,21 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         unref(projectsStore).isTeamProjectFeatureEnabled ? (openBlock(), createElementBlock("hr", _hoisted_1$1)) : createCommentVNode("", true),
         !props.collapsed && unref(projectsStore).isTeamProjectFeatureEnabled ? (openBlock(), createBlock(_component_N8nText, {
           key: 1,
-          class: normalizeClass(_ctx.$style.projectsLabel),
+          class: normalizeClass([_ctx.$style.projectsLabel]),
           tag: "h3",
           bold: ""
         }, {
           default: withCtx(() => [
-            createBaseVNode("span", null, toDisplayString(unref(locale).baseText("projects.menu.title")), 1)
+            createBaseVNode("span", null, toDisplayString(unref(locale).baseText("projects.menu.title")), 1),
+            unref(projectsStore).canCreateProjects ? (openBlock(), createBlock(_component_N8nButton, {
+              key: 0,
+              icon: "plus",
+              text: "",
+              "data-test-id": "project-plus-button",
+              disabled: isCreatingProject.value,
+              class: normalizeClass(_ctx.$style.plusBtn),
+              onClick: unref(globalEntityCreation).createProject
+            }, null, 8, ["disabled", "class", "onClick"])) : createCommentVNode("", true)
           ]),
           _: 1
         }, 8, ["class"])) : createCommentVNode("", true),
@@ -452,29 +670,51 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["collapse", "class"])) : createCommentVNode("", true),
-        unref(projectsStore).isTeamProjectFeatureEnabled ? (openBlock(), createElementBlock("hr", _hoisted_2$1)) : createCommentVNode("", true)
+        showAddFirstProject.value ? (openBlock(), createBlock(_component_N8nButton, {
+          key: 3,
+          class: normalizeClass([
+            _ctx.$style.addFirstProjectBtn,
+            {
+              [_ctx.$style.collapsed]: props.collapsed
+            }
+          ]),
+          disabled: isCreatingProject.value,
+          type: "secondary",
+          icon: "plus",
+          "data-test-id": "add-first-project-button",
+          onClick: unref(globalEntityCreation).createProject
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(unref(locale).baseText("projects.menu.addFirstProject")), 1)
+          ]),
+          _: 1
+        }, 8, ["class", "disabled", "onClick"])) : createCommentVNode("", true),
+        unref(projectsStore).isTeamProjectFeatureEnabled ? (openBlock(), createElementBlock("hr", _hoisted_2)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const projects = "_projects_6p5d2_1";
-const projectItems = "_projectItems_6p5d2_9";
-const upgradeLink = "_upgradeLink_6p5d2_15";
-const collapsed = "_collapsed_6p5d2_20";
-const projectsLabel = "_projectsLabel_6p5d2_24";
+const projects = "_projects_b221a_123";
+const plusBtn = "_plusBtn_b221a_130";
+const projectItems = "_projectItems_b221a_134";
+const upgradeLink = "_upgradeLink_b221a_140";
+const collapsed = "_collapsed_b221a_145";
+const projectsLabel = "_projectsLabel_b221a_149";
+const addFirstProjectBtn = "_addFirstProjectBtn_b221a_172";
 const style0$1 = {
   projects,
+  plusBtn,
   projectItems,
   upgradeLink,
   collapsed,
-  projectsLabel
+  projectsLabel,
+  addFirstProjectBtn
 };
 const cssModules$1 = {
   "$style": style0$1
 };
-const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1], ["__scopeId", "data-v-6cb5f5b7"]]);
-const _hoisted_1 = ["src"];
-const _hoisted_2 = {
+const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1], ["__scopeId", "data-v-3d3b6488"]]);
+const _hoisted_1 = {
   class: "ml-3xs",
   "data-test-id": "main-sidebar-user-menu"
 };
@@ -490,6 +730,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const usersStore = useUsersStore();
     const versionsStore = useVersionsStore();
     const workflowsStore = useWorkflowsStore();
+    const sourceControlStore = useSourceControlStore();
     const { callDebounced } = useDebounce();
     const externalHooks = useExternalHooks();
     const i18n = useI18n();
@@ -610,9 +851,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     ]);
     const createBtn = ref();
     const isCollapsed = computed(() => uiStore.sidebarMenuCollapsed);
-    const logoPath = computed(
-      () => basePath.value + (isCollapsed.value ? "static/logo/collapsed.svg" : uiStore.logo)
-    );
     const hasVersionUpdates = computed(
       () => settingsStore.settings.releaseChannel === "stable" && versionsStore.hasVersionUpdates
     );
@@ -718,16 +956,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       menu,
       handleSelect: handleMenuSelect,
       createProjectAppendSlotName,
-      projectsLimitReachedMessage
+      createWorkflowsAppendSlotName,
+      createCredentialsAppendSlotName,
+      projectsLimitReachedMessage,
+      upgradeLabel
     } = useGlobalEntityCreation();
     onClickOutside(createBtn, () => {
       createBtn.value?.close();
     });
     return (_ctx, _cache) => {
       const _component_N8nIcon = resolveComponent("N8nIcon");
-      const _component_N8nIconButton = resolveComponent("N8nIconButton");
+      const _component_i18n_t = resolveComponent("i18n-t");
       const _component_N8nButton = resolveComponent("N8nButton");
-      const _component_N8nTooltip = resolveComponent("N8nTooltip");
       const _component_ProjectNavigation = __unplugin_components_0;
       const _component_BecomeTemplateCreatorCta = __unplugin_components_1;
       const _component_GiftNotificationIcon = __unplugin_components_2;
@@ -767,12 +1007,44 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createBaseVNode("div", {
           class: normalizeClass(_ctx.$style.logo)
         }, [
-          createBaseVNode("img", {
-            src: logoPath.value,
-            "data-test-id": "n8n-logo",
-            class: normalizeClass(_ctx.$style.icon),
-            alt: "n8n"
-          }, null, 10, _hoisted_1),
+          createVNode(Logo, {
+            location: "sidebar",
+            collapsed: isCollapsed.value,
+            "release-channel": unref(settingsStore).settings.releaseChannel
+          }, {
+            default: withCtx(() => [
+              unref(sourceControlStore).preferences.branchReadOnly && !isCollapsed.value ? (openBlock(), createBlock(unref(N8nTooltip), {
+                key: 0,
+                placement: "bottom"
+              }, {
+                content: withCtx(() => [
+                  createVNode(_component_i18n_t, { keypath: "readOnlyEnv.tooltip" }, {
+                    link: withCtx(() => [
+                      createVNode(unref(N8nLink), {
+                        to: "https://docs.n8n.io/source-control-environments/setup/#step-4-connect-n8n-and-configure-your-instance",
+                        size: "small"
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(unref(i18n).baseText("readOnlyEnv.tooltip.link")), 1)
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                default: withCtx(() => [
+                  createVNode(_component_N8nIcon, {
+                    icon: "lock",
+                    size: "xsmall",
+                    class: normalizeClass(_ctx.$style.readOnlyEnvironmentIcon)
+                  }, null, 8, ["class"])
+                ]),
+                _: 1
+              })) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["collapsed", "release-channel"]),
           createVNode(unref(N8nNavigationDropdown), {
             ref_key: "createBtn",
             ref: createBtn,
@@ -780,8 +1052,40 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             menu: unref(menu),
             onSelect: unref(handleMenuSelect)
           }, {
+            [unref(createWorkflowsAppendSlotName)]: withCtx(() => [
+              unref(sourceControlStore).preferences.branchReadOnly ? (openBlock(), createBlock(unref(N8nTooltip), {
+                key: 0,
+                placement: "right",
+                content: unref(i18n).baseText("readOnlyEnv.cantAdd.workflow")
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_N8nIcon, {
+                    style: { "margin-left": "auto", "margin-right": "5px" },
+                    icon: "lock",
+                    size: "xsmall"
+                  })
+                ]),
+                _: 1
+              }, 8, ["content"])) : createCommentVNode("", true)
+            ]),
+            [unref(createCredentialsAppendSlotName)]: withCtx(() => [
+              unref(sourceControlStore).preferences.branchReadOnly ? (openBlock(), createBlock(unref(N8nTooltip), {
+                key: 0,
+                placement: "right",
+                content: unref(i18n).baseText("readOnlyEnv.cantAdd.credential")
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_N8nIcon, {
+                    style: { "margin-left": "auto", "margin-right": "5px" },
+                    icon: "lock",
+                    size: "xsmall"
+                  })
+                ]),
+                _: 1
+              }, 8, ["content"])) : createCommentVNode("", true)
+            ]),
             [unref(createProjectAppendSlotName)]: withCtx(({ item }) => [
-              item.disabled ? (openBlock(), createBlock(_component_N8nTooltip, {
+              item.disabled ? (openBlock(), createBlock(unref(N8nTooltip), {
                 key: 0,
                 placement: "right",
                 content: unref(projectsLimitReachedMessage)
@@ -794,7 +1098,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     onClick: ($event) => unref(handleMenuSelect)(item.id)
                   }, {
                     default: withCtx(() => [
-                      createTextVNode(toDisplayString(unref(i18n).baseText("generic.upgrade")), 1)
+                      createTextVNode(toDisplayString(unref(upgradeLabel)), 1)
                     ]),
                     _: 2
                   }, 1032, ["onClick"])
@@ -803,7 +1107,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, 1032, ["content"])) : createCommentVNode("", true)
             ]),
             default: withCtx(() => [
-              createVNode(_component_N8nIconButton, {
+              createVNode(unref(_sfc_main$5), {
                 icon: "plus",
                 type: "secondary",
                 outline: ""
@@ -862,7 +1166,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ref: user,
                 class: normalizeClass(_ctx.$style.userArea)
               }, [
-                createBaseVNode("div", _hoisted_2, [
+                createBaseVNode("div", _hoisted_1, [
                   createVNode(_component_ElDropdown, {
                     placement: "right-end",
                     trigger: "click",
@@ -939,15 +1243,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const sideMenu = "_sideMenu_15e4m_1";
-const logo = "_logo_15e4m_10";
-const sideMenuCollapsed = "_sideMenuCollapsed_15e4m_25";
-const sideMenuCollapseButton = "_sideMenuCollapseButton_15e4m_37";
-const updates = "_updates_15e4m_56";
-const expanded = "_expanded_15e4m_69";
-const userArea = "_userArea_15e4m_76";
-const userName = "_userName_15e4m_83";
-const userActions = "_userActions_15e4m_97";
+const sideMenu = "_sideMenu_1wc6y_123";
+const logo = "_logo_1wc6y_132";
+const sideMenuCollapsed = "_sideMenuCollapsed_1wc6y_147";
+const sideMenuCollapseButton = "_sideMenuCollapseButton_1wc6y_156";
+const updates = "_updates_1wc6y_175";
+const expanded = "_expanded_1wc6y_188";
+const userArea = "_userArea_1wc6y_195";
+const userName = "_userName_1wc6y_202";
+const userActions = "_userActions_1wc6y_216";
+const readOnlyEnvironmentIcon = "_readOnlyEnvironmentIcon_1wc6y_228";
 const style0 = {
   sideMenu,
   logo,
@@ -957,7 +1262,8 @@ const style0 = {
   expanded,
   userArea,
   userName,
-  userActions
+  userActions,
+  readOnlyEnvironmentIcon
 };
 const cssModules = {
   "$style": style0