clear input and states when selecting different drop-down option, show Access Search tips link only for search option, fix View JSON link, fix search tip links, remove unused function

Author: ann-linh-mitre

src/components/PrimaryNavigation.vue

@@ -125,11 +125,13 @@
             <cveRecordSearch/>
           </div>
           <div class="navbar-item cve-secondary-navbar-item cve-keyword-search">
-            <span class="icon-text mr-2" style="font-size: 14px">
-              <router-link to="/ResourcesSupport/FAQs#pc_cve_list_basicssearch_cve" class="cve-dark-blue-text">
-                Access Search Tips
-              </router-link>
-            </span>
+            <div v-if="searchType">
+              <span class="icon-text mr-2" style="font-size: 14px">
+                <router-link to="/ResourcesSupport/FAQs#pc_cve_list_basicssearch_cve" class="cve-dark-blue-text">
+                  Access Search Tips
+                </router-link>
+              </span>
+            </div>
           </div>
         </div>
         <div class="navbar-end is-hidden-touch">
@@ -151,6 +153,8 @@
 
 <script>
 import cveRecordSearch from '@/components/cveRecordSearchModule.vue';
+import { useCveListSearchStore } from '@/stores/cveListSearch';
+import { mapState } from 'pinia'
 
 export default {
   components: { cveRecordSearch },
@@ -160,6 +164,9 @@ export default {
       required: true,
     },
   },
+  computed: {
+    ...mapState(useCveListSearchStore, ['searchType'])
+  },
   data() {
     return {
       isOpen: false,

src/components/cveRecordSearchModule.vue

@@ -58,14 +58,14 @@
           <input v-if="searchTypeBoolean" v-model.trim="queryString" @keyup.enter="onKeyUpEnter"
             @keyup="validateQueryString" type="text" class="input cve-id-input"
             placeholder="Enter keywords (e.g.: CVE ID, sql injection, etc.)" />
-          <input v-else v-model="cveId" @keyup.enter="onKeyUpEnter" @keyup="validateQueryString" @blur="removeHelpText"
+          <input v-else v-model.trim="cveId" @keyup.enter="onKeyUpEnter" @keyup="validateQueryString"
             type="text" class="input cve-id-input" placeholder="Enter CVE ID (CVE-YYYY-NNNN)" />
         </div>
         <div class="control">
           <button @click="validate" class="button cve-button cve-button-accent-warm"
             :class="{ 'is-loading': cveListSearchStore.isSearching, 'disabled': cveListSearchStore.isSeachButtonDisabled }"
             :aria-disabled="cveListSearchStore.isSeachButtonDisabled">
-            Search {{ websiteEnv === 'test' ? 'CVE List in Test' : '' }}
+            Search
           </button>
         </div>
       </div>
@@ -76,7 +76,6 @@
             aria-labelledby="alertIcon" aria-hidden="false" />
           <p class="cve-help-text">
             {{ errorMessage }}
-            <router-link to="/ResourcesSupport/FAQs#pc_cve_list_basicssearch_cve" class="cve-dark-blue-text">Access Search Tips.</router-link>
           </p>
         </div>
       </div>
@@ -112,6 +111,13 @@ let searchTypeBoolean = computed(() => {
   return searchType.value == 'Search CVE List (Beta)' ? true : false;
 });
 
+watch(searchType, () => {
+  cveListSearchStore.searchType = (searchType.value === 'Search CVE List (Beta)') ? true : false;
+  cveId = cveRecordStore.cveId = '';
+  queryString.value = cveListSearchStore.query = '';
+  errorMessage.value = '';
+});
+
 watch(
   () => route.query,
   () => {

src/stores/cveListSearch.js

@@ -21,6 +21,7 @@ export const useCveListSearchStore = defineStore('cveListSearch ', {
       query: '',
       recordData: {},
       searchResults: [],
+      searchType: true,
       serverError: false,
       showHelpText: false,
       size: 25,

src/views/CVERecord/PublishedRecord.vue

@@ -16,7 +16,7 @@
             <div class="level-right ml-1">
               <div class="level-item">
                 <span class="icon-text">
-                  <a id="cve-view-json" :href="`https://${cveServicesBaseUrl}/api/cve/${usecveRecordStore.cveId}`" target="_blank">
+                  <a id="cve-view-json" :href="`${cveServicesBaseUrl}/api/cve/${usecveRecordStore.cveId}`" target="_blank">
                     <span class="icon">
                       <p id="enewsletter" class="is-hidden">external site</p>
                       <font-awesome-icon icon="file-code" aria-labelledby="enewsletter"></font-awesome-icon>

src/views/CVERecord/RejectedRecordOrId.vue

@@ -15,7 +15,7 @@
             <div class="level-right ml-1">
               <div class="level-item">
                 <a id="cve-view-json"
-                  :href="`https://${cveServicesBaseUrl}/api/${ usecveRecordStore.isArecord ?
+                  :href="`${cveServicesBaseUrl}/api/${ usecveRecordStore.isArecord ?
                   'cve' : 'cve-id'}/${usecveRecordStore.cveId}`"
                   target="_blank">
                   View JSON

src/views/CVERecord/ReservedId.vue

@@ -14,7 +14,7 @@
             </div>
             <div class="level-right">
               <div class="level-item">
-                <a id="cve-view-json" :href="`https://${cveServicesBaseUrl}/api/cve-id/${usecveRecordStore.cveId}`" target="_blank">
+                <a id="cve-view-json" :href="`${cveServicesBaseUrl}/api/cve-id/${usecveRecordStore.cveId}`" target="_blank">
                   View JSON
                 </a>
               </div>

src/views/CVERecord/SearchResults.vue

@@ -231,7 +231,7 @@
                   <div v-else>
                     <p class="has-text-weight-bold">No search results found for: <span class="is-italic">{{ cveListSearchStore.query }}</span></p>
                     <p>Please try your search again using different keyword(s) or access the
-                      <router-link to="/ResourcesSupport/FAQs#pc_cve_list_basicssearch_cve_list_tips">search tips</router-link>.
+                      <router-link to="/ResourcesSupport/FAQs#pc_cve_list_basicssearch_cve">search tips</router-link>.
                     </p>
                   </div>
                 </div>