fix(editor): Fix Admin panel icon in the sidebar for cloud deployment…

…s (no-changelog) (#7738) Co-authored-by: ricardo <ricardoespinoza105@gmail.com> Co-authored-by: Mutasem Aldmour <mutasem@n8n.io>
n8n-io · Nov 17, 2023 · 2d03901 · 2d03901
1 parent b66b8c1
commit 2d03901
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 77 deletions.
diff --git a/cypress/e2e/27-opt-in-trial-banner.cy.ts b/cypress/e2e/27-opt-in-trial-banner.cy.ts
@@ -64,4 +64,20 @@ describe('BannerStack', { disableAutoLogin: true }, () => {
 
 		mainSidebar.actions.signout();
 	});
+
+	it('Should show admin button', () => {
+		cy.intercept('GET', '/rest/settings', (req) => {
+			req.on('response', (res) => {
+				res.send({
+					data: { ...res.body.data, deployment: { type: 'cloud' }, n8nMetadata: { userId: 1 } },
+				});
+			});
+		}).as('loadSettings');
+
+		cy.signin({ email: INSTANCE_OWNER.email, password: INSTANCE_OWNER.password });
+
+		cy.visit(workflowPage.url);
+
+		mainSidebar.getters.adminPanel().should('be.visible');
+	});
 });
diff --git a/cypress/pages/sidebar/main-sidebar.ts b/cypress/pages/sidebar/main-sidebar.ts
@@ -12,6 +12,7 @@ export class MainSidebar extends BasePage {
 		workflows: () => this.getters.menuItem('Workflows'),
 		credentials: () => this.getters.menuItem('Credentials'),
 		executions: () => this.getters.menuItem('Executions'),
+		adminPanel: () => this.getters.menuItem('Admin Panel'),
 		userMenu: () => cy.get('div[class="action-dropdown-container"]'),
 		logo: () => cy.getByTestId('n8n-logo'),
 	};

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
@@ -60,8 +60,6 @@ import {
 } from '@/stores';
 import { useHistoryHelper } from '@/composables/useHistoryHelper';
 import { useRoute } from 'vue-router';
-import type { ExternalHooks } from '@/types';
-import type { PartialDeep } from 'type-fest';
 import { runExternalHook } from '@/utils';
 
 export default defineComponent({
@@ -136,19 +134,10 @@ export default defineComponent({
 			}
 		},
 		async initializeHooks(): Promise<void> {
-			const hooksImports = [];
-
 			if (this.settingsStore.isCloudDeployment) {
-				hooksImports.push(
-					import('./hooks/cloud').then(
-						({ n8nCloudHooks }: { n8nCloudHooks: PartialDeep<ExternalHooks> }) => {
-							extendExternalHooks(n8nCloudHooks);
-						},
-					),
-				);
+				const { n8nCloudHooks } = await import('@/hooks/cloud');
+				extendExternalHooks(n8nCloudHooks);
 			}
-
-			await Promise.allSettled(hooksImports);
 		},
 		async onAfterAuthenticate() {
 			if (this.onAfterAuthenticateInitialized) {
@@ -160,7 +149,6 @@ export default defineComponent({
 			}
 
 			await Promise.all([
-				this.initializeCloudData(),
 				this.initializeSourceControl(),
 				this.initializeTemplates(),
 				this.initializeNodeTranslationHeaders(),
@@ -172,7 +160,9 @@ export default defineComponent({
 	async mounted() {
 		this.logHiringBanner();
 
+		await this.settingsStore.initialize();
 		await this.initializeHooks();
+		await this.initializeCloudData();
 
 		void this.checkForNewVersions();
 		void this.onAfterAuthenticate();

diff --git 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
@@ -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<ExternalHooks> = {
 	app: {
 		mount: [
-			() => {
-				hooksAddAdminIcon();
-			},
 			() => {
 				hooksAddFakeDoorFeatures();
 			},
@@ -43,9 +40,6 @@ export const n8nCloudHooks: PartialDeep<ExternalHooks> = {
 				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
diff --git a/packages/editor-ui/src/hooks/utils/hooksAddAutoLoginToAdminPanelButton.ts b/packages/editor-ui/src/hooks/utils/hooksAddAutoLoginToAdminPanelButton.ts
diff --git 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/router.ts b/packages/editor-ui/src/router.ts
@@ -897,7 +897,6 @@ router.beforeEach(async (to, from, next) => {
 
 	const settingsStore = useSettingsStore();
 	const usersStore = useUsersStore();
-	await settingsStore.initialize();
 	await usersStore.initialize();
 
 	/**

diff --git 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,
 	};
 });