fix: Show public API upgrade CTA when feature is not enabled (#8109)

## Summary
> Describe what the PR does and how to test. Photos and videos are
recommended.

Shows the public API upgrade CTA when the feature is not enabled. Now
trialing users in cloud would see the API on the settings menu and can
upgrade from there.

When public API feature disabled: 

<img width="1863" alt="image"
src="https://github.com/n8n-io/n8n/assets/16496553/a9052f6b-151f-4ebb-80df-5ff2fa643e85">

When public API feature enabled with no API key:

<img width="1861" alt="image"
src="https://github.com/n8n-io/n8n/assets/16496553/fdfe7296-425e-4410-a8cb-f25535bc9df4">

When public API feature enabled with API key:

<img width="1423" alt="image"
src="https://github.com/n8n-io/n8n/assets/16496553/a8426cbf-ff73-43c4-8c60-b00274bca46e">



## Related tickets and issues
[> Include links to **Linear ticket** or Github issue or Community forum
post. Important in order to close *automatically* and provide context to
r](https://linear.app/n8n/issue/ADO-1282/feature-api-page-missing-for-trial-users)eviewers.



## Review / Merge checklist
- [x] PR title and summary are descriptive. **Remember, the title
automatically goes into the changelog. Use `(no-changelog)` otherwise.**
([conventions](https://github.com/n8n-io/n8n/blob/master/.github/pull_request_title_conventions.md))
- [x] Tests included.
> A bug is not considered fixed, unless a test is added to prevent it
from happening again.
   > A feature is not complete without tests.

cypress/e2e/27-cloud.cy.ts

@@ -0,0 +1,119 @@
+import {
+	BannerStack,
+	MainSidebar,
+	WorkflowPage,
+	visitPublicApiPage,
+	getPublicApiUpgradeCTA,
+} from '../pages';
+import planData from '../fixtures/Plan_data_opt_in_trial.json';
+import { INSTANCE_OWNER } from '../constants';
+
+const mainSidebar = new MainSidebar();
+const bannerStack = new BannerStack();
+const workflowPage = new WorkflowPage();
+
+describe('Cloud', { disableAutoLogin: true }, () => {
+	before(() => {
+		const now = new Date();
+		const fiveDaysFromNow = new Date(now.getTime() + 5 * 24 * 60 * 60 * 1000);
+		planData.expirationDate = fiveDaysFromNow.toJSON();
+	});
+
+	describe('BannerStack', () => {
+		it('should render trial banner for opt-in cloud user', () => {
+			cy.intercept('GET', '/rest/admin/cloud-plan', {
+				body: planData,
+			}).as('getPlanData');
+
+			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);
+
+			cy.wait('@getPlanData');
+
+			bannerStack.getters.banner().should('be.visible');
+
+			mainSidebar.actions.signout();
+
+			bannerStack.getters.banner().should('not.be.visible');
+
+			cy.signin({ email: INSTANCE_OWNER.email, password: INSTANCE_OWNER.password });
+
+			cy.visit(workflowPage.url);
+
+			bannerStack.getters.banner().should('be.visible');
+
+			mainSidebar.actions.signout();
+		});
+
+		it('should not render opt-in-trial banner for non cloud deployment', () => {
+			cy.intercept('GET', '/rest/settings', (req) => {
+				req.on('response', (res) => {
+					res.send({
+						data: { ...res.body.data, deployment: { type: 'default' } },
+					});
+				});
+			}).as('loadSettings');
+
+			cy.signin({ email: INSTANCE_OWNER.email, password: INSTANCE_OWNER.password });
+
+			cy.visit(workflowPage.url);
+
+			bannerStack.getters.banner().should('not.be.visible');
+
+			mainSidebar.actions.signout();
+		});
+	});
+
+	describe('Admin Home', () => {
+		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');
+		});
+	});
+
+	describe('Public API', () => {
+		it('Should show upgrade CTA for Public API if user is trialing', () => {
+			cy.intercept('GET', '/rest/admin/cloud-plan', {
+				body: planData,
+			}).as('getPlanData');
+
+			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 });
+
+			visitPublicApiPage();
+
+			getPublicApiUpgradeCTA().should('be.visible');
+		});
+	});
+});

cypress/e2e/27-opt-in-trial-banner.cy.ts

@@ -1,83 +0,0 @@
-import { BannerStack, MainSidebar, WorkflowPage } from '../pages';
-import planData from '../fixtures/Plan_data_opt_in_trial.json';
-import { INSTANCE_OWNER } from '../constants';
-
-const mainSidebar = new MainSidebar();
-const bannerStack = new BannerStack();
-const workflowPage = new WorkflowPage();
-
-describe('BannerStack', { disableAutoLogin: true }, () => {
-	before(() => {
-		const now = new Date();
-		const fiveDaysFromNow = new Date(now.getTime() + 5 * 24 * 60 * 60 * 1000);
-		planData.expirationDate = fiveDaysFromNow.toJSON();
-	});
-
-	it('should render trial banner for opt-in cloud user', () => {
-		cy.intercept('GET', '/rest/admin/cloud-plan', {
-			body: planData,
-		}).as('getPlanData');
-
-		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);
-
-		cy.wait('@getPlanData');
-
-		bannerStack.getters.banner().should('be.visible');
-
-		mainSidebar.actions.signout();
-
-		bannerStack.getters.banner().should('not.be.visible');
-
-		cy.signin({ email: INSTANCE_OWNER.email, password: INSTANCE_OWNER.password });
-
-		cy.visit(workflowPage.url);
-
-		bannerStack.getters.banner().should('be.visible');
-
-		mainSidebar.actions.signout();
-	});
-
-	it('should not render opt-in-trial banner for non cloud deployment', () => {
-		cy.intercept('GET', '/rest/settings', (req) => {
-			req.on('response', (res) => {
-				res.send({
-					data: { ...res.body.data, deployment: { type: 'default' } },
-				});
-			});
-		}).as('loadSettings');
-
-		cy.signin({ email: INSTANCE_OWNER.email, password: INSTANCE_OWNER.password });
-
-		cy.visit(workflowPage.url);
-
-		bannerStack.getters.banner().should('not.be.visible');
-
-		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');
-	});
-});

cypress/fixtures/Plan_data_opt_in_trial.json

@@ -13,8 +13,7 @@
 		"feat:advancedExecutionFilters": true,
 		"quota:users": -1,
 		"quota:maxVariables": -1,
-		"feat:variables": true,
+		"feat:variables": true
-		"feat:apiDisabled": true
 	},
 	"metadata": {
 		"version": "v1",

cypress/pages/index.ts

@@ -12,3 +12,4 @@ export * from './workflow-executions-tab';
 export * from './signin';
 export * from './workflow-history';
 export * from './workerView';
+export * from './settings-public-api';

cypress/pages/settings-public-api.ts

@@ -0,0 +1,5 @@
+export const getPublicApiUpgradeCTA = () => cy.getByTestId('public-api-upgrade-cta');
+
+export const visitPublicApiPage = () => {
+	cy.visit('/settings/api');
+};

packages/editor-ui/src/router.ts

@@ -517,13 +517,7 @@ export const routes = [
 					settingsView: SettingsApiView,
 				},
 				meta: {
-					middleware: ['authenticated', 'custom'],
+					middleware: ['authenticated'],
-					middlewareOptions: {
-						custom: () => {
-							const settingsStore = useSettingsStore();
-							return settingsStore.isPublicApiEnabled;
-						},
-					},
 					telemetry: {
 						pageCategory: 'settings',
 						getProperties(route: RouteLocation) {

packages/editor-ui/src/views/SettingsApiView.vue

@@ -64,7 +64,8 @@
 			</div>
 		</div>
 		<n8n-action-box
-			v-else-if="isTrialing"
+			v-else-if="!isPublicApiEnabled && isTrialing"
+			data-test-id="public-api-upgrade-cta"
 			:heading="$locale.baseText('settings.api.trial.upgradePlan.title')"
 			:description="$locale.baseText('settings.api.trial.upgradePlan.description')"
 			:buttonText="$locale.baseText('settings.api.trial.upgradePlan.cta')"
@@ -120,6 +121,8 @@ export default defineComponent({
 		};
 	},
 	mounted() {
+		if (!this.isPublicApiEnabled) return;
+
 		void this.getApiKey();
 		const baseUrl = this.rootStore.baseUrl;
 		const apiPath = this.settingsStore.publicApiPath;
@@ -140,6 +143,9 @@ export default defineComponent({
 		isLoadingCloudPlans(): boolean {
 			return this.cloudPlanStore.state.loadingPlan;
 		},
+		isPublicApiEnabled(): boolean {
+			return this.settingsStore.isPublicApiEnabled;
+		},
 	},
 	methods: {
 		onUpgrade() {