1 files changed, 113 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages_and_registries/settings/group/components/maven_settings.vue b/app/assets/javascripts/packages_and_registries/settings/group/components/maven_settings.vue
new file mode 100644
index 00000000000..aa7c6e9d8d6
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/settings/group/components/maven_settings.vue
@@ -0,0 +1,113 @@
+<script>
+import { GlSprintf, GlToggle, GlFormGroup, GlFormInput } from '@gitlab/ui';
+
+import {
+  MAVEN_TITLE,
+  MAVEN_SETTINGS_SUBTITLE,
+  MAVEN_DUPLICATES_ALLOWED_DISABLED,
+  MAVEN_DUPLICATES_ALLOWED_ENABLED,
+  MAVEN_SETTING_EXCEPTION_TITLE,
+  MAVEN_SETTINGS_EXCEPTION_LEGEND,
+  MAVEN_DUPLICATES_ALLOWED,
+  MAVEN_DUPLICATE_EXCEPTION_REGEX,
+} from '~/packages_and_registries/settings/group/constants';
+
+export default {
+  name: 'MavenSettings',
+  i18n: {
+    MAVEN_TITLE,
+    MAVEN_SETTINGS_SUBTITLE,
+    MAVEN_SETTING_EXCEPTION_TITLE,
+    MAVEN_SETTINGS_EXCEPTION_LEGEND,
+  },
+  modelNames: {
+    MAVEN_DUPLICATES_ALLOWED,
+    MAVEN_DUPLICATE_EXCEPTION_REGEX,
+  },
+  components: {
+    GlSprintf,
+    GlToggle,
+    GlFormGroup,
+    GlFormInput,
+  },
+  props: {
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    mavenDuplicatesAllowed: {
+      type: Boolean,
+      default: false,
+      required: true,
+    },
+    mavenDuplicateExceptionRegex: {
+      type: String,
+      default: '',
+      required: true,
+    },
+    mavenDuplicateExceptionRegexError: {
+      type: String,
+      default: '',
+      required: false,
+    },
+  },
+  computed: {
+    enabledButtonLabel() {
+      return this.mavenDuplicatesAllowed
+        ? MAVEN_DUPLICATES_ALLOWED_ENABLED
+        : MAVEN_DUPLICATES_ALLOWED_DISABLED;
+    },
+    isMavenDuplicateExceptionRegexValid() {
+      return !this.mavenDuplicateExceptionRegexError;
+    },
+  },
+  methods: {
+    update(type, value) {
+      this.$emit('update', { [type]: value });
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h5 class="gl-border-b-solid gl-border-b-1 gl-border-gray-200">
+      {{ $options.i18n.MAVEN_TITLE }}
+    </h5>
+    <p>{{ $options.i18n.MAVEN_SETTINGS_SUBTITLE }}</p>
+    <form>
+      <div class="gl-display-flex">
+        <gl-toggle
+          :value="mavenDuplicatesAllowed"
+          @change="update($options.modelNames.MAVEN_DUPLICATES_ALLOWED, $event)"
+        />
+        <div class="gl-ml-5">
+          <div data-testid="toggle-label">
+            <gl-sprintf :message="enabledButtonLabel">
+              <template #bold="{ content }">
+                <strong>{{ content }}</strong>
+              </template>
+            </gl-sprintf>
+          </div>
+          <gl-form-group
+            v-if="!mavenDuplicatesAllowed"
+            class="gl-mt-4"
+            :label="$options.i18n.MAVEN_SETTING_EXCEPTION_TITLE"
+            label-size="sm"
+            :state="isMavenDuplicateExceptionRegexValid"
+            :invalid-feedback="mavenDuplicateExceptionRegexError"
+            :description="$options.i18n.MAVEN_SETTINGS_EXCEPTION_LEGEND"
+            label-for="maven-duplicated-settings-regex-input"
+          >
+            <gl-form-input
+              id="maven-duplicated-settings-regex-input"
+              :value="mavenDuplicateExceptionRegex"
+              @change="update($options.modelNames.MAVEN_DUPLICATE_EXCEPTION_REGEX, $event)"
+            />
+          </gl-form-group>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>