[wip] feat: vue 3 upgrade (VMO-6873)#339
Conversation
| // } | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| export default function registerCustomComponents(extra = {}): Record<string, any> { | ||
| export default function registerCustomComponents(app, extra = {}) { |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/explicit-function-return-type
Severity: WARN
File: src/common-imports.ts L19
Missing return type on function. (@typescript-eslint/explicit-function-return-type)
| @@ -11,11 +9,14 @@ import * as toolbarComponents from '@/components/interaction-designer/toolbar' | |||
| import * as blocksComponents from '@/components/interaction-designer/blocks' | |||
| import * as blockResourceEditorsComponents from '@/components/interaction-designer/resource-editors' | |||
| import * as resourceEditorComponents from '@/components/resource-editor' | |||
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.import/newline-after-import
Severity: ERROR
File: src/common-imports.ts L11
Expected 1 empty line after import statement not followed by another import. (import/newline-after-import)
| @@ -4,7 +4,7 @@ | |||
| <input | |||
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.vuejs-accessibility/form-control-has-label
Severity: ERROR
File: src/components/common/AudioLibrarySearchField.vue L4
Each form element must have a programmatically associated label element. (vuejs-accessibility/form-control-has-label)
| @@ -27,7 +27,7 @@ | |||
| class="dropdown-item" | |||
| :href="audioFileUrl" | |||
| target="_blank"> | |||
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.vue/no-template-target-blank
Severity: ERROR
File: src/components/common/AudioLibrarySelection.vue L29
Using target="_blank" without rel="noopener noreferrer" is a security risk. (vue/no-template-target-blank)
| import {MethodNodeEvaluatorFactory} from '@floip/expression-evaluator/dist/Evaluator/NodeEvaluator/MethodNodeEvaluator/Factory' | ||
| import Lang from '@/lib/filters/lang' | ||
| import {Lang} from '@/lib/filters/lang' | ||
| import {IBlock, IFlow} from '@floip/flow-runner' |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.import/order
Severity: ERROR
File: src/components/common/ExpressionInput.vue L39
`@floip/flow-runner` import should occur before import of `@/lib/filters/lang` (import/order)
| import Lang from '@/lib/filters/lang' | ||
| import {Lang} from '@/lib/filters/lang' | ||
| import {IPositionLeftTop} from '@/lib/types' | ||
| import {namespace} from 'vuex-class' |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.import/order
Severity: ERROR
File: src/components/common/PlainDraggable.vue L13
`vuex-class` import should occur before import of `@/lib/filters/lang` (import/order)
| import {BAlert} from 'bootstrap-vue' | ||
| import {Prop} from 'vue-property-decorator' | ||
| import {mixins, Options} from 'vue-class-component' | ||
| import {Lang} from '@/lib/filters/lang' |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.import/order
Severity: ERROR
File: src/components/common/ValidationMessage.vue L19
`@/lib/filters/lang` import should occur after import of `vuex-class` (import/order)
| return ((blockElementRef[0].$refs.draggable as any).$el as HTMLElement).offsetWidth | ||
| } | ||
|
|
||
| get blockAtTheLowestPosition(): any { |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/no-explicit-any
Severity: WARN
File: src/components/interaction-designer/BuilderCanvas.vue L144
Unexpected any. Specify a different type. (@typescript-eslint/no-explicit-any)
| } | ||
|
|
||
| return ((blockElementRef[0].$refs.draggable as Vue).$el as HTMLElement).offsetWidth | ||
| return ((blockElementRef[0].$refs.draggable as any).$el as HTMLElement).offsetWidth |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/no-unnecessary-type-assertion
Severity: ERROR
File: src/components/interaction-designer/BuilderCanvas.vue L141
This assertion is unnecessary since it does not change the type of the expression. (@typescript-eslint/no-unnecessary-type-assertion)
| } | ||
|
|
||
| return ((blockElementRef[0].$refs.draggable as Vue).$el as HTMLElement).offsetWidth | ||
| return ((blockElementRef[0].$refs.draggable as any).$el as HTMLElement).offsetWidth |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/no-explicit-any
Severity: WARN
File: src/components/interaction-designer/BuilderCanvas.vue L141
Unexpected any. Specify a different type. (@typescript-eslint/no-explicit-any)
| const blockElementRef = this.$refs[`block/${this.blockAtTheFurthestRightPosition?.uuid}`] as Vue[] | ||
| const blockElementRef = this.$refs[`block/${this.blockAtTheFurthestRightPosition?.uuid}`] as any[] | ||
|
|
||
| if (!blockElementRef) { |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/strict-boolean-expressions
Severity: ERROR
File: src/components/interaction-designer/BuilderCanvas.vue L130
Unexpected object value in conditional. The condition is always true. (@typescript-eslint/strict-boolean-expressions)
| get blockWidth(): number { | ||
| // it returns array as we loop blocks inside v-for | ||
| const blockElementRef = this.$refs[`block/${this.blockAtTheFurthestRightPosition?.uuid}`] as Vue[] | ||
| const blockElementRef = this.$refs[`block/${this.blockAtTheFurthestRightPosition?.uuid}`] as any[] |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/no-explicit-any
Severity: WARN
File: src/components/interaction-designer/BuilderCanvas.vue L128
Unexpected any. Specify a different type. (@typescript-eslint/no-explicit-any)
| // it returns array as we loop blocks inside v-for | ||
| const blockElementRef = this.$refs[`block/${this.blockAtTheLowestPosition?.uuid}`] as Vue[] | ||
| const blockElementRef = this.$refs[`block/${this.blockAtTheLowestPosition?.uuid}`] as any[] | ||
| if (!blockElementRef) { |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/strict-boolean-expressions
Severity: ERROR
File: src/components/interaction-designer/BuilderCanvas.vue L113
Unexpected object value in conditional. The condition is always true. (@typescript-eslint/strict-boolean-expressions)
| get blockHeight(): number { | ||
| // it returns array as we loop blocks inside v-for | ||
| const blockElementRef = this.$refs[`block/${this.blockAtTheLowestPosition?.uuid}`] as Vue[] | ||
| const blockElementRef = this.$refs[`block/${this.blockAtTheLowestPosition?.uuid}`] as any[] |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/no-explicit-any
Severity: WARN
File: src/components/interaction-designer/BuilderCanvas.vue L112
Unexpected any. Specify a different type. (@typescript-eslint/no-explicit-any)
| @@ -6,13 +6,13 @@ | |||
|
|
|||
| <script lang="ts"> | |||
| /* eslint-disable @typescript-eslint/explicit-module-boundary-types,@typescript-eslint/strict-boolean-expressions */ | |||
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.vue/max-len
Severity: ERROR
File: src/components/interaction-designer/Connection.vue L8
This line has a length of 116. Maximum allowed is 100. (vue/max-len)
| import Lang from '@/lib/filters/lang' | ||
| import {Prop} from 'vue-property-decorator' | ||
| import {mixins, Options} from 'vue-class-component' | ||
| import {Lang} from '@/lib/filters/lang' |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.import/order
Severity: ERROR
File: src/components/interaction-designer/block-editors/AdvancedExitEditor.vue L36
`@/lib/filters/lang` import should occur after import of `vuex-class` (import/order)
| {{ 'flow-builder.advanced-exit-name' | trans }} | ||
| {{ trans('flow-builder.advanced-exit-name') }} | ||
| </h6> | ||
| <textarea |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.vuejs-accessibility/form-control-has-label
Severity: ERROR
File: src/components/interaction-designer/block-editors/AdvancedExitEditor.vue L23
Each form element must have a programmatically associated label element. (vuejs-accessibility/form-control-has-label)
| getTestInputFrom(exitEditor?: Vue): HTMLInputElement { | ||
| return (exitEditor?.$refs.testExpressionInput as Vue).$refs.input as HTMLInputElement | ||
| getTestInputFrom(exitEditor?: any): HTMLInputElement { | ||
| return (exitEditor?.$refs.testExpressionInput as any).$refs.input as HTMLInputElement |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/no-unnecessary-type-assertion
Severity: ERROR
File: src/components/interaction-designer/block-editors/AdvancedExitsBuilder.vue L104
This assertion is unnecessary since it does not change the type of the expression. (@typescript-eslint/no-unnecessary-type-assertion)
| getTestInputFrom(exitEditor?: Vue): HTMLInputElement { | ||
| return (exitEditor?.$refs.testExpressionInput as Vue).$refs.input as HTMLInputElement | ||
| getTestInputFrom(exitEditor?: any): HTMLInputElement { | ||
| return (exitEditor?.$refs.testExpressionInput as any).$refs.input as HTMLInputElement |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/no-explicit-any
Severity: WARN
File: src/components/interaction-designer/block-editors/AdvancedExitsBuilder.vue L104
Unexpected any. Specify a different type. (@typescript-eslint/no-explicit-any)
|
|
||
| getTestInputFrom(exitEditor?: Vue): HTMLInputElement { | ||
| return (exitEditor?.$refs.testExpressionInput as Vue).$refs.input as HTMLInputElement | ||
| getTestInputFrom(exitEditor?: any): HTMLInputElement { |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/no-explicit-any
Severity: WARN
File: src/components/interaction-designer/block-editors/AdvancedExitsBuilder.vue L103
Unexpected any. Specify a different type. (@typescript-eslint/no-explicit-any)
| } | ||
|
|
||
| getNameInputFrom(exitEditor?: Vue): HTMLInputElement { | ||
| getNameInputFrom(exitEditor?: any): HTMLInputElement { |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/no-explicit-any
Severity: WARN
File: src/components/interaction-designer/block-editors/AdvancedExitsBuilder.vue L99
Unexpected any. Specify a different type. (@typescript-eslint/no-explicit-any)
|
|
||
| this.block_removeExit({blockId: this.block.uuid, exit}) | ||
| this.focusInputEl(this.getTestInputFrom(this.$refs.draftExitEditor as Vue)) | ||
| this.focusInputEl(this.getTestInputFrom(this.$refs.draftExitEditor as any)) |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/no-explicit-any
Severity: WARN
File: src/components/interaction-designer/block-editors/AdvancedExitsBuilder.vue L88
Unexpected any. Specify a different type. (@typescript-eslint/no-explicit-any)
| this.$nextTick(() => { | ||
| const isNamePopulated = !isEmpty(this.draftExit?.name) | ||
| const lastExitEditor = last(this.$refs.exitEditors as Vue[]) | ||
| const lastExitEditor = last(this.$refs.exitEditors as any) |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/no-explicit-any
Severity: WARN
File: src/components/interaction-designer/block-editors/AdvancedExitsBuilder.vue L70
Unexpected any. Specify a different type. (@typescript-eslint/no-explicit-any)
| this.$nextTick(() => { | ||
| const isNamePopulated = !isEmpty(this.draftExit?.name) | ||
| const lastExitEditor = last(this.$refs.exitEditors as Vue[]) | ||
| const lastExitEditor = last(this.$refs.exitEditors as any) |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/no-unsafe-argument
Severity: ERROR
File: src/components/interaction-designer/block-editors/AdvancedExitsBuilder.vue L70
Unsafe argument of type `any` assigned to a parameter of type `List<unknown> | null | undefined`. (@typescript-eslint/no-unsafe-argument)
| const {$store} = this | ||
| const {$store}: any = this | ||
|
|
||
| forEach(store.modules, (v, k) => !$store.hasModule(k) && $store.registerModule(k, v)) |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/strict-boolean-expressions
Severity: ERROR
File: src/views/Home.vue L147
Unexpected any value in conditional. An explicit comparison or type cast is required. (@typescript-eslint/strict-boolean-expressions)
|
|
||
| async beforeCreate(): Promise<void> { | ||
| const {$store} = this | ||
| const {$store}: any = this |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/no-explicit-any
Severity: WARN
File: src/views/Home.vue L145
Unexpected any. Specify a different type. (@typescript-eslint/no-explicit-any)
| import {forEach, isEmpty} from 'lodash' | ||
| import {mixins} from 'vue-class-component' | ||
| import {mixins, Options} from 'vue-class-component' | ||
| import {store} from '@/store' |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.import/order
Severity: ERROR
File: src/views/Home.vue L117
`@/store` import should occur after import of `@floip/flow-runner` (import/order)
| <script lang="ts"> | ||
| import Lang from '@/lib/filters/lang' | ||
| import {Lang} from '@/lib/filters/lang' | ||
| import Routes from '@/lib/mixins/Routes' |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.import/order
Severity: ERROR
File: src/views/Home.vue L113
`@/lib/mixins/Routes` import should occur after import of `@floip/flow-runner` (import/order)
|
|
||
| <script lang="ts"> | ||
| import Lang from '@/lib/filters/lang' | ||
| import {Lang} from '@/lib/filters/lang' |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.import/order
Severity: ERROR
File: src/views/Home.vue L112
`@/lib/filters/lang` import should occur after import of `@floip/flow-runner` (import/order)
| const {$store} = this | ||
| const {$store}: any = this | ||
|
|
||
| forEach(store.modules, (v, k) => !$store.hasModule(k) && $store.registerModule(k, v)) |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/strict-boolean-expressions
Severity: ERROR
File: src/views/ImportFlow.vue L133
Unexpected any value in conditional. An explicit comparison or type cast is required. (@typescript-eslint/strict-boolean-expressions)
|
|
||
| async beforeCreate(): Promise<void> { | ||
| const {$store} = this | ||
| const {$store}: any = this |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/no-explicit-any
Severity: WARN
File: src/views/ImportFlow.vue L131
Unexpected any. Specify a different type. (@typescript-eslint/no-explicit-any)
| import {mixins, Options} from 'vue-class-component' | ||
| import {store} from '@/store' | ||
| import {IContext} from '@floip/flow-runner' | ||
| import ErrorHandlerV2 from '@/components/interaction-designer/flow-editors/import/ErrorHandlerV2.vue' |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.import/order
Severity: ERROR
File: src/views/ImportFlow.vue L107
`@/components/interaction-designer/flow-editors/import/ErrorHandlerV2.vue` import should occur after import of `ajv` (import/order)
| import {debounce, forEach, get, isEmpty} from 'lodash' | ||
| import {mixins} from 'vue-class-component' | ||
| import {mixins, Options} from 'vue-class-component' | ||
| import {store} from '@/store' |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.import/order
Severity: ERROR
File: src/views/ImportFlow.vue L105
`@/store` import should occur after import of `ajv` (import/order)
|
|
||
| import Lang from '@/lib/filters/lang' | ||
| import {Lang} from '@/lib/filters/lang' | ||
| import Routes from '@/lib/mixins/Routes' |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.import/order
Severity: ERROR
File: src/views/ImportFlow.vue L100
`@/lib/mixins/Routes` import should occur after import of `ajv` (import/order)
| <script lang="ts"> | ||
|
|
||
| import Lang from '@/lib/filters/lang' | ||
| import {Lang} from '@/lib/filters/lang' |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.import/order
Severity: ERROR
File: src/views/ImportFlow.vue L99
`@/lib/filters/lang` import should occur after import of `ajv` (import/order)
| identity, | ||
| ))) | ||
| const isEmptyClipboard = this.$store.state.trees.tree.hasClipboard && (isEmpty(item.clipboardContent) || isEmpty( | ||
| const isEmptyClipboard = this.$store.state["trees"].tree.hasClipboard && (isEmpty(item.clipboardContent) || isEmpty( |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.dot-notation
Severity: ERROR
File: src/views/ResourceViewer.vue L372
["trees"] is better written in dot notation. (dot-notation)
| identity, | ||
| ))) | ||
| const isEmptyUssd = this.$store.state.trees.tree.hasUssd && (isEmpty(item.ussdContent) || isEmpty(pickBy( | ||
| const isEmptyUssd = this.$store.state["trees"].tree.hasUssd && (isEmpty(item.ussdContent) || isEmpty(pickBy( |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.quotes
Severity: ERROR
File: src/views/ResourceViewer.vue L368
Strings must use singlequote. (quotes)
| identity, | ||
| ))) | ||
| const isEmptyUssd = this.$store.state.trees.tree.hasUssd && (isEmpty(item.ussdContent) || isEmpty(pickBy( | ||
| const isEmptyUssd = this.$store.state["trees"].tree.hasUssd && (isEmpty(item.ussdContent) || isEmpty(pickBy( |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.dot-notation
Severity: ERROR
File: src/views/ResourceViewer.vue L368
["trees"] is better written in dot notation. (dot-notation)
| identity, | ||
| ))) | ||
| const isEmptySMS = this.$store.state.trees.tree.hasSms && (isEmpty(item.smsContent) || isEmpty(pickBy( | ||
| const isEmptySMS = this.$store.state["trees"].tree.hasSms && (isEmpty(item.smsContent) || isEmpty(pickBy( |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.quotes
Severity: ERROR
File: src/views/ResourceViewer.vue L364
Strings must use singlequote. (quotes)
| identity, | ||
| ))) | ||
| const isEmptySMS = this.$store.state.trees.tree.hasSms && (isEmpty(item.smsContent) || isEmpty(pickBy( | ||
| const isEmptySMS = this.$store.state["trees"].tree.hasSms && (isEmpty(item.smsContent) || isEmpty(pickBy( |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.dot-notation
Severity: ERROR
File: src/views/ResourceViewer.vue L364
["trees"] is better written in dot notation. (dot-notation)
| return false | ||
| } | ||
| const isEmptyVoice = this.$store.state.trees.tree.hasVoice && (isEmpty(item.audioFiles) || isEmpty(pickBy( | ||
| const isEmptyVoice = this.$store.state["trees"].tree.hasVoice && (isEmpty(item.audioFiles) || isEmpty(pickBy( |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.quotes
Severity: ERROR
File: src/views/ResourceViewer.vue L360
Strings must use singlequote. (quotes)
| return false | ||
| } | ||
| const isEmptyVoice = this.$store.state.trees.tree.hasVoice && (isEmpty(item.audioFiles) || isEmpty(pickBy( | ||
| const isEmptyVoice = this.$store.state["trees"].tree.hasVoice && (isEmpty(item.audioFiles) || isEmpty(pickBy( |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.dot-notation
Severity: ERROR
File: src/views/ResourceViewer.vue L360
["trees"] is better written in dot notation. (dot-notation)
| // that are enabled for the tree, the block should be considered “empty” and show up using this filter. | ||
| return filter(this.$store.state.trees.tree.blocks, (item) => { | ||
| return filter(this.$store.state["trees"].tree.blocks, (item) => { | ||
| if (!this.hasContent(item.type)) { |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.@typescript-eslint/no-unsafe-argument
Severity: ERROR
File: src/views/ResourceViewer.vue L357
Unsafe argument of type `any` assigned to a parameter of type `string`. (@typescript-eslint/no-unsafe-argument)
| // Generally, if a block is missing any of the content for all the content types | ||
| // that are enabled for the tree, the block should be considered “empty” and show up using this filter. | ||
| return filter(this.$store.state.trees.tree.blocks, (item) => { | ||
| return filter(this.$store.state["trees"].tree.blocks, (item) => { |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.quotes
Severity: ERROR
File: src/views/ResourceViewer.vue L356
Strings must use singlequote. (quotes)
| // Generally, if a block is missing any of the content for all the content types | ||
| // that are enabled for the tree, the block should be considered “empty” and show up using this filter. | ||
| return filter(this.$store.state.trees.tree.blocks, (item) => { | ||
| return filter(this.$store.state["trees"].tree.blocks, (item) => { |
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.dot-notation
Severity: ERROR
File: src/views/ResourceViewer.vue L356
["trees"] is better written in dot notation. (dot-notation)
| @@ -349,45 +353,45 @@ export class ResourceViewer extends mixins(Lang) { | |||
| // Empty content could be like: {} or {smsContent:{44:''} | |||
| // Generally, if a block is missing any of the content for all the content types | |||
| // that are enabled for the tree, the block should be considered “empty” and show up using this filter. | |||
There was a problem hiding this comment.
Reporter: ESLint
Rule: eslint.rules.vue/max-len
Severity: ERROR
File: src/views/ResourceViewer.vue L355
This line has a length of 109. Maximum allowed is 100. (vue/max-len)
Context
Just a Experiment to identify the work needed to migrate flow-builder to vue 3
Summary
TODO list