1 files changed, 96 insertions, 3 deletions

diff --git a/app/assets/javascripts/environments/components/environment_form.vue b/app/assets/javascripts/environments/components/environment_form.vue
index 62ceb66d803..266b221b481 100644
--- a/app/assets/javascripts/environments/components/environment_form.vue
+++ b/app/assets/javascripts/environments/components/environment_form.vue
@@ -1,12 +1,22 @@
 <script>
-import { GlButton, GlForm, GlFormGroup, GlFormInput, GlLink, GlSprintf } from '@gitlab/ui';
+import {
+  GlButton,
+  GlForm,
+  GlFormGroup,
+  GlFormInput,
+  GlCollapsibleListbox,
+  GlLink,
+  GlSprintf,
+} from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { isAbsolute } from '~/lib/utils/url_utility';
-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 import {
   ENVIRONMENT_NEW_HELP_TEXT,
   ENVIRONMENT_EDIT_HELP_TEXT,
 } from 'ee_else_ce/environments/constants';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import getUserAuthorizedAgents from '../graphql/queries/user_authorized_agents.query.graphql';
 
 export default {
   components: {
@@ -14,10 +24,15 @@ export default {
     GlForm,
     GlFormGroup,
     GlFormInput,
+    GlCollapsibleListbox,
     GlLink,
     GlSprintf,
   },
-  inject: { protectedEnvironmentSettingsPath: { default: '' } },
+  mixins: [glFeatureFlagsMixin()],
+  inject: {
+    protectedEnvironmentSettingsPath: { default: '' },
+    projectPath: { default: '' },
+  },
   props: {
     environment: {
       required: true,
@@ -47,8 +62,11 @@ export default {
     nameDisabledLinkText: __('How do I rename an environment?'),
     urlLabel: __('External URL'),
     urlFeedback: __('The URL should start with http:// or https://'),
+    agentLabel: s__('Environments|GitLab agent'),
+    agentHelpText: s__('Environments|Select agent'),
     save: __('Save'),
     cancel: __('Cancel'),
+    reset: __('Reset'),
   },
   helpPagePath: helpPagePath('ci/environments/index.md'),
   renamingDisabledHelpPagePath: helpPagePath('ci/environments/index.md', {
@@ -60,6 +78,10 @@ export default {
         name: null,
         url: null,
       },
+      userAccessAuthorizedAgents: [],
+      loadingAgentsList: false,
+      selectedAgentId: this.environment.clusterAgentId,
+      searchTerm: '',
     };
   },
   computed: {
@@ -75,6 +97,37 @@ export default {
         url: this.visited.url && isAbsolute(this.environment.externalUrl),
       };
     },
+    agentsList() {
+      return this.userAccessAuthorizedAgents.map((node) => {
+        return {
+          value: node?.agent?.id,
+          text: node?.agent?.name,
+        };
+      });
+    },
+    dropdownToggleText() {
+      if (!this.selectedAgentId) {
+        return this.$options.i18n.agentHelpText;
+      }
+      const selectedAgentById = this.agentsList.find(
+        (agent) => agent.value === this.selectedAgentId,
+      );
+      return selectedAgentById?.text || this.environment.clusterAgent?.name;
+    },
+    filteredAgentsList() {
+      const lowerCasedSearchTerm = this.searchTerm.toLowerCase();
+      return this.agentsList.filter((item) =>
+        item.text.toLowerCase().includes(lowerCasedSearchTerm),
+      );
+    },
+    showAgentsSelect() {
+      return this.glFeatures?.environmentSettingsToGraphql;
+    },
+  },
+  watch: {
+    environment(change) {
+      this.selectedAgentId = change.clusterAgentId;
+    },
   },
   methods: {
     onChange(env) {
@@ -83,6 +136,23 @@ export default {
     visit(field) {
       this.visited[field] = true;
     },
+    getAgentsList() {
+      this.$apollo.addSmartQuery('userAccessAuthorizedAgents', {
+        variables() {
+          return { projectFullPath: this.projectPath };
+        },
+        query: getUserAuthorizedAgents,
+        update: (data) => {
+          return data?.project?.userAccessAuthorizedAgents?.nodes || [];
+        },
+        watchLoading: (isLoading) => {
+          this.loadingAgentsList = isLoading;
+        },
+      });
+    },
+    onAgentSearch(search) {
+      this.searchTerm = search;
+    },
   },
 };
 </script>
@@ -153,6 +223,29 @@ export default {
           />
         </gl-form-group>
 
+        <gl-form-group
+          v-if="showAgentsSelect"
+          :label="$options.i18n.agentLabel"
+          label-for="environment_agent"
+        >
+          <gl-collapsible-listbox
+            id="environment_agent"
+            v-model="selectedAgentId"
+            class="gl-w-full"
+            block
+            :items="filteredAgentsList"
+            :loading="loadingAgentsList"
+            :toggle-text="dropdownToggleText"
+            :header-text="$options.i18n.agentHelpText"
+            :reset-button-label="$options.i18n.reset"
+            :searchable="true"
+            @shown="getAgentsList"
+            @search="onAgentSearch"
+            @select="onChange({ ...environment, clusterAgentId: $event })"
+            @reset="onChange({ ...environment, clusterAgentId: null })"
+          />
+        </gl-form-group>
+
         <div class="gl-mr-6">
           <gl-button
             :loading="loading"