summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/reports/components/modal.vue
blob: 6b49d0b832eddb1ba74485625a81daeae3afd9c4 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<script>
  import Modal from '~/vue_shared/components/gl_modal.vue';
  import LoadingButton from '~/vue_shared/components/loading_button.vue';
  import { fieldTypes } from '../constants';

  export default {
    components: {
      Modal,
      LoadingButton,
    },
    props: {
      title: {
        type: String,
        required: true,
      },
      modalData: {
        type: Object,
        required: true,
      },
      isCreatingNewIssue: {
        type: Boolean,
        required: true,
      },
    },
    fieldTypes,
    methods: {
      handleCreateIssueClick() {
        // TODO_SAM: Check with Shynia how to handle this.
        // I believe we've agreed we'd do this in a new iteration
        // we may need to hide the footer always. - We probably need to provide some params
        this.$emit('createIssue');
      },
    },
    computed: {
      shouldRenderFooterSection() {
        return this.canCreateIssuePermission;
      },
      canCreateIssuePermission() {
        // TODO: Stop faking this and pull in the actual permission
        return false;
      },
    }
  };
</script>
<template>
  <modal
    id="modal-mrwidget-reports"
    :header-title-text="title"
    :class="{ 'modal-hide-footer': !shouldRenderFooterSection }"
    class="modal-security-report-dast"
  >
    <slot>
      <div
        v-for="(field, key, index) in modalData"
        v-if="field.value"
        :key="index"
        class="row prepend-top-10 append-bottom-10"
      >
        <label class="col-sm-2 text-right font-weight-bold">
          {{ field.text }}:
        </label>

        <div class="col-sm-10 text-secondary">
          <template v-if="field.type === $options.fieldTypes.codeBock">
            <pre> {{ field.value }} </pre>
          </template>

          <template v-else-if="field.type === $options.fieldTypes.link">
            <a
              :href="field.value"
              target="_blank"
              rel="noopener noreferrer"
            >
              {{ field.value }}
            </a>
          </template>

          <template v-else-if="field.type === $options.fieldTypes.miliseconds">
            {{ field.value }} ms
          </template>

          <template v-else-if="field.type === $options.fieldTypes.text">
            {{ field.value }}
          </template>
        </div>
      </div>
    </slot>
    <div slot="footer">
      <template v-if="shouldRenderFooterSection">
        <button
          type="button"
          class="btn btn-default"
          data-dismiss="modal"
        >
          {{ __('Cancel' ) }}
        </button>

        <loading-button
          v-if="canCreateIssuePermission"
          :loading="isCreatingNewIssue"
          :disabled="isCreatingNewIssue"
          :label="__('Create issue')"
          container-class="js-create-issue-btn btn btn-success btn-inverted"
          @click="handleCreateIssueClick"
        />
      </template>
    </div>
  </modal>
</template>