diff options
Diffstat (limited to 'app/assets/javascripts/ci/ci_variable_list')
6 files changed, 68 insertions, 34 deletions
diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_environments_dropdown.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_environments_dropdown.vue index 09b02068388..a25f871ac92 100644 --- a/app/assets/javascripts/ci/ci_variable_list/components/ci_environments_dropdown.vue +++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_environments_dropdown.vue @@ -24,6 +24,10 @@ export default { type: Array, required: true, }, + hasEnvScopeQuery: { + type: Boolean, + required: true, + }, selectedEnvironmentScope: { type: String, required: false, @@ -32,6 +36,7 @@ export default { }, data() { return { + isDropdownShown: false, selectedEnvironment: '', searchTerm: '', }; @@ -46,17 +51,20 @@ export default { return environment.toLowerCase().includes(lowerCasedSearchTerm); }); }, - isEnvScopeLimited() { - return this.glFeatures?.ciLimitEnvironmentScope; + isDropdownLoading() { + return this.areEnvironmentsLoading && this.hasEnvScopeQuery && !this.isDropdownShown; + }, + isDropdownSearching() { + return this.areEnvironmentsLoading && this.hasEnvScopeQuery && this.isDropdownShown; }, searchedEnvironments() { - // If FF is enabled, search query will be fired so this component will already - // receive filtered environments during the refetch. - // If FF is disabled, search the existing list of environments in the frontend - let filtered = this.isEnvScopeLimited ? this.environments : this.filteredEnvironments; + // If hasEnvScopeQuery (applies only to projects for now), search query will be fired so this + // component will already receive filtered environments during the refetch. + // Otherwise (applies to groups), search the existing list of environments in the frontend + let filtered = this.hasEnvScopeQuery ? this.environments : this.filteredEnvironments; // If there is no search term, make sure to include * - if (this.isEnvScopeLimited && !this.searchTerm) { + if (this.hasEnvScopeQuery && !this.searchTerm) { filtered = uniq([...filtered, '*']); } @@ -65,15 +73,12 @@ export default { text: environment, })); }, - shouldShowSearchLoading() { - return this.areEnvironmentsLoading && this.isEnvScopeLimited; - }, shouldRenderCreateButton() { return this.searchTerm && !this.environments.includes(this.searchTerm); }, shouldRenderDivider() { return ( - (this.isEnvScopeLimited || this.shouldRenderCreateButton) && !this.shouldShowSearchLoading + (this.hasEnvScopeQuery || this.shouldRenderCreateButton) && !this.areEnvironmentsLoading ); }, environmentScopeLabel() { @@ -84,7 +89,7 @@ export default { debouncedSearch: debounce(function debouncedSearch(searchTerm) { const newSearchTerm = searchTerm.trim(); this.searchTerm = newSearchTerm; - if (this.isEnvScopeLimited) { + if (this.hasEnvScopeQuery) { this.$emit('search-environment-scope', newSearchTerm); } }, 500), @@ -96,6 +101,9 @@ export default { this.$emit('create-environment-scope', this.searchTerm); this.selectEnvironment(this.searchTerm); }, + toggleDropdownShown(isShown) { + this.isDropdownShown = isShown; + }, }, ENVIRONMENT_QUERY_LIMIT, i18n: { @@ -111,14 +119,17 @@ export default { block searchable :items="searchedEnvironments" - :searching="shouldShowSearchLoading" + :loading="isDropdownLoading" + :searching="isDropdownSearching" :toggle-text="environmentScopeLabel" @search="debouncedSearch" @select="selectEnvironment" + @shown="toggleDropdownShown(true)" + @hidden="toggleDropdownShown(false)" > <template #footer> <gl-dropdown-divider v-if="shouldRenderDivider" /> - <div v-if="isEnvScopeLimited" data-testid="max-envs-notice"> + <div v-if="hasEnvScopeQuery" data-testid="max-envs-notice"> <gl-dropdown-item class="gl-list-style-none" disabled> <gl-sprintf :message="$options.i18n.maxEnvsNote" class="gl-font-sm"> <template #limit> diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_group_variables.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_group_variables.vue index 9c79adffdae..2045b127a82 100644 --- a/app/assets/javascripts/ci/ci_variable_list/components/ci_group_variables.vue +++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_group_variables.vue @@ -3,6 +3,7 @@ import { TYPENAME_GROUP } from '~/graphql_shared/constants'; import { convertToGraphQLId } from '~/graphql_shared/utils'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { ADD_MUTATION_ACTION, DELETE_MUTATION_ACTION, UPDATE_MUTATION_ACTION } from '../constants'; +import getGroupEnvironments from '../graphql/queries/group_environments.query.graphql'; import getGroupVariables from '../graphql/queries/group_variables.query.graphql'; import addGroupVariable from '../graphql/mutations/group_add_variable.mutation.graphql'; import deleteGroupVariable from '../graphql/mutations/group_delete_variable.mutation.graphql'; @@ -22,6 +23,15 @@ export default { graphqlId() { return convertToGraphQLId(TYPENAME_GROUP, this.groupId); }, + queriesAvailable() { + if (this.glFeatures.ciGroupEnvScopeGraphql) { + return this.$options.queryData; + } + + return { + ciVariables: this.$options.queryData.ciVariables, + }; + }, }, mutationData: { [ADD_MUTATION_ACTION]: addGroupVariable, @@ -33,6 +43,10 @@ export default { lookup: (data) => data?.group?.ciVariables, query: getGroupVariables, }, + environments: { + lookup: (data) => data?.group?.environmentScopes, + query: getGroupEnvironments, + }, }, }; </script> @@ -45,6 +59,6 @@ export default { entity="group" :full-path="groupPath" :mutation-data="$options.mutationData" - :query-data="$options.queryData" + :query-data="queriesAvailable" /> </template> diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_modal.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_modal.vue index 41514d2d2f1..3af48635f3f 100644 --- a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_modal.vue +++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_modal.vue @@ -93,6 +93,10 @@ export default { required: false, default: false, }, + hasEnvScopeQuery: { + type: Boolean, + required: true, + }, mode: { type: String, required: true, @@ -147,7 +151,7 @@ export default { return !this.isTipDismissed && AWS_TOKEN_CONSTANTS.includes(this.variable.key); }, environmentsList() { - if (this.glFeatures?.ciLimitEnvironmentScope) { + if (this.hasEnvScopeQuery) { return this.environments; } @@ -385,6 +389,7 @@ export default { <ci-environments-dropdown v-if="areScopedVariablesAvailable" :are-environments-loading="areEnvironmentsLoading" + :has-env-scope-query="hasEnvScopeQuery" :selected-environment-scope="variable.environmentScope" :environments="environmentsList" @select-environment="setEnvironmentScope" diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue index 26e20c690bc..b8a95f9081a 100644 --- a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue +++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue @@ -33,6 +33,10 @@ export default { required: false, default: false, }, + hasEnvScopeQuery: { + type: Boolean, + required: true, + }, isLoading: { type: Boolean, required: false, @@ -107,6 +111,7 @@ export default { :are-environments-loading="areEnvironmentsLoading" :are-scoped-variables-available="areScopedVariablesAvailable" :environments="environments" + :has-env-scope-query="hasEnvScopeQuery" :hide-environment-scope="hideEnvironmentScope" :variables="variables" :mode="mode" diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_shared.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_shared.vue index ee2c0a771cf..9786f25ed87 100644 --- a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_shared.vue +++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_shared.vue @@ -159,12 +159,13 @@ export default { return this.queryData?.environments?.query || {}; }, skip() { - return !this.queryData?.environments?.query; + return !this.hasEnvScopeQuery; }, variables() { return { + first: ENVIRONMENT_QUERY_LIMIT, fullPath: this.fullPath, - ...this.environmentQueryVariables, + search: '', }; }, update(data) { @@ -179,23 +180,12 @@ export default { areEnvironmentsLoading() { return this.$apollo.queries.environments.loading; }, - environmentQueryVariables() { - if (this.glFeatures?.ciLimitEnvironmentScope) { - return { - first: ENVIRONMENT_QUERY_LIMIT, - search: '', - }; - } - - return {}; + hasEnvScopeQuery() { + return Boolean(this.queryData?.environments?.query); }, isLoading() { - // TODO: Remove areEnvironmentsLoading and show loading icon in dropdown when - // environment query is loading and FF is enabled - // https://gitlab.com/gitlab-org/gitlab/-/issues/396990 return ( (this.$apollo.queries.ciVariables.loading && this.isInitialLoading) || - this.areEnvironmentsLoading || this.isLoadingMoreItems ); }, @@ -248,9 +238,7 @@ export default { this.variableMutation(UPDATE_MUTATION_ACTION, variable); }, async searchEnvironmentScope(searchTerm) { - if (this.glFeatures?.ciLimitEnvironmentScope) { - this.$apollo.queries.environments.refetch({ search: searchTerm }); - } + this.$apollo.queries.environments.refetch({ search: searchTerm }); }, async variableMutation(mutationAction, variable) { try { @@ -296,6 +284,7 @@ export default { :are-scoped-variables-available="areScopedVariablesAvailable" :entity="entity" :environments="environments" + :has-env-scope-query="hasEnvScopeQuery" :hide-environment-scope="hideEnvironmentScope" :is-loading="isLoading" :max-variable-limit="maxVariableLimit" diff --git a/app/assets/javascripts/ci/ci_variable_list/graphql/queries/group_environments.query.graphql b/app/assets/javascripts/ci/ci_variable_list/graphql/queries/group_environments.query.graphql new file mode 100644 index 00000000000..5768d370474 --- /dev/null +++ b/app/assets/javascripts/ci/ci_variable_list/graphql/queries/group_environments.query.graphql @@ -0,0 +1,10 @@ +query getGroupEnvironments($fullPath: ID!, $first: Int, $search: String) { + group(fullPath: $fullPath) { + id + environmentScopes(first: $first, search: $search) { + nodes { + name + } + } + } +} |