summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/packages_and_registries/settings/group/components/duplicates_settings.vue
blob: b0088838accf563688c55c9c689a0b76b13a9612 (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
110
111
112
113
114
115
116
117
118
119
120
<script>
import { GlSprintf, GlToggle, GlFormGroup, GlFormInput } from '@gitlab/ui';
import { isEqual } from 'lodash';

import {
  DUPLICATES_TOGGLE_LABEL,
  DUPLICATES_ALLOWED_DISABLED,
  DUPLICATES_ALLOWED_ENABLED,
  DUPLICATES_SETTING_EXCEPTION_TITLE,
  DUPLICATES_SETTINGS_EXCEPTION_LEGEND,
} from '~/packages_and_registries/settings/group/constants';

export default {
  name: 'DuplicatesSettings',
  i18n: {
    DUPLICATES_TOGGLE_LABEL,
    DUPLICATES_SETTING_EXCEPTION_TITLE,
    DUPLICATES_SETTINGS_EXCEPTION_LEGEND,
  },
  components: {
    GlSprintf,
    GlToggle,
    GlFormGroup,
    GlFormInput,
  },
  props: {
    loading: {
      type: Boolean,
      required: false,
      default: false,
    },
    duplicatesAllowed: {
      type: Boolean,
      default: false,
      required: false,
    },
    duplicateExceptionRegex: {
      type: String,
      default: '',
      required: false,
    },
    duplicateExceptionRegexError: {
      type: String,
      default: '',
      required: false,
    },
    modelNames: {
      type: Object,
      required: true,
      validator(value) {
        return isEqual(Object.keys(value), ['allowed', 'exception']);
      },
    },
    toggleQaSelector: {
      type: String,
      required: false,
      default: null,
    },
    labelQaSelector: {
      type: String,
      required: false,
      default: null,
    },
  },
  computed: {
    enabledButtonLabel() {
      return this.duplicatesAllowed ? DUPLICATES_ALLOWED_ENABLED : DUPLICATES_ALLOWED_DISABLED;
    },
    isExceptionRegexValid() {
      return !this.duplicateExceptionRegexError;
    },
  },
  methods: {
    update(type, value) {
      this.$emit('update', { [type]: value });
    },
  },
};
</script>

<template>
  <form>
    <div class="gl-display-flex">
      <gl-toggle
        :data-qa-selector="toggleQaSelector"
        :label="$options.i18n.DUPLICATES_TOGGLE_LABEL"
        label-position="hidden"
        :value="duplicatesAllowed"
        :disabled="loading"
        @change="update(modelNames.allowed, $event)"
      />
      <div class="gl-ml-5">
        <div data-testid="toggle-label" :data-qa-selector="labelQaSelector">
          <gl-sprintf :message="enabledButtonLabel">
            <template #bold="{ content }">
              <strong>{{ content }}</strong>
            </template>
          </gl-sprintf>
        </div>
        <gl-form-group
          v-if="!duplicatesAllowed"
          class="gl-mt-4"
          :label="$options.i18n.DUPLICATES_SETTING_EXCEPTION_TITLE"
          label-size="sm"
          :state="isExceptionRegexValid"
          :invalid-feedback="duplicateExceptionRegexError"
          :description="$options.i18n.DUPLICATES_SETTINGS_EXCEPTION_LEGEND"
          label-for="maven-duplicated-settings-regex-input"
        >
          <gl-form-input
            id="maven-duplicated-settings-regex-input"
            :disabled="loading"
            :value="duplicateExceptionRegex"
            @change="update(modelNames.exception, $event)"
          />
        </gl-form-group>
      </div>
    </div>
  </form>
</template>