Merge branch 'leipert-decouple-security-reports-modal' into 'master'

Decouple Security Reports Modal from Store

See merge request gitlab-org/gitlab-ee!7834

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';