From da0315d5857cdcd39a7d1e1df2fe2b37145f840e Mon Sep 17 00:00:00 2001 From: Alex Grozav Date: Tue, 25 Jul 2023 13:13:30 +0300 Subject: [PATCH 1/3] fix: fixed param name update and credential edit --- cypress/e2e/16-webhook-node.cy.ts | 21 ++++++++++--------- .../CredentialEdit/CredentialConfig.vue | 2 +- .../CredentialEdit/CredentialEdit.vue | 2 +- .../editor-ui/src/components/NodeSettings.vue | 6 ++++++ .../src/components/ParameterInput.vue | 4 ++-- .../src/components/ParameterInputExpanded.vue | 2 +- 6 files changed, 22 insertions(+), 15 deletions(-) diff --git a/cypress/e2e/16-webhook-node.cy.ts b/cypress/e2e/16-webhook-node.cy.ts index a4df2b2cfd..6eff0542a7 100644 --- a/cypress/e2e/16-webhook-node.cy.ts +++ b/cypress/e2e/16-webhook-node.cy.ts @@ -121,13 +121,13 @@ describe('Webhook Trigger node', async () => { workflowPage.actions.addNodeToCanvas('Set'); workflowPage.actions.openNode('Set'); cy.get('.add-option').click(); - cy.get('.add-option').find('.el-select-dropdown__item').contains('Number').click(); + getVisibleSelect().find('.el-select-dropdown__item').contains('Number').click(); cy.get('.fixed-collection-parameter') .getByTestId('parameter-input-name') .clear() .type('MyValue'); cy.get('.fixed-collection-parameter').getByTestId('parameter-input-value').clear().type('1234'); - ndv.getters.backToCanvas().click(); + ndv.getters.backToCanvas().click({ force: true }); workflowPage.actions.addNodeToCanvas('Respond to Webhook'); @@ -173,10 +173,15 @@ describe('Webhook Trigger node', async () => { getVisibleSelect().find('.el-select-dropdown__item').contains('Number').click(); cy.get('.fixed-collection-parameter') .getByTestId('parameter-input-name') + .find('input') .clear() .type('MyValue'); - cy.get('.fixed-collection-parameter').getByTestId('parameter-input-value').clear().type('1234'); - ndv.getters.backToCanvas().click(); + cy.get('.fixed-collection-parameter') + .getByTestId('parameter-input-value') + .find('input') + .clear() + .type('1234'); + ndv.getters.backToCanvas().click({ force: true }); workflowPage.actions.executeWorkflow(); cy.wait(waitForWebhook); @@ -216,11 +221,7 @@ describe('Webhook Trigger node', async () => { workflowPage.actions.openNode('Move Binary Data'); cy.getByTestId('parameter-input-mode').click(); - cy.getByTestId('parameter-input-mode') - .find('.el-select-dropdown') - .find('.option-headline') - .contains('JSON to Binary') - .click(); + getVisibleSelect().find('.option-headline').contains('JSON to Binary').click(); ndv.getters.backToCanvas().click(); workflowPage.actions.executeWorkflow(); @@ -249,7 +250,7 @@ describe('Webhook Trigger node', async () => { }); }); - it('should listen for a GET request with Basic Authentication', () => { + it.only('should listen for a GET request with Basic Authentication', () => { const webhookPath = uuid(); simpleWebhookCall({ method: 'GET', diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue index 951b96efc2..8a75cfeb2b 100644 --- a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue +++ b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue @@ -332,7 +332,7 @@ export default defineComponent({ return this.credentialsStore.allUsableCredentialsByType[type]; }, onDataChange(event: { name: string; value: string | number | boolean | Date | null }): void { - this.$emit('change', event); + this.$emit('update', event); }, onDocumentationUrlClick(): void { this.$telemetry.track('User clicked credential modal docs link', { diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue index 149618c953..cbecace0b3 100644 --- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue +++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue @@ -73,7 +73,7 @@ :mode="mode" :selectedCredential="selectedCredential" :showAuthTypeSelector="requiredCredentials" - @change="onDataChange" + @update="onDataChange" @oauth="oAuthCredentialAuthorize" @retest="retestCredential" @scrollToTop="scrollToTop" diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue index d0a6fcc5ab..6ce049a0be 100644 --- a/packages/editor-ui/src/components/NodeSettings.vue +++ b/packages/editor-ui/src/components/NodeSettings.vue @@ -605,6 +605,8 @@ export default defineComponent({ valueChanged(parameterData: IUpdateInformation) { let newValue: NodeParameterValue; + console.log(parameterData); + if (parameterData.hasOwnProperty('value')) { // New value is given newValue = parameterData.value as string | number; @@ -768,6 +770,8 @@ export default defineComponent({ } } + console.log('after set', nodeParameters); + // Get the parameters with the now new defaults according to the // from the user actually defined parameters nodeParameters = NodeHelpers.getNodeParameters( @@ -778,6 +782,8 @@ export default defineComponent({ node, ); + console.log('after getNodeParameters', nodeParameters); + for (const key of Object.keys(nodeParameters as object)) { if (nodeParameters && nodeParameters[key] !== null && nodeParameters[key] !== undefined) { this.setValue(`parameters.${key}`, nodeParameters[key] as string); diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue index 07606cfaaf..6d63933cea 100644 --- a/packages/editor-ui/src/components/ParameterInput.vue +++ b/packages/editor-ui/src/components/ParameterInput.vue @@ -131,14 +131,14 @@
From 8616f28516bfed0dddd3dc89e271a22a366d1f89 Mon Sep 17 00:00:00 2001 From: Alex Grozav Date: Tue, 25 Jul 2023 13:26:11 +0300 Subject: [PATCH 2/3] feat: update event names --- .../src/components/N8nFormBox/FormBox.stories.ts | 4 ++-- .../design-system/src/components/N8nFormBox/FormBox.vue | 4 ++-- .../src/components/N8nFormInputs/FormInputs.vue | 2 +- packages/editor-ui/src/components/ChangePasswordModal.vue | 2 +- packages/editor-ui/src/components/InviteUsersModal.vue | 2 +- packages/editor-ui/src/views/AuthView.vue | 6 +++--- packages/editor-ui/src/views/ChangePasswordView.vue | 2 +- packages/editor-ui/src/views/SettingsLdapView.vue | 2 +- packages/editor-ui/src/views/SettingsPersonalView.vue | 2 +- 9 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/design-system/src/components/N8nFormBox/FormBox.stories.ts b/packages/design-system/src/components/N8nFormBox/FormBox.stories.ts index 05dfe844d4..3db1bc1f01 100644 --- a/packages/design-system/src/components/N8nFormBox/FormBox.stories.ts +++ b/packages/design-system/src/components/N8nFormBox/FormBox.stories.ts @@ -13,7 +13,7 @@ export default { const methods = { onSubmit: action('submit'), - onChange: action('change'), + onChange: action('update'), }; const Template: StoryFn = (args, { argTypes }) => ({ @@ -22,7 +22,7 @@ const Template: StoryFn = (args, { argTypes }) => ({ components: { N8nFormBox, }, - template: '', + template: '', methods, }); diff --git a/packages/design-system/src/components/N8nFormBox/FormBox.vue b/packages/design-system/src/components/N8nFormBox/FormBox.vue index 8bac0f106e..3098d53eee 100644 --- a/packages/design-system/src/components/N8nFormBox/FormBox.vue +++ b/packages/design-system/src/components/N8nFormBox/FormBox.vue @@ -10,7 +10,7 @@ :inputs="inputs" :eventBus="formBus" :columnView="true" - @update:modelValue="onUpdateModelValue" + @update="onUpdateModelValue" @submit="onSubmit" />
@@ -88,7 +88,7 @@ export default defineComponent({ }, methods: { onUpdateModelValue(e: { name: string; value: string }) { - this.$emit('change', e); + this.$emit('update', e); }, onSubmit(e: { [key: string]: string }) { this.$emit('submit', e); diff --git a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue b/packages/design-system/src/components/N8nFormInputs/FormInputs.vue index ccd79ab2d5..8351959667 100644 --- a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue +++ b/packages/design-system/src/components/N8nFormInputs/FormInputs.vue @@ -117,7 +117,7 @@ export default defineComponent({ ...this.values, [name]: value, }; - this.$emit('change', { name, value }); + this.$emit('update', { name, value }); }, onValidate(name: string, valid: boolean) { this.validity = { diff --git a/packages/editor-ui/src/components/ChangePasswordModal.vue b/packages/editor-ui/src/components/ChangePasswordModal.vue index d4fb6a46bf..9337bb4b05 100644 --- a/packages/editor-ui/src/components/ChangePasswordModal.vue +++ b/packages/editor-ui/src/components/ChangePasswordModal.vue @@ -12,7 +12,7 @@ :inputs="config" :eventBus="formBus" :columnView="true" - @change="onInput" + @update="onInput" @submit="onSubmit" /> diff --git a/packages/editor-ui/src/components/InviteUsersModal.vue b/packages/editor-ui/src/components/InviteUsersModal.vue index 558bb40e8b..791b9fa10b 100644 --- a/packages/editor-ui/src/components/InviteUsersModal.vue +++ b/packages/editor-ui/src/components/InviteUsersModal.vue @@ -35,7 +35,7 @@ :inputs="config" :eventBus="formBus" :columnView="true" - @change="onInput" + @update="onInput" @submit="onSubmit" /> diff --git a/packages/editor-ui/src/views/AuthView.vue b/packages/editor-ui/src/views/AuthView.vue index c6bec75a6c..4d3b7a473c 100644 --- a/packages/editor-ui/src/views/AuthView.vue +++ b/packages/editor-ui/src/views/AuthView.vue @@ -13,7 +13,7 @@ :buttonLoading="formLoading" @secondaryClick="onSecondaryClick" @submit="onSubmit" - @change="onChange" + @update="onUpdate" > @@ -48,8 +48,8 @@ export default defineComponent({ }, }, methods: { - onChange(e: { name: string; value: string }) { - this.$emit('change', e); + onUpdate(e: { name: string; value: string }) { + this.$emit('update', e); }, onSubmit(values: { [key: string]: string }) { this.$emit('submit', values); diff --git a/packages/editor-ui/src/views/ChangePasswordView.vue b/packages/editor-ui/src/views/ChangePasswordView.vue index 387c87ab47..6ce3fb6409 100644 --- a/packages/editor-ui/src/views/ChangePasswordView.vue +++ b/packages/editor-ui/src/views/ChangePasswordView.vue @@ -4,7 +4,7 @@ :form="config" :formLoading="loading" @submit="onSubmit" - @change="onInput" + @update="onInput" /> diff --git a/packages/editor-ui/src/views/SettingsLdapView.vue b/packages/editor-ui/src/views/SettingsLdapView.vue index 5dc23dcaa7..674e03a939 100644 --- a/packages/editor-ui/src/views/SettingsLdapView.vue +++ b/packages/editor-ui/src/views/SettingsLdapView.vue @@ -39,7 +39,7 @@ :eventBus="formBus" :columnView="true" verticalSpacing="l" - @change="onInput" + @update="onInput" @ready="onReadyToSubmit" @submit="onSubmit" /> diff --git a/packages/editor-ui/src/views/SettingsPersonalView.vue b/packages/editor-ui/src/views/SettingsPersonalView.vue index 3f48b5091b..950c609ddc 100644 --- a/packages/editor-ui/src/views/SettingsPersonalView.vue +++ b/packages/editor-ui/src/views/SettingsPersonalView.vue @@ -26,7 +26,7 @@ v-if="formInputs" :inputs="formInputs" :eventBus="formBus" - @change="onInput" + @update="onInput" @ready="onReadyToSubmit" @submit="onSubmit" /> From 94b7023da8c5cee37486a3fbb02bda92888585ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= Date: Tue, 25 Jul 2023 12:30:23 +0200 Subject: [PATCH 3/3] refactor: Remove deprecated `$data` (#6576) Co-authored-by: Alex Grozav --- .../src/components/BreakpointsObserver.vue | 18 +++---- .../src/components/InlineTextEdit.vue | 14 ++--- .../src/components/IntersectionObserver.vue | 2 +- .../components/MainHeader/WorkflowDetails.vue | 40 +++++++------- .../src/components/PersonalizationModal.vue | 4 +- .../src/components/TagsContainer.vue | 4 +- .../editor-ui/src/components/TagsDropdown.vue | 18 +++---- .../components/TagsManager/TagsManager.vue | 12 ++--- .../TagsManager/TagsView/TagsView.vue | 52 +++++++++---------- .../src/views/SettingsCommunityNodesView.vue | 6 +-- 10 files changed, 83 insertions(+), 87 deletions(-) diff --git a/packages/editor-ui/src/components/BreakpointsObserver.vue b/packages/editor-ui/src/components/BreakpointsObserver.vue index 9c170430b4..15d6cc802b 100644 --- a/packages/editor-ui/src/components/BreakpointsObserver.vue +++ b/packages/editor-ui/src/components/BreakpointsObserver.vue @@ -42,7 +42,7 @@ export default defineComponent({ void this.callDebounced('onResizeEnd', { debounceTime: 50 }); }, onResizeEnd() { - this.$data.width = window.innerWidth; + this.width = window.innerWidth; this.$nextTick(async () => { const bannerHeight = await getBannerRowHeight(); useUIStore().updateBannersHeight(bannerHeight); @@ -51,19 +51,19 @@ export default defineComponent({ }, computed: { bp(): string { - if (this.$data.width < BREAKPOINT_SM) { + if (this.width < BREAKPOINT_SM) { return 'XS'; } - if (this.$data.width >= BREAKPOINT_XL) { + if (this.width >= BREAKPOINT_XL) { return 'XL'; } - if (this.$data.width >= BREAKPOINT_LG) { + if (this.width >= BREAKPOINT_LG) { return 'LG'; } - if (this.$data.width >= BREAKPOINT_MD) { + if (this.width >= BREAKPOINT_MD) { return 'MD'; } @@ -71,19 +71,19 @@ export default defineComponent({ }, // eslint-disable-next-line @typescript-eslint/no-explicit-any value(): any | undefined { - if (this.valueXS !== undefined && this.$data.width < BREAKPOINT_SM) { + if (this.valueXS !== undefined && this.width < BREAKPOINT_SM) { return this.valueXS; } - if (this.valueXL !== undefined && this.$data.width >= BREAKPOINT_XL) { + if (this.valueXL !== undefined && this.width >= BREAKPOINT_XL) { return this.valueXL; } - if (this.valueLG !== undefined && this.$data.width >= BREAKPOINT_LG) { + if (this.valueLG !== undefined && this.width >= BREAKPOINT_LG) { return this.valueLG; } - if (this.valueMD !== undefined && this.$data.width >= BREAKPOINT_MD) { + if (this.valueMD !== undefined && this.width >= BREAKPOINT_MD) { return this.valueMD; } diff --git a/packages/editor-ui/src/components/InlineTextEdit.vue b/packages/editor-ui/src/components/InlineTextEdit.vue index edb9bfc0ea..2b5edf3791 100644 --- a/packages/editor-ui/src/components/InlineTextEdit.vue +++ b/packages/editor-ui/src/components/InlineTextEdit.vue @@ -75,7 +75,7 @@ export default defineComponent({ return; } - this.$data.newValue = this.modelValue; + this.newValue = this.modelValue; this.$emit('toggle'); }, onBlur() { @@ -83,10 +83,10 @@ export default defineComponent({ return; } - if (!this.$data.escPressed) { + if (!this.escPressed) { this.submit(); } - this.$data.escPressed = false; + this.escPressed = false; }, submit() { if (this.disabled) { @@ -94,14 +94,14 @@ export default defineComponent({ } const onSubmit = (updated: boolean) => { - this.$data.disabled = false; + this.disabled = false; if (!updated) { - this.$data.inputBus.emit('focus'); + this.inputBus.emit('focus'); } }; - this.$data.disabled = true; + this.disabled = true; this.$emit('submit', this.newValue, onSubmit); }, onEscape() { @@ -109,7 +109,7 @@ export default defineComponent({ return; } - this.$data.escPressed = true; + this.escPressed = true; this.$emit('toggle'); }, }, diff --git a/packages/editor-ui/src/components/IntersectionObserver.vue b/packages/editor-ui/src/components/IntersectionObserver.vue index 755039adf4..f6382c8e26 100644 --- a/packages/editor-ui/src/components/IntersectionObserver.vue +++ b/packages/editor-ui/src/components/IntersectionObserver.vue @@ -63,7 +63,7 @@ export default defineComponent({ }, beforeUnmount() { if (this.enabled) { - this.$data.observer.disconnect(); + this.observer.disconnect(); } }, }); diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue index 1fd3f625c7..aa6130c27e 100644 --- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue +++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue @@ -364,31 +364,31 @@ export default defineComponent({ }); }, onTagsEditEnable() { - this.$data.appliedTagIds = this.currentWorkflowTagIds; - this.$data.isTagsEditEnabled = true; + this.appliedTagIds = this.currentWorkflowTagIds; + this.isTagsEditEnabled = true; setTimeout(() => { // allow name update to occur before disabling name edit - this.$data.isNameEditEnabled = false; - this.$data.tagsEditBus.emit('focus'); + this.isNameEditEnabled = false; + this.tagsEditBus.emit('focus'); }, 0); }, async onTagsUpdate(tags: string[]) { - this.$data.appliedTagIds = tags; + this.appliedTagIds = tags; }, async onTagsBlur() { const current = this.currentWorkflowTagIds; - const tags = this.$data.appliedTagIds; + const tags = this.appliedTagIds; if (!hasChanged(current, tags)) { - this.$data.isTagsEditEnabled = false; + this.isTagsEditEnabled = false; return; } - if (this.$data.tagsSaving) { + if (this.tagsSaving) { return; } - this.$data.tagsSaving = true; + this.tagsSaving = true; const saved = await this.saveCurrentWorkflow({ tags }); this.$telemetry.track('User edited workflow tags', { @@ -396,23 +396,23 @@ export default defineComponent({ new_tag_count: tags.length, }); - this.$data.tagsSaving = false; + this.tagsSaving = false; if (saved) { - this.$data.isTagsEditEnabled = false; + this.isTagsEditEnabled = false; } }, onTagsEditEsc() { - this.$data.isTagsEditEnabled = false; + this.isTagsEditEnabled = false; }, onNameToggle() { - this.$data.isNameEditEnabled = !this.$data.isNameEditEnabled; - if (this.$data.isNameEditEnabled) { - if (this.$data.isTagsEditEnabled) { + this.isNameEditEnabled = !this.isNameEditEnabled; + if (this.isNameEditEnabled) { + if (this.isTagsEditEnabled) { // @ts-ignore void this.onTagsBlur(); } - this.$data.isTagsEditEnabled = false; + this.isTagsEditEnabled = false; } }, async onNameSubmit(name: string, cb: (saved: boolean) => void) { @@ -429,7 +429,7 @@ export default defineComponent({ } if (newName === this.workflowName) { - this.$data.isNameEditEnabled = false; + this.isNameEditEnabled = false; cb(true); return; @@ -437,7 +437,7 @@ export default defineComponent({ const saved = await this.saveCurrentWorkflow({ name }); if (saved) { - this.$data.isNameEditEnabled = false; + this.isNameEditEnabled = false; } cb(saved); }, @@ -602,8 +602,8 @@ export default defineComponent({ }, watch: { currentWorkflowId() { - this.$data.isTagsEditEnabled = false; - this.$data.isNameEditEnabled = false; + this.isTagsEditEnabled = false; + this.isNameEditEnabled = false; }, }, }); diff --git a/packages/editor-ui/src/components/PersonalizationModal.vue b/packages/editor-ui/src/components/PersonalizationModal.vue index e05b74cca4..272d6f0161 100644 --- a/packages/editor-ui/src/components/PersonalizationModal.vue +++ b/packages/editor-ui/src/components/PersonalizationModal.vue @@ -630,7 +630,7 @@ export default defineComponent({ this.formBus.emit('submit'); }, async onSubmit(values: IPersonalizationLatestVersion): Promise { - this.$data.isSaving = true; + this.isSaving = true; try { const survey: Record = { @@ -653,7 +653,7 @@ export default defineComponent({ this.showError(e, 'Error while submitting results'); } - this.$data.isSaving = false; + this.isSaving = false; this.closeDialog(); }, async fetchOnboardingPrompt() { diff --git a/packages/editor-ui/src/components/TagsContainer.vue b/packages/editor-ui/src/components/TagsContainer.vue index 395ec861bd..579a34cb3b 100644 --- a/packages/editor-ui/src/components/TagsContainer.vue +++ b/packages/editor-ui/src/components/TagsContainer.vue @@ -79,7 +79,7 @@ export default defineComponent({ let toDisplay: TagEl[] = limit ? tags.slice(0, limit) : tags; toDisplay = toDisplay.map((tag: ITag) => ({ ...tag, - hidden: this.responsive && !this.$data.visibility[tag.id], + hidden: this.responsive && !this.visibility[tag.id], })); let visibleCount = toDisplay.length; @@ -111,7 +111,7 @@ export default defineComponent({ methods: { onObserved({ el, isIntersecting }: { el: HTMLElement; isIntersecting: boolean }) { if (el.dataset.id) { - this.$data.visibility = { ...this.$data.visibility, [el.dataset.id]: isIntersecting }; + this.visibility = { ...this.visibility, [el.dataset.id]: isIntersecting }; } }, onClick(e: MouseEvent, tag: TagEl) { diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue index 860e95d691..45a9dd9efc 100644 --- a/packages/editor-ui/src/components/TagsDropdown.vue +++ b/packages/editor-ui/src/components/TagsDropdown.vue @@ -118,7 +118,7 @@ export default defineComponent({ if (keyboardEvent.key === 'Escape') { this.$emit('esc'); } else if (keyboardEvent.key === 'Enter' && this.filter.length === 0) { - this.$data.preventUpdate = true; + this.preventUpdate = true; this.$emit('blur'); if (typeof selectRef?.blur === 'function') { @@ -146,7 +146,7 @@ export default defineComponent({ }, options(): ITag[] { return this.allTags.filter( - (tag: ITag) => tag && tag.name.toLowerCase().includes(this.$data.filter.toLowerCase()), + (tag: ITag) => tag && tag.name.toLowerCase().includes(this.filter.toLowerCase()), ); }, appliedTags(): string[] { @@ -159,17 +159,17 @@ export default defineComponent({ this.focusOnTopOption(); }, filterOptions(filter = '') { - this.$data.filter = filter.trim(); + this.filter = filter.trim(); this.$nextTick(() => this.focusOnTopOption()); }, async onCreate() { - const name = this.$data.filter; + const name = this.filter; try { const newTag = await this.tagsStore.create(name); this.$emit('update', [...this.currentTagIds, newTag.id]); this.$nextTick(() => this.focusOnTag(newTag.id)); - this.$data.filter = ''; + this.filter = ''; } catch (error) { this.showError( error, @@ -181,16 +181,16 @@ export default defineComponent({ onTagsUpdated(selected: string[]) { const ops = selected.find((value) => value === MANAGE_KEY || value === CREATE_KEY); if (ops === MANAGE_KEY) { - this.$data.filter = ''; + this.filter = ''; this.uiStore.openModal(TAGS_MANAGER_MODAL_KEY); } else if (ops === CREATE_KEY) { void this.onCreate(); } else { setTimeout(() => { - if (!this.$data.preventUpdate) { + if (!this.preventUpdate) { this.$emit('update', selected); } - this.$data.preventUpdate = false; + this.preventUpdate = false; }, 0); } }, @@ -221,7 +221,7 @@ export default defineComponent({ }, onVisibleChange(visible: boolean) { if (!visible) { - this.$data.filter = ''; + this.filter = ''; this.focused = false; } else { this.focused = true; diff --git a/packages/editor-ui/src/components/TagsManager/TagsManager.vue b/packages/editor-ui/src/components/TagsManager/TagsManager.vue index c778ae794c..16bb4364fd 100644 --- a/packages/editor-ui/src/components/TagsManager/TagsManager.vue +++ b/packages/editor-ui/src/components/TagsManager/TagsManager.vue @@ -71,9 +71,7 @@ export default defineComponent({ return this.tagsStore.isLoading; }, tags(): ITag[] { - return this.$data.tagIds - .map((tagId: string) => this.tagsStore.getTagById(tagId)) - .filter(Boolean); // if tag is deleted from store + return this.tagIds.map((tagId: string) => this.tagsStore.getTagById(tagId)).filter(Boolean); // if tag is deleted from store }, hasTags(): boolean { return this.tags.length > 0; @@ -81,11 +79,11 @@ export default defineComponent({ }, methods: { onEnableCreate() { - this.$data.isCreating = true; + this.isCreating = true; }, onDisableCreate() { - this.$data.isCreating = false; + this.isCreating = false; }, async onCreate(name: string, cb: (tag: ITag | null, error?: Error) => void) { @@ -95,7 +93,7 @@ export default defineComponent({ } const newTag = await this.tagsStore.create(name); - this.$data.tagIds = [newTag.id].concat(this.$data.tagIds); + this.tagIds = [newTag.id].concat(this.tagIds); cb(newTag); } catch (error) { const escapedName = escape(name); @@ -154,7 +152,7 @@ export default defineComponent({ throw new Error(this.$locale.baseText('tagsManager.couldNotDeleteTag')); } - this.$data.tagIds = this.$data.tagIds.filter((tagId: string) => tagId !== id); + this.tagIds = this.tagIds.filter((tagId: string) => tagId !== id); cb(deleted); diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue index a44d6b55fd..f045041812 100644 --- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue +++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue @@ -52,7 +52,7 @@ export default defineComponent({ computed: { ...mapStores(useUsersStore), isCreateEnabled(): boolean { - return (this.tags || []).length === 0 || this.$data.createEnabled; + return (this.tags || []).length === 0 || this.createEnabled; }, rows(): ITagRow[] { const getUsage = (count: number | undefined) => @@ -60,16 +60,16 @@ export default defineComponent({ ? this.$locale.baseText('tagsView.inUse', { adjustToNumber: count }) : this.$locale.baseText('tagsView.notBeingUsed'); - const disabled = this.isCreateEnabled || this.$data.updateId || this.$data.deleteId; + const disabled = this.isCreateEnabled || this.updateId || this.deleteId; const tagRows = (this.tags || []) - .filter((tag: ITag) => this.stickyIds.has(tag.id) || matches(tag.name, this.$data.search)) + .filter((tag: ITag) => this.stickyIds.has(tag.id) || matches(tag.name, this.search)) .map( (tag: ITag): ITagRow => ({ tag, usage: getUsage(tag.usageCount), - disable: disabled && tag.id !== this.deleteId && tag.id !== this.$data.updateId, - update: disabled && tag.id === this.$data.updateId, - delete: disabled && tag.id === this.$data.deleteId, + disable: disabled && tag.id !== this.deleteId && tag.id !== this.updateId, + update: disabled && tag.id === this.updateId, + delete: disabled && tag.id === this.deleteId, canDelete: this.usersStore.canUserDeleteTags, }), ); @@ -82,13 +82,11 @@ export default defineComponent({ this.newName = name; }, onSearchChange(search: string): void { - this.$data.stickyIds.clear(); - this.$data.search = search; + this.stickyIds.clear(); + this.search = search; }, isHeaderDisabled(): boolean { - return ( - this.isLoading || !!(this.isCreateEnabled || this.$data.updateId || this.$data.deleteId) - ); + return this.isLoading || !!(this.isCreateEnabled || this.updateId || this.deleteId); }, onUpdateEnable(updateId: string): void { @@ -99,10 +97,10 @@ export default defineComponent({ this.newName = ''; }, updateTag(): void { - this.$data.isSaving = true; + this.isSaving = true; const name = this.newName.trim(); const onUpdate = (updated: boolean) => { - this.$data.isSaving = false; + this.isSaving = false; if (updated) { this.stickyIds.add(this.updateId); this.disableUpdate(); @@ -119,58 +117,58 @@ export default defineComponent({ this.deleteId = ''; }, deleteTag(): void { - this.$data.isSaving = true; + this.isSaving = true; const onDelete = (deleted: boolean) => { if (deleted) { this.disableDelete(); } - this.$data.isSaving = false; + this.isSaving = false; }; this.$emit('delete', this.deleteId, onDelete); }, onCreateEnable(): void { - this.$data.createEnabled = true; - this.$data.newName = ''; + this.createEnabled = true; + this.newName = ''; }, disableCreate(): void { - this.$data.createEnabled = false; + this.createEnabled = false; this.$emit('disableCreate'); }, createTag(): void { - this.$data.isSaving = true; - const name = this.$data.newName.trim(); + this.isSaving = true; + const name = this.newName.trim(); const onCreate = (created: ITag | null, error?: Error) => { if (created) { this.stickyIds.add(created.id); this.disableCreate(); } - this.$data.isSaving = false; + this.isSaving = false; }; this.$emit('create', name, onCreate); }, applyOperation(): void { - if (this.$data.isSaving) { + if (this.isSaving) { return; } else if (this.isCreateEnabled) { this.createTag(); - } else if (this.$data.updateId) { + } else if (this.updateId) { this.updateTag(); - } else if (this.$data.deleteId) { + } else if (this.deleteId) { this.deleteTag(); } }, cancelOperation(): void { - if (this.$data.isSaving) { + if (this.isSaving) { return; } else if (this.isCreateEnabled) { this.disableCreate(); - } else if (this.$data.updateId) { + } else if (this.updateId) { this.disableUpdate(); - } else if (this.$data.deleteId) { + } else if (this.deleteId) { this.disableDelete(); } }, diff --git a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue index 6285ac25e4..9830c41c1a 100644 --- a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue +++ b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue @@ -92,7 +92,7 @@ export default defineComponent({ this.pushConnect(); try { - this.$data.loading = true; + this.loading = true; await this.communityNodesStore.fetchInstalledPackages(); const installedPackages: PublicInstalledPackage[] = @@ -126,12 +126,12 @@ export default defineComponent({ this.$locale.baseText('settings.communityNodes.fetchError.message'), ); } finally { - this.$data.loading = false; + this.loading = false; } try { await this.communityNodesStore.fetchAvailableCommunityPackageCount(); } finally { - this.$data.loading = false; + this.loading = false; } }, beforeUnmount() {