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:
Ricardo Espinoza
2023-06-05 13:47:06 -04:00
committed by GitHub
parent dc58340eee
commit e95e8de500
21 changed files with 2 additions and 423 deletions

View File

@@ -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,
}),
});

View File

@@ -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>