diff options
Diffstat (limited to 'app/assets/javascripts/environments/components/edit_environment.vue')
-rw-r--r-- | app/assets/javascripts/environments/components/edit_environment.vue | 96 |
1 files changed, 90 insertions, 6 deletions
diff --git a/app/assets/javascripts/environments/components/edit_environment.vue b/app/assets/javascripts/environments/components/edit_environment.vue index b63a6897a39..7905c5cf572 100644 --- a/app/assets/javascripts/environments/components/edit_environment.vue +++ b/app/assets/javascripts/environments/components/edit_environment.vue @@ -1,39 +1,121 @@ <script> +import { GlLoadingIcon } from '@gitlab/ui'; import { createAlert } from '~/alert'; import axios from '~/lib/utils/axios_utils'; import { visitUrl } from '~/lib/utils/url_utility'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import getEnvironment from '../graphql/queries/environment.query.graphql'; +import updateEnvironment from '../graphql/mutations/update_environment.mutation.graphql'; import EnvironmentForm from './environment_form.vue'; export default { components: { + GlLoadingIcon, EnvironmentForm, }, - inject: ['projectEnvironmentsPath', 'updateEnvironmentPath'], + mixins: [glFeatureFlagsMixin()], + inject: ['projectEnvironmentsPath', 'updateEnvironmentPath', 'projectPath'], props: { environment: { required: true, type: Object, }, }, + apollo: { + environment: { + query: getEnvironment, + variables() { + return { + environmentName: this.environment.name, + projectFullPath: this.projectPath, + }; + }, + update(data) { + this.formEnvironment = data?.project?.environment || {}; + }, + }, + }, data() { return { - formEnvironment: { + isQueryLoading: false, + loading: false, + formEnvironment: null, + }; + }, + mounted() { + if (this.glFeatures?.environmentSettingsToGraphql) { + this.fetchWithGraphql(); + } else { + this.formEnvironment = { id: this.environment.id, name: this.environment.name, externalUrl: this.environment.external_url, - }, - loading: false, - }; + }; + } }, methods: { + async fetchWithGraphql() { + this.$apollo.addSmartQuery('environmentData', { + variables() { + return { environmentName: this.environment.name, projectFullPath: this.projectPath }; + }, + query: getEnvironment, + update(data) { + const result = data?.project?.environment || {}; + this.formEnvironment = { ...result, clusterAgentId: result?.clusterAgent?.id }; + }, + watchLoading: (isLoading) => { + this.isQueryLoading = isLoading; + }, + }); + }, onChange(environment) { this.formEnvironment = environment; }, onSubmit() { + if (this.glFeatures?.environmentSettingsToGraphql) { + this.updateWithGraphql(); + } else { + this.updateWithAxios(); + } + }, + async updateWithGraphql() { + this.loading = true; + try { + const { data } = await this.$apollo.mutate({ + mutation: updateEnvironment, + variables: { + input: { + id: this.formEnvironment.id, + externalUrl: this.formEnvironment.externalUrl, + clusterAgentId: this.formEnvironment.clusterAgentId, + }, + }, + }); + + const { errors } = data.environmentUpdate; + + if (errors.length > 0) { + throw new Error(errors[0]?.message ?? errors[0]); + } + + const { path } = data.environmentUpdate.environment; + + if (path) { + visitUrl(path); + } + } catch (error) { + const { message } = error; + createAlert({ message }); + } finally { + this.loading = false; + } + }, + updateWithAxios() { this.loading = true; axios .put(this.updateEnvironmentPath, { - id: this.environment.id, + id: this.formEnvironment.id, external_url: this.formEnvironment.externalUrl, }) .then(({ data: { path } }) => visitUrl(path)) @@ -47,7 +129,9 @@ export default { }; </script> <template> + <gl-loading-icon v-if="isQueryLoading" class="gl-mt-5" /> <environment-form + v-else-if="formEnvironment" :cancel-path="projectEnvironmentsPath" :environment="formEnvironment" :title="__('Edit environment')" |