feat(editor): Clean up lead enrichment experiment (no-changelog) (#9572)
This commit is contained in:
@@ -157,15 +157,6 @@
|
||||
/>
|
||||
</template>
|
||||
</ModalRoot>
|
||||
<ModalRoot :name="SUGGESTED_TEMPLATES_PREVIEW_MODAL_KEY">
|
||||
<template #default="{ modalName, data }">
|
||||
<SuggestedTemplatesPreviewModal
|
||||
data-test-id="suggested-templates-preview-modal"
|
||||
:modal-name="modalName"
|
||||
:data="data"
|
||||
/>
|
||||
</template>
|
||||
</ModalRoot>
|
||||
|
||||
<ModalRoot :name="SETUP_CREDENTIALS_MODAL_KEY">
|
||||
<template #default="{ modalName, data }">
|
||||
@@ -210,7 +201,6 @@ import {
|
||||
DEBUG_PAYWALL_MODAL_KEY,
|
||||
MFA_SETUP_MODAL_KEY,
|
||||
WORKFLOW_HISTORY_VERSION_RESTORE,
|
||||
SUGGESTED_TEMPLATES_PREVIEW_MODAL_KEY,
|
||||
SETUP_CREDENTIALS_MODAL_KEY,
|
||||
GENERATE_CURL_MODAL_KEY,
|
||||
} from '@/constants';
|
||||
@@ -245,7 +235,6 @@ import SourceControlPullModal from '@/components/SourceControlPullModal.ee.vue';
|
||||
import ExternalSecretsProviderModal from '@/components/ExternalSecretsProviderModal.ee.vue';
|
||||
import DebugPaywallModal from '@/components/DebugPaywallModal.vue';
|
||||
import WorkflowHistoryVersionRestoreModal from '@/components/WorkflowHistory/WorkflowHistoryVersionRestoreModal.vue';
|
||||
import SuggestedTemplatesPreviewModal from '@/components/SuggestedTemplates/SuggestedTemplatesPreviewModal.vue';
|
||||
import SetupWorkflowCredentialsModal from '@/components/SetupWorkflowCredentialsModal/SetupWorkflowCredentialsModal.vue';
|
||||
|
||||
export default defineComponent({
|
||||
@@ -281,7 +270,6 @@ export default defineComponent({
|
||||
DebugPaywallModal,
|
||||
MfaSetupModal,
|
||||
WorkflowHistoryVersionRestoreModal,
|
||||
SuggestedTemplatesPreviewModal,
|
||||
SetupWorkflowCredentialsModal,
|
||||
},
|
||||
data: () => ({
|
||||
@@ -314,7 +302,6 @@ export default defineComponent({
|
||||
DEBUG_PAYWALL_MODAL_KEY,
|
||||
MFA_SETUP_MODAL_KEY,
|
||||
WORKFLOW_HISTORY_VERSION_RESTORE,
|
||||
SUGGESTED_TEMPLATES_PREVIEW_MODAL_KEY,
|
||||
SETUP_CREDENTIALS_MODAL_KEY,
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -1,107 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
import { computed } from 'vue';
|
||||
import { useUsersStore } from '@/stores/users.store';
|
||||
import { useUIStore } from '@/stores/ui.store';
|
||||
import { VIEWS } from '@/constants';
|
||||
import type { ITemplatesCollection, IUser } from '@/Interface';
|
||||
import SuggestedTemplatesSection from '@/components/SuggestedTemplates/SuggestedTemplatesSection.vue';
|
||||
|
||||
const usersStore = useUsersStore();
|
||||
const uiStore = useUIStore();
|
||||
const router = useRouter();
|
||||
|
||||
const currentUser = computed(() => usersStore.currentUser);
|
||||
|
||||
const upperCaseFirstName = (user: IUser | null) => {
|
||||
if (!user?.firstName) return;
|
||||
return user.firstName?.charAt(0)?.toUpperCase() + user?.firstName?.slice(1);
|
||||
};
|
||||
|
||||
const defaultSection = computed(() => {
|
||||
if (!uiStore.suggestedTemplates) {
|
||||
return null;
|
||||
}
|
||||
return uiStore.suggestedTemplates.sections[0];
|
||||
});
|
||||
|
||||
const suggestedTemplates = computed(() => {
|
||||
const carouselCollections = Array<ITemplatesCollection>();
|
||||
if (!uiStore.suggestedTemplates || !defaultSection.value) {
|
||||
return carouselCollections;
|
||||
}
|
||||
defaultSection.value.workflows.forEach((workflow, index) => {
|
||||
carouselCollections.push({
|
||||
id: index,
|
||||
name: workflow.title,
|
||||
workflows: [{ id: index }],
|
||||
nodes: workflow.nodes,
|
||||
});
|
||||
});
|
||||
return carouselCollections;
|
||||
});
|
||||
|
||||
function openCanvas() {
|
||||
uiStore.nodeViewInitialized = false;
|
||||
void router.push({ name: VIEWS.NEW_WORKFLOW });
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
currentUser,
|
||||
openCanvas,
|
||||
suggestedTemplates,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="$style.container" data-test-id="suggested-templates-page-container">
|
||||
<div :class="$style.header">
|
||||
<n8n-heading tag="h1" size="2xlarge" class="mb-2xs">
|
||||
{{
|
||||
$locale.baseText('suggestedTemplates.heading', {
|
||||
interpolate: {
|
||||
name: upperCaseFirstName(currentUser) || $locale.baseText('generic.welcome'),
|
||||
},
|
||||
})
|
||||
}}
|
||||
</n8n-heading>
|
||||
<n8n-text
|
||||
size="large"
|
||||
color="text-base"
|
||||
data-test-id="suggested-template-section-description"
|
||||
>
|
||||
{{ defaultSection?.description }}
|
||||
</n8n-text>
|
||||
</div>
|
||||
<div :class="$style.content">
|
||||
<SuggestedTemplatesSection
|
||||
v-for="section in uiStore.suggestedTemplates?.sections"
|
||||
:key="section.title"
|
||||
:section="section"
|
||||
:show-title="false"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<n8n-button
|
||||
:label="$locale.baseText('suggestedTemplates.newWorkflowButton')"
|
||||
type="secondary"
|
||||
size="medium"
|
||||
icon="plus"
|
||||
data-test-id="suggested-templates-new-workflow-button"
|
||||
@click="openCanvas"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-l);
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: var(--spacing-l);
|
||||
}
|
||||
</style>
|
||||
@@ -1,109 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useToast } from '@/composables/useToast';
|
||||
import { useUIStore } from '@/stores/ui.store';
|
||||
import { useUsersStore } from '@/stores/users.store';
|
||||
import { useTelemetry } from '@/composables/useTelemetry';
|
||||
import {
|
||||
SUGGESTED_TEMPLATES_FLAG,
|
||||
SUGGESTED_TEMPLATES_PREVIEW_MODAL_KEY,
|
||||
VIEWS,
|
||||
} from '@/constants';
|
||||
import type { IWorkflowDb, SuggestedTemplatesWorkflowPreview } from '@/Interface';
|
||||
import Modal from '@/components/Modal.vue';
|
||||
import WorkflowPreview from '@/components/WorkflowPreview.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
modalName: string;
|
||||
data: {
|
||||
workflow: SuggestedTemplatesWorkflowPreview;
|
||||
};
|
||||
}>();
|
||||
|
||||
const i18n = useI18n();
|
||||
const router = useRouter();
|
||||
const uiStore = useUIStore();
|
||||
const usersStore = useUsersStore();
|
||||
const toast = useToast();
|
||||
const telemetry = useTelemetry();
|
||||
|
||||
function showConfirmationMessage(event: PointerEvent) {
|
||||
if (event.target instanceof HTMLAnchorElement) {
|
||||
event.preventDefault();
|
||||
// @ts-expect-error Additional parameters are not necessary for this function
|
||||
toast.showMessage({
|
||||
title: i18n.baseText('suggestedTemplates.notification.confirmation.title'),
|
||||
message: i18n.baseText('suggestedTemplates.notification.confirmation.message'),
|
||||
type: 'success',
|
||||
});
|
||||
telemetry.track(
|
||||
'User wants to be notified once template is ready',
|
||||
{ templateName: props.data.workflow.title, email: usersStore.currentUser?.email },
|
||||
{
|
||||
withPostHog: true,
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function openCanvas() {
|
||||
uiStore.setNotificationsForView(VIEWS.WORKFLOW, [
|
||||
{
|
||||
title: i18n.baseText('suggestedTemplates.notification.comingSoon.title'),
|
||||
message: i18n.baseText('suggestedTemplates.notification.comingSoon.message'),
|
||||
type: 'info',
|
||||
duration: 10000,
|
||||
onClick: showConfirmationMessage,
|
||||
},
|
||||
]);
|
||||
localStorage.setItem(SUGGESTED_TEMPLATES_FLAG, 'false');
|
||||
uiStore.deleteSuggestedTemplates();
|
||||
uiStore.closeModal(SUGGESTED_TEMPLATES_PREVIEW_MODAL_KEY);
|
||||
uiStore.nodeViewInitialized = false;
|
||||
void router.push({ name: VIEWS.NEW_WORKFLOW });
|
||||
telemetry.track(
|
||||
'User clicked Use Template button',
|
||||
{ templateName: props.data.workflow.title },
|
||||
{ withPostHog: true },
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal width="900px" height="640px" :name="props.modalName">
|
||||
<template #header>
|
||||
<n8n-heading tag="h2" size="xlarge">
|
||||
{{ $props.data.workflow.title }}
|
||||
</n8n-heading>
|
||||
</template>
|
||||
<template #content>
|
||||
<WorkflowPreview
|
||||
:loading="false"
|
||||
:workflow="$props.data.workflow.preview as IWorkflowDb"
|
||||
:can-open-n-d-v="false"
|
||||
:hide-node-issues="true"
|
||||
@close="uiStore.closeModal(SUGGESTED_TEMPLATES_PREVIEW_MODAL_KEY)"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div>
|
||||
<n8n-text> {{ $props.data.workflow.description }} </n8n-text>
|
||||
</div>
|
||||
<div :class="$style.footerButtons">
|
||||
<n8n-button
|
||||
float="right"
|
||||
data-test-id="use-template-button"
|
||||
:label="$locale.baseText('suggestedTemplates.modal.button.label')"
|
||||
@click="openCanvas"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<style module lang="scss">
|
||||
.footerButtons {
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
</style>
|
||||
@@ -1,82 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { type PropType, computed } from 'vue';
|
||||
import { useUIStore } from '@/stores/ui.store';
|
||||
import { useTelemetry } from '@/composables/useTelemetry';
|
||||
import type { ITemplatesCollection, ITemplatesNode, SuggestedTemplatesSection } from '@/Interface';
|
||||
import TemplatesInfoCarousel from '@/components/TemplatesInfoCarousel.vue';
|
||||
import { SUGGESTED_TEMPLATES_PREVIEW_MODAL_KEY } from '@/constants';
|
||||
|
||||
const uiStore = useUIStore();
|
||||
const telemetry = useTelemetry();
|
||||
|
||||
const props = defineProps({
|
||||
section: {
|
||||
type: Object as PropType<SuggestedTemplatesSection>,
|
||||
required: true,
|
||||
},
|
||||
title: {
|
||||
type: String as PropType<string>,
|
||||
required: false,
|
||||
},
|
||||
showTitle: {
|
||||
type: Boolean as PropType<boolean>,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const sectionTemplates = computed(() => {
|
||||
const carouselCollections = Array<ITemplatesCollection>();
|
||||
if (!uiStore.suggestedTemplates) {
|
||||
return carouselCollections;
|
||||
}
|
||||
props.section.workflows.forEach((workflow, index) => {
|
||||
carouselCollections.push({
|
||||
id: index,
|
||||
name: workflow.title,
|
||||
workflows: [{ id: index }],
|
||||
nodes: workflow.nodes as ITemplatesNode[],
|
||||
});
|
||||
});
|
||||
return carouselCollections;
|
||||
});
|
||||
|
||||
function onOpenCollection({ id }: { event: Event; id: number }) {
|
||||
uiStore.openModalWithData({
|
||||
name: SUGGESTED_TEMPLATES_PREVIEW_MODAL_KEY,
|
||||
data: { workflow: props.section.workflows[id] },
|
||||
});
|
||||
telemetry.track(
|
||||
'User clicked template recommendation',
|
||||
{ templateName: props.section.workflows[id].title },
|
||||
{ withPostHog: true },
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="$style.container" data-test-id="suggested-templates-section-container">
|
||||
<div v-if="showTitle" :class="$style.header">
|
||||
<n8n-text size="large" color="text-base" :bold="true">
|
||||
{{ props.title ?? section.title }}
|
||||
</n8n-text>
|
||||
</div>
|
||||
<div :class="$style.content">
|
||||
<TemplatesInfoCarousel
|
||||
:collections="sectionTemplates"
|
||||
:loading="false"
|
||||
:show-item-count="false"
|
||||
:show-navigation="false"
|
||||
cards-width="24%"
|
||||
@open-collection="onOpenCollection"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-l);
|
||||
}
|
||||
</style>
|
||||
@@ -114,9 +114,6 @@
|
||||
<template #default="{ item, updateItemSize }">
|
||||
<slot :data="item" :update-item-size="updateItemSize" />
|
||||
</template>
|
||||
<template #postListContent>
|
||||
<slot name="postListContent" />
|
||||
</template>
|
||||
</n8n-recycle-scroller>
|
||||
<n8n-datatable
|
||||
v-if="type === 'datatable'"
|
||||
|
||||
Reference in New Issue
Block a user