Adds a `.modal--hide-footer` class to the security modal so we can conditionally hide it with CSS

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

@@ -57,6 +57,7 @@ export default {
   <modal
     id="modal-mrwidget-security-issue"
     :header-title-text="modal.title"
+    :class="{'modal--hide-footer': modal.vulnerability.resolved}"
     class="modal-security-report-dast"
   >
     <slot>
@@ -195,15 +196,15 @@ export default {
       </div>
     </slot>
     <div slot="footer">
-      <button
-        type="button"
-        class="btn btn-default"
-        data-dismiss="modal"
-      >
-        {{ __('Cancel' ) }}
-      </button>
-
       <template v-if="!modal.vulnerability.resolved">
+        <button
+          type="button"
+          class="btn btn-default"
+          data-dismiss="modal"
+        >
+          {{ __('Cancel' ) }}
+        </button>
+
         <loading-button
           :loading="modal.isDismissingIssue"
           :disabled="modal.isDismissingIssue"
@@ -221,6 +222,7 @@ export default {
           {{ __('View issue' ) }}
         </a>
         <loading-button
+          v-else
           :loading="modal.isCreatingNewIssue"
           :disabled="modal.isCreatingNewIssue"
           :label="__('Create issue')"

ee/app/assets/stylesheets/pages/security_reports.scss

@@ -139,4 +139,9 @@
     width: $modal-lg;
     max-width: $modal-lg;
   }
+
+  // This is temporary till we get the new modals hooked up
+  &.modal--hide-footer .modal-footer {
+    display: none;
+  }
 }

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

@@ -211,8 +211,8 @@ describe('Security Reports modal', () => {
       });
     });
 
-    it('does not render a button to dismiss issue', () => {
-      expect(vm.$el.querySelector('.js-dismiss-btn')).toBeFalsy();
+    it('does not display the footer', () => {
+      expect(vm.$el.classList.contains('modal--hide-footer')).toBeTruthy();
     });
   });
 });