Fix selection summary not sticking properly on vulnerability report

ee/app/assets/javascripts/security_dashboard/components/agent/agent_vulnerability_report.vue

@@ -11,6 +11,8 @@ import {
 import projectVulnerabilitiesQuery from '../../graphql/queries/project_vulnerabilities.query.graphql';
 import { DASHBOARD_TYPES } from '../../store/constants';
 
+const PORTAL_NAME = 'vulnerability-report-sticky';
+
 export default {
   components: {
     VulnerabilityFilters,
@@ -55,6 +57,7 @@ export default {
   fieldsToShow: FIELD_PRESETS[REPORT_TAB.OPERATIONAL],
   filtersToShow: FILTER_PRESETS[REPORT_TAB.OPERATIONAL],
   REPORT_TAB,
+  PORTAL_NAME,
   projectVulnerabilitiesQuery,
 };
 </script>
@@ -66,13 +69,14 @@ export default {
         :filters="$options.filtersToShow"
         @filters-changed="updateGraphqlFilters"
       />
-      <portal-target name="vulnerability-report-sticky" />
+      <portal-target :name="$options.PORTAL_NAME" />
     </div>
 
     <vulnerability-list-graphql
       :query="$options.projectVulnerabilitiesQuery"
       :fields="$options.fieldsToShow"
       :filters="graphqlFilters"
+      :portal-name="$options.PORTAL_NAME"
     />
   </div>
 </template>

ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list.vue

@@ -76,6 +76,10 @@ export default {
       required: false,
       default: false,
     },
+    portalName: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -242,7 +246,7 @@ export default {
 
 <template>
   <div>
-    <portal to="vulnerability-report-sticky">
+    <portal :to="portalName">
       <selection-summary
         :selected-vulnerabilities="Object.values(selectedVulnerabilities)"
         :visible="shouldShowSelectionSummary"

ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql.vue

@@ -40,6 +40,10 @@ export default {
       required: false,
       default: false,
     },
+    portalName: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -126,6 +130,7 @@ export default {
       :vulnerabilities="vulnerabilities"
       :fields="fields"
       :should-show-project-namespace="showProjectNamespace"
+      :portal-name="portalName"
       @sort-changed="updateSort"
     />
 

ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_report.vue

 <script>
-import { PortalTarget } from 'portal-vue';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 import VulnerabilityCounts from './vulnerability_counts.vue';
 import VulnerabilityListGraphql from './vulnerability_list_graphql.vue';
@@ -17,7 +16,6 @@ export default {
     VulnerabilityCounts,
     VulnerabilityListGraphql,
     VulnerabilityFilters,
-    PortalTarget,
   },
   inject: ['dashboardType'],
   props: {
@@ -56,6 +54,9 @@ export default {
     fieldsToShow() {
       return FIELD_PRESETS[this.type];
     },
+    portalName() {
+      return `vulnerability-report-sticky-${this.type}`;
+    },
   },
   methods: {
     updateGraphqlFilters(graphqlFilters) {
@@ -84,7 +85,7 @@ export default {
 
     <div class="security-dashboard-filters gl-mt-7">
       <vulnerability-filters :filters="filtersToShow" @filters-changed="updateGraphqlFilters" />
-      <portal-target name="vulnerability-report-sticky" />
+      <portal-target :name="portalName" />
     </div>
 
     <vulnerability-list-graphql
@@ -93,6 +94,7 @@ export default {
       :fields="fieldsToShow"
       :filters="graphqlFilters"
       :show-project-namespace="showProjectFilter"
+      :portal-name="portalName"
     />
   </div>
 </template>

ee/spec/frontend/security_dashboard/components/agent/__snapshots__/agent_vulnerability_report_spec.js.snap

@@ -19,6 +19,7 @@ exports[`Agent vulnerability report component renders 1`] = `
   <vulnerability-list-graphql-stub
     fields="[object Object],[object Object],[object Object],[object Object],,[object Object]"
     filters="[object Object]"
+    portalname="vulnerability-report-sticky"
     query="[object Object]"
   />
 </div>

ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql_spec.js

@@ -15,6 +15,7 @@ const localVue = createLocalVue();
 localVue.use(VueApollo);
 
 const fullPath = 'path';
+const portalName = 'portal-name';
 
 const createVulnerabilitiesRequestHandler = ({ hasNextPage }) =>
   jest.fn().mockResolvedValue({
@@ -52,6 +53,7 @@ describe('Vulnerability list GraphQL component', () => {
       },
       propsData: {
         query: vulnerabilitiesQuery,
+        portalName,
         filters,
         fields,
         showProjectNamespace,
@@ -125,10 +127,11 @@ describe('Vulnerability list GraphQL component', () => {
       const showProjectNamespace = true;
       createWrapper({ fields, showProjectNamespace });
 
-      expect(findVulnerabilityList().props('fields')).toBe(fields);
-      expect(findVulnerabilityList().props('shouldShowProjectNamespace')).toBe(
-        showProjectNamespace,
-      );
+      expect(findVulnerabilityList().props()).toMatchObject({
+        shouldShowProjectNamespace: showProjectNamespace,
+        fields,
+        portalName,
+      });
     });
 
     it('calls the vulnerabilities query with the data from the sort-changed event', async () => {

ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_spec.js

@@ -16,6 +16,7 @@ import { FIELDS } from 'ee/security_dashboard/components/shared/vulnerability_re
 import { generateVulnerabilities, vulnerabilities } from '../../mock_data';
 
 const { DETECTED, STATUS, SEVERITY, DESCRIPTION, IDENTIFIER, TOOL, ACTIVITY } = FIELDS;
+const portalName = 'portal-name';
 
 describe('Vulnerability list component', () => {
   let wrapper;
@@ -25,6 +26,7 @@ describe('Vulnerability list component', () => {
       propsData: {
         vulnerabilities: [],
         fields: [DETECTED, STATUS, SEVERITY, DESCRIPTION, IDENTIFIER, TOOL, ACTIVITY],
+        portalName,
         ...props,
       },
       stubs: {
@@ -148,7 +150,7 @@ describe('Vulnerability list component', () => {
     });
 
     it('should portal the selection summary to the expected portal', () => {
-      expect(wrapper.find(Portal).attributes('to')).toBe('vulnerability-report-sticky');
+      expect(wrapper.find(Portal).attributes('to')).toBe(portalName);
     });
 
     it('should not show the selection summary if no vulnerabilities are selected', () => {

ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_report_spec.js

@@ -121,9 +121,12 @@ describe('Vulnerability report component', () => {
   });
 
   describe('sticky portal', () => {
-    it('has the portal target with the expected name', () => {
-      createWrapper();
-      expect(findPortalTarget().props('name')).toBe('vulnerability-report-sticky');
-    });
+    it.each([REPORT_TAB.DEVELOPMENT, REPORT_TAB.OPERATIONAL])(
+      'has the portal target with the expected name for the %s report',
+      (type) => {
+        createWrapper({ type });
+        expect(findPortalTarget().props('name')).toBe(`vulnerability-report-sticky-${type}`);
+      },
+    );
   });
 });