add error message/note display for search errors

Author: rlxdev

src/components/cveRecordSearchModule.vue

@@ -48,9 +48,10 @@
         <p id="alertIcon" class="is-hidden">alert</p>
         <font-awesome-icon style="flex: 0 0 40px; margin-top:3px" size="lg" icon="exclamation-triangle" role="alert"
           aria-labelledby="alertIcon" aria-hidden="false" />
-        <p class="cve-help-text">
-          {{ errorMessageStore.errorMessage }}
-        </p>
+          <ul class="pl-4" style="list-style: square">
+            <li v-for="errorMsg in errorMessageStore.errorMessage"
+              class="cve-help-text" v-html="errorMsg"></li>
+          </ul>
       </div>
     </div>
   </div>

src/stores/cveListSearch.js

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia';
+import { useErrorMessageStore } from './cveRecord';
 import { useGenericGlobalsStore } from './genericGlobals';
 import axios from 'axios';
 
@@ -71,6 +72,10 @@ export const useCveListSearchStore = defineStore('cveListSearch ', {
     isCveIdPattern() {
       return new RegExp(/^CVE-\d{4}-\d{4,7}$/, 'i').test(this.query);
     },
+    resetResults() {
+      this.searchResults = [];
+      this.totalSearchResultCount = 0;
+    },
     async search() {
       this.isSearching = true;
       try{
@@ -168,15 +173,27 @@ export const useCveListSearchStore = defineStore('cveListSearch ', {
       this.isQueryingSearchService = true;
       const searchUrl = `${import.meta.env.VITE_API_BASE_URL}${import.meta.env.VITE_LIST_SEARCH_PATH}`;
 
+      this.resetResults();
+
       try {
         let payLoad = this.createSearchPayload();
         const response = await axios.post(searchUrl, payLoad);
 
-        if (response.status === 200) {
+        const searchMetaData = response.data['search-metadata'];
+
+        if (searchMetaData.searchStatus === 'ok') {
           this.totalSearchResultCount = response.data.resultsTotal;
           this.processSearchResults(response.data.data);
-        }
+        } else {
+          // There's likely something invalid in the search string.
+          // Error message(s) and note(s) returned in the response will be
+          // displayed to the user.
+
+          const ems = useErrorMessageStore();
 
+          searchMetaData.errors.forEach(e => ems.pushErrorMessage(e.message));
+          searchMetaData.notes.forEach(n => ems.pushErrorMessage(n));
+        }
       } catch (e) {
         this.isSearchServerError = true;
         throw new Error(`getSearchResults >> : ${e}`)

src/stores/cveRecord.ts

@@ -70,34 +70,45 @@ export const usecveRecordStore = defineStore('cveRecord', {
 });
 
 
-// The "error message" store handles the error message displayed to the user
+// The "error message" store handles the error message(s) displayed to the user
 // just below the search input field.  A store is used because error messages
 // triggered by the user's CVE ID input occur in both the CVERecord module and
-// the cveRecordSearch module.
+// the cveRecordSearch module.  It's also used for messages returned by the
+// search in cveListSearch.
+
+type ErrorMessageState = {
+  errorMessage: string[]
+  showErrorMessage: boolean
+}
 
 export const useErrorMessageStore = defineStore('errorMessage', {
-  state: () => {
-    return {
-      errorMessage: '',
-      showErrorMessage: false
-    }
-  },
+  state: (): ErrorMessageState => ({
+    errorMessage: [],
+    showErrorMessage: false,
+  }),
   getters: {
     isErrorMessage: (state) => state.errorMessage.length > 0,
+    lineCount: (state) => state.errorMessage.length,
   },
   actions: {
     cveIdFormatMessage() {
       const formatMessage = 'Required CVE ID format: CVE-YYYY-NNNN';
       this.setErrorMessage(formatMessage);
     },
+    pushErrorMessage(message: string) {
+      if (message.length) {
+        this.errorMessage.push(message);
+        this.showErrorMessage = true;
+      }
+    },
     setErrorMessage(message: string) {
       if (message.length) {
-        this.errorMessage = message;
+        this.errorMessage = [message];
         this.showErrorMessage = true;
       } else {
-        this.errorMessage = '';
+        this.errorMessage = [];
         this.showErrorMessage = false;
       }
-    }
+    },
   }
 });