Add latest changes from gitlab-org/gitlab@master

4 files changed, 45 insertions, 10 deletions

diff --git a/app/assets/javascripts/environments/components/edit_environment.vue b/app/assets/javascripts/environments/components/edit_environment.vue
index 08920fd660c..7905c5cf572 100644
--- a/app/assets/javascripts/environments/components/edit_environment.vue
+++ b/app/assets/javascripts/environments/components/edit_environment.vue
@@ -14,13 +14,19 @@ export default {
     EnvironmentForm,
   },
   mixins: [glFeatureFlagsMixin()],
-  inject: ['projectEnvironmentsPath', 'updateEnvironmentPath', 'projectPath', 'environmentName'],
+  inject: ['projectEnvironmentsPath', 'updateEnvironmentPath', 'projectPath'],
+  props: {
+    environment: {
+      required: true,
+      type: Object,
+    },
+  },
   apollo: {
     environment: {
       query: getEnvironment,
       variables() {
         return {
-          environmentName: this.environmentName,
+          environmentName: this.environment.name,
           projectFullPath: this.projectPath,
         };
       },
@@ -31,16 +37,38 @@ export default {
   },
   data() {
     return {
+      isQueryLoading: false,
       loading: false,
       formEnvironment: null,
     };
   },
-  computed: {
-    isQueryLoading() {
-      return this.$apollo.queries.environment.loading;
-    },
+  mounted() {
+    if (this.glFeatures?.environmentSettingsToGraphql) {
+      this.fetchWithGraphql();
+    } else {
+      this.formEnvironment = {
+        id: this.environment.id,
+        name: this.environment.name,
+        externalUrl: this.environment.external_url,
+      };
+    }
   },
   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;
     },
diff --git a/app/assets/javascripts/environments/components/environment_form.vue b/app/assets/javascripts/environments/components/environment_form.vue
index 0087dac0897..266b221b481 100644
--- a/app/assets/javascripts/environments/components/environment_form.vue
+++ b/app/assets/javascripts/environments/components/environment_form.vue
@@ -112,7 +112,7 @@ export default {
       const selectedAgentById = this.agentsList.find(
         (agent) => agent.value === this.selectedAgentId,
       );
-      return selectedAgentById?.text;
+      return selectedAgentById?.text || this.environment.clusterAgent?.name;
     },
     filteredAgentsList() {
       const lowerCasedSearchTerm = this.searchTerm.toLowerCase();
diff --git a/app/assets/javascripts/environments/edit.js b/app/assets/javascripts/environments/edit.js
index 69aecc1f443..b26d96e15bd 100644
--- a/app/assets/javascripts/environments/edit.js
+++ b/app/assets/javascripts/environments/edit.js
@@ -15,7 +15,7 @@ export default (el) => {
     updateEnvironmentPath,
     protectedEnvironmentSettingsPath,
     projectPath,
-    environmentName,
+    environment,
   } = el.dataset;
 
   return new Vue({
@@ -26,10 +26,13 @@ export default (el) => {
       updateEnvironmentPath,
       protectedEnvironmentSettingsPath,
       projectPath,
-      environmentName,
     },
     render(h) {
-      return h(EditEnvironment);
+      return h(EditEnvironment, {
+        props: {
+          environment: JSON.parse(environment),
+        },
+      });
     },
   });
 };
diff --git a/app/assets/javascripts/environments/graphql/queries/environment.query.graphql b/app/assets/javascripts/environments/graphql/queries/environment.query.graphql
index f8f1f3ace84..20402e8d32e 100644
--- a/app/assets/javascripts/environments/graphql/queries/environment.query.graphql
+++ b/app/assets/javascripts/environments/graphql/queries/environment.query.graphql
@@ -5,6 +5,10 @@ query getEnvironment($projectFullPath: ID!, $environmentName: String) {
       id
       name
       externalUrl
+      clusterAgent {
+        id
+        name
+      }
     }
   }
 }