diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/settings/group/components')
6 files changed, 176 insertions, 213 deletions
diff --git a/app/assets/javascripts/packages_and_registries/settings/group/components/duplicates_settings.vue b/app/assets/javascripts/packages_and_registries/settings/group/components/duplicates_settings.vue deleted file mode 100644 index 51a97aead49..00000000000 --- a/app/assets/javascripts/packages_and_registries/settings/group/components/duplicates_settings.vue +++ /dev/null @@ -1,103 +0,0 @@ -<script> -import { GlToggle, GlFormGroup, GlFormInput } from '@gitlab/ui'; -import { isEqual } from 'lodash'; - -import { - DUPLICATES_TOGGLE_LABEL, - 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: { - 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: { - isExceptionRegexValid() { - return !this.duplicateExceptionRegexError; - }, - }, - methods: { - update(type, value) { - this.$emit('update', { [type]: value }); - }, - }, -}; -</script> - -<template> - <form> - <gl-toggle - :data-qa-selector="toggleQaSelector" - :label="$options.i18n.DUPLICATES_TOGGLE_LABEL" - :value="!duplicatesAllowed" - :disabled="loading" - @change="update(modelNames.allowed, !$event)" - /> - <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" - size="lg" - :value="duplicateExceptionRegex" - @change="update(modelNames.exception, $event)" - /> - </gl-form-group> - </form> -</template> diff --git a/app/assets/javascripts/packages_and_registries/settings/group/components/exceptions_input.vue b/app/assets/javascripts/packages_and_registries/settings/group/components/exceptions_input.vue new file mode 100644 index 00000000000..9ac1673dbf3 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/settings/group/components/exceptions_input.vue @@ -0,0 +1,79 @@ +<script> +import { GlFormGroup, GlFormInput } from '@gitlab/ui'; + +import { + DUPLICATES_SETTING_EXCEPTION_TITLE, + DUPLICATES_SETTINGS_EXCEPTION_LEGEND, +} from '~/packages_and_registries/settings/group/constants'; + +export default { + name: 'ExceptionsInput', + i18n: { + DUPLICATES_SETTING_EXCEPTION_TITLE, + DUPLICATES_SETTINGS_EXCEPTION_LEGEND, + }, + components: { + 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, + }, + id: { + type: String, + required: true, + }, + name: { + type: String, + required: true, + }, + }, + computed: { + isExceptionRegexValid() { + return !this.duplicateExceptionRegexError; + }, + }, + methods: { + update(type, value) { + this.$emit('update', { [type]: value }); + }, + }, +}; +</script> + +<template> + <gl-form-group + class="gl-mb-0" + :label="$options.i18n.DUPLICATES_SETTING_EXCEPTION_TITLE" + label-sr-only + :invalid-feedback="duplicateExceptionRegexError" + :label-for="id" + > + <gl-form-input + :id="id" + :disabled="duplicatesAllowed || loading" + size="lg" + :value="duplicateExceptionRegex" + :state="isExceptionRegexValid" + @change="update(name, $event)" + /> + </gl-form-group> +</template> diff --git a/app/assets/javascripts/packages_and_registries/settings/group/components/generic_settings.vue b/app/assets/javascripts/packages_and_registries/settings/group/components/generic_settings.vue deleted file mode 100644 index e5f63fe8d0d..00000000000 --- a/app/assets/javascripts/packages_and_registries/settings/group/components/generic_settings.vue +++ /dev/null @@ -1,26 +0,0 @@ -<script> -import { s__ } from '~/locale'; -import SettingsTitles from '~/packages_and_registries/settings/group/components/settings_titles.vue'; - -export default { - name: 'GenericSettings', - components: { - SettingsTitles, - }, - i18n: { - title: s__('PackageRegistry|Generic'), - subTitle: s__('PackageRegistry|Settings for Generic packages'), - }, - modelNames: { - allowed: 'genericDuplicatesAllowed', - exception: 'genericDuplicateExceptionRegex', - }, -}; -</script> - -<template> - <div> - <settings-titles :title="$options.i18n.title" :sub-title="$options.i18n.subTitle" /> - <slot :model-names="$options.modelNames"></slot> - </div> -</template> 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 deleted file mode 100644 index a1cbd695f34..00000000000 --- a/app/assets/javascripts/packages_and_registries/settings/group/components/maven_settings.vue +++ /dev/null @@ -1,26 +0,0 @@ -<script> -import { s__ } from '~/locale'; -import SettingsTitles from '~/packages_and_registries/settings/group/components/settings_titles.vue'; - -export default { - name: 'MavenSettings', - components: { - SettingsTitles, - }, - i18n: { - title: s__('PackageRegistry|Maven'), - subTitle: s__('PackageRegistry|Settings for Maven packages'), - }, - modelNames: { - allowed: 'mavenDuplicatesAllowed', - exception: 'mavenDuplicateExceptionRegex', - }, -}; -</script> - -<template> - <div> - <settings-titles :title="$options.i18n.title" :sub-title="$options.i18n.subTitle" /> - <slot :model-names="$options.modelNames"></slot> - </div> -</template> diff --git a/app/assets/javascripts/packages_and_registries/settings/group/components/packages_settings.vue b/app/assets/javascripts/packages_and_registries/settings/group/components/packages_settings.vue index abb9f02d290..de087a8fcc5 100644 --- a/app/assets/javascripts/packages_and_registries/settings/group/components/packages_settings.vue +++ b/app/assets/javascripts/packages_and_registries/settings/group/components/packages_settings.vue @@ -1,27 +1,50 @@ <script> -import DuplicatesSettings from '~/packages_and_registries/settings/group/components/duplicates_settings.vue'; -import GenericSettings from '~/packages_and_registries/settings/group/components/generic_settings.vue'; -import MavenSettings from '~/packages_and_registries/settings/group/components/maven_settings.vue'; +import { GlTableLite, GlToggle } from '@gitlab/ui'; import { + GENERIC_PACKAGE_FORMAT, + MAVEN_PACKAGE_FORMAT, + PACKAGE_FORMATS_TABLE_HEADER, PACKAGE_SETTINGS_HEADER, PACKAGE_SETTINGS_DESCRIPTION, + DUPLICATES_SETTING_EXCEPTION_TITLE, + DUPLICATES_TOGGLE_LABEL, } from '~/packages_and_registries/settings/group/constants'; import updateNamespacePackageSettings from '~/packages_and_registries/settings/group/graphql/mutations/update_group_packages_settings.mutation.graphql'; import { updateGroupPackageSettings } from '~/packages_and_registries/settings/group/graphql/utils/cache_update'; import { updateGroupPackagesSettingsOptimisticResponse } from '~/packages_and_registries/settings/group/graphql/utils/optimistic_responses'; import SettingsBlock from '~/packages_and_registries/shared/components/settings_block.vue'; +import ExceptionsInput from '~/packages_and_registries/settings/group/components/exceptions_input.vue'; export default { name: 'PackageSettings', i18n: { PACKAGE_SETTINGS_HEADER, PACKAGE_SETTINGS_DESCRIPTION, + DUPLICATES_SETTING_EXCEPTION_TITLE, + DUPLICATES_TOGGLE_LABEL, }, + tableHeaderFields: [ + { + key: 'packageFormat', + label: PACKAGE_FORMATS_TABLE_HEADER, + thClass: 'gl-bg-gray-10!', + }, + { + key: 'allowDuplicates', + label: DUPLICATES_TOGGLE_LABEL, + thClass: 'gl-bg-gray-10!', + }, + { + key: 'exceptions', + label: DUPLICATES_SETTING_EXCEPTION_TITLE, + thClass: 'gl-bg-gray-10!', + }, + ], components: { SettingsBlock, - MavenSettings, - GenericSettings, - DuplicatesSettings, + GlTableLite, + GlToggle, + ExceptionsInput, }, inject: ['groupPath'], props: { @@ -40,6 +63,37 @@ export default { errors: {}, }; }, + computed: { + tableRows() { + return [ + { + id: 'maven-duplicated-settings-regex-input', + format: MAVEN_PACKAGE_FORMAT, + duplicatesAllowed: this.packageSettings.mavenDuplicatesAllowed, + duplicateExceptionRegex: this.packageSettings.mavenDuplicateExceptionRegex, + duplicateExceptionRegexError: this.errors.mavenDuplicateExceptionRegex, + modelNames: { + allowed: 'mavenDuplicatesAllowed', + exception: 'mavenDuplicateExceptionRegex', + }, + testid: 'maven-settings', + dataQaSelector: 'allow_duplicates_toggle', + }, + { + id: 'generic-duplicated-settings-regex-input', + format: GENERIC_PACKAGE_FORMAT, + duplicatesAllowed: this.packageSettings.genericDuplicatesAllowed, + duplicateExceptionRegex: this.packageSettings.genericDuplicateExceptionRegex, + duplicateExceptionRegexError: this.errors.genericDuplicateExceptionRegex, + modelNames: { + allowed: 'genericDuplicatesAllowed', + exception: 'genericDuplicateExceptionRegex', + }, + testid: 'generic-settings', + }, + ]; + }, + }, methods: { async updateSettings(payload) { this.errors = {}; @@ -79,6 +133,9 @@ export default { this.$emit('error'); } }, + update(type, value) { + this.updateSettings({ [type]: value }); + }, }, }; </script> @@ -92,32 +149,40 @@ export default { </span> </template> <template #default> - <maven-settings data-testid="maven-settings"> - <template #default="{ modelNames }"> - <duplicates-settings - :duplicates-allowed="packageSettings.mavenDuplicatesAllowed" - :duplicate-exception-regex="packageSettings.mavenDuplicateExceptionRegex" - :duplicate-exception-regex-error="errors.mavenDuplicateExceptionRegex" - :model-names="modelNames" - :loading="isLoading" - toggle-qa-selector="reject_duplicates_toggle" - label-qa-selector="reject_duplicates_label" - @update="updateSettings" - /> - </template> - </maven-settings> - <generic-settings class="gl-mt-6" data-testid="generic-settings"> - <template #default="{ modelNames }"> - <duplicates-settings - :duplicates-allowed="packageSettings.genericDuplicatesAllowed" - :duplicate-exception-regex="packageSettings.genericDuplicateExceptionRegex" - :duplicate-exception-regex-error="errors.genericDuplicateExceptionRegex" - :model-names="modelNames" - :loading="isLoading" - @update="updateSettings" - /> - </template> - </generic-settings> + <form> + <gl-table-lite + :fields="$options.tableHeaderFields" + :items="tableRows" + stacked="sm" + :tbody-tr-attr="(item) => ({ 'data-testid': item.testid })" + > + <template #cell(packageFormat)="{ item }"> + <span class="gl-md-pt-3">{{ item.format }}</span> + </template> + <template #cell(allowDuplicates)="{ item }"> + <gl-toggle + :data-qa-selector="item.dataQaSelector" + :label="$options.i18n.DUPLICATES_TOGGLE_LABEL" + :value="item.duplicatesAllowed" + :disabled="isLoading" + label-position="hidden" + class="gl-align-items-flex-end gl-sm-align-items-flex-start" + @change="update(item.modelNames.allowed, $event)" + /> + </template> + <template #cell(exceptions)="{ item }"> + <exceptions-input + :id="item.id" + :duplicates-allowed="item.duplicatesAllowed" + :duplicate-exception-regex="item.duplicateExceptionRegex" + :duplicate-exception-regex-error="item.duplicateExceptionRegexError" + :name="item.modelNames.exception" + :loading="isLoading" + @update="updateSettings" + /> + </template> + </gl-table-lite> + </form> </template> </settings-block> </template> diff --git a/app/assets/javascripts/packages_and_registries/settings/group/components/settings_titles.vue b/app/assets/javascripts/packages_and_registries/settings/group/components/settings_titles.vue deleted file mode 100644 index 1e93875c1e3..00000000000 --- a/app/assets/javascripts/packages_and_registries/settings/group/components/settings_titles.vue +++ /dev/null @@ -1,26 +0,0 @@ -<script> -export default { - name: 'SettingsTitle', - props: { - title: { - type: String, - required: true, - }, - subTitle: { - type: String, - required: false, - default: '', - }, - }, -}; -</script> - -<template> - <div> - <h5 class="gl-border-b-solid gl-border-b-1 gl-border-gray-200 gl-pb-3"> - {{ title }} - </h5> - <p v-if="subTitle">{{ subTitle }}</p> - <slot></slot> - </div> -</template> |