Document computed properties

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 {
-  components: {
-    Modal,
-    LoadingButton,
-    ExpandButton,
-    Icon,
-  },
-  computed: {
-    ...mapState([
-      'modal',
-      'vulnerabilityFeedbackHelpPath',
-      'canCreateIssuePermission',
-      'canCreateFeedbackPermission',
-    ]),
-    revertTitle() {
-      return this.modal.vulnerability.isDismissed
-        ? s__('ciReport|Revert dismissal')
-        : s__('ciReport|Dismiss vulnerability');
+  export default {
+    components: {
+      Modal,
+      LoadingButton,
+      ExpandButton,
+      Icon,
     },
-    hasDismissedBy() {
-      return (
-        this.modal.vulnerability.dismissalFeedback &&
-        this.modal.vulnerability.dismissalFeedback.pipeline &&
-        this.modal.vulnerability.dismissalFeedback.author
-      );
+    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)
+        );
+      },
     },
-    shouldHideModalFooter() {
-      return (
-        this.modal.isResolved ||
-        (!this.canCreateFeedbackPermission && !this.canCreateIssuePermission)
-      );
+    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);
+      },
     },
-  },
-  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);
-    },
-  },
-};
+  };
 </script>
 <template>
   <modal
     id="modal-mrwidget-security-issue"
     :header-title-text="modal.title"
-    :class="{ 'modal-hide-footer': shouldHideModalFooter }"
+    :class="{ 'modal-hide-footer': !shouldRenderFooterSection }"
     class="modal-security-report-dast"
   >
     <slot>
@@ -209,7 +212,7 @@ export default {
       </div>
     </slot>
     <div slot="footer">
-      <template v-if="!modal.isResolved && (canCreateFeedbackPermission || canCreateIssuePermission)">
+      <template v-if="shouldRenderFooterSection">
         <button
           type="button"
           class="btn btn-default"