diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries')
8 files changed, 183 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/components/infrastructure_icon_and_name.vue b/app/assets/javascripts/packages_and_registries/infrastructure_registry/components/infrastructure_icon_and_name.vue new file mode 100644 index 00000000000..3100a1a7296 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/components/infrastructure_icon_and_name.vue @@ -0,0 +1,17 @@ +<script> +import { GlIcon } from '@gitlab/ui'; + +export default { + name: 'InfrastructureIconAndName', + components: { + GlIcon, + }, +}; +</script> + +<template> + <div class="gl-display-flex gl-align-items-center"> + <gl-icon name="infrastructure-registry" class="gl-ml-3 gl-mr-2" /> + <span>{{ s__('InfrastructureRegistry|Terraform') }}</span> + </div> +</template> diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/components/infrastructure_search.vue b/app/assets/javascripts/packages_and_registries/infrastructure_registry/components/infrastructure_search.vue new file mode 100644 index 00000000000..4928da862ea --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/components/infrastructure_search.vue @@ -0,0 +1,45 @@ +<script> +import { mapState, mapActions } from 'vuex'; +import { LIST_KEY_PACKAGE_TYPE } from '~/packages/list/constants'; +import { sortableFields } from '~/packages/list/utils'; +import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue'; +import UrlSync from '~/vue_shared/components/url_sync.vue'; + +export default { + components: { RegistrySearch, UrlSync }, + computed: { + ...mapState({ + isGroupPage: (state) => state.config.isGroupPage, + sorting: (state) => state.sorting, + filter: (state) => state.filter, + }), + sortableFields() { + return sortableFields(this.isGroupPage).filter((h) => h.orderBy !== LIST_KEY_PACKAGE_TYPE); + }, + }, + methods: { + ...mapActions(['setSorting', 'setFilter']), + updateSorting(newValue) { + this.setSorting(newValue); + this.$emit('update'); + }, + }, +}; +</script> + +<template> + <url-sync> + <template #default="{ updateQuery }"> + <registry-search + :filter="filter" + :sorting="sorting" + :tokens="[]" + :sortable-fields="sortableFields" + @sorting:changed="updateSorting" + @filter:changed="setFilter" + @filter:submit="$emit('update')" + @query:changed="updateQuery" + /> + </template> + </url-sync> +</template> diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/components/infrastructure_title.vue b/app/assets/javascripts/packages_and_registries/infrastructure_registry/components/infrastructure_title.vue new file mode 100644 index 00000000000..2a479c65d0c --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/components/infrastructure_title.vue @@ -0,0 +1,53 @@ +<script> +import { s__, n__ } from '~/locale'; +import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue'; +import TitleArea from '~/vue_shared/components/registry/title_area.vue'; + +export default { + name: 'InfrastructureTitle', + components: { + TitleArea, + MetadataItem, + }, + props: { + count: { + type: Number, + required: false, + default: null, + }, + helpUrl: { + type: String, + required: true, + }, + }, + computed: { + showModuleCount() { + return Number.isInteger(this.count); + }, + moduleAmountText() { + return n__(`%d Module`, `%d Modules`, this.count); + }, + infoMessages() { + return [{ text: this.$options.i18n.LIST_INTRO_TEXT, link: this.helpUrl }]; + }, + }, + i18n: { + LIST_TITLE_TEXT: s__('InfrastructureRegistry|Infrastructure Registry'), + LIST_INTRO_TEXT: s__( + 'InfrastructureRegistry|Publish and share your modules. %{docLinkStart}More information%{docLinkEnd}', + ), + }, +}; +</script> + +<template> + <title-area :title="$options.i18n.LIST_TITLE_TEXT" :info-messages="infoMessages"> + <template #metadata-amount> + <metadata-item + v-if="showModuleCount" + icon="infrastructure-registry" + :text="moduleAmountText" + /> + </template> + </title-area> +</template> diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list_app_bundle.js b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list_app_bundle.js new file mode 100644 index 00000000000..88ee8a4200e --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list_app_bundle.js @@ -0,0 +1,33 @@ +import Vue from 'vue'; +import { s__ } from '~/locale'; +import PackagesListApp from '~/packages/list/components/packages_list_app.vue'; +import { createStore } from '~/packages/list/stores'; +import Translate from '~/vue_shared/translate'; + +Vue.use(Translate); + +export default () => { + const el = document.getElementById('js-vue-packages-list'); + const store = createStore(); + store.dispatch('setInitialState', el.dataset); + + return new Vue({ + el, + store, + components: { + PackagesListApp, + }, + provide: { + titleComponent: 'InfrastructureTitle', + searchComponent: 'InfrastructureSearch', + iconComponent: 'InfrastructureIconAndName', + emptyPageTitle: s__('InfrastructureRegistry|You have no Terraform modules in your project'), + noResultsText: s__( + 'InfrastructureRegistry|Terraform modules are the main way to package and reuse resource configurations with Terraform. Learn more about how to %{noPackagesLinkStart}create Terraform modules%{noPackagesLinkEnd} in GitLab.', + ), + }, + render(createElement) { + return createElement('packages-list-app'); + }, + }); +}; 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 index d4f51b83e1e..faacabb44ce 100644 --- 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 @@ -2,6 +2,7 @@ import { GlSprintf, GlToggle, GlFormGroup, GlFormInput } from '@gitlab/ui'; import { + MAVEN_TOGGLE_LABEL, MAVEN_TITLE, MAVEN_SETTINGS_SUBTITLE, MAVEN_DUPLICATES_ALLOWED_DISABLED, @@ -15,6 +16,7 @@ import { export default { name: 'MavenSettings', i18n: { + MAVEN_TOGGLE_LABEL, MAVEN_TITLE, MAVEN_SETTINGS_SUBTITLE, MAVEN_SETTING_EXCEPTION_TITLE, @@ -80,6 +82,8 @@ export default { <div class="gl-display-flex"> <gl-toggle data-qa-selector="allow_duplicates_toggle" + :label="$options.i18n.MAVEN_TOGGLE_LABEL" + label-position="hidden" :value="mavenDuplicatesAllowed" @change="update($options.modelNames.MAVEN_DUPLICATES_ALLOWED, $event)" /> diff --git a/app/assets/javascripts/packages_and_registries/settings/group/constants.js b/app/assets/javascripts/packages_and_registries/settings/group/constants.js index 72bec74060c..d52a6a626f9 100644 --- a/app/assets/javascripts/packages_and_registries/settings/group/constants.js +++ b/app/assets/javascripts/packages_and_registries/settings/group/constants.js @@ -8,6 +8,7 @@ export const PACKAGE_SETTINGS_DESCRIPTION = s__( export const MAVEN_TITLE = s__('PackageRegistry|Maven'); export const MAVEN_SETTINGS_SUBTITLE = s__('PackageRegistry|Settings for Maven packages'); +export const MAVEN_TOGGLE_LABEL = s__('PackageRegistry|Allow duplicates'); export const MAVEN_DUPLICATES_ALLOWED_DISABLED = s__( 'PackageRegistry|%{boldStart}Do not allow duplicates%{boldEnd} - Packages with the same name and version are rejected.', ); diff --git a/app/assets/javascripts/packages_and_registries/shared/constants.js b/app/assets/javascripts/packages_and_registries/shared/constants.js new file mode 100644 index 00000000000..55b5816cc5a --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/shared/constants.js @@ -0,0 +1 @@ +export const FILTERED_SEARCH_TERM = 'filtered-search-term'; diff --git a/app/assets/javascripts/packages_and_registries/shared/utils.js b/app/assets/javascripts/packages_and_registries/shared/utils.js new file mode 100644 index 00000000000..cc5c7ce82bf --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/shared/utils.js @@ -0,0 +1,29 @@ +import { queryToObject } from '~/lib/utils/url_utility'; +import { FILTERED_SEARCH_TERM } from './constants'; + +export const getQueryParams = (query) => queryToObject(query, { gatherArrays: true }); + +export const keyValueToFilterToken = (type, data) => ({ type, value: { data } }); + +export const searchArrayToFilterTokens = (search) => + search.map((s) => keyValueToFilterToken(FILTERED_SEARCH_TERM, s)); + +export const extractFilterAndSorting = (queryObject) => { + const { type, search, sort, orderBy } = queryObject; + const filters = []; + const sorting = {}; + + if (type) { + filters.push(keyValueToFilterToken('type', type)); + } + if (search) { + filters.push(...searchArrayToFilterTokens(search)); + } + if (sort) { + sorting.sort = sort; + } + if (orderBy) { + sorting.orderBy = orderBy; + } + return { filters, sorting }; +}; |