Merge branch...

Merge branch '207195-move-the-vulnerability-status-dropdown-from-the-dashboard-to-the-vulnerabilities-path' into 'master'

Merge the vulnerability state dropdown into existing page

See merge request gitlab-org/gitlab!25498

ee/app/assets/javascripts/pages/projects/security/dashboard/show/index.js

-import App from 'ee/vulnerability_management/components/app.vue';
-import Vue from 'vue';
-
-window.addEventListener('DOMContentLoaded', () => {
-  const el = document.getElementById('vulnerability-show-header');
-  const { state, id } = el.dataset;
-
-  return new Vue({
-    el,
-
-    render: h => h(App, { props: { state, id: Number(id) } }),
-  });
-});

ee/app/assets/javascripts/pages/projects/security/vulnerabilities/show/index.js

 import Vue from 'vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import SolutionCard from 'ee/vue_shared/security_reports/components/solution_card.vue';
+import HeaderApp from 'ee/vulnerabilities/components/app.vue';
 
-window.addEventListener('DOMContentLoaded', () => {
+function createSolutionCardApp() {
   const el = document.getElementById('js-vulnerability-solution');
 
   if (!el) {
@@ -33,4 +34,19 @@ window.addEventListener('DOMContentLoaded', () => {
         props,
       }),
   });
+}
+
+function createHeaderApp() {
+  const el = document.getElementById('js-vulnerability-show-header');
+  const { state, id } = el.dataset;
+
+  return new Vue({
+    el,
+    render: h => h(HeaderApp, { props: { state, id: Number(id) } }),
+  });
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+  createHeaderApp();
+  createSolutionCardApp();
 });

ee/app/assets/javascripts/vulnerability_management/components/app.vue → ee/app/assets/javascripts/vulnerabilities/components/app.vue

@@ -41,7 +41,7 @@ export default {
 </script>
 
 <template>
-  <div class="vulnerability-show-header">
+  <div>
     <gl-loading-icon v-if="isLoading" />
     <vulnerability-state-dropdown v-else :state="state" @change="onVulnerabilityStateChange" />
   </div>

ee/app/views/projects/security/vulnerabilities/show.html.haml

@@ -17,7 +17,7 @@
       %span#js-vulnerability-created
         = time_ago_with_tooltip(@vulnerability.created_at)
   %label.mb-0.mr-2= _('Status')
-  #vulnerability-show-header{ data: { state: @vulnerability.state,
+  #js-vulnerability-show-header{ data: { state: @vulnerability.state,
     id: @vulnerability.id } }
 
 .issue-details.issuable-details

ee/spec/frontend/vulnerability_management/app_spec.js → ee/spec/frontend/vulnerabilities/app_spec.js

@@ -2,9 +2,9 @@ import { shallowMount } from '@vue/test-utils';
 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
 import MockAdapter from 'axios-mock-adapter';
-import App from 'ee/vulnerability_management/components/app.vue';
+import App from 'ee/vulnerabilities/components/app.vue';
 import waitForPromises from 'helpers/wait_for_promises';
-import VulnerabilityStateDropdown from 'ee/vulnerability_management/components/vulnerability_state_dropdown.vue';
+import VulnerabilityStateDropdown from 'ee/vulnerabilities/components/vulnerability_state_dropdown.vue';
 
 const mockAxios = new MockAdapter(axios);
 jest.mock('~/flash');

ee/spec/frontend/vulnerability_management/vulnerability_state_dropdown_spec.js → ee/spec/frontend/vulnerabilities/vulnerability_state_dropdown_spec.js

 import { shallowMount } from '@vue/test-utils';
-import VulnerabilityStateDropdown from 'ee/vulnerability_management/components/vulnerability_state_dropdown.vue';
-import { VULNERABILITY_STATES } from 'ee/vulnerability_management/constants';
+import VulnerabilityStateDropdown from 'ee/vulnerabilities/components/vulnerability_state_dropdown.vue';
+import { VULNERABILITY_STATES } from 'ee/vulnerabilities/constants';
 
 const vulnerabilityStateEntries = Object.entries(VULNERABILITY_STATES);