Display loading icon while fetching workpackages

Signed-off-by: Swikriti Tripathi <swikriti808@gmail.com>

src/components/tab/SearchInput.vue

@@ -10,6 +10,9 @@
 			track-by="multiselectKey"
 			:internal-search="false"
 			open-direction="below"
+			:loading="loading"
+			:preselect-first="true"
+			:preserve-search="true"
 			@search-change="makeSearchRequest">
 			<template #option="{option}">
 				<div class="searchList">
@@ -52,6 +55,9 @@
 			<template #noOptions>
 				{{ t('integration_openproject', 'Start typing to search') }}
 			</template>
+			<template #noResult>
+				{{ noResultMessages }}
+			</template>
 		</Multiselect>
 		<div v-if="state !== 'ok'"
 			class="stateMsg text-center">
@@ -77,6 +83,7 @@ export default {
 		search: null,
 		state: 'ok',
 		searchResults: [],
+		loading: false,
 	}),
 	computed: {
 		placeholder() {
@@ -92,6 +99,12 @@ export default {
 			}
 			return ''
 		},
+		noResultMessages() {
+			if (this.loading) {
+				return t('integration_openproject', 'Searching for work package')
+			}
+			return t('integration_openproject', 'No workpackages found.')
+		},
 	},
 	watch: {
 		search(value, oldValue) {
@@ -113,14 +126,15 @@ export default {
 			}
 			const url = generateUrl('/apps/integration_openproject/work_packages')
 			if (this.search.length > 3) {
+				this.loading = true
 				const req = {}
 				req.params = {
 					searchQuery: this.search,
 				}
-				this.state = 'loading'
 				const response = await axios.get(url, req)
 				if (response.status === 200) {
 					this.state = 'ok'
+					this.loading = false
 					if (response.data.length === 0) {
 						this.searchResults = []
 
@@ -177,10 +191,11 @@ export default {
 		async getWorkPackageColorAttributes(path, id) {
 			const url = generateUrl(path + id)
 			const req = {}
-			this.state = 'loading'
+			this.loading = true
 			const response = await axios.get(url, req)
 			if (response.status === 200) {
 				this.state = 'ok'
+				this.loading = false
 				return response.data.color
 			}
 			this.checkStatusCode(response.status)

tests/jest/components/tab/SearchInput.spec.js

@@ -34,9 +34,6 @@ describe('SearchInput.vue tests', () => {
 		}, {
 			state: 'error',
 			message: 'Error connecting to OpenProject',
-		}, {
-			state: 'loading',
-			message: 'Wait while we fetch workpackages',
 		}])('should be displayed depending upon the state', async (cases) => {
 			const stateSelector = '.stateMsg'
 			const wrapper = shallowMount(SearchInput, {
@@ -62,6 +59,7 @@ describe('SearchInput.vue tests', () => {
 		const statusSelector = '.filterProjectTypeStatus__status'
 		const typeSelector = '.filterProjectTypeStatus__type'
 		const assigneeSelector = '.filterAssignee'
+		const loadingIconSelector = '.icon-loading-small'
 		it('should not be displayed if the length of words in searchbar is less than or equal to three', async () => {
 			const wrapper = mountSearchInput()
 			const textInput = wrapper.find(inputSelector)
@@ -145,5 +143,17 @@ describe('SearchInput.vue tests', () => {
 			const assignee = wrapper.find(assigneeSelector)
 			expect(assignee.exists()).toBeFalsy()
 		})
+
+		it('should display a loading button when the work package is being fetched', async () => {
+			jest.spyOn(SearchInput.methods, 'makeSearchRequest').mockImplementation()
+			const wrapper = mountSearchInput()
+			const textInput = wrapper.find(inputSelector)
+			await textInput.setValue('organ')
+			await wrapper.setData({
+				loading: true,
+			})
+			const loadingIcon = wrapper.find(loadingIconSelector)
+			expect(loadingIcon.exists()).toBeTruthy()
+		})
 	})
 })