SADP tag/button implementation

rlxdev · rlxdev · commit ae120efa5376 · 2026-03-31T18:42:34.000-04:00
diff --git a/src/assets/style/bulmaCveCustomizations.scss b/src/assets/style/bulmaCveCustomizations.scss
@@ -21,6 +21,7 @@
   $family-primary: '"Arial", "Source Sans Pro", "Public Sans Web", sans-serif, "Arial"',
   $family-secondary: '"Arial", "Source Sans Pro", "Public Sans Web", sans-serif, "Arial"',
   $family-code: sans-serif,
+  $primary: $theme-color-primary-darker,
   $size-small: 0.77rem,
 );
 
diff --git a/src/components/SadpTag.vue b/src/components/SadpTag.vue
@@ -0,0 +1,51 @@
+<!--
+This component puts an SADP tag where it's instantiated.  If an anchor location
+is given, the tag serves as a button to bring the current view to the anchor
+point.  With no given anchor, the tag serves as a label.
+
+It is instantiated in a Vue template as follows:
+
+<SadpTag :hasSadp="<boolean-value>" :anchor="<anchor-id>"/>
+
+where <boolean-value> indicates whether the CVE Record has an SADP, and
+<anchor-id> is the optional anchor point for the SADP section.
+-->
+
+<template>
+    <button v-if="hasSadp" class="tag is-rounded is-primary is-normal"
+      :style="{cursor: anchor ? 'pointer' : 'default'}"
+      @click="gotoAnchor()">
+      SADP
+    </button>
+</template>
+
+<script setup>
+
+const props = defineProps({
+    anchor: {
+      type: String
+    },
+    hasSadp: {
+      type: [Boolean, undefined],
+      required: true
+    }
+});
+
+function gotoAnchor() {
+
+  if (props.anchor) {
+
+    // This method works better than setting window.location.hash
+    // because it handles the case when the user has already gone
+    // to the anchor, but then scrolls up and clicks the button
+    // again with no effect.
+
+    const element = document.getElementById(props.anchor);
+
+    if (element) {
+      element.scrollIntoView({behavior: 'smooth', block: 'start'});
+    }
+  }
+}
+
+</script>
diff --git a/src/stores/cveListSearch.js b/src/stores/cveListSearch.js
@@ -285,6 +285,11 @@ export const useCveListSearchStore = defineStore('cveListSearch ', {
         this.decrement('totalExecutingRequests');
       }
     },
+    hasSadp(cveRecord) {
+
+        return cveRecord.adp.some((adp) => (adp.x_adpType === 'supplier'
+              || adp.providerMetadata.shortName.endsWith('-SADP')));
+    },
     processSearchResults(results){
       const parsedResults = [];
 
@@ -295,6 +300,7 @@ export const useCveListSearchStore = defineStore('cveListSearch ', {
             cna: result?._source?.containers?.cna?.providerMetadata?.shortName || 'No CNA provided',
             cnaOrgId: result?._source?.containers?.cna?.providerMetadata?.orgId || '',
             descriptions: this.processDescriptionsField(result?._source),
+            hasSadp: this.hasSadp(result._source.containers),
             relevancyScore: result?._score
           });
         });
diff --git a/src/views/CVERecord/PublishedRecord.vue b/src/views/CVERecord/PublishedRecord.vue
@@ -14,6 +14,9 @@
                   cve-state-tag">{{cveFieldList.state}}
                 </span>
               </div>
+              <div class="level-item">
+                <SadpTag :hasSadp="hasSadp()" :anchor="sadpContainerAnchor()"/>
+              </div>
             </div>
             <div class="level-right ml-1">
               <div class="level-item">
@@ -61,7 +64,7 @@
           <div class="mt-2">
             <div id="cve-cna-cve-program-containers">
               <h2 class="title">Required CVE Record Information</h2>
-              <AdpVulnerabilityEnrichment v-if="Object.keys(cnaContainer).length > 0" role="cna" :selectedCnaData="cveFieldList"
+              <AdpVulnerabilityEnrichment v-if="!isEmptyObject(cnaContainer)" role="cna" :selectedCnaData="cveFieldList"
                 :containerObject="cnaContainer" :orgId="`cna-${cnaContainer.providerMetadata.orgId}`" :anchorId="cnaContainer.onPageMenu.anchorId">
                 <h1 class="mb-1 has-text-white">
                   <span v-if="!isLoading">{{ cnaContainer.onPageMenu.label }} </span>
@@ -74,14 +77,14 @@
                 </h1>
               </AdpVulnerabilityEnrichment>
               <!-- <AdpVulnerabilityEnrichment v-if="!usecveRecordStore.hasHistoricalReferences" role="cna" :containerObject="cnaContainer"></AdpVulnerabilityEnrichment> -->
-              <AdpVulnerabilityEnrichment v-if="Object.keys(cveProgramContainer).length > 0" role='cveProgram'
+              <AdpVulnerabilityEnrichment v-if="!isEmptyObject(cveProgramContainer)" role='cveProgram'
                 :selectedCnaData="{}" :containerObject="cveProgramContainer" :orgId="`cve-program-${cveProgramContainer.providerMetadata.orgId}`"
                 :anchorId="cveProgramContainer.onPageMenu.anchorId"
               >
                 <h1 class="mb-1 has-text-white cve-capitalize-first-letter">{{ cveProgramContainer.onPageMenu.label }}</h1>
               </AdpVulnerabilityEnrichment>
             </div>
-            <div v-if="Object.keys(adpContainers).length > 0" id="cve-adp-containers" class="mt-6">
+            <div v-if="!isEmptyObject(adpContainers)" id="cve-adp-containers" class="mt-6">
               <h2 class="title mb-0">Authorized Data Publishers</h2>
               <div class="cve-learn-more mb-5">
                 <router-link to="/ProgramOrganization/ADPs" class="cve-learn-more-link">Learn more</router-link>
@@ -107,6 +110,29 @@
                 </div> -->
               </div>
             </div>
+            <template  v-if="sadpContainer">
+              <div class="mt-6" id="cve-sadp-container" >
+                <h2 class="title mb-0">Supplier Authorized Data Publisher</h2>
+                <div class="cve-learn-more mb-5">
+                    <router-link to="/ProgramOrganization/ADPs" class="cve-learn-more-link">Learn more</router-link>
+                </div>
+              </div>
+              <div class="cve-sadp-container">
+                <AdpVulnerabilityEnrichment role="adp" :selectedCnaData="{}"
+                  :containerObject="sadpContainer" :orgId="`sadp-${sadpContainer.providerMetadata.orgId}`"
+                  :anchorId="sadpContainerAnchor()">
+                  <h1 class="mb-1 has-text-white cve-capitalize-first-letter">
+                    <span v-if="!isLoading">{{ sadpContainer.onPageMenu.label }}</span>
+                    <span v-else>
+                      <span class="icon">
+                        <span class="loader is-loading"/>
+                      </span>
+                      <span class="ml-2">Loading...</span>
+                    </span>
+                  </h1>
+                </AdpVulnerabilityEnrichment>
+              </div>
+            </template>
           </div>
         </div>
       </main>
@@ -122,16 +148,17 @@
 <script>
 import _ from 'lodash';
 import AdpVulnerabilityEnrichment from '@/components/AdpVulnerabilityEnrichment.vue';
-import CNAData from '@/assets/data/CNAsList.json';
 import OnPageSidebar from '@/components/OnPageSidebar.vue';
+import SadpTag from '@/components/SadpTag.vue';
 import { usecveRecordStore } from '@/stores/cveRecord.ts';
 import { usePartnerStore } from '@/stores/partners.js';
 
 export default {
   name: 'PublishedRecord',
   components: {
     AdpVulnerabilityEnrichment,
-    OnPageSidebar
+    OnPageSidebar,
+    SadpTag
   },
   data() {
     return {
@@ -163,10 +190,21 @@ export default {
       cnaContainer: {},
       cveProgramContainer: {},
       adpContainers: {},
+      sadpContainer: {},
       partnerStore: usePartnerStore(),
     };
   },
   methods: {
+    isEmptyObject(obj) {
+
+        return Object.keys(obj).length === 0;
+    },
+    hasSadp() {
+        return !this.isEmptyObject(this.sadpContainer);
+    },
+    sadpContainerAnchor() {
+        return this.hasSadp() ? this.sadpContainer.onPageMenu.anchorId : '';
+    },
     toggleAccordion() {
       const newPanelState = !this.cveRecordStore.accordionState.collapseAll;
       Object.keys(this.cveRecordStore.accordionState).forEach( (panelName) => {
@@ -185,7 +223,7 @@ export default {
         "items": {}
       }
 
-      if (Object.keys(this.cnaContainer).length > 0) {
+      if (!this.isEmptyObject(this.cnaContainer)) {
 
         // This section determines the name displayed for the CNA.
 
@@ -204,7 +242,7 @@ export default {
         this.cnaContainer.onPageMenu = onPageMenu[headingLabel].items['CNA'];
       }
 
-      if (Object.keys(this.cveProgramContainer).length > 0) {
+      if (!this.isEmptyObject(this.cveProgramContainer)) {
         onPageMenu[headingLabel].items['CVE Program'] = {
           label: this.partnerStore.getOrganizationName(this.cveProgramContainer.providerMetadata?.shortName,
                                                        this.cveProgramContainer.providerMetadata.orgId),
@@ -224,7 +262,7 @@ export default {
         this.adpContainers[containerName].onPageMenu = adpContainersMenu[`ADP-${this.adpContainers[containerName].providerMetadata.orgId}`];
       });
 
-      if (Object.keys(adpContainersMenu).length > 0) {
+      if (!this.isEmptyObject(adpContainersMenu)) {
         onPageMenu['Authorized Data Publishers'] = {
           "id": "100.0.1",
           "anchorId": "cve-adp-containers",
@@ -234,6 +272,29 @@ export default {
         }
       }
 
+      if (!this.isEmptyObject(this.sadpContainer)) {
+
+        const orgId = this.sadpContainer.providerMetadata.orgId;
+        const shortName = this.sadpContainer.providerMetadata.shortName;
+        const orgName = this.partnerStore.getOrganizationName(shortName, orgId);
+
+        const sadpContainersMenu = {
+          label: orgName,
+          anchorId: `sadp-${orgId}`
+        };
+
+        this.sadpContainer.onPageMenu = sadpContainersMenu;
+
+        onPageMenu['Supplier Authorized Data Publisher'] = {
+
+          "id": "100.0.2",
+          "anchorId": "cve-sadp-container",
+          "label": "Supplier Authorized Data Publisher",
+          "path": `CVERecord?id=${this.cveRecordStore.cveId}`,
+          "items": {[orgName]: sadpContainersMenu}
+        }
+      }
+
       this.cveRecordStore.onPageMenuItems.submenu = onPageMenu;
     },
     setupContainersAccordionStateOnPageMenu() {
@@ -355,12 +416,20 @@ export default {
       }
       return false;
     },
+    isSadp(adpContainer) {
+
+        return adpContainer.providerMetadata.shortName.endsWith('-SADP');
+    },
     // getProductsStatus() is adapted from https://github.com/Vulnogram/seaview/blob/main/script.js#L140-L253
     getProductsStatus(containerName, containerAffectedList, adpContainer) {
       const affectedList = containerAffectedList;
+
       if (this.hasOnlyCisaAdpContainer(containerName)) {
         this.adpContainers[containerName] = adpContainer;
       }
+      else if (!this.isEmptyObject(adpContainer) && this.isSadp(adpContainer))
+        this.sadpContainer = adpContainer;
+
       if (this.hasData(affectedList)) {
         const prodStatusTemplate = {
           vendor: '',
diff --git a/src/views/CVERecord/SearchResults.vue b/src/views/CVERecord/SearchResults.vue
@@ -171,6 +171,9 @@
                                   {{ partnerStore.getOrganizationName(result.cna, result.cnaOrgId) }}
                                 </p>
                               </div>
+                              <div class="column cve-column">
+                                <SadpTag :has-sadp="result.hasSadp"/>
+                              </div>
                             </div>
                             <div class="columns cve-columns">
                               <div class="column cve-column">
@@ -289,6 +292,7 @@ import { computed, createApp, ref, watch } from 'vue';
 import { useHead } from '@unhead/vue';
 import { useRouter } from 'vue-router';
 import ServiceUnavailable from '@/components/ServiceUnavailable.vue'
+import SadpTag from '@/components/SadpTag.vue';
 
 const cveListSearchStore = useCveListSearchStore();
 const genericGlobalsStore = useGenericGlobalsStore();
@@ -298,6 +302,7 @@ const app = createApp({});
 const resultUrl = ref(genericGlobalsStore.cveServicesBaseUrl);
 
 app.component('ServiceUnavailable', ServiceUnavailable);
+app.component('SadpTag', SadpTag);
 
 // Keeping track of the current settings for the results per page and
 // sort option prevents the watches from doing searches just because the
