feat(editor): Show template credential setup based on feature flag (#7989)

Replace the local storage based feature flag with posthog feature flag.

Also:
- Fix bunch of eslint warnings in posthog store

cypress/e2e/34-template-credentials-setup.cy.ts

@@ -4,12 +4,11 @@ import {
 	visitTemplateCollectionPage,
 	testData,
 } from '../pages/template-collection';
-import { TemplateCredentialSetupPage } from '../pages/template-credential-setup';
+import * as templateCredentialsSetupPage from '../pages/template-credential-setup';
 import { TemplateWorkflowPage } from '../pages/template-workflow';
 import { WorkflowPage } from '../pages/workflow';
 
 const templateWorkflowPage = new TemplateWorkflowPage();
-const templateCredentialsSetupPage = new TemplateCredentialSetupPage();
 const credentialsModal = new CredentialsModal();
 const messageBox = new MessageBox();
 const workflowPage = new WorkflowPage();
@@ -25,7 +24,8 @@ describe('Template credentials setup', () => {
 
 	it('can be opened from template workflow page', () => {
 		templateWorkflowPage.actions.visit(testTemplate.id);
-		templateCredentialsSetupPage.actions.enableFeatureFlag();
+		templateWorkflowPage.getters.useTemplateButton().should('be.visible');
+		templateCredentialsSetupPage.enableTemplateCredentialSetupFeatureFlag();
 		templateWorkflowPage.actions.clickUseThisWorkflowButton();
 
 		templateCredentialsSetupPage.getters
@@ -35,7 +35,7 @@ describe('Template credentials setup', () => {
 
 	it('can be opened from template collection page', () => {
 		visitTemplateCollectionPage(testData.ecommerceStarterPack);
-		templateCredentialsSetupPage.actions.enableFeatureFlag();
+		templateCredentialsSetupPage.enableTemplateCredentialSetupFeatureFlag();
 		clickUseWorkflowButtonByTitle('Promote new Shopify products on Twitter and Telegram');
 
 		templateCredentialsSetupPage.getters
@@ -44,7 +44,7 @@ describe('Template credentials setup', () => {
 	});
 
 	it('can be opened with a direct url', () => {
-		templateCredentialsSetupPage.actions.visit(testTemplate.id);
+		templateCredentialsSetupPage.visitTemplateCredentialSetupPage(testTemplate.id);
 
 		templateCredentialsSetupPage.getters
 			.title(`Setup 'Promote new Shopify products on Twitter and Telegram' template`)
@@ -52,7 +52,7 @@ describe('Template credentials setup', () => {
 	});
 
 	it('has all the elements on page', () => {
-		templateCredentialsSetupPage.actions.visit(testTemplate.id);
+		templateCredentialsSetupPage.visitTemplateCredentialSetupPage(testTemplate.id);
 
 		templateCredentialsSetupPage.getters
 			.title(`Setup 'Promote new Shopify products on Twitter and Telegram' template`)
@@ -83,14 +83,14 @@ describe('Template credentials setup', () => {
 	});
 
 	it('can skip template creation', () => {
-		templateCredentialsSetupPage.actions.visit(testTemplate.id);
+		templateCredentialsSetupPage.visitTemplateCredentialSetupPage(testTemplate.id);
 
 		templateCredentialsSetupPage.getters.skipLink().click();
 		workflowPage.getters.canvasNodes().should('have.length', 3);
 	});
 
 	it('can create credentials and workflow from the template', () => {
-		templateCredentialsSetupPage.actions.visit(testTemplate.id);
+		templateCredentialsSetupPage.visitTemplateCredentialSetupPage(testTemplate.id);
 
 		// Continue button should be disabled if no credentials are created
 		templateCredentialsSetupPage.getters.continueButton().should('be.disabled');

cypress/pages/template-credential-setup.ts

@@ -1,40 +1,35 @@
-import { BasePage } from './base';
-
 export type TemplateTestData = {
 	id: number;
 	fixture: string;
 };
 
-export class TemplateCredentialSetupPage extends BasePage {
-	testData = {
-		simpleTemplate: {
-			id: 1205,
-			fixture: 'Test_Template_1.json',
-		},
-	};
+export const testData = {
+	simpleTemplate: {
+		id: 1205,
+		fixture: 'Test_Template_1.json',
+	},
+};
 
-	getters = {
-		continueButton: () => cy.getByTestId('continue-button'),
-		skipLink: () => cy.get('a:contains("Skip")'),
-		title: (title: string) => cy.get(`h1:contains(${title})`),
-		infoCallout: () => cy.getByTestId('info-callout'),
-		createAppCredentialsButton: (appName: string) =>
-			cy.get(`button:contains("Create new ${appName} credential")`),
-		appCredentialSteps: () => cy.getByTestId('setup-credentials-form-step'),
-		stepHeading: ($el: JQuery<HTMLElement>) =>
-			cy.wrap($el).findChildByTestId('credential-step-heading'),
-		stepDescription: ($el: JQuery<HTMLElement>) =>
-			cy.wrap($el).findChildByTestId('credential-step-description'),
-	};
+export const getters = {
+	continueButton: () => cy.getByTestId('continue-button'),
+	skipLink: () => cy.get('a:contains("Skip")'),
+	title: (title: string) => cy.get(`h1:contains(${title})`),
+	infoCallout: () => cy.getByTestId('info-callout'),
+	createAppCredentialsButton: (appName: string) =>
+		cy.get(`button:contains("Create new ${appName} credential")`),
+	appCredentialSteps: () => cy.getByTestId('setup-credentials-form-step'),
+	stepHeading: ($el: JQuery<HTMLElement>) =>
+		cy.wrap($el).findChildByTestId('credential-step-heading'),
+	stepDescription: ($el: JQuery<HTMLElement>) =>
+		cy.wrap($el).findChildByTestId('credential-step-description'),
+};
 
-	actions = {
-		visit: (templateId: number) => {
-			cy.visit(`/templates/${templateId}/setup`);
-		},
-		enableFeatureFlag: () => {
-			cy.window().then((window) => {
-				window.localStorage.setItem('template-credentials-setup', 'true');
-			});
-		},
-	};
-}
+export const visitTemplateCredentialSetupPage = (templateId: number) => {
+	cy.visit(`/templates/${templateId}/setup`);
+};
+
+export const enableTemplateCredentialSetupFeatureFlag = () => {
+	cy.window().then((win) => {
+		win.featureFlags.override('016_template_credential_setup', true);
+	});
+};

cypress/support/index.ts

@@ -41,6 +41,13 @@ declare global {
 			draganddrop(draggableSelector: string, droppableSelector: string): void;
 			push(type: string, data: unknown): void;
 			shouldNotHaveConsoleErrors(): void;
+			window(): Chainable<
+				AUTWindow & {
+					featureFlags: {
+						override: (feature: string, value: any) => void;
+					};
+				}
+			>;
 		}
 	}
 }