Add component for selecting available cluster agents

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/64981

ee/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue

+<script>
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { I18N_AVAILABLE_AGENTS_DROPDOWN } from '../constants';
+import agentConfigurations from '../graphql/queries/agent_configurations.query.graphql';
+
+export default {
+  name: 'AvailableAgentsDropdown',
+  i18n: I18N_AVAILABLE_AGENTS_DROPDOWN,
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+  },
+  inject: ['projectPath', 'isRegistering'],
+  apollo: {
+    agents: {
+      query: agentConfigurations,
+      variables() {
+        return {
+          projectPath: this.projectPath,
+        };
+      },
+      update(data) {
+        this.populateAvailableAgents(data);
+      },
+    },
+  },
+  data() {
+    return {
+      availableAgents: [],
+      selectedAgent: null,
+    };
+  },
+  computed: {
+    isLoading() {
+      return this.$apollo.queries.agents.loading;
+    },
+    dropdownText() {
+      if (this.isRegistering) {
+        return this.$options.i18n.registeringAgent;
+      } else if (this.selectedAgent === null) {
+        return this.$options.i18n.selectAgent;
+      }
+
+      return this.selectedAgent;
+    },
+  },
+  methods: {
+    selectAgent(agent) {
+      this.$emit('agentSelected', agent);
+      this.selectedAgent = agent;
+    },
+    isSelected(agent) {
+      return this.selectedAgent === agent;
+    },
+    populateAvailableAgents(data) {
+      const installedAgents = data?.project?.clusterAgents?.nodes.map((agent) => agent.name) ?? [];
+      const configuredAgents =
+        data?.project?.agentConfigurations?.nodes.map((config) => config.agentName) ?? [];
+
+      this.availableAgents = configuredAgents.filter((agent) => !installedAgents.includes(agent));
+    },
+  },
+};
+</script>
+<template>
+  <gl-dropdown :text="dropdownText" :loading="isLoading || isRegistering">
+    <gl-dropdown-item
+      v-for="agent in availableAgents"
+      :key="agent"
+      :is-checked="isSelected(agent)"
+      is-check-item
+      @click="selectAgent(agent)"
+    >
+      {{ agent }}
+    </gl-dropdown-item>
+  </gl-dropdown>
+</template>

ee/app/assets/javascripts/clusters_list/constants.js

+import { s__ } from '~/locale';
+
 export const MAX_LIST_COUNT = 25;
+
+export const I18N_AVAILABLE_AGENTS_DROPDOWN = {
+  selectAgent: s__('ClusterAgents|Select an Agent'),
+  registeringAgent: s__('ClusterAgents|Registering Agent'),
+};

ee/app/assets/javascripts/clusters_list/graphql/queries/agent_configurations.query.graphql

+query agentConfigurations($projectPath: ID!) {
+  project(fullPath: $projectPath) {
+    agentConfigurations {
+      nodes {
+        agentName
+      }
+    }
+
+    clusterAgents {
+      nodes {
+        name
+      }
+    }
+  }
+}

ee/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js

+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { createLocalVue, mount } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import AvailableAgentsDropdown from 'ee/clusters_list/components/available_agents_dropdown.vue';
+import { I18N_AVAILABLE_AGENTS_DROPDOWN } from 'ee/clusters_list/constants';
+import agentConfigurationsQuery from 'ee/clusters_list/graphql/queries/agent_configurations.query.graphql';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { agentConfigurationsResponse } from './mock_data';
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+describe('AvailableAgentsDropdown', () => {
+  let wrapper;
+
+  const i18n = I18N_AVAILABLE_AGENTS_DROPDOWN;
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findConfiguredAgentItem = () => findDropdownItems().at(0);
+
+  const createWrapper = ({ extraProvides = {}, isLoading = false }) => {
+    const provide = {
+      projectPath: 'path/to/project',
+      ...extraProvides,
+    };
+
+    wrapper = (() => {
+      if (isLoading) {
+        const mocks = {
+          $apollo: {
+            queries: {
+              agents: {
+                loading: true,
+              },
+            },
+          },
+        };
+
+        return mount(AvailableAgentsDropdown, { mocks, provide });
+      }
+
+      const apolloProvider = createMockApollo([
+        [agentConfigurationsQuery, jest.fn().mockResolvedValue(agentConfigurationsResponse)],
+      ]);
+
+      return mount(AvailableAgentsDropdown, {
+        localVue,
+        apolloProvider,
+        provide,
+      });
+    })();
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('there are agents available', () => {
+    const extraProvides = {
+      isRegistering: false,
+    };
+
+    beforeEach(() => {
+      createWrapper({ extraProvides });
+    });
+
+    it('prompts to select an agent', () => {
+      expect(findDropdown().props('text')).toBe(i18n.selectAgent);
+    });
+
+    it('shows only agents that are not yet installed', () => {
+      expect(findDropdownItems()).toHaveLength(1);
+      expect(findConfiguredAgentItem().text()).toBe('configured-agent');
+      expect(findConfiguredAgentItem().props('isChecked')).toBe(false);
+    });
+
+    describe('click events', () => {
+      beforeEach(() => {
+        findConfiguredAgentItem().vm.$emit('click');
+      });
+
+      it('emits agentSelected with the name of the clicked agent', () => {
+        expect(wrapper.emitted('agentSelected')).toEqual([['configured-agent']]);
+      });
+
+      it('marks the clicked item as selected', () => {
+        expect(findDropdown().props('text')).toBe('configured-agent');
+        expect(findConfiguredAgentItem().props('isChecked')).toBe(true);
+      });
+    });
+  });
+
+  describe('registration in progress', () => {
+    const extraProvides = {
+      isRegistering: true,
+    };
+
+    beforeEach(() => {
+      createWrapper({ extraProvides });
+    });
+
+    it('updates the text in the dropdown', () => {
+      expect(findDropdown().props('text')).toBe(i18n.registeringAgent);
+    });
+
+    it('displays a loading icon', () => {
+      expect(findDropdown().props('loading')).toBe(true);
+    });
+  });
+
+  describe('agents query is loading', () => {
+    const extraProvides = {
+      isRegistering: false,
+    };
+
+    beforeEach(() => {
+      createWrapper({ extraProvides, isLoading: true });
+    });
+
+    it('updates the text in the dropdown', () => {
+      expect(findDropdown().text()).toBe(i18n.selectAgent);
+    });
+
+    it('displays a loading icon', () => {
+      expect(findDropdown().props('loading')).toBe(true);
+    });
+  });
+});

ee/spec/frontend/clusters_list/components/mock_data.js

+export const agentConfigurationsResponse = {
+  data: {
+    project: {
+      agentConfigurations: {
+        nodes: [{ agentName: 'installed-agent' }, { agentName: 'configured-agent' }],
+      },
+      clusterAgents: {
+        nodes: [{ name: 'installed-agent' }],
+      },
+    },
+  },
+};

locale/gitlab.pot

@@ -6988,6 +6988,12 @@ msgstr ""
 msgid "ClusterAgents|Read more about getting started"
 msgstr ""
 
+msgid "ClusterAgents|Registering Agent"
+msgstr ""
+
+msgid "ClusterAgents|Select an Agent"
+msgstr ""
+
 msgid "ClusterAgents|The GitLab Agent also requires %{linkStart}enabling the Agent Server%{linkEnd}"
 msgstr ""