Does not render modalbox footer when user has no persmissions

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

@@ -2,11 +2,7 @@
 import $ from 'jquery';
 import Icon from '~/vue_shared/components/icon.vue';
 import { inserted } from '~/feature_highlight/feature_highlight_helper';
-import {
-  mouseenter,
-  debouncedMouseleave,
-  togglePopover,
-} from '~/shared/popover';
+import { mouseenter, debouncedMouseleave, togglePopover } from '~/shared/popover';
 
 export default {
   name: 'SecurityReportsHelpPopover',
@@ -22,7 +18,8 @@ export default {
   mounted() {
     const $el = $(this.$el);
 
-    $el.popover({
+    $el
+      .popover({
         html: true,
         trigger: 'focus',
         container: 'body',

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 { 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';
 
-  export default {
+export default {
   components: {
     Modal,
     LoadingButton,
@@ -32,6 +32,12 @@
         this.modal.vulnerability.dismissalFeedback.author
       );
     },
+    shouldHideModalFooter() {
+      return (
+        this.modal.isResolved ||
+        (!this.canCreateFeedbackPermission && !this.canCreateIssuePermission)
+      );
+    },
   },
   methods: {
     ...mapActions(['dismissIssue', 'revertDismissIssue', 'createNewIssue']),
@@ -58,13 +64,13 @@
       return key === 'links' && this.hasValue(field);
     },
   },
-  };
+};
 </script>
 <template>
   <modal
     id="modal-mrwidget-security-issue"
     :header-title-text="modal.title"
-    :class="{'modal-hide-footer': modal.isResolved}"
+    :class="{ 'modal-hide-footer': shouldHideModalFooter }"
     class="modal-security-report-dast"
   >
     <slot>
@@ -203,7 +209,7 @@
       </div>
     </slot>
     <div slot="footer">
-      <template v-if="!modal.isResolved">
+      <template v-if="!modal.isResolved && (canCreateFeedbackPermission || canCreateIssuePermission)">
         <button
           type="button"
           class="btn btn-default"
@@ -229,12 +235,13 @@
         >
           {{ __('View issue' ) }}
         </a>
+
         <loading-button
           v-else-if="!modal.vulnerability.hasIssue && canCreateIssuePermission"
           :loading="modal.isCreatingNewIssue"
           :disabled="modal.isCreatingNewIssue"
           :label="__('Create issue')"
-          container-class="btn btn-success btn-inverted"
+          container-class="js-create-issue-btn btn btn-success btn-inverted"
           @click="createNewIssue"
         />
       </template>

spec/javascripts/vue_shared/security_reports/components/modal_spec.js

@@ -20,7 +20,7 @@ describe('Security Reports modal', () => {
     store.dispatch('setPipelineId', 123);
   });
 
-  describe('wit permissions', () => {
+  describe('with permissions', () => {
     beforeEach(() => {
       store.dispatch('setCanCreateIssuePermission', true);
       store.dispatch('setCanCreateFeedbackPermission', true);
@@ -126,6 +126,7 @@ describe('Security Reports modal', () => {
     describe('with instances', () => {
       beforeEach(() => {
         store.dispatch('setModalData', {
+          issue: {
             title: 'Absence of Anti-CSRF Tokens',
             riskcode: '1',
             riskdesc: 'Low (Medium)',
@@ -147,6 +148,8 @@ describe('Security Reports modal', () => {
             ],
             description: ' No Anti-CSRF tokens were found in a HTML submission form. ',
             solution: '',
+          },
+          status: 'failed',
         });
 
         vm = mountComponentWithStore(Component, {
@@ -169,6 +172,7 @@ describe('Security Reports modal', () => {
     describe('data & create issue button', () => {
       beforeEach(() => {
         store.dispatch('setModalData', {
+          issue: {
             tool: 'bundler_audit',
             message: 'Arbitrary file existence disclosure in Action Pack',
             cve: 'CVE-2014-9999',
@@ -182,6 +186,8 @@ describe('Security Reports modal', () => {
             links: [{
               url: 'https://groups.google.com/forum/#!topic/rubyonrails-security/rMTQy4oRCGk',
             }],
+          },
+          status: 'failed',
         });
 
         vm = mountComponentWithStore(Component, {
@@ -248,6 +254,114 @@ describe('Security Reports modal', () => {
       expect(vm.$el.querySelector('.js-dismiss-btn')).toBe(null);
       expect(vm.$el.querySelector('.js-create-issue-btn')).toBe(null);
     });
+
+    it('does not display the footer', () => {
+      expect(vm.$el.classList.contains('modal-hide-footer')).toEqual(true);
+    });
+  });
+
+  describe('with permission to create issue', () => {
+    beforeEach(() => {
+      store.dispatch('setCanCreateIssuePermission', true);
+      store.dispatch('setModalData', {
+        issue: {
+          tool: 'bundler_audit',
+          message: 'Arbitrary file existence disclosure in Action Pack',
+          url: 'https://groups.google.com/forum/#!topic/rubyonrails-security/rMTQy4oRCGk',
+          cve: 'CVE-2014-9999',
+          file: 'Gemfile.lock',
+          solution: 'upgrade to ~> 3.2.21, ~> 4.0.11.1, ~> 4.0.12, ~> 4.1.7.1, >= 4.1.8',
+          title: 'Arbitrary file existence disclosure in Action Pack',
+          path: 'Gemfile.lock',
+          urlPath: 'path/Gemfile.lock',
+          isDismissed: true,
+          dismissalFeedback: {
+            id: 1,
+            category: 'sast',
+            feedback_type: 'dismissal',
+            issue_id: null,
+            author: {
+              name: 'John Smith',
+              username: 'jsmith',
+              web_url: 'https;//gitlab.com/user1',
+            },
+            pipeline: {
+              id: 123,
+              path: '/jsmith/awesome-project/pipelines/123',
+            },
+          },
+        },
+        status: 'failed',
+      });
+
+      vm = mountComponentWithStore(Component, {
+        store,
+      });
+    });
+
+    it('does not render dismiss button', () => {
+      expect(vm.$el.querySelector('.js-dismiss-btn')).toBe(null);
+    });
+
+    it('renders create issue button', () => {
+      expect(vm.$el.querySelector('.js-create-issue-btn')).not.toBe(null);
+    });
+
+    it('renders the footer', () => {
+      expect(vm.$el.classList.contains('modal-hide-footer')).toEqual(false);
+    });
+  });
+
+  describe('with permission to dismiss issue', () => {
+    beforeEach(() => {
+      store.dispatch('setCanCreateFeedbackPermission', true);
+      store.dispatch('setModalData', {
+        issue: {
+          tool: 'bundler_audit',
+          message: 'Arbitrary file existence disclosure in Action Pack',
+          url: 'https://groups.google.com/forum/#!topic/rubyonrails-security/rMTQy4oRCGk',
+          cve: 'CVE-2014-9999',
+          file: 'Gemfile.lock',
+          solution: 'upgrade to ~> 3.2.21, ~> 4.0.11.1, ~> 4.0.12, ~> 4.1.7.1, >= 4.1.8',
+          title: 'Arbitrary file existence disclosure in Action Pack',
+          path: 'Gemfile.lock',
+          urlPath: 'path/Gemfile.lock',
+          isDismissed: true,
+          dismissalFeedback: {
+            id: 1,
+            category: 'sast',
+            feedback_type: 'dismissal',
+            issue_id: null,
+            author: {
+              name: 'John Smith',
+              username: 'jsmith',
+              web_url: 'https;//gitlab.com/user1',
+            },
+            pipeline: {
+              id: 123,
+              path: '/jsmith/awesome-project/pipelines/123',
+            },
+          },
+        },
+        status: 'failed',
+      });
+
+      vm = mountComponentWithStore(Component, {
+        store,
+      });
+    });
+
+    it('does not render create issue button', () => {
+      expect(vm.$el.querySelector('.js-create-issue-btn')).toBe(null);
+    });
+
+    it('renders create issue button and footer', () => {
+      expect(vm.$el.querySelector('.js-dismiss-btn')).not.toBe(null);
+    });
+
+    it('renders the footer', () => {
+      expect(vm.$el.classList.contains('modal-hide-footer')).toEqual(false);
+    });
   });
 
   describe('with a resolved issue', () => {