address more reviews

Signed-off-by: Swikriti Tripathi <swikriti808@gmail.com>
nextcloud · Oct 17, 2023 · 1359656 · 1359656
1 parent 1934e9c
commit 1359656
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 25 deletions.
diff --git a/src/views/CreateWorkPackageModal.vue b/src/views/CreateWorkPackageModal.vue
@@ -69,7 +69,7 @@
 							{{ t('integration_openproject', 'Please select a project') }}
 						</template>
 					</NcSelect>
-					<p v-if="error.error && error.attribute === 'type'" class="validation-error type-error" v-html="error.message" /> <!-- eslint-disable-line vue/no-v-html -->
+					<p v-if="customTypeError" class="validation-error type-error" v-html="sanitizedRequiredCustomTypeValidationErrorMessage" /> <!-- eslint-disable-line vue/no-v-html -->
 				</div>
 				<div class="create-workpackage-form--status">
 					<div class="create-workpackage-form--label">
@@ -123,7 +123,7 @@
 				<NcButton class="create-workpackage-form--button--cancel" @click="closeModal">
 					{{ t("integration_openproject", "Cancel") }}
 				</NcButton>
-				<NcButton class="create-workpackage-form--button--create" :disabled="error.error" @click="createWorkpackage">
+				<NcButton class="create-workpackage-form--button--create" :disabled="error.error || customTypeError" @click="createWorkpackage">
 					{{ t("integration_openproject", "Create") }}
 				</NcButton>
 			</div>
@@ -218,6 +218,7 @@ export default {
 		projectId: null,
 		description: DEFAULT_DESCRIPTION_VALUE,
 		error: DEFAULT_ERROR_VALUE,
+		customTypeError: false,
 	}),
 	computed: {
 		openModal() {
@@ -241,6 +242,17 @@ export default {
 		mappedNodes() {
 			return this.mappedProjects()
 		},
+		sanitizedRequiredCustomTypeValidationErrorMessage() {
+			const htmlLink = `<a class="openProjectUrl" href=${this.openProjectUrl} target="_blank" title="OpenProject">OpenProject</a>`
+			const message = t(
+				'integration_openproject',
+				'This type has mandatory fields which cannot be filled here. Please, create work packages of this type directly in {htmlLink}.',
+				{ htmlLink },
+				null,
+				{ escape: false, sanitize: false }
+			)
+			return dompurify.sanitize(message, { ADD_ATTR: ['target'] })
+		},
 	},
 	methods: {
 		mappedProjects() {
@@ -335,8 +347,8 @@ export default {
 			await this.validateWorkPackageForm(this.projectId, true, true)
 		},
 		async onSelectType(selectedOption) {
-			if (this.error.error) {
-				this.error = DEFAULT_ERROR_VALUE
+			if (this.customTypeError) {
+				this.customTypeError = false
 			}
 			this.type = selectedOption
 			// set the allowed values for status when type selection changes
@@ -381,20 +393,7 @@ export default {
 					const validationErrors = response.data.validationErrors
 					for (const errors in validationErrors) {
 						if (errors.startsWith('customField')) {
-							const htmlLink = `<a class="openProjectUrl" href=${this.openProjectUrl} target="_blank" title="OpenProject">OpenProject</a>`
-							const message = t(
-								'integration_openproject',
-								'This type has mandatory fields which cannot be filled here. Please, create work packages of this type directly in {htmlLink}.',
-								{ htmlLink },
-								null,
-								{ escape: false, sanitize: false }
-							)
-							this.error = {
-								error: true,
-								attribute: 'type',
-								message: dompurify.sanitize(message, { ADD_ATTR: ['target'] }),
-								multipleErrors: {},
-							}
+							this.customTypeError = true
 							return
 						}
 					}

diff --git a/tests/jest/components/tab/SearchInput.spec.js b/tests/jest/components/tab/SearchInput.spec.js
@@ -880,7 +880,7 @@ describe('SearchInput.vue', () => {
 			const workpackageCreationEventData = {
 				openProjectEventName: 'work_package_creation_cancellation',
 			}
-			wrapper.vm.handelCreateWorkPackageEvent(workpackageCreationEventData)
+			wrapper.vm.onCreateWorkPackageEvent(workpackageCreationEventData)
 			expect(dialogs.showError).toBeCalledTimes(1)
 			expect(dialogs.showError).toBeCalledWith('Work package creation was not successful.')
 		})
@@ -918,7 +918,7 @@ describe('SearchInput.vue', () => {
 				fileInfo: { id: 1234, name: 'file.txt' },
 			})
 			await wrapper.vm.$nextTick()
-			wrapper.vm.handelCreateWorkPackageEvent(workpackageCreationEventData)
+			wrapper.vm.onCreateWorkPackageEvent(workpackageCreationEventData)
 			await wrapper.vm.$nextTick()
 			expect(dialogs.showSuccess).toBeCalledTimes(2)
 			expect(dialogs.showSuccess).toBeCalledWith('Work package created successfully.')

diff --git a/tests/jest/views/CreateWorkpackageModal.spec.js b/tests/jest/views/CreateWorkpackageModal.spec.js
@@ -475,7 +475,7 @@ describe('CreateWorkPackageModal.vue', () => {
 		})
 	})
 
-	it('should display error when theirs a required custom field', async () => {
+	it('should display error when there is a required custom field', async () => {
 		const bodyFormValidation = {
 			body: {
 				_links: {

diff --git a/tests/jest/views/__snapshots__/CreateWorkpackageModal.spec.js.snap b/tests/jest/views/__snapshots__/CreateWorkpackageModal.spec.js.snap
@@ -3,10 +3,7 @@
 exports[`CreateWorkPackageModal.vue workpackage creation form should display available projects in the project dropdown 1`] = `
 <div dir="auto" class="v-select select create-workpackage-form--select vs--open vs--single vs--searching vs--searchable" data-test-id="available-projects">
   <div id="vs1__combobox" role="combobox" aria-expanded="true" aria-owns="vs1__listbox" aria-label="Search for option" class="vs__dropdown-toggle">
-    <div class="vs__selected-options"><span class="vs__selected"><span data-v-3daafbe0="" title="" class="name-parts"><span data-v-3daafbe0="" class="name-parts__first"></span>
-      <!----></span>
-      <!----></span> <input id="createWorkPackageInput" aria-autocomplete="list" aria-labelledby="vs1__combobox" aria-controls="vs1__listbox" type="search" autocomplete="off" class="vs__search" aria-activedescendant="vs1__option-0">
-    </div>
+    <div class="vs__selected-options"> <input placeholder="Select a project" id="createWorkPackageInput" aria-autocomplete="list" aria-labelledby="vs1__combobox" aria-controls="vs1__listbox" type="search" autocomplete="off" class="vs__search" aria-activedescendant="vs1__option-0"></div>
     <div class="vs__actions"><button type="button" title="Clear Selected" aria-label="Clear Selected" class="vs__clear" style="display: none;"><span aria-hidden="true" role="img" class="material-design-icon close-icon" style="cursor: pointer;"><svg fill="var(--vs-controls-color)" width="20" height="20" viewBox="0 0 24 24" class="material-design-icon__svg"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"><!----></path></svg></span></button> <span aria-hidden="true" role="presentation" class="material-design-icon chevron-down-icon vs__open-indicator"><svg fill="var(--vs-controls-color)" width="26" height="26" viewBox="0 0 24 24" class="material-design-icon__svg"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"><!----></path></svg></span>
       <div class="vs__spinner" style="display: none;">Loading...</div>
     </div>