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.
This commit is contained in:
Ricardo Espinoza 2023-12-21 09:06:54 -05:00 committed by GitHub
parent 5f27c20a00
commit e9c7fd7397
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 134 additions and 93 deletions

119
cypress/e2e/27-cloud.cy.ts Normal file
View file

@ -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');
});
});
});

View file

@ -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');
});
});

View file

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

View file

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

View file

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

View file

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

View file

@ -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() {