fix Production/Test message for search

Author: rlxdev

src/components/cveRecordSearchModule.vue

@@ -60,8 +60,7 @@
 import { useCveListSearchStore } from '@/stores/cveListSearch';
 import { computed, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-// Legacy Search Import
-import { usecveRecordStore, useErrorMessageStore } from '@/stores/cveRecord';
+import { useErrorMessageStore } from '@/stores/cveRecord';
 import { useGenericGlobalsStore } from '@/stores/genericGlobals';
 
 const cveIdRegex = /^CVE\p{Pd}(?<year>\d{4})\p{Pd}(?<id>\d{4,})$/iu;
@@ -88,9 +87,8 @@ let queryString = ref('');
 let errorMessage = ref('');
 
 let cveGenericGlobalsStore = useGenericGlobalsStore();
-let cveRecordStore = usecveRecordStore();
-let searchType = ref(searchOptionLabel);
-let cveId = cveRecordStore.cveId;
+let searchType = ref('');
+let cveId = '';
 
 // this seems redundant, but it fixes an edge case. if a user searches for a
 // particular field, then on the results page flips the toggle, THEN refreshes
@@ -99,9 +97,12 @@ let searchTypeBoolean = computed(() => {
   return searchType.value === searchOptionLabel ? true : false;
 });
 
-watch(searchType, () => {
-  resetStates();
-});
+// The watch is set up first and then the initialization of the searchType
+// value so that the watch is triggered, which resets the state.
+
+watch(searchType, () => {resetStates();});
+
+searchType.value = searchOptionLabel;
 
 watch(
   () => route.query,
@@ -115,8 +116,9 @@ watch(
       // find than the normal search (cveawg). In this case, we need to switch
       // the search type to "legacy".  (issue #3426)
 
-      if (route?.name === cveRecordRouteName
-        && !cveGenericGlobalsStore.isProductionWebsite)
+      if (route.name === cveRecordRouteName
+        && !cveGenericGlobalsStore.isProductionWebsite
+        && (route.query?.prod ?? 'false') !== 'true')
         searchType.value = legacyOptionLabel;
       else if (route.query?.query) {
           queryString.value = route.query.query.trim();
@@ -127,25 +129,20 @@ watch(
 )
 
 function resetStates() {
-  cveListSearchStore.searchType = cveGenericGlobalsStore.useSearch = searchTypeBoolean.value;
+  const isSearch = searchTypeBoolean.value;
+  const servicesUrl = isSearch ? cveGenericGlobalsStore.cveServicesBaseUrl
+    : cveGenericGlobalsStore.cveServiceTestBaseUrl;
+  cveGenericGlobalsStore.setUseSearch(isSearch);
+  cveGenericGlobalsStore.setCurrentServicesUrl(servicesUrl);
+  cveListSearchStore.searchType = isSearch;
   cveId = '';
   queryString.value = cveListSearchStore.query = '';
   errorMessageStore.$reset();
   cveListSearchStore.isSearchButtonDisabled = true;
-  resetSearch();
 }
 
 function startSearch() {
-  // We only want to flip the search item _When we actually do a search_
-  // otherwise we should default back to what we were on a page refresh
-  if (searchTypeBoolean.value) {
-    cveGenericGlobalsStore.setUseSearch(true);
-    cveGenericGlobalsStore.setCurrentServicesUrl(cveGenericGlobalsStore.cveServicesBaseUrl);
-  }
-  else {
-    cveGenericGlobalsStore.setUseSearch(false);
-    cveGenericGlobalsStore.setCurrentServicesUrl(cveGenericGlobalsStore.cveServiceTestBaseUrl);
-  }
+
   if (cveGenericGlobalsStore.useSearch) {
       cveListSearchStore.$reset();
       cveListSearchStore.query = queryString.value;

src/stores/genericGlobals.ts

@@ -25,4 +25,4 @@ export const useGenericGlobalsStore = defineStore('genericGlobals', {
       sessionStorage.setItem('currentServicesUrl', JSON.stringify(value));
     }
   },
-});
+});

src/views/CVERecord/CVERecord.vue

@@ -26,7 +26,9 @@
             <p id="alertIconCveRecordsRequestErrored" class="is-hidden">alert</p>
             <font-awesome-icon style="flex: 0 0 40px;" size="1x"  icon="triangle-exclamation" role="img"
               aria-labelledby="alertIconCveRecordsRequestErrored" aria-hidden="false" />
-            <p>You are accessing <span class="has-text-weight-bold">{{ usingProd }}</span> data from {{ resultUrl }}</p>
+            <p>You are accessing data from
+              {{ genericGlobalsStore.currentServicesUrl }}
+            </p>
           </div>
         </div>
         <PublishedRecord v-if="usecveRecordStore.isPublished"/>
@@ -51,7 +53,9 @@
                       <p id="alertIconCveRecordsRequestErrored" class="is-hidden">alert</p>
                       <font-awesome-icon style="flex: 0 0 40px;" size="1x"  icon="triangle-exclamation" role="img"
                         aria-labelledby="alertIconCveRecordsRequestErrored" aria-hidden="false" />
-                      <p>You are accessing <span class="has-text-weight-bold">{{ usingProd }}</span> data from {{ resultUrl }}</p>
+                      <p>You are accessing data from
+                        {{ genericGlobalsStore.currentServicesUrl }}
+                      </p>
                     </div>
                   </div>
                   <h1 class="title is-3 is-4 mb-2">{{usecveRecordStore.cveId}} not found.</h1>
@@ -94,13 +98,6 @@ export default {
   },
   data() {
     return {
-      isResultFromProd: false,
-      // There is a special case when the website deals with some cached data.
-      // This ensures that the correct value is shown, even though it is not
-      // pretty
-      resultUrl: this.GenericGlobalsStore.useSearch
-        ? this.GenericGlobalsStore.cveServicesBaseUrl
-        : this.GenericGlobalsStore.cveServiceTestBaseUrl,
       usecveRecordStore: usecveRecordStore(),
       cveId: usecveRecordStore().cveId,
       cveServicesUrl: undefined,
@@ -113,9 +110,6 @@ export default {
     };
   },
   computed: {
-    usingProd() {
-      return this.isResultFromProd ? 'Production' : 'Test'
-    },
     isSearching() {
       return usecveRecordStore().isSearching;
     },
@@ -129,10 +123,6 @@ export default {
       this.cveId = this.cveIdToUpperCase(cveId);
       this.validateCveId();
       if (!this.disabled) {
-        if (this.$route.query?.prod ?? 'false' === 'true')
-          this.currentServicesUrl = this.genericGlobalsStore.cveServicesBaseUrl;
-        else
-          this.currentServicesUrl = this.genericGlobalsStore.currentServicesUrl;
         this.startLookup();
       } else {
         usecveRecordStore().showHelpText = true;
@@ -148,10 +138,6 @@ export default {
         this.cveId = this.cveIdToUpperCase(cveId);
         this.validateCveId();
         if (!this.disabled) {
-          if (this.$route.query?.prod ?? 'false' === 'true')
-            this.currentServicesUrl = this.genericGlobalsStore.cveServicesBaseUrl;
-          else
-            this.currentServicesUrl = this.genericGlobalsStore.currentServicesUrl;
           this.startLookup();
         } else {
           this.resetStates();
@@ -213,7 +199,7 @@ export default {
 
       const getIdUrl = `/api/cve-id/${usecveRecordStore().cveId}`;
       try {
-        axios.defaults.baseURL = this.currentServicesUrl;
+        axios.defaults.baseURL = this.genericGlobalsStore.currentServicesUrl;
         const idData = await axios.get(getIdUrl);
         this.getIdStatusCode = 200;
         if (idData.status === 200 && idData?.data?.error === undefined) {
@@ -249,7 +235,8 @@ export default {
       }
     },
     async getRecordData() {
-      const getRecordUrl = `${this.currentServicesUrl}/api/cve/${usecveRecordStore().cveId}`;
+      const getRecordUrl = `${this.genericGlobalsStore.currentServicesUrl}`
+        + `/api/cve/${usecveRecordStore().cveId}`;
       if (this.GenericGlobalsStore.useSearch) {
         this.isResultFromProd = true;
       } else {

src/views/CVERecord/SearchResults.vue

@@ -26,12 +26,15 @@
                   <ServiceUnavailable></ServiceUnavailable>
                 </div>
                 <div v-else>
-                  <div v-if="websiteEnv !== 'prd'" class="notification is-warning is-light" role="alert">
+                  <div v-if="!genericGlobalsStore.isProductionWebsite"
+                    class="notification is-warning is-light" role="alert">
                     <div class="is-flex is-justify-content-center">
                       <p id="alertIconCveRecordsRequestErrored" class="is-hidden">alert</p>
                       <font-awesome-icon style="flex: 0 0 40px;" size="1x"  icon="triangle-exclamation" role="alert"
                         aria-labelledby="alertIconCveRecordsRequestErrored" aria-hidden="false" />
-                      <p>You are accessing <span class="has-text-weight-bold">Production</span> data from {{ resultUrl }}</p>
+                      <p>You are accessing data from
+                        {{ generalGlobalsStore.currentServicesUrl }}
+                      </p>
                     </div>
                   </div>
                   <h2 class="title">Search Results</h2>
@@ -282,7 +285,7 @@
 import { useCveListSearchStore } from '@/stores/cveListSearch';
 import { useGenericGlobalsStore } from '@/stores/genericGlobals';
 import { usePartnerStore } from '@/stores/partners';
-import { computed, createApp, ref, watch } from 'vue';
+import { computed, createApp, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import ServiceUnavailable from '@/components/ServiceUnavailable.vue'
 
@@ -291,7 +294,6 @@ const generalGlobalsStore = useGenericGlobalsStore();
 const partnerStore = usePartnerStore();
 const router = useRouter();
 const app = createApp({});
-const resultUrl = ref(generalGlobalsStore.cveServicesBaseUrl);
 
 app.component('ServiceUnavailable', ServiceUnavailable);
 
@@ -314,7 +316,7 @@ function backToTop() {
 function cveRecordRoute(cveId) {
   let recordRoute = `/CVERecord?id=${cveId}`;
 
-  if (!generalGlobalsStore.isProductionWebsite)
+  if (!generalGlobalsStore.isProductionWebsite && generalGlobalsStore.useSearch)
     recordRoute += '&prod=true';
 
   return recordRoute