#3158 add production data banner

CVEProject · Oct 14, 2024 · d003ac2 · d003ac2
1 parent bea5a65
commit d003ac2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/src/views/CVERecord/CVERecord.vue b/src/views/CVERecord/CVERecord.vue
@@ -22,20 +22,20 @@
     <div v-else>
       <div v-if="usecveRecordStore.isIdOrRecordFound">
         <div class="notification is-warning is-light" role="alert">
-        <div v-if="websiteEnv !== 'prd'" class="is-flex" style="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="img"
-            aria-labelledby="alertIconCveRecordsRequestErrored" aria-hidden="false" />
-          <p>You are viewing <strong>{{ usingProd }}</strong> data from&nbsp;</p>
-          <a :href="resultUrl" target="_blank"> {{ resultUrl }} 
+          <div v-if="websiteEnv !== 'prd'" class="is-flex" style="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="img"
+              aria-labelledby="alertIconCveRecordsRequestErrored" aria-hidden="false" />
+            <p>You are viewing <span class="has-text-weight-bold">{{ usingProd }}</span> data from&nbsp;</p>
+            <a :href="resultUrl" target="_blank"> {{ resultUrl }} 
               <span class="icon cve-icon-xxs">
                 <p id="externalLinkIcon" class="is-hidden">external website</p>
                 <font-awesome-icon icon="up-right-from-square"
-                 aria-labelledby="externalLinkIcon" aria-hidden="false"/>
+                aria-labelledby="externalLinkIcon" aria-hidden="false"/>
               </span>
-          </a>
+            </a>
+          </div>
         </div>
-      </div>
         <PublishedRecord v-if="usecveRecordStore.isPublished"/>
         <RejectedRecordOrId v-if="usecveRecordStore.isRejected"/>
         <ReservedId v-if="usecveRecordStore.isReserved"/>

diff --git a/src/views/CVERecord/SearchResults.vue b/src/views/CVERecord/SearchResults.vue
@@ -63,6 +63,21 @@
                     </div>
                   </div>
                   <div id="cve-search-results-container" v-if="cveListSearchStore.totalSearchResultCount > 0">
+                    <div class="notification is-warning is-light" role="alert">
+                      <div v-if="websiteEnv !== 'prd'" class="is-flex" style="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="img"
+                          aria-labelledby="alertIconCveRecordsRequestErrored" aria-hidden="false" />
+                        <p>You are viewing <span class="has-text-weight-bold">Production</span> data from&nbsp;</p>
+                        <a :href="resultUrl" target="_blank"> {{ resultUrl }} 
+                          <span class="icon cve-icon-xxs">
+                            <p id="externalLinkIcon" class="is-hidden">external website</p>
+                            <font-awesome-icon icon="up-right-from-square"
+                            aria-labelledby="externalLinkIcon" aria-hidden="false"/>
+                          </span>
+                        </a>
+                      </div>
+                    </div>
                     <h2 class="title">Search Results</h2>
                     <div class="mt-2 mb-2">
                       <p>
@@ -226,13 +241,14 @@
 <script setup>
 import { useCveListSearchStore } from '@/stores/cveListSearch';
 import { usePartnerStore } from '@/stores/partners';
-import { createApp, watch } from 'vue';
+import { createApp, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import ServiceUnavailable from '@/components/ServiceUnavailable.vue'
 
 const cveListSearchStore = useCveListSearchStore();
 const router = useRouter();
 const app = createApp({});
+const resultUrl = ref(`https://${import.meta.env.VITE_CVE_SERVICES_BASE_URL}`);
 
 app.component('ServiceUnavailable', ServiceUnavailable);