From fb97e8dd02178c020be826fe601a7b68180899d9 Mon Sep 17 00:00:00 2001 From: Mutasem Aldmour Date: Fri, 17 Nov 2023 12:48:35 +0100 Subject: [PATCH] refactor: move cloud dashboard admin to sidebar --- .../editor-ui/src/components/MainSidebar.vue | 12 ++++++ packages/editor-ui/src/hooks/cloud.ts | 8 +--- .../src/hooks/utils/hooksAddAdminIcon.ts | 38 ------------------- .../hooksAddAutoLoginToAdminPanelButton.ts | 15 -------- packages/editor-ui/src/hooks/utils/index.ts | 2 - .../editor-ui/src/stores/cloudPlan.store.ts | 7 ++++ 6 files changed, 20 insertions(+), 62 deletions(-) delete mode 100644 packages/editor-ui/src/hooks/utils/hooksAddAdminIcon.ts delete mode 100644 packages/editor-ui/src/hooks/utils/hooksAddAutoLoginToAdminPanelButton.ts diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue index 3dbc85e2cc87a..a0df126025a3c 100644 --- a/packages/editor-ui/src/components/MainSidebar.vue +++ b/packages/editor-ui/src/components/MainSidebar.vue @@ -270,6 +270,14 @@ export default defineComponent({ this.settingsStore.isQueueModeEnabled && this.settingsStore.isWorkerViewAvailable, activateOnRouteNames: [VIEWS.WORKER_VIEW], }, + { + id: 'cloud-admin', + type: 'link', + position: 'bottom', + label: 'Admin Panel', + icon: 'home', + available: this.settingsStore.isCloudDeployment && this.usersStore.isInstanceOwner, + }, { id: 'settings', icon: 'cog', @@ -461,6 +469,10 @@ export default defineComponent({ this.uiStore.openModal(ABOUT_MODAL_KEY); break; } + case 'cloud-admin': { + this.cloudPlanStore.redirectToDashboard(); + break; + } case 'quickstart': case 'docs': case 'forum': diff --git a/packages/editor-ui/src/hooks/cloud.ts b/packages/editor-ui/src/hooks/cloud.ts index 5073c9aa49f35..f4990cba6338e 100644 --- a/packages/editor-ui/src/hooks/cloud.ts +++ b/packages/editor-ui/src/hooks/cloud.ts @@ -1,4 +1,4 @@ -import { hooksAddAdminIcon, hooksAddFakeDoorFeatures } from '@/hooks/utils'; +import { hooksAddFakeDoorFeatures } from '@/hooks/utils'; import { getAuthenticationModalEventData, getExpressionEditorEventsData, @@ -29,9 +29,6 @@ import type { ExternalHooks } from '@/types'; export const n8nCloudHooks: PartialDeep = { app: { mount: [ - () => { - hooksAddAdminIcon(); - }, () => { hooksAddFakeDoorFeatures(); }, @@ -43,9 +40,6 @@ export const n8nCloudHooks: PartialDeep = { const segmentStore = useSegment(); segmentStore.identify(); }, - () => { - hooksAddAdminIcon(); - }, ], createNodeActiveChanged: [ (_, meta) => { diff --git a/packages/editor-ui/src/hooks/utils/hooksAddAdminIcon.ts b/packages/editor-ui/src/hooks/utils/hooksAddAdminIcon.ts deleted file mode 100644 index b81bd14f45128..0000000000000 --- a/packages/editor-ui/src/hooks/utils/hooksAddAdminIcon.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { useUIStore } from '@/stores/ui.store'; -import type { IMenuItem } from 'n8n-design-system/types'; -import { useUsersStore } from '@/stores/users.store'; -import { addAutoLoginToAdminPanelButton } from '@/hooks/utils/hooksAddAutoLoginToAdminPanelButton'; - -let adminIconAdded = false; - -export const hooksAddAdminIcon = () => { - if (adminIconAdded) { - return; - } - - const uiStore = useUIStore(); - const usersStore = useUsersStore(); - - if (usersStore?.globalRoleName !== 'owner') { - return; - } - - const menuItems: IMenuItem[] = [ - { - id: 'admin', - type: 'link', - position: 'bottom', - label: 'Admin Panel', - icon: 'home', - properties: { - href: 'https://app.n8n.cloud', - newWindow: false, - }, - }, - ]; - - addAutoLoginToAdminPanelButton(); - - uiStore.sidebarMenuItems = [...uiStore.sidebarMenuItems, ...menuItems] as IMenuItem[]; - adminIconAdded = true; -}; diff --git a/packages/editor-ui/src/hooks/utils/hooksAddAutoLoginToAdminPanelButton.ts b/packages/editor-ui/src/hooks/utils/hooksAddAutoLoginToAdminPanelButton.ts deleted file mode 100644 index 74ff1ba435702..0000000000000 --- a/packages/editor-ui/src/hooks/utils/hooksAddAutoLoginToAdminPanelButton.ts +++ /dev/null @@ -1,15 +0,0 @@ -export function addAutoLoginToAdminPanelButton() { - const adminPanelHost = new URL(window.location.href).host.split('.').slice(1).join('.'); - - document.body?.addEventListener('click', async (e) => { - if (!e.target || !(e.target instanceof Element)) return; - if (e.target.getAttribute('id') !== 'admin' && !e.target.closest('#admin')) return; - - e.preventDefault(); - - const restPath = window.REST_ENDPOINT ?? 'rest'; - const response = await fetch(`/${restPath}/cloud/proxy/login/code`); - const { code } = await response.json(); - window.location.href = `https://${adminPanelHost}/login?code=${code}`; - }); -} diff --git a/packages/editor-ui/src/hooks/utils/index.ts b/packages/editor-ui/src/hooks/utils/index.ts index dd6389ac4f775..43979c51414b7 100644 --- a/packages/editor-ui/src/hooks/utils/index.ts +++ b/packages/editor-ui/src/hooks/utils/index.ts @@ -1,4 +1,2 @@ -export * from './hooksAddAdminIcon'; -export * from './hooksAddAutoLoginToAdminPanelButton'; export * from './hooksAddFakeDoorFeatures'; export * from './hooksNodesPanel'; diff --git a/packages/editor-ui/src/stores/cloudPlan.store.ts b/packages/editor-ui/src/stores/cloudPlan.store.ts index 42929d2469b31..1c2893d1da1b0 100644 --- a/packages/editor-ui/src/stores/cloudPlan.store.ts +++ b/packages/editor-ui/src/stores/cloudPlan.store.ts @@ -151,6 +151,12 @@ export const useCloudPlanStore = defineStore(STORES.CLOUD_PLAN, () => { } catch {} }; + const redirectToDashboard = async () => { + const adminPanelHost = new URL(window.location.href).host.split('.').slice(1).join('.'); + const { code } = await getAutoLoginCode(); + window.location.href = `https://${adminPanelHost}/login?code=${code}`; + }; + return { state, getOwnerCurrentPlan, @@ -166,5 +172,6 @@ export const useCloudPlanStore = defineStore(STORES.CLOUD_PLAN, () => { checkForCloudPlanData, fetchUserCloudAccount, getAutoLoginCode, + redirectToDashboard, }; });