diff options
Diffstat (limited to 'app/assets/javascripts/ci_variable_list/components')
5 files changed, 138 insertions, 10 deletions
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_admin_variables.vue b/app/assets/javascripts/ci_variable_list/components/ci_admin_variables.vue index 83bad9eb518..59ddf4b19d8 100644 --- a/app/assets/javascripts/ci_variable_list/components/ci_admin_variables.vue +++ b/app/assets/javascripts/ci_variable_list/components/ci_admin_variables.vue @@ -11,11 +11,11 @@ import { import addAdminVariable from '../graphql/mutations/admin_add_variable.mutation.graphql'; import deleteAdminVariable from '../graphql/mutations/admin_delete_variable.mutation.graphql'; import updateAdminVariable from '../graphql/mutations/admin_update_variable.mutation.graphql'; -import ciVariableSettings from './ci_variable_settings.vue'; +import CiVariableSettings from './ci_variable_settings.vue'; export default { components: { - ciVariableSettings, + CiVariableSettings, }, inject: ['endpoint'], data() { diff --git a/app/assets/javascripts/ci_variable_list/components/ci_group_variables.vue b/app/assets/javascripts/ci_variable_list/components/ci_group_variables.vue index 3af83ffa8ed..3522243e3e7 100644 --- a/app/assets/javascripts/ci_variable_list/components/ci_group_variables.vue +++ b/app/assets/javascripts/ci_variable_list/components/ci_group_variables.vue @@ -14,11 +14,11 @@ import { import addGroupVariable from '../graphql/mutations/group_add_variable.mutation.graphql'; import deleteGroupVariable from '../graphql/mutations/group_delete_variable.mutation.graphql'; import updateGroupVariable from '../graphql/mutations/group_update_variable.mutation.graphql'; -import ciVariableSettings from './ci_variable_settings.vue'; +import CiVariableSettings from './ci_variable_settings.vue'; export default { components: { - ciVariableSettings, + CiVariableSettings, }, mixins: [glFeatureFlagsMixin()], inject: ['endpoint', 'groupPath', 'groupId'], diff --git a/app/assets/javascripts/ci_variable_list/components/ci_project_variables.vue b/app/assets/javascripts/ci_variable_list/components/ci_project_variables.vue new file mode 100644 index 00000000000..29db02a3c59 --- /dev/null +++ b/app/assets/javascripts/ci_variable_list/components/ci_project_variables.vue @@ -0,0 +1,120 @@ +<script> +import createFlash from '~/flash'; +import { convertToGraphQLId } from '~/graphql_shared/utils'; +import getProjectEnvironments from '../graphql/queries/project_environments.query.graphql'; +import getProjectVariables from '../graphql/queries/project_variables.query.graphql'; +import { mapEnvironmentNames } from '../utils'; +import { + ADD_MUTATION_ACTION, + DELETE_MUTATION_ACTION, + GRAPHQL_PROJECT_TYPE, + UPDATE_MUTATION_ACTION, + environmentFetchErrorText, + genericMutationErrorText, + variableFetchErrorText, +} from '../constants'; +import addProjectVariable from '../graphql/mutations/project_add_variable.mutation.graphql'; +import deleteProjectVariable from '../graphql/mutations/project_delete_variable.mutation.graphql'; +import updateProjectVariable from '../graphql/mutations/project_update_variable.mutation.graphql'; +import CiVariableSettings from './ci_variable_settings.vue'; + +export default { + components: { + CiVariableSettings, + }, + inject: ['endpoint', 'projectFullPath', 'projectId'], + data() { + return { + projectEnvironments: [], + projectVariables: [], + }; + }, + apollo: { + projectEnvironments: { + query: getProjectEnvironments, + variables() { + return { + fullPath: this.projectFullPath, + }; + }, + update(data) { + return mapEnvironmentNames(data?.project?.environments?.nodes); + }, + error() { + createFlash({ message: environmentFetchErrorText }); + }, + }, + projectVariables: { + query: getProjectVariables, + variables() { + return { + fullPath: this.projectFullPath, + }; + }, + update(data) { + return data?.project?.ciVariables?.nodes || []; + }, + error() { + createFlash({ message: variableFetchErrorText }); + }, + }, + }, + computed: { + isLoading() { + return ( + this.$apollo.queries.projectVariables.loading || + this.$apollo.queries.projectEnvironments.loading + ); + }, + }, + methods: { + addVariable(variable) { + this.variableMutation(ADD_MUTATION_ACTION, variable); + }, + deleteVariable(variable) { + this.variableMutation(DELETE_MUTATION_ACTION, variable); + }, + updateVariable(variable) { + this.variableMutation(UPDATE_MUTATION_ACTION, variable); + }, + async variableMutation(mutationAction, variable) { + try { + const currentMutation = this.$options.mutationData[mutationAction]; + const { data } = await this.$apollo.mutate({ + mutation: currentMutation.action, + variables: { + endpoint: this.endpoint, + fullPath: this.projectFullPath, + projectId: convertToGraphQLId(GRAPHQL_PROJECT_TYPE, this.projectId), + variable, + }, + }); + + const { errors } = data[currentMutation.name]; + if (errors.length > 0) { + createFlash({ message: errors[0] }); + } + } catch (e) { + createFlash({ message: genericMutationErrorText }); + } + }, + }, + mutationData: { + [ADD_MUTATION_ACTION]: { action: addProjectVariable, name: 'addProjectVariable' }, + [UPDATE_MUTATION_ACTION]: { action: updateProjectVariable, name: 'updateProjectVariable' }, + [DELETE_MUTATION_ACTION]: { action: deleteProjectVariable, name: 'deleteProjectVariable' }, + }, +}; +</script> + +<template> + <ci-variable-settings + :are-scoped-variables-available="true" + :environments="projectEnvironments" + :is-loading="isLoading" + :variables="projectVariables" + @add-variable="addVariable" + @delete-variable="deleteVariable" + @update-variable="updateVariable" + /> +</template> diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue index 5ba63de8c96..56c1804910a 100644 --- a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue +++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue @@ -108,7 +108,6 @@ export default { return { newEnvironments: [], isTipDismissed: getCookie(AWS_TIP_DISMISSED_COOKIE_NAME) === 'true', - typeOptions: variableOptions, validationErrorEventProperty: '', variable: { ...defaultVariableState, ...this.selectedVariable }, }; @@ -259,6 +258,7 @@ export default { }, }, defaultScope: allEnvironments.text, + variableOptions, }; </script> @@ -277,6 +277,7 @@ export default { v-model="variable.key" :token-list="$options.tokenList" :label-text="__('Key')" + data-testid="pipeline-form-ci-variable-key" data-qa-selector="ci_variable_key_field" /> @@ -293,21 +294,26 @@ export default { :state="variableValidationState" rows="3" max-rows="6" + data-testid="pipeline-form-ci-variable-value" data-qa-selector="ci_variable_value_field" class="gl-font-monospace!" /> </gl-form-group> - <div class="d-flex"> - <gl-form-group :label="__('Type')" label-for="ci-variable-type" class="w-50 gl-mr-5"> + <div class="gl-display-flex"> + <gl-form-group :label="__('Type')" label-for="ci-variable-type" class="gl-w-half gl-mr-5"> <gl-form-select id="ci-variable-type" v-model="variable.variableType" - :options="typeOptions" + :options="$options.variableOptions" /> </gl-form-group> - <gl-form-group label-for="ci-variable-env" class="w-50" data-testid="environment-scope"> + <gl-form-group + label-for="ci-variable-env" + class="gl-w-half" + data-testid="environment-scope" + > <template #label> {{ __('Environment scope') }} <gl-link @@ -380,7 +386,7 @@ export default { data-testid="aws-guidance-tip" @dismiss="dismissTip" > - <div class="gl-display-flex gl-flex-direction-row"> + <div class="gl-display-flex gl-flex-direction-row gl-flex-wrap-wrap gl-md-flex-wrap-nowrap"> <div> <p> <gl-sprintf :message="$options.awsTipMessage"> diff --git a/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue b/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue index cebb7eb85ac..1fbe52388c9 100644 --- a/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue +++ b/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue @@ -255,6 +255,7 @@ export default { v-model="key" :token-list="$options.tokenList" :label-text="__('Key')" + data-testid="pipeline-form-ci-variable-key" data-qa-selector="ci_variable_key_field" /> @@ -271,6 +272,7 @@ export default { :state="variableValidationState" rows="3" max-rows="6" + data-testid="pipeline-form-ci-variable-value" data-qa-selector="ci_variable_value_field" class="gl-font-monospace!" /> |