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')"