From 42742de8764c4b27c4a0a6607198649d4033b84f Mon Sep 17 00:00:00 2001 From: Oliver Trajceski Date: Sat, 11 Dec 2021 17:38:16 +0100 Subject: [PATCH] :zap: Add Value Survey (#2499) * N8N-2619 Value Survey Front-end * N8N-2619 Added Contact Prompt Modal and logic * N8N-2619 Added Link to Toast Message on Successful submitting ValueSurvey * N8N-2619 Updated TypeForm URL in ValueSurvey Success Toast * N8N-2619 Fixed Typo placeholder for ValueSurvey and ContactPrompt Modal * N8N-2619 Fixed Toast not close automatically in ValueSurvey, Make part of the title bold, Changed Font-sizes on Value Survey * N8N-2619 Fixed Close Button on ValueSurvey, Vertical Allignment for Questions in ValueSurvey Drawer * N8N-2619 Make Value Survey with static height * N8N-2619 Fixed Telemetry Events on closing ValueSurvey * N8N-2619 Updated N8NPrompt Interface, Added Dynamic Title and Description on ContactPrompt Modal * N8N-2619 Reversed Answers in ValueSurveyModal * N8N-2619 Added Telemetry Event on user close ValueSurvey on second Question * N8N-2619 Re-work, Optimized, Simplify the code after technical review * N8N-2619 Fixed If else statement in openUserPromptsIfPossible * N8N-2619 Change Text under Email Box - ValueSurvey, ContactPrompt, Added new Telemetary Event on ValueSurvey Open, Fixed Toast to close aftet 15s * N8N-2619 Change ContactPrompt Modal to use Atoms like N8N-Heading and N8N-Text * N8N-2619 Change Design & Logic on ValueSurvey - When to open * N8N-2619 Updated Value Survey with new Telemetry Events (Refactor), Simplified functions, Added Atoms in ValueSurvey + ContactPrompt * N8N-2619 Refactor in Interfaces, Updated/Refactor Getters and Vuex store props * N8N-2619 Defined IN8nValueSurveyData interface * N8N-2619 Disabled Keyboard shortcuts to be activated on typing in ValueSurvey Input field, Fire an event on Saving WF from Menu and with shorcut, Make Drawer keep-alive * N8N-2619 Added Atoms in Value Survey Modal (buttons), Rework css * N8N-2619 Added Responses on ValueSurvey Submit * N8N-2619 Added Response for SubmittingContactInfo * N8N-2619 Added loading state for buttons / ValueSurvey * N8N-2619 Changed ValueSurvey and ContactPrompt to support enter key on submit, Simplifed closeDialog Function, Changed css for button in ValueSurvey, Prevent showing the Modals if Saving WF fails, Add Debouncing on showing prompt * N8N-2619 Added IsTelemetryEnabled Getter in Vuex.store * N8N-2619 Created/Added N8N-SquareButton to Design-system * N8N-2619 Change Promise in MainSideBar with Async/Await function, Nitpick simpliefied * N8N-2619 Update the text under the input fields * N8N-2619 Update the text in ContactPrompt Modal * N8N-2619 Allign Send button on ValueSurvey Modal * N8N-2619 Fixed Input in ValueSurvey Modal * N8N-2619 Check if the workflow is saving * N8N-2619 Check if WF is saving to allowed performs fetchPromptsData * N8N-2619 Hotfix * N8N-2619 Fixed ValueSurvey, Updated onSaveButtonClick function, Created onSaveKeyboardShortcut function in NodeView * N8N-2619 Rework css module classes for ValueSurvey, Simplified * N8N-2619 Simplified N8N-SquareButton Component, removed dead code * N8N-2619 Added Breakpoints for Mobile/Tablet View * N8N-2619 Formatting fix * N8N-2619 Update css for mobile/tablet, change promises to asyn/await functions in ContactPrompt and ValueSurvey, Added isActive prop to ValueSurvey * N8N-2619 Update TEMPLATE_BASE_URL to production --- .../components/N8nHeading/Heading.stories.js | 2 +- .../src/components/N8nHeading/Heading.vue | 2 +- .../N8nSquareButton/SquareButton.stories.js | 27 ++ .../N8nSquareButton/SquareButton.vue | 43 +++ .../src/components/N8nSquareButton/index.js | 3 + .../src/components/N8nText/Text.stories.js | 2 +- .../src/components/N8nText/Text.vue | 2 +- .../design-system/src/components/index.js | 2 + packages/editor-ui/src/Interface.ts | 16 + packages/editor-ui/src/api/helpers.ts | 4 + packages/editor-ui/src/api/settings.ts | 17 +- .../src/components/ContactPromptModal.vue | 128 ++++++++ .../components/MainHeader/WorkflowDetails.vue | 7 +- .../editor-ui/src/components/MainSidebar.vue | 3 +- .../editor-ui/src/components/ModalDrawer.vue | 15 +- packages/editor-ui/src/components/Modals.vue | 22 +- .../editor-ui/src/components/ValueSurvey.vue | 283 ++++++++++++++++++ .../src/components/WorkflowActivator.vue | 1 + packages/editor-ui/src/constants.ts | 4 + packages/editor-ui/src/modules/settings.ts | 47 ++- packages/editor-ui/src/modules/ui.ts | 8 +- packages/editor-ui/src/plugins/components.ts | 2 + packages/editor-ui/src/store.ts | 4 + packages/editor-ui/src/views/NodeView.vue | 6 +- 24 files changed, 634 insertions(+), 16 deletions(-) create mode 100644 packages/design-system/src/components/N8nSquareButton/SquareButton.stories.js create mode 100644 packages/design-system/src/components/N8nSquareButton/SquareButton.vue create mode 100644 packages/design-system/src/components/N8nSquareButton/index.js create mode 100644 packages/editor-ui/src/components/ContactPromptModal.vue create mode 100644 packages/editor-ui/src/components/ValueSurvey.vue diff --git a/packages/design-system/src/components/N8nHeading/Heading.stories.js b/packages/design-system/src/components/N8nHeading/Heading.stories.js index 4a1ac65e8..055a48c37 100644 --- a/packages/design-system/src/components/N8nHeading/Heading.stories.js +++ b/packages/design-system/src/components/N8nHeading/Heading.stories.js @@ -13,7 +13,7 @@ export default { color: { control: { type: 'select', - options: ['primary', 'text-dark', 'text-base', 'text-light'], + options: ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight'], }, }, }, diff --git a/packages/design-system/src/components/N8nHeading/Heading.vue b/packages/design-system/src/components/N8nHeading/Heading.vue index e4cd0bca0..3a66b3be0 100644 --- a/packages/design-system/src/components/N8nHeading/Heading.vue +++ b/packages/design-system/src/components/N8nHeading/Heading.vue @@ -23,7 +23,7 @@ export default { }, color: { type: String, - validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light'].includes(value), + validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight'].includes(value), }, }, methods: { diff --git a/packages/design-system/src/components/N8nSquareButton/SquareButton.stories.js b/packages/design-system/src/components/N8nSquareButton/SquareButton.stories.js new file mode 100644 index 000000000..0adf7824c --- /dev/null +++ b/packages/design-system/src/components/N8nSquareButton/SquareButton.stories.js @@ -0,0 +1,27 @@ +import N8nSquareButton from './SquareButton.vue'; +import { action } from '@storybook/addon-actions'; + +export default { + title: 'Atoms/SquareButton', + component: N8nSquareButton, + argTypes: { + label: { + control: 'text', + }, + }, +}; + +const methods = { + onClick: action('click'), +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nSquareButton, + }, + template: '', + methods, +}); + +export const SquareButton = Template.bind({}); diff --git a/packages/design-system/src/components/N8nSquareButton/SquareButton.vue b/packages/design-system/src/components/N8nSquareButton/SquareButton.vue new file mode 100644 index 000000000..998a8636e --- /dev/null +++ b/packages/design-system/src/components/N8nSquareButton/SquareButton.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/packages/design-system/src/components/N8nSquareButton/index.js b/packages/design-system/src/components/N8nSquareButton/index.js new file mode 100644 index 000000000..cf1617cef --- /dev/null +++ b/packages/design-system/src/components/N8nSquareButton/index.js @@ -0,0 +1,3 @@ +import N8nSquareButton from './SquareButton.vue'; + +export default N8nSquareButton; diff --git a/packages/design-system/src/components/N8nText/Text.stories.js b/packages/design-system/src/components/N8nText/Text.stories.js index 6a048685b..8f017e461 100644 --- a/packages/design-system/src/components/N8nText/Text.stories.js +++ b/packages/design-system/src/components/N8nText/Text.stories.js @@ -13,7 +13,7 @@ export default { color: { control: { type: 'select', - options: ['primary', 'text-dark', 'text-base', 'text-light'], + options: ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight'], }, }, }, diff --git a/packages/design-system/src/components/N8nText/Text.vue b/packages/design-system/src/components/N8nText/Text.vue index 67cf0a427..c184c6a71 100644 --- a/packages/design-system/src/components/N8nText/Text.vue +++ b/packages/design-system/src/components/N8nText/Text.vue @@ -20,7 +20,7 @@ export default Vue.extend({ }, color: { type: String, - validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light'].includes(value), + validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight'].includes(value), }, align: { type: String, diff --git a/packages/design-system/src/components/index.js b/packages/design-system/src/components/index.js index 6bdfd068f..a82ddc6e3 100644 --- a/packages/design-system/src/components/index.js +++ b/packages/design-system/src/components/index.js @@ -10,6 +10,7 @@ import N8nMenu from './N8nMenu'; import N8nMenuItem from './N8nMenuItem'; import N8nSelect from './N8nSelect'; import N8nSpinner from './N8nSpinner'; +import N8nSquareButton from './N8nSquareButton'; import N8nText from './N8nText'; import N8nTooltip from './N8nTooltip'; import N8nOption from './N8nOption'; @@ -27,6 +28,7 @@ export { N8nMenuItem, N8nSelect, N8nSpinner, + N8nSquareButton, N8nText, N8nTooltip, N8nOption, diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts index a625f6c75..4685b8d2a 100644 --- a/packages/editor-ui/src/Interface.ts +++ b/packages/editor-ui/src/Interface.ts @@ -486,6 +486,21 @@ export interface IPersonalizationSurvey { shouldShow: boolean; } +export interface IN8nPrompts { + message: string; + title: string; + showContactPrompt: boolean; + showValueSurvey: boolean; +} + +export interface IN8nValueSurveyData { + [key: string]: string; +} + +export interface IN8nPromptResponse { + updated: boolean; +} + export interface IN8nUISettings { endpointWebhook: string; endpointWebhookTest: string; @@ -690,6 +705,7 @@ export interface IUiState { export interface ISettingsState { settings: IN8nUISettings; + promptsData: IN8nPrompts; } export interface IVersionsState { diff --git a/packages/editor-ui/src/api/helpers.ts b/packages/editor-ui/src/api/helpers.ts index 1ae753db1..be34b1c3a 100644 --- a/packages/editor-ui/src/api/helpers.ts +++ b/packages/editor-ui/src/api/helpers.ts @@ -93,3 +93,7 @@ export async function makeRestApiRequest(context: IRestApiContext, method: Metho export async function get(baseURL: string, endpoint: string, params?: IDataObject, headers?: IDataObject) { return await request({method: 'GET', baseURL, endpoint, headers, data: params}); } + +export async function post(baseURL: string, endpoint: string, params?: IDataObject, headers?: IDataObject) { + return await request({method: 'POST', baseURL, endpoint, headers, data: params}); +} diff --git a/packages/editor-ui/src/api/settings.ts b/packages/editor-ui/src/api/settings.ts index 44302f816..660952414 100644 --- a/packages/editor-ui/src/api/settings.ts +++ b/packages/editor-ui/src/api/settings.ts @@ -1,6 +1,7 @@ import { IDataObject } from 'n8n-workflow'; -import { IRestApiContext, IN8nUISettings, IPersonalizationSurveyAnswers } from '../Interface'; -import { makeRestApiRequest } from './helpers'; +import { IRestApiContext, IN8nPrompts, IN8nValueSurveyData, IN8nUISettings, IPersonalizationSurveyAnswers } from '../Interface'; +import { makeRestApiRequest, get, post } from './helpers'; +import { TEMPLATES_BASE_URL } from '@/constants'; export async function getSettings(context: IRestApiContext): Promise { return await makeRestApiRequest(context, 'GET', '/settings'); @@ -10,3 +11,15 @@ export async function submitPersonalizationSurvey(context: IRestApiContext, para await makeRestApiRequest(context, 'POST', '/user-survey', params as unknown as IDataObject); } +export async function getPromptsData(instanceId: string): Promise { + return await get(TEMPLATES_BASE_URL, '/prompts', {}, {'n8n-instance-id': instanceId}); +} + +export async function submitContactInfo(instanceId: string, email: string): Promise { + return await post(TEMPLATES_BASE_URL, '/prompt', { email }, {'n8n-instance-id': instanceId}); +} + +export async function submitValueSurvey(instanceId: string, params: IN8nValueSurveyData): Promise { + return await post(TEMPLATES_BASE_URL, '/value-survey', params, {'n8n-instance-id': instanceId}); +} + diff --git a/packages/editor-ui/src/components/ContactPromptModal.vue b/packages/editor-ui/src/components/ContactPromptModal.vue new file mode 100644 index 000000000..903d93108 --- /dev/null +++ b/packages/editor-ui/src/components/ContactPromptModal.vue @@ -0,0 +1,128 @@ + + + + + + + diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue index 19589fa14..888ec578d 100644 --- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue +++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue @@ -140,8 +140,9 @@ export default mixins(workflowHelpers).extend({ }, }, methods: { - onSaveButtonClick () { - this.saveCurrentWorkflow(undefined); + async onSaveButtonClick () { + const saved = await this.saveCurrentWorkflow(); + if (saved) this.$store.dispatch('settings/fetchPromptsData'); }, onTagsEditEnable() { this.$data.appliedTagIds = this.currentWorkflowTagIds; @@ -172,7 +173,7 @@ export default mixins(workflowHelpers).extend({ const saved = await this.saveCurrentWorkflow({ tags }); this.$telemetry.track('User edited workflow tags', { workflow_id: this.currentWorkflowId as string, new_tag_count: tags.length }); - + this.$data.tagsSaving = false; if (saved) { this.$data.isTagsEditEnabled = false; diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue index 73844bbbb..373a9f8fb 100644 --- a/packages/editor-ui/src/components/MainSidebar.vue +++ b/packages/editor-ui/src/components/MainSidebar.vue @@ -425,7 +425,8 @@ export default mixins( saveAs(blob, workflowName + '.json'); } else if (key === 'workflow-save') { - this.saveCurrentWorkflow(undefined); + const saved = await this.saveCurrentWorkflow(); + if (saved) this.$store.dispatch('settings/fetchPromptsData'); } else if (key === 'workflow-duplicate') { this.$store.dispatch('ui/openModal', DUPLICATE_MODAL_KEY); } else if (key === 'help-about') { diff --git a/packages/editor-ui/src/components/ModalDrawer.vue b/packages/editor-ui/src/components/ModalDrawer.vue index 298081b1c..ed9c3d82c 100644 --- a/packages/editor-ui/src/components/ModalDrawer.vue +++ b/packages/editor-ui/src/components/ModalDrawer.vue @@ -3,7 +3,9 @@ :direction="direction" :visible="visible" :size="width" - :before-close="close" + :before-close="beforeClose" + :modal="modal" + :wrapperClosable="wrapperClosable" >