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
This commit is contained in:
Tomi Turtiainen
2023-11-30 14:09:12 +02:00
committed by GitHub
parent 67702c2485
commit 627ddb91fb
8 changed files with 132 additions and 48 deletions

View File

@@ -69,6 +69,8 @@ import { setPageTitle } from '@/utils/htmlUtils';
import { VIEWS } from '@/constants';
import { useTemplatesStore } from '@/stores/templates.store';
import { usePostHog } from '@/stores/posthog.store';
import { FeatureFlag, isFeatureFlagEnabled } from '@/utils/featureFlag';
import { openTemplateCredentialSetup } from '@/utils/templates/templateActions';
export default defineComponent({
name: 'TemplatesCollectionView',
@@ -80,11 +82,13 @@ export default defineComponent({
},
computed: {
...mapStores(useTemplatesStore, usePostHog),
collection(): null | ITemplatesCollectionFull {
collection(): ITemplatesCollectionFull | null {
return this.templatesStore.getCollectionById(this.collectionId);
},
collectionId(): string {
return this.$route.params.id;
return Array.isArray(this.$route.params.id)
? this.$route.params.id[0]
: this.$route.params.id;
},
collectionWorkflows(): Array<ITemplatesWorkflow | ITemplatesWorkflowFull | null> | null {
if (!this.collection) {
@@ -116,17 +120,24 @@ export default defineComponent({
onOpenTemplate({ event, id }: { event: MouseEvent; id: string }) {
this.navigateTo(event, VIEWS.TEMPLATE, id);
},
onUseWorkflow({ event, id }: { event: MouseEvent; id: string }) {
const telemetryPayload = {
template_id: id,
wf_template_repo_session_id: this.workflowsStore.currentSessionId,
source: 'collection',
};
void this.$externalHooks().run('templatesCollectionView.onUseWorkflow', telemetryPayload);
this.$telemetry.track('User inserted workflow template', telemetryPayload, {
withPostHog: true,
async onUseWorkflow({ event, id }: { event: MouseEvent; id: string }) {
if (!isFeatureFlagEnabled(FeatureFlag.templateCredentialsSetup)) {
const telemetryPayload = {
template_id: id,
wf_template_repo_session_id: this.templatesStore.currentSessionId,
source: 'collection',
};
await this.$externalHooks().run('templatesCollectionView.onUseWorkflow', telemetryPayload);
this.$telemetry.track('User inserted workflow template', telemetryPayload, {
withPostHog: true,
});
}
await openTemplateCredentialSetup({
router: this.$router,
templateId: id,
inNewBrowserTab: event.metaKey || event.ctrlKey,
});
this.navigateTo(event, VIEWS.TEMPLATE_IMPORT, id);
},
navigateTo(e: MouseEvent, page: string, id: string) {
if (e.metaKey || e.ctrlKey) {