feat(editor): Open template credential setup from collection (#7882)

Open the template credential setup when using a template from the
collection view.

NOTE! This feature is still behind a feature flag. To test, set:

```js
localStorage.setItem('template-credentials-setup', 'true')
```


https://github.com/n8n-io/n8n/assets/10324676/46ccec7c-5a44-429e-99ad-1c10640e99e5

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

@@ -1,4 +1,9 @@
 import { CredentialsModal, MessageBox } from '../pages/modals';
+import {
+	clickUseWorkflowButtonByTitle,
+	visitTemplateCollectionPage,
+	testData,
+} from '../pages/template-collection';
 import { TemplateCredentialSetupPage } from '../pages/template-credential-setup';
 import { TemplateWorkflowPage } from '../pages/template-workflow';
 import { WorkflowPage } from '../pages/workflow';
@@ -28,6 +33,16 @@ describe('Template credentials setup', () => {
 			.should('be.visible');
 	});
 
+	it('can be opened from template collection page', () => {
+		visitTemplateCollectionPage(testData.ecommerceStarterPack);
+		templateCredentialsSetupPage.actions.enableFeatureFlag();
+		clickUseWorkflowButtonByTitle('Promote new Shopify products on Twitter and Telegram');
+
+		templateCredentialsSetupPage.getters
+			.title(`Setup 'Promote new Shopify products on Twitter and Telegram' template`)
+			.should('be.visible');
+	});
+
 	it('can be opened with a direct url', () => {
 		templateCredentialsSetupPage.actions.visit(testTemplate.id);
 

cypress/pages/template-collection.ts

@@ -0,0 +1,33 @@
+export function visitTemplateCollectionPage(withFixture: Fixture) {
+	cy.intercept(
+		'GET',
+		`https://api.n8n.io/api/templates/collections/${testData.ecommerceStarterPack.id}`,
+		{
+			fixture: withFixture.fixture,
+		},
+	).as('getTemplateCollection');
+
+	cy.visit(`/collections/${withFixture.id}`);
+
+	cy.wait('@getTemplateCollection');
+}
+
+export function clickUseWorkflowButtonByTitle(workflowTitle: string) {
+	cy.getByTestId('template-card')
+		.contains('[data-test-id=template-card]', workflowTitle)
+		.realHover({ position: 'center' })
+		.findChildByTestId('use-workflow-button')
+		.click({ force: true });
+}
+
+export type Fixture = {
+	id: number;
+	fixture: string;
+};
+
+export const testData = {
+	ecommerceStarterPack: {
+		id: 1,
+		fixture: 'Ecommerce_starter_pack_template_collection.json',
+	},
+};