mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

35
packages/editor-ui/src/views/TemplatesCollectionView.vue
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) {

58
packages/editor-ui/src/views/TemplatesWorkflowView.vue
View File

@@ -17,7 +17,7 @@
data-test-id="use-template-button"
:label="$locale.baseText('template.buttons.useThisWorkflowButton')"
size="large"
@click="openTemplateSetup(template.id, $event)"
@click="openTemplateSetup(templateId, $event)"
/>
<n8n-loading :loading="!template" :rows="1" variant="button" />
</div>
@@ -63,12 +63,12 @@ import TemplateDetails from '@/components/TemplateDetails.vue';
import TemplatesView from './TemplatesView.vue';
import WorkflowPreview from '@/components/WorkflowPreview.vue';
import type { ITemplatesWorkflow, ITemplatesWorkflowFull } from '@/Interface';
import type { ITemplatesWorkflowFull } from '@/Interface';
import { workflowHelpers } from '@/mixins/workflowHelpers';
import { setPageTitle } from '@/utils/htmlUtils';
import { VIEWS } from '@/constants';
import { useTemplatesStore } from '@/stores/templates.store';
import { usePostHog } from '@/stores/posthog.store';
import { openTemplateCredentialSetup } from '@/utils/templates/templateActions';
import { FeatureFlag, isFeatureFlagEnabled } from '@/utils/featureFlag';
export default defineComponent({
@@ -81,11 +81,13 @@ export default defineComponent({
},
computed: {
...mapStores(useTemplatesStore, usePostHog),
template(): ITemplatesWorkflow | ITemplatesWorkflowFull {
return this.templatesStore.getTemplateById(this.templateId);
template(): ITemplatesWorkflowFull | null {
return this.templatesStore.getFullTemplateById(this.templateId);
},
templateId() {
return this.$route.params.id;
return Array.isArray(this.$route.params.id)
? this.$route.params.id[0]
: this.$route.params.id;
},
},
data() {
@@ -96,35 +98,25 @@ export default defineComponent({
};
},
methods: {
openTemplateSetup(id: string, e: PointerEvent) {
const telemetryPayload = {
source: 'workflow',
template_id: id,
wf_template_repo_session_id: this.templatesStore.currentSessionId,
};
async openTemplateSetup(id: string, e: PointerEvent) {
if (!isFeatureFlagEnabled(FeatureFlag.templateCredentialsSetup)) {
const telemetryPayload = {
source: 'workflow',
template_id: id,
wf_template_repo_session_id: this.templatesStore.currentSessionId,
};
void this.$externalHooks().run('templatesWorkflowView.openWorkflow', telemetryPayload);
this.$telemetry.track('User inserted workflow template', telemetryPayload, {
withPostHog: true,
});
if (isFeatureFlagEnabled(FeatureFlag.templateCredentialsSetup)) {
if (e.metaKey || e.ctrlKey) {
const route = this.$router.resolve({ name: VIEWS.TEMPLATE_SETUP, params: { id } });
window.open(route.href, '_blank');
return;
} else {
void this.$router.push({ name: VIEWS.TEMPLATE_SETUP, params: { id } });
}
} else {
if (e.metaKey || e.ctrlKey) {
const route = this.$router.resolve({ name: VIEWS.TEMPLATE_IMPORT, params: { id } });
window.open(route.href, '_blank');
return;
} else {
void this.$router.push({ name: VIEWS.TEMPLATE_IMPORT, params: { id } });
}
this.$telemetry.track('User inserted workflow template', telemetryPayload, {
withPostHog: true,
});
await this.$externalHooks().run('templatesWorkflowView.openWorkflow', telemetryPayload);
}
await openTemplateCredentialSetup({
router: this.$router,
templateId: id,
inNewBrowserTab: e.metaKey || e.ctrlKey,
});
},
onHidePreview() {
this.showPreview = false;