Decouple Security Reports Modal from store

In order to make the security reports modal more usable it was decoupled
from the store recieves the data as props and emits actions as events

ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue

 <script>
-  import { mapActions, mapState } from 'vuex';
-  import { s__ } from '~/locale';
-  import Modal from '~/vue_shared/components/gl_modal.vue';
-  import LoadingButton from '~/vue_shared/components/loading_button.vue';
-  import Icon from '~/vue_shared/components/icon.vue';
-  import ExpandButton from '~/vue_shared/components/expand_button.vue';
+import { s__ } from '~/locale';
+import Modal from '~/vue_shared/components/gl_modal.vue';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import ExpandButton from '~/vue_shared/components/expand_button.vue';
 
-  export default {
-    components: {
-      Modal,
-      LoadingButton,
-      ExpandButton,
-      Icon,
+export default {
+  components: {
+    Modal,
+    LoadingButton,
+    ExpandButton,
+    Icon,
+  },
+  props: {
+    modal: {
+      type: Object,
+      required: true,
     },
-    computed: {
-      ...mapState([
-        'modal',
-        'vulnerabilityFeedbackHelpPath',
-        'canCreateIssuePermission',
-        'canCreateFeedbackPermission',
-      ]),
-      revertTitle() {
-        return this.modal.vulnerability.isDismissed
-          ? s__('ciReport|Revert dismissal')
-          : s__('ciReport|Dismiss vulnerability');
-      },
-      hasDismissedBy() {
-        return (
-          this.modal.vulnerability.dismissalFeedback &&
-          this.modal.vulnerability.dismissalFeedback.pipeline &&
-          this.modal.vulnerability.dismissalFeedback.author
-        );
-      },
-      /**
-       * The slot for the footer should be rendered if any of the conditions is true.
-       */
-      shouldRenderFooterSection() {
-        return (
-          !this.modal.isResolved &&
-          (this.canCreateFeedbackPermission || this.canCreateIssuePermission)
-        );
-      },
+    vulnerabilityFeedbackHelpPath: {
+      type: String,
+      required: false,
+      default: '',
     },
-    methods: {
-      ...mapActions(['dismissIssue', 'revertDismissIssue', 'createNewIssue']),
-      handleDismissClick() {
-        if (this.modal.vulnerability.isDismissed) {
-          this.revertDismissIssue();
-        } else {
-          this.dismissIssue();
-        }
-      },
-      isLastValue(index, values) {
-        return index < values.length - 1;
-      },
-      hasValue(field) {
-        return field.value && field.value.length > 0;
-      },
-      hasInstances(field, key) {
-        return key === 'instances' && this.hasValue(field);
-      },
-      hasIdentifiers(field, key) {
-        return key === 'identifiers' && this.hasValue(field);
-      },
-      hasLinks(field, key) {
-        return key === 'links' && this.hasValue(field);
-      },
+    canCreateIssuePermission: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-  };
+    canCreateFeedbackPermission: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    revertTitle() {
+      return this.modal.vulnerability.isDismissed
+        ? s__('ciReport|Revert dismissal')
+        : s__('ciReport|Dismiss vulnerability');
+    },
+    hasDismissedBy() {
+      return (
+        this.modal.vulnerability &&
+        this.modal.vulnerability.dismissalFeedback &&
+        this.modal.vulnerability.dismissalFeedback.pipeline &&
+        this.modal.vulnerability.dismissalFeedback.author
+      );
+    },
+    /**
+     * The slot for the footer should be rendered if any of the conditions is true.
+     */
+    shouldRenderFooterSection() {
+      return (
+        !this.modal.isResolved &&
+        (this.canCreateFeedbackPermission || this.canCreateIssuePermission)
+      );
+    },
+  },
+  methods: {
+    handleDismissClick() {
+      if (this.modal.vulnerability.isDismissed) {
+        this.$emit('revertDismissIssue');
+      } else {
+        this.$emit('dismissIssue');
+      }
+    },
+    isLastValue(index, values) {
+      return index < values.length - 1;
+    },
+    hasValue(field) {
+      return field.value && field.value.length > 0;
+    },
+    hasInstances(field, key) {
+      return key === 'instances' && this.hasValue(field);
+    },
+    hasIdentifiers(field, key) {
+      return key === 'identifiers' && this.hasValue(field);
+    },
+    hasLinks(field, key) {
+      return key === 'links' && this.hasValue(field);
+    },
+  },
+};
 </script>
 <template>
   <modal
@@ -196,6 +210,7 @@
             >#{{ modal.vulnerability.dismissalFeedback.pipeline.id }}</a>.
           </template>
           <a
+            v-if="vulnerabilityFeedbackHelpPath"
             :href="vulnerabilityFeedbackHelpPath"
             class="js-link-vulnerabilityFeedbackHelpPath"
           >
@@ -245,7 +260,7 @@
           :disabled="modal.isCreatingNewIssue"
           :label="__('Create issue')"
           container-class="js-create-issue-btn btn btn-success btn-inverted"
-          @click="createNewIssue"
+          @click="$emit('createNewIssue')"
         />
       </template>
     </div>

ee/app/assets/javascripts/vue_shared/security_reports/grouped_security_reports_app.vue

@@ -120,7 +120,16 @@ export default {
   },
   componentNames,
   computed: {
-    ...mapState(['sast', 'sastContainer', 'dast', 'dependencyScanning', 'summaryCounts']),
+    ...mapState([
+      'sast',
+      'sastContainer',
+      'dast',
+      'dependencyScanning',
+      'summaryCounts',
+      'modal',
+      'canCreateIssuePermission',
+      'canCreateFeedbackPermission',
+    ]),
     ...mapGetters([
       'groupedSastText',
       'groupedSummaryText',
@@ -207,6 +216,9 @@ export default {
       'setPipelineId',
       'setCanCreateIssuePermission',
       'setCanCreateFeedbackPermission',
+      'dismissIssue',
+      'revertDismissIssue',
+      'createNewIssue',
     ]),
   },
 };
@@ -311,7 +323,15 @@ export default {
         />
       </template>
 
-      <issue-modal />
+      <issue-modal
+        :modal="modal"
+        :vulnerability-feedback-help-path="vulnerabilityFeedbackHelpPath"
+        :can-create-issue-permission="canCreateIssuePermission"
+        :can-create-feedback-permission="canCreateFeedbackPermission"
+        @createNewIssue="createNewIssue"
+        @dismissIssue="dismissIssue"
+        @revertDismissIssue="revertDismissIssue"
+      />
     </div>
   </report-section>
 </template>

ee/app/assets/javascripts/vue_shared/security_reports/split_security_reports_app.vue

@@ -92,7 +92,15 @@ export default {
   },
   componentNames,
   computed: {
-    ...mapState(['sast', 'dependencyScanning', 'sastContainer', 'dast']),
+    ...mapState([
+      'sast',
+      'dependencyScanning',
+      'sastContainer',
+      'dast',
+      'modal',
+      'canCreateIssuePermission',
+      'canCreateFeedbackPermission',
+    ]),
 
     sastText() {
       return this.summaryTextBuilder(messages.SAST, this.sast.newIssues.length);
@@ -188,6 +196,9 @@ export default {
       'setPipelineId',
       'setCanCreateIssuePermission',
       'setCanCreateFeedbackPermission',
+      'dismissIssue',
+      'revertDismissIssue',
+      'createNewIssue',
     ]),
     summaryTextBuilder(reportType, issuesCount = 0) {
       if (issuesCount === 0) {
@@ -265,6 +276,14 @@ export default {
       class="js-dast-widget split-report-section"
     />
 
-    <issue-modal />
+    <issue-modal
+      :modal="modal"
+      :vulnerability-feedback-help-path="vulnerabilityFeedbackHelpPath"
+      :can-create-issue-permission="canCreateIssuePermission"
+      :can-create-feedback-permission="canCreateFeedbackPermission"
+      @createNewIssue="createNewIssue"
+      @dismissIssue="dismissIssue"
+      @revertDismissIssue="revertDismissIssue"
+    />
   </div>
 </template>

ee/app/assets/javascripts/vue_shared/security_reports/store/mutation_types.js

@@ -36,7 +36,6 @@ export const RECEIVE_DEPENDENCY_SCANNING_ERROR = 'RECEIVE_DEPENDENCY_SCANNING_ER
 
 // Dismiss security issue
 export const SET_ISSUE_MODAL_DATA = 'SET_ISSUE_MODAL_DATA';
-export const CLEAR_ISSUE_MODAL_DATA = 'CLEAR_ISSUE_MODAL_DATA';
 export const REQUEST_DISMISS_ISSUE = 'REQUEST_DISMISS_ISSUE';
 export const RECEIVE_DISMISS_ISSUE_SUCCESS = 'RECEIVE_DISMISS_ISSUE_SUCCESS';
 export const RECEIVE_DISMISS_ISSUE_ERROR = 'RECEIVE_DISMISS_ISSUE_ERROR';