refactor(editor): Remove user activation modal (no-changelog) (#6361)
* Remove user activation modal * remove export from index.ts * Update pnpm-lock.yaml --------- Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>
This commit is contained in:
@@ -91,10 +91,6 @@
|
||||
<ImportCurlModal />
|
||||
</ModalRoot>
|
||||
|
||||
<ModalRoot :name="USER_ACTIVATION_SURVEY_MODAL">
|
||||
<WorkflowSuccessModal />
|
||||
</ModalRoot>
|
||||
|
||||
<ModalRoot :name="COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY">
|
||||
<template #default="{ modalName, activeId, mode }">
|
||||
<CommunityPackageManageConfirmModal
|
||||
@@ -149,7 +145,6 @@ import {
|
||||
IMPORT_CURL_MODAL_KEY,
|
||||
LOG_STREAM_MODAL_KEY,
|
||||
ASK_AI_MODAL_KEY,
|
||||
USER_ACTIVATION_SURVEY_MODAL,
|
||||
VERSION_CONTROL_PUSH_MODAL_KEY,
|
||||
} from '@/constants';
|
||||
|
||||
@@ -175,7 +170,6 @@ import ExecutionsModal from './ExecutionsModal.vue';
|
||||
import ActivationModal from './ActivationModal.vue';
|
||||
import ImportCurlModal from './ImportCurlModal.vue';
|
||||
import WorkflowShareModal from './WorkflowShareModal.ee.vue';
|
||||
import WorkflowSuccessModal from './UserActivationSurveyModal.vue';
|
||||
import EventDestinationSettingsModal from '@/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue';
|
||||
import VersionControlPushModal from '@/components/VersionControlPushModal.ee.vue';
|
||||
|
||||
@@ -205,7 +199,6 @@ export default defineComponent({
|
||||
WorkflowShareModal,
|
||||
ImportCurlModal,
|
||||
EventDestinationSettingsModal,
|
||||
WorkflowSuccessModal,
|
||||
VersionControlPushModal,
|
||||
},
|
||||
data: () => ({
|
||||
@@ -231,7 +224,6 @@ export default defineComponent({
|
||||
WORKFLOW_ACTIVE_MODAL_KEY,
|
||||
IMPORT_CURL_MODAL_KEY,
|
||||
LOG_STREAM_MODAL_KEY,
|
||||
USER_ACTIVATION_SURVEY_MODAL,
|
||||
VERSION_CONTROL_PUSH_MODAL_KEY,
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -1,181 +0,0 @@
|
||||
<template>
|
||||
<Modal
|
||||
width="500px"
|
||||
:title="locale.baseText('userActivationSurveyModal.title')"
|
||||
:eventBus="modalBus"
|
||||
:name="USER_ACTIVATION_SURVEY_MODAL"
|
||||
:center="true"
|
||||
:beforeClose="beforeClosingModal"
|
||||
>
|
||||
<template #content>
|
||||
<div :class="$style.container">
|
||||
<div :class="$style.description">
|
||||
<i18n path="userActivationSurveyModal.description.workflowRan">
|
||||
<template #workflow>
|
||||
<n8n-text :bold="true"> {{ workflowName }} </n8n-text>
|
||||
</template>
|
||||
<template #ranSuccessfully>
|
||||
<n8n-text>
|
||||
{{
|
||||
locale.baseText('userActivationSurveyModal.description.workflowRanSuccessfully')
|
||||
}}
|
||||
</n8n-text>
|
||||
</template>
|
||||
<template #savedTime>
|
||||
<n8n-text>
|
||||
{{ locale.baseText('userActivationSurveyModal.description.savedTime') }}
|
||||
</n8n-text>
|
||||
</template>
|
||||
</i18n>
|
||||
</div>
|
||||
<div :class="$style.form">
|
||||
<n8n-input-label
|
||||
:label="$locale.baseText('userActivationSurveyModal.form.label')"
|
||||
color="text-dark"
|
||||
>
|
||||
<n8n-input
|
||||
type="textarea"
|
||||
:maxlength="FEEDBACK_MAX_LENGTH"
|
||||
:rows="3"
|
||||
v-model="feedback"
|
||||
@input="onInput"
|
||||
data-test-id="activation-feedback-input"
|
||||
/>
|
||||
</n8n-input-label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div :class="$style.modalFooter">
|
||||
<n8n-button
|
||||
size="large"
|
||||
type="secondary"
|
||||
data-test-id="skip-button"
|
||||
:label="locale.baseText('userActivationSurveyModal.form.button.skip')"
|
||||
@click="onSkip"
|
||||
/>
|
||||
<n8n-button
|
||||
:disabled="!hasAnyChanges"
|
||||
@click="onShareFeedback"
|
||||
size="large"
|
||||
float="right"
|
||||
:label="locale.baseText('userActivationSurveyModal.form.button.shareFeedback')"
|
||||
data-test-id="send-activation-feedback-button"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import Modal from '@/components/Modal.vue';
|
||||
import { USER_ACTIVATION_SURVEY_MODAL } from '@/constants';
|
||||
import { useUsersStore } from '@/stores/users.store';
|
||||
|
||||
import confetti from 'canvas-confetti';
|
||||
import { telemetry } from '@/plugins/telemetry';
|
||||
import { i18n as locale } from '@/plugins/i18n';
|
||||
import { Notification } from 'element-ui';
|
||||
import { useWorkflowsStore } from '@/stores/workflows.store';
|
||||
import { createEventBus } from 'n8n-design-system';
|
||||
|
||||
const FEEDBACK_MAX_LENGTH = 300;
|
||||
|
||||
const userStore = useUsersStore();
|
||||
const workflowStore = useWorkflowsStore();
|
||||
|
||||
const hasAnyChanges = ref(false);
|
||||
const feedback = ref('');
|
||||
const modalBus = createEventBus();
|
||||
const workflowName = ref('');
|
||||
|
||||
onMounted(async () => {
|
||||
const currentSettings = getCurrentSettings();
|
||||
try {
|
||||
const { name } = await workflowStore.fetchWorkflow(
|
||||
currentSettings?.firstSuccessfulWorkflowId ?? '',
|
||||
);
|
||||
workflowName.value = name;
|
||||
setTimeout(showConfetti, 500);
|
||||
} catch (e) {}
|
||||
});
|
||||
|
||||
const onShareFeedback = () => {
|
||||
telemetry.track('User responded to activation modal', { response: getFeedback() });
|
||||
showSharedFeedbackSuccess();
|
||||
modalBus.emit('close');
|
||||
};
|
||||
|
||||
const onSkip = () => {
|
||||
modalBus.emit('close');
|
||||
};
|
||||
|
||||
const getCurrentSettings = () => {
|
||||
return userStore.currentUser?.settings;
|
||||
};
|
||||
|
||||
const getFeedback = () => {
|
||||
return feedback.value.slice(0, FEEDBACK_MAX_LENGTH);
|
||||
};
|
||||
|
||||
const beforeClosingModal = async () => {
|
||||
const currentUser = userStore.currentUser;
|
||||
if (currentUser) {
|
||||
try {
|
||||
await userStore.updateUserSettings({ showUserActivationSurvey: false });
|
||||
} catch {
|
||||
showSharedFeedbackError();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const onInput = () => {
|
||||
hasAnyChanges.value = true;
|
||||
};
|
||||
|
||||
const showSharedFeedbackSuccess = () => {
|
||||
Notification.success({
|
||||
title: locale.baseText('userActivationSurveyModal.sharedFeedback.success'),
|
||||
message: '',
|
||||
position: 'bottom-right',
|
||||
});
|
||||
};
|
||||
|
||||
const showSharedFeedbackError = () => {
|
||||
Notification.error({
|
||||
title: locale.baseText('userActivationSurveyModal.sharedFeedback.error'),
|
||||
message: '',
|
||||
position: 'bottom-right',
|
||||
});
|
||||
};
|
||||
|
||||
const showConfetti = () => {
|
||||
void confetti({
|
||||
particleCount: 200,
|
||||
spread: 100,
|
||||
origin: { y: 0.6 },
|
||||
zIndex: 2050,
|
||||
colors: ['5C4EC2', 'D7E6F1', 'FF9284', '8D7FED', 'B8AFF9', 'FF6D5A'],
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style module lang="scss">
|
||||
.form {
|
||||
margin-top: var(--spacing-l);
|
||||
}
|
||||
|
||||
.description > * {
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
.container > * {
|
||||
margin-bottom: var(--spacing-s);
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user