From 775d73f2f9213ec34c3ce37615f7e91675a3fecd Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Wed, 3 Nov 2021 23:28:25 +0200
Subject: [PATCH 01/11] Move nav and actions on clusters page to Vue

As we want enhance the GitLab Agent, we are changing the nav:
- moving it to Vue
- switching tabs order
- adding persistent actions button that defaults to register new Agent

Changelog: changed
---
 .../clusters_list/components/agents.vue       | 11 ++++++++
 .../components/install_agent_modal.vue        |  2 ++
 .../javascripts/clusters_list/store/state.js  |  1 +
 .../clusters_list/components/agents_spec.js   | 28 +++++++++++++++++++
 .../components/install_agent_modal_spec.js    | 21 ++++++++++++++
 5 files changed, 63 insertions(+)

diff --git a/app/assets/javascripts/clusters_list/components/agents.vue b/app/assets/javascripts/clusters_list/components/agents.vue
index fb5cf7d120648d..f37ab8efce2de6 100644
--- a/app/assets/javascripts/clusters_list/components/agents.vue
+++ b/app/assets/javascripts/clusters_list/components/agents.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
 import { MAX_LIST_COUNT, ACTIVE_CONNECTION_TIME } from '../constants';
 import getAgentsQuery from '../graphql/queries/get_agents.query.graphql';
 import AgentEmptyState from './agent_empty_state.vue';
@@ -60,6 +61,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(['newAgentRegistered']),
     agentList() {
       let list = this.agents?.project?.clusterAgents?.nodes;
 
@@ -90,7 +92,16 @@ export default {
       return Boolean(this.agents?.project?.repository?.tree?.trees?.nodes?.length);
     },
   },
+  watch: {
+    newAgentRegistered(value) {
+      if (value) {
+        this.reloadAgents();
+        this.setNewAgentRegistered(false);
+      }
+    },
+  },
   methods: {
+    ...mapActions(['setNewAgentRegistered']),
     reloadAgents() {
       this.$apollo.queries.agents.refetch();
     },
diff --git a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
index 6eb2e85eceab25..c5dabc574b58e9 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -8,6 +8,7 @@ import {
   GlModal,
   GlSprintf,
 } from '@gitlab/ui';
+import { mapActions } from 'vuex';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
@@ -86,6 +87,7 @@ export default {
     },
   },
   methods: {
+    ...mapActions(['setNewAgentRegistered']),
     setAgentName(name) {
       this.agentName = name;
     },
diff --git a/app/assets/javascripts/clusters_list/store/state.js b/app/assets/javascripts/clusters_list/store/state.js
index 763d7389d0f22d..6cbe4588ba7f3b 100644
--- a/app/assets/javascripts/clusters_list/store/state.js
+++ b/app/assets/javascripts/clusters_list/store/state.js
@@ -16,4 +16,5 @@ export default (initialState = {}) => ({
   },
   totalClusters: 0,
   canAddCluster: parseBoolean(initialState.canAddCluster),
+  newAgentRegistered: false,
 });
diff --git a/spec/frontend/clusters_list/components/agents_spec.js b/spec/frontend/clusters_list/components/agents_spec.js
index 2dec7cdc973e28..2f2770dcd3b1d6 100644
--- a/spec/frontend/clusters_list/components/agents_spec.js
+++ b/spec/frontend/clusters_list/components/agents_spec.js
@@ -1,18 +1,21 @@
 import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import Vuex from 'vuex';
 import AgentEmptyState from '~/clusters_list/components/agent_empty_state.vue';
 import AgentTable from '~/clusters_list/components/agent_table.vue';
 import Agents from '~/clusters_list/components/agents.vue';
 import { ACTIVE_CONNECTION_TIME } from '~/clusters_list/constants';
 import getAgentsQuery from '~/clusters_list/graphql/queries/get_agents.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import defaultStore from '~/clusters_list/store';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
 describe('Agents', () => {
   let wrapper;
+  let store;
 
   const defaultProps = {
     defaultBranchName: 'default',
@@ -37,8 +40,18 @@ describe('Agents', () => {
       [getAgentsQuery, jest.fn().mockResolvedValue(apolloQueryResponse, provide)],
     ]);
 
+    const setNewAgentRegistered = jest.fn();
+
+    store = new Vuex.Store({
+      ...defaultStore,
+      state: entryData,
+      actions: {
+        setNewAgentRegistered,
+      },
+    });
     wrapper = shallowMount(Agents, {
       localVue,
+      store,
       apolloProvider,
       propsData: {
         ...defaultProps,
@@ -260,6 +273,7 @@ describe('Agents', () => {
         mocks,
         propsData: defaultProps,
         provide: provideData,
+        store,
       });
 
       return wrapper.vm.$nextTick();
@@ -269,4 +283,18 @@ describe('Agents', () => {
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
     });
   });
+
+  describe('when new agent is registered', () => {
+    let reloadAgentsSpy;
+    beforeEach(() => {
+      createWrapper({ agents: [] });
+      reloadAgentsSpy = jest.spyOn(wrapper.vm, 'reloadAgents');
+    });
+
+    it('reloads agents query', async () => {
+      wrapper.vm.$store.state.newAgentRegistered = true;
+      await wrapper.vm.$nextTick();
+      expect(reloadAgentsSpy).toHaveBeenCalled();
+    });
+  });
 });
diff --git a/spec/frontend/clusters_list/components/install_agent_modal_spec.js b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
index 6c2ea45b99bcc3..a965a90d108f7c 100644
--- a/spec/frontend/clusters_list/components/install_agent_modal_spec.js
+++ b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
@@ -1,6 +1,7 @@
 import { GlAlert, GlButton, GlFormInputGroup } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import Vuex from 'vuex';
 import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue';
 import InstallAgentModal from '~/clusters_list/components/install_agent_modal.vue';
 import { I18N_INSTALL_AGENT_MODAL, MAX_LIST_COUNT } from '~/clusters_list/constants';
@@ -10,6 +11,7 @@ import createAgentTokenMutation from '~/clusters_list/graphql/mutations/create_a
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
+import defaultStore from '~/clusters_list/store';
 import {
   createAgentResponse,
   createAgentErrorResponse,
@@ -49,6 +51,17 @@ describe('InstallAgentModal', () => {
     }
   };
 
+  const setNewAgentRegistered = jest.fn();
+
+  const createStore = () => {
+    return new Vuex.Store({
+      ...defaultStore,
+      actions: {
+        setNewAgentRegistered,
+      },
+    });
+  };
+
   const createWrapper = () => {
     const provide = {
       projectPath,
@@ -62,6 +75,7 @@ describe('InstallAgentModal', () => {
 
     wrapper = shallowMount(InstallAgentModal, {
       attachTo: document.body,
+      store: createStore(),
       stubs: {
         GlModal: ModalStub,
       },
@@ -182,6 +196,13 @@ describe('InstallAgentModal', () => {
       expect(code).toContain('--kas-address=kas.example.com');
     });
 
+    describe('clicking on the done button', () => {
+      it('updates the newAgentRegistered value in store', () => {
+        findActionButton().vm.$emit('click');
+        expect(setNewAgentRegistered).toHaveBeenCalledWith(expect.anything(), true);
+      });
+    });
+
     describe('error creating agent', () => {
       beforeEach(() => {
         apolloProvider = createMockApollo([
-- 
GitLab


From 0ea84aad0142a8379765f91240ce191d1e411dac Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Tue, 9 Nov 2021 01:03:03 +0200
Subject: [PATCH 02/11] Applied the suggestions after the FE review

---
 .../components/agent_empty_state.vue            | 17 +++++++++++++++++
 .../clusters_list/components/agent_table.vue    |  6 ++++++
 .../components/agent_empty_state_spec.js        |  6 ------
 .../clusters_list/components/agents_spec.js     |  6 +++---
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
index af44a23b4b393e..f03961719a29a5 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -2,6 +2,7 @@
 import { GlButton, GlEmptyState, GlLink, GlSprintf, GlAlert, GlModalDirective } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { INSTALL_AGENT_MODAL_ID, I18N_AGENTS_EMPTY_STATE } from '../constants';
+import { helpPagePath } from '~/helpers/help_page_helper';
 
 export default {
   i18n: I18N_AGENTS_EMPTY_STATE,
@@ -37,6 +38,22 @@ export default {
     repositoryPath() {
       return `/${this.projectPath}`;
     },
+    agentDocsUrl() {
+      return helpPagePath('user/clusters/agent/index');
+    },
+    installDocsUrl() {
+      return helpPagePath('administration/clusters/kas');
+    },
+    getStartedDocsUrl() {
+      return helpPagePath('user/clusters/agent/index', {
+        anchor: 'define-a-configuration-repository',
+      });
+    },
+    integrationsDocsUrl() {
+      return helpPagePath('user/clusters/agent/index', {
+        anchor: 'get-started-with-gitops-and-the-gitlab-agent',
+      });
+    },
   },
 };
 </script>
diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue
index 000730ac1ba526..af9ee309bfb06a 100644
--- a/app/assets/javascripts/clusters_list/components/agent_table.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_table.vue
@@ -9,6 +9,7 @@ import {
   GlPopover,
 } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { helpPagePath } from '~/helpers/help_page_helper';
@@ -67,6 +68,11 @@ export default {
         },
       ];
     },
+    integrationDocsUrl() {
+      return helpPagePath('user/clusters/agent/index', {
+        anchor: 'get-started-with-gitops-and-the-gitlab-agent',
+      });
+    },
   },
   methods: {
     getCellId(item) {
diff --git a/spec/frontend/clusters_list/components/agent_empty_state_spec.js b/spec/frontend/clusters_list/components/agent_empty_state_spec.js
index 38f0e0ba2c4f5a..87ba4f30ffcfcc 100644
--- a/spec/frontend/clusters_list/components/agent_empty_state_spec.js
+++ b/spec/frontend/clusters_list/components/agent_empty_state_spec.js
@@ -19,12 +19,6 @@ describe('AgentEmptyStateComponent', () => {
     projectPath,
   };
 
-  const findConfigurationsAlert = () => wrapper.findComponent(GlAlert);
-  const findMultipleClustersDocsLink = () => wrapper.findByTestId('multiple-clusters-docs-link');
-  const findInstallDocsLink = () => wrapper.findByTestId('install-docs-link');
-  const findIntegrationButton = () => wrapper.findByTestId('integration-primary-button');
-  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
-
   beforeEach(() => {
     wrapper = shallowMountExtended(AgentEmptyState, {
       propsData,
diff --git a/spec/frontend/clusters_list/components/agents_spec.js b/spec/frontend/clusters_list/components/agents_spec.js
index 2f2770dcd3b1d6..6cd900c129209d 100644
--- a/spec/frontend/clusters_list/components/agents_spec.js
+++ b/spec/frontend/clusters_list/components/agents_spec.js
@@ -285,16 +285,16 @@ describe('Agents', () => {
   });
 
   describe('when new agent is registered', () => {
-    let reloadAgentsSpy;
+    let refetchAgentsSpy;
     beforeEach(() => {
       createWrapper({ agents: [] });
-      reloadAgentsSpy = jest.spyOn(wrapper.vm, 'reloadAgents');
+      refetchAgentsSpy = jest.spyOn(wrapper.vm.$apollo.queries.agents, 'refetch');
     });
 
     it('reloads agents query', async () => {
       wrapper.vm.$store.state.newAgentRegistered = true;
       await wrapper.vm.$nextTick();
-      expect(reloadAgentsSpy).toHaveBeenCalled();
+      expect(refetchAgentsSpy).toHaveBeenCalled();
     });
   });
 });
-- 
GitLab


From 028c4562fe462336bad2eb0f90d03fdcb97c4d51 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Tue, 9 Nov 2021 20:40:37 +0200
Subject: [PATCH 03/11] Applied suggestions after the FE review

---
 .../components/agent_empty_state.vue             | 16 ----------------
 .../components/agent_empty_state_spec.js         |  6 ++++++
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
index f03961719a29a5..b02bca065b01ee 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -38,22 +38,6 @@ export default {
     repositoryPath() {
       return `/${this.projectPath}`;
     },
-    agentDocsUrl() {
-      return helpPagePath('user/clusters/agent/index');
-    },
-    installDocsUrl() {
-      return helpPagePath('administration/clusters/kas');
-    },
-    getStartedDocsUrl() {
-      return helpPagePath('user/clusters/agent/index', {
-        anchor: 'define-a-configuration-repository',
-      });
-    },
-    integrationsDocsUrl() {
-      return helpPagePath('user/clusters/agent/index', {
-        anchor: 'get-started-with-gitops-and-the-gitlab-agent',
-      });
-    },
   },
 };
 </script>
diff --git a/spec/frontend/clusters_list/components/agent_empty_state_spec.js b/spec/frontend/clusters_list/components/agent_empty_state_spec.js
index 87ba4f30ffcfcc..38f0e0ba2c4f5a 100644
--- a/spec/frontend/clusters_list/components/agent_empty_state_spec.js
+++ b/spec/frontend/clusters_list/components/agent_empty_state_spec.js
@@ -19,6 +19,12 @@ describe('AgentEmptyStateComponent', () => {
     projectPath,
   };
 
+  const findConfigurationsAlert = () => wrapper.findComponent(GlAlert);
+  const findMultipleClustersDocsLink = () => wrapper.findByTestId('multiple-clusters-docs-link');
+  const findInstallDocsLink = () => wrapper.findByTestId('install-docs-link');
+  const findIntegrationButton = () => wrapper.findByTestId('integration-primary-button');
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+
   beforeEach(() => {
     wrapper = shallowMountExtended(AgentEmptyState, {
       propsData,
-- 
GitLab


From e487d20729b35489ce06ca2fd573527b6909719f Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Tue, 9 Nov 2021 23:17:59 +0200
Subject: [PATCH 04/11] Updated branch with the latest changes

---
 .../clusters_list/components/agent_empty_state.vue          | 1 -
 .../javascripts/clusters_list/components/agent_table.vue    | 6 ------
 2 files changed, 7 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
index b02bca065b01ee..af44a23b4b393e 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -2,7 +2,6 @@
 import { GlButton, GlEmptyState, GlLink, GlSprintf, GlAlert, GlModalDirective } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { INSTALL_AGENT_MODAL_ID, I18N_AGENTS_EMPTY_STATE } from '../constants';
-import { helpPagePath } from '~/helpers/help_page_helper';
 
 export default {
   i18n: I18N_AGENTS_EMPTY_STATE,
diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue
index af9ee309bfb06a..000730ac1ba526 100644
--- a/app/assets/javascripts/clusters_list/components/agent_table.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_table.vue
@@ -9,7 +9,6 @@ import {
   GlPopover,
 } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import { helpPagePath } from '~/helpers/help_page_helper';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { helpPagePath } from '~/helpers/help_page_helper';
@@ -68,11 +67,6 @@ export default {
         },
       ];
     },
-    integrationDocsUrl() {
-      return helpPagePath('user/clusters/agent/index', {
-        anchor: 'get-started-with-gitops-and-the-gitlab-agent',
-      });
-    },
   },
   methods: {
     getCellId(item) {
-- 
GitLab


From 975b350f496d705e3078eed51810c3049202541e Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Thu, 11 Nov 2021 01:01:01 +0200
Subject: [PATCH 05/11] Changed setNewAgent action to apollo cache

---
 .../clusters_list/components/agents.vue       | 11 --------
 .../components/install_agent_modal.vue        |  2 --
 .../javascripts/clusters_list/store/state.js  |  1 -
 .../clusters_list/components/agents_spec.js   | 28 -------------------
 .../components/install_agent_modal_spec.js    | 21 --------------
 5 files changed, 63 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agents.vue b/app/assets/javascripts/clusters_list/components/agents.vue
index f37ab8efce2de6..fb5cf7d120648d 100644
--- a/app/assets/javascripts/clusters_list/components/agents.vue
+++ b/app/assets/javascripts/clusters_list/components/agents.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
-import { mapActions, mapState } from 'vuex';
 import { MAX_LIST_COUNT, ACTIVE_CONNECTION_TIME } from '../constants';
 import getAgentsQuery from '../graphql/queries/get_agents.query.graphql';
 import AgentEmptyState from './agent_empty_state.vue';
@@ -61,7 +60,6 @@ export default {
     };
   },
   computed: {
-    ...mapState(['newAgentRegistered']),
     agentList() {
       let list = this.agents?.project?.clusterAgents?.nodes;
 
@@ -92,16 +90,7 @@ export default {
       return Boolean(this.agents?.project?.repository?.tree?.trees?.nodes?.length);
     },
   },
-  watch: {
-    newAgentRegistered(value) {
-      if (value) {
-        this.reloadAgents();
-        this.setNewAgentRegistered(false);
-      }
-    },
-  },
   methods: {
-    ...mapActions(['setNewAgentRegistered']),
     reloadAgents() {
       this.$apollo.queries.agents.refetch();
     },
diff --git a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
index c5dabc574b58e9..6eb2e85eceab25 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -8,7 +8,6 @@ import {
   GlModal,
   GlSprintf,
 } from '@gitlab/ui';
-import { mapActions } from 'vuex';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
@@ -87,7 +86,6 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['setNewAgentRegistered']),
     setAgentName(name) {
       this.agentName = name;
     },
diff --git a/app/assets/javascripts/clusters_list/store/state.js b/app/assets/javascripts/clusters_list/store/state.js
index 6cbe4588ba7f3b..763d7389d0f22d 100644
--- a/app/assets/javascripts/clusters_list/store/state.js
+++ b/app/assets/javascripts/clusters_list/store/state.js
@@ -16,5 +16,4 @@ export default (initialState = {}) => ({
   },
   totalClusters: 0,
   canAddCluster: parseBoolean(initialState.canAddCluster),
-  newAgentRegistered: false,
 });
diff --git a/spec/frontend/clusters_list/components/agents_spec.js b/spec/frontend/clusters_list/components/agents_spec.js
index 6cd900c129209d..2dec7cdc973e28 100644
--- a/spec/frontend/clusters_list/components/agents_spec.js
+++ b/spec/frontend/clusters_list/components/agents_spec.js
@@ -1,21 +1,18 @@
 import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
-import Vuex from 'vuex';
 import AgentEmptyState from '~/clusters_list/components/agent_empty_state.vue';
 import AgentTable from '~/clusters_list/components/agent_table.vue';
 import Agents from '~/clusters_list/components/agents.vue';
 import { ACTIVE_CONNECTION_TIME } from '~/clusters_list/constants';
 import getAgentsQuery from '~/clusters_list/graphql/queries/get_agents.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import defaultStore from '~/clusters_list/store';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
 describe('Agents', () => {
   let wrapper;
-  let store;
 
   const defaultProps = {
     defaultBranchName: 'default',
@@ -40,18 +37,8 @@ describe('Agents', () => {
       [getAgentsQuery, jest.fn().mockResolvedValue(apolloQueryResponse, provide)],
     ]);
 
-    const setNewAgentRegistered = jest.fn();
-
-    store = new Vuex.Store({
-      ...defaultStore,
-      state: entryData,
-      actions: {
-        setNewAgentRegistered,
-      },
-    });
     wrapper = shallowMount(Agents, {
       localVue,
-      store,
       apolloProvider,
       propsData: {
         ...defaultProps,
@@ -273,7 +260,6 @@ describe('Agents', () => {
         mocks,
         propsData: defaultProps,
         provide: provideData,
-        store,
       });
 
       return wrapper.vm.$nextTick();
@@ -283,18 +269,4 @@ describe('Agents', () => {
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
     });
   });
-
-  describe('when new agent is registered', () => {
-    let refetchAgentsSpy;
-    beforeEach(() => {
-      createWrapper({ agents: [] });
-      refetchAgentsSpy = jest.spyOn(wrapper.vm.$apollo.queries.agents, 'refetch');
-    });
-
-    it('reloads agents query', async () => {
-      wrapper.vm.$store.state.newAgentRegistered = true;
-      await wrapper.vm.$nextTick();
-      expect(refetchAgentsSpy).toHaveBeenCalled();
-    });
-  });
 });
diff --git a/spec/frontend/clusters_list/components/install_agent_modal_spec.js b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
index a965a90d108f7c..6c2ea45b99bcc3 100644
--- a/spec/frontend/clusters_list/components/install_agent_modal_spec.js
+++ b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
@@ -1,7 +1,6 @@
 import { GlAlert, GlButton, GlFormInputGroup } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
-import Vuex from 'vuex';
 import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue';
 import InstallAgentModal from '~/clusters_list/components/install_agent_modal.vue';
 import { I18N_INSTALL_AGENT_MODAL, MAX_LIST_COUNT } from '~/clusters_list/constants';
@@ -11,7 +10,6 @@ import createAgentTokenMutation from '~/clusters_list/graphql/mutations/create_a
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
-import defaultStore from '~/clusters_list/store';
 import {
   createAgentResponse,
   createAgentErrorResponse,
@@ -51,17 +49,6 @@ describe('InstallAgentModal', () => {
     }
   };
 
-  const setNewAgentRegistered = jest.fn();
-
-  const createStore = () => {
-    return new Vuex.Store({
-      ...defaultStore,
-      actions: {
-        setNewAgentRegistered,
-      },
-    });
-  };
-
   const createWrapper = () => {
     const provide = {
       projectPath,
@@ -75,7 +62,6 @@ describe('InstallAgentModal', () => {
 
     wrapper = shallowMount(InstallAgentModal, {
       attachTo: document.body,
-      store: createStore(),
       stubs: {
         GlModal: ModalStub,
       },
@@ -196,13 +182,6 @@ describe('InstallAgentModal', () => {
       expect(code).toContain('--kas-address=kas.example.com');
     });
 
-    describe('clicking on the done button', () => {
-      it('updates the newAgentRegistered value in store', () => {
-        findActionButton().vm.$emit('click');
-        expect(setNewAgentRegistered).toHaveBeenCalledWith(expect.anything(), true);
-      });
-    });
-
     describe('error creating agent', () => {
       beforeEach(() => {
         apolloProvider = createMockApollo([
-- 
GitLab


From fc7c269220c22936f724f7db0a0113470c302944 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Fri, 12 Nov 2021 19:30:42 +0200
Subject: [PATCH 06/11] Added two variants of the Install new Agent modal

Now new agent modal will be always available from the actions menu.
We are adding two variants of the modal:
- empty state variant for no configurations found in the project
- variant with the agent registration flow
We are also removing the no configurations alert from the agents page.

Changelog: changed
---
 .../components/agent_empty_state.vue          |  42 +--
 .../clusters_list/components/agents.vue       |   9 +-
 .../components/available_agents_dropdown.vue  |  30 +--
 .../components/install_agent_modal.vue        | 253 ++++++++++++------
 .../javascripts/clusters_list/constants.js    |  78 +++---
 .../clusters_list/graphql/cache_update.js     |  83 ++++--
 app/assets/stylesheets/pages/clusters.scss    |  14 -
 locale/gitlab.pot                             |  11 +-
 spec/features/clusters/create_agent_spec.rb   |   2 +-
 .../components/agent_empty_state_spec.js      |  48 ++--
 .../clusters_list/components/agents_spec.js   |  19 --
 .../available_agents_dropwdown_spec.js        |  71 +----
 .../components/install_agent_modal_spec.js    | 233 ++++++++++------
 13 files changed, 454 insertions(+), 439 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
index af44a23b4b393e..3e4c11688d30b6 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlEmptyState, GlLink, GlSprintf, GlAlert, GlModalDirective } from '@gitlab/ui';
+import { GlButton, GlEmptyState, GlLink, GlSprintf, GlModalDirective } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { INSTALL_AGENT_MODAL_ID, I18N_AGENTS_EMPTY_STATE } from '../constants';
 
@@ -8,15 +8,11 @@ export default {
   modalId: INSTALL_AGENT_MODAL_ID,
   multipleClustersDocsUrl: helpPagePath('user/project/clusters/multiple_kubernetes_clusters'),
   installDocsUrl: helpPagePath('administration/clusters/kas'),
-  getStartedDocsUrl: helpPagePath('user/clusters/agent/index', {
-    anchor: 'define-a-configuration-repository',
-  }),
   components: {
     GlButton,
     GlEmptyState,
     GlLink,
     GlSprintf,
-    GlAlert,
   },
   directives: {
     GlModalDirective,
@@ -33,21 +29,16 @@ export default {
       type: Boolean,
     },
   },
-  computed: {
-    repositoryPath() {
-      return `/${this.projectPath}`;
-    },
-  },
 };
 </script>
 
 <template>
   <gl-empty-state :svg-path="emptyStateImage" title="" class="agents-empty-state">
     <template #description>
-      <p class="mw-460 gl-mx-auto gl-text-left">
+      <p class="gl-text-left">
         {{ $options.i18n.introText }}
       </p>
-      <p class="mw-460 gl-mx-auto gl-text-left">
+      <p class="gl-text-left">
         <gl-sprintf :message="$options.i18n.multipleClustersText">
           <template #link="{ content }">
             <gl-link
@@ -61,42 +52,17 @@ export default {
         </gl-sprintf>
       </p>
 
-      <p class="mw-460 gl-mx-auto">
+      <p>
         <gl-link :href="$options.installDocsUrl" target="_blank" data-testid="install-docs-link">
           {{ $options.i18n.learnMoreText }}
         </gl-link>
       </p>
-
-      <gl-alert
-        v-if="!hasConfigurations"
-        variant="warning"
-        class="gl-mb-5 text-left"
-        :dismissible="false"
-      >
-        {{ $options.i18n.warningText }}
-
-        <template #actions>
-          <gl-button
-            category="primary"
-            variant="info"
-            :href="$options.getStartedDocsUrl"
-            target="_blank"
-            class="gl-ml-0!"
-          >
-            {{ $options.i18n.readMoreText }}
-          </gl-button>
-          <gl-button category="secondary" variant="info" :href="repositoryPath">
-            {{ $options.i18n.repositoryButtonText }}
-          </gl-button>
-        </template>
-      </gl-alert>
     </template>
 
     <template #actions>
       <gl-button
         v-if="!isChildComponent"
         v-gl-modal-directive="$options.modalId"
-        :disabled="!hasConfigurations"
         data-testid="integration-primary-button"
         category="primary"
         variant="confirm"
diff --git a/app/assets/javascripts/clusters_list/components/agents.vue b/app/assets/javascripts/clusters_list/components/agents.vue
index fb5cf7d120648d..45108a28e372b2 100644
--- a/app/assets/javascripts/clusters_list/components/agents.vue
+++ b/app/assets/javascripts/clusters_list/components/agents.vue
@@ -86,9 +86,6 @@ export default {
     treePageInfo() {
       return this.agents?.project?.repository?.tree?.trees?.pageInfo || {};
     },
-    hasConfigurations() {
-      return Boolean(this.agents?.project?.repository?.tree?.trees?.nodes?.length);
-    },
   },
   methods: {
     reloadAgents() {
@@ -161,11 +158,7 @@ export default {
       </div>
     </div>
 
-    <agent-empty-state
-      v-else
-      :has-configurations="hasConfigurations"
-      :is-child-component="isChildComponent"
-    />
+    <agent-empty-state v-else :is-child-component="isChildComponent" />
   </section>
 
   <gl-alert v-else variant="danger" :dismissible="false">
diff --git a/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue b/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue
index 9fb020d2f4fb88..1630d0d5c92ac9 100644
--- a/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue
+++ b/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue
@@ -1,7 +1,6 @@
 <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',
@@ -10,36 +9,22 @@ export default {
     GlDropdown,
     GlDropdownItem,
   },
-  inject: ['projectPath'],
   props: {
     isRegistering: {
       required: true,
       type: Boolean,
     },
-  },
-  apollo: {
-    agents: {
-      query: agentConfigurations,
-      variables() {
-        return {
-          projectPath: this.projectPath,
-        };
-      },
-      update(data) {
-        this.populateAvailableAgents(data);
-      },
+    availableAgents: {
+      required: true,
+      type: Array,
     },
   },
   data() {
     return {
-      availableAgents: [],
       selectedAgent: null,
     };
   },
   computed: {
-    isLoading() {
-      return this.$apollo.queries.agents.loading;
-    },
     dropdownText() {
       if (this.isRegistering) {
         return this.$options.i18n.registeringAgent;
@@ -58,18 +43,11 @@ export default {
     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 :text="dropdownText" :loading="isRegistering">
     <gl-dropdown-item
       v-for="agent in availableAgents"
       :key="agent"
diff --git a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
index 6eb2e85eceab25..3da00fbb3b0c0f 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -12,16 +12,16 @@ import { helpPagePath } from '~/helpers/help_page_helper';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
 import { generateAgentRegistrationCommand } from '../clusters_util';
-import { INSTALL_AGENT_MODAL_ID, I18N_INSTALL_AGENT_MODAL } from '../constants';
-import { addAgentToStore } from '../graphql/cache_update';
+import { INSTALL_AGENT_MODAL_ID, I18N_AGENT_MODAL } from '../constants';
+import { addAgentToStore, addAgentConfigToStore } from '../graphql/cache_update';
 import createAgent from '../graphql/mutations/create_agent.mutation.graphql';
 import createAgentToken from '../graphql/mutations/create_agent_token.mutation.graphql';
 import getAgentsQuery from '../graphql/queries/get_agents.query.graphql';
+import agentConfigurations from '../graphql/queries/agent_configurations.query.graphql';
 import AvailableAgentsDropdown from './available_agents_dropdown.vue';
 
 export default {
   modalId: INSTALL_AGENT_MODAL_ID,
-  i18n: I18N_INSTALL_AGENT_MODAL,
   components: {
     AvailableAgentsDropdown,
     ClipboardButton,
@@ -34,7 +34,7 @@ export default {
     GlModal,
     GlSprintf,
   },
-  inject: ['projectPath', 'kasAddress'],
+  inject: ['projectPath', 'kasAddress', 'emptyStateImage'],
   props: {
     defaultBranchName: {
       default: '.noBranch',
@@ -46,6 +46,19 @@ export default {
       type: Number,
     },
   },
+  apollo: {
+    agents: {
+      query: agentConfigurations,
+      variables() {
+        return {
+          projectPath: this.projectPath,
+        };
+      },
+      update(data) {
+        this.populateAvailableAgents(data);
+      },
+    },
+  },
   data() {
     return {
       registering: false,
@@ -53,6 +66,7 @@ export default {
       agentToken: null,
       error: null,
       clusterAgent: null,
+      availableAgents: [],
     };
   },
   computed: {
@@ -63,7 +77,7 @@ export default {
       return !this.registering && this.agentName !== null;
     },
     canCancel() {
-      return !this.registered && !this.registering;
+      return !this.registered && !this.registering && this.modalType !== 'install';
     },
     agentRegistrationCommand() {
       return generateAgentRegistrationCommand(this.agentToken, this.kasAddress);
@@ -84,6 +98,23 @@ export default {
         projectPath: this.projectPath,
       };
     },
+    installAgentPath() {
+      return helpPagePath('user/clusters/agent/index', {
+        anchor: 'define-a-configuration-repository',
+      });
+    },
+    i18n() {
+      return I18N_AGENT_MODAL[this.modalType];
+    },
+    repositoryPath() {
+      return `/${this.projectPath}`;
+    },
+    modalType() {
+      return !this.availableAgents?.length && !this.registered ? 'install' : 'register';
+    },
+    modalSize() {
+      return this.modalType === 'install' ? 'sm' : 'md';
+    },
   },
   methods: {
     setAgentName(name) {
@@ -96,8 +127,16 @@ export default {
       this.registering = false;
       this.agentName = null;
       this.agentToken = null;
+      this.clusterAgent = null;
       this.error = null;
     },
+    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));
+    },
     createAgentMutation() {
       return this.$apollo
         .mutate({
@@ -117,7 +156,9 @@ export default {
             );
           },
         })
-        .then(({ data: { createClusterAgent } }) => createClusterAgent);
+        .then(({ data: { createClusterAgent } }) => {
+          return createClusterAgent;
+        });
     },
     createAgentTokenMutation(agendId) {
       return this.$apollo
@@ -129,6 +170,17 @@ export default {
               name: this.agentName,
             },
           },
+          update: (store, { data: { clusterAgentTokenCreate } }) => {
+            addAgentConfigToStore(
+              store,
+              clusterAgentTokenCreate,
+              this.clusterAgent,
+              agentConfigurations,
+              {
+                projectPath: this.projectPath,
+              },
+            );
+          },
         })
         .then(({ data: { clusterAgentTokenCreate } }) => clusterAgentTokenCreate);
     },
@@ -158,7 +210,7 @@ export default {
         if (error) {
           this.error = error.message;
         } else {
-          this.error = this.$options.i18n.unknownError;
+          this.error = this.i18n.unknownError;
         }
       } finally {
         this.registering = false;
@@ -172,115 +224,142 @@ export default {
   <gl-modal
     ref="modal"
     :modal-id="$options.modalId"
-    :title="$options.i18n.modalTitle"
+    :title="i18n.modalTitle"
+    :size="modalSize"
     static
     lazy
     @hidden="resetModal"
   >
-    <template v-if="!registered">
-      <p>
-        <strong>{{ $options.i18n.selectAgentTitle }}</strong>
-      </p>
+    <template v-if="modalType === 'register'">
+      <template v-if="!registered">
+        <p>
+          <strong>{{ i18n.selectAgentTitle }}</strong>
+        </p>
 
-      <p>
-        <gl-sprintf :message="$options.i18n.selectAgentBody">
-          <template #link="{ content }">
-            <gl-link :href="basicInstallPath" target="_blank"> {{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </p>
+        <p class="gl-mb-0">{{ i18n.selectAgentBody }}</p>
+        <p>
+          <gl-link :href="basicInstallPath" target="_blank"> {{ i18n.learnMoreLink }}</gl-link>
+        </p>
 
-      <form>
-        <gl-form-group label-for="agent-name">
-          <available-agents-dropdown
-            class="gl-w-70p"
-            :is-registering="registering"
-            @agentSelected="setAgentName"
-          />
-        </gl-form-group>
-      </form>
+        <form>
+          <gl-form-group label-for="agent-name">
+            <available-agents-dropdown
+              class="gl-w-70p"
+              :is-registering="registering"
+              :available-agents="availableAgents"
+              @agentSelected="setAgentName"
+            />
+          </gl-form-group>
+        </form>
 
-      <p v-if="error">
-        <gl-alert
-          :title="$options.i18n.registrationErrorTitle"
-          variant="danger"
-          :dismissible="false"
-        >
-          {{ error }}
-        </gl-alert>
-      </p>
-    </template>
+        <p v-if="error">
+          <gl-alert :title="i18n.registrationErrorTitle" variant="danger" :dismissible="false">
+            {{ error }}
+          </gl-alert>
+        </p>
+      </template>
 
-    <template v-else>
-      <p>
-        <strong>{{ $options.i18n.tokenTitle }}</strong>
-      </p>
+      <template v-else>
+        <p>
+          <strong>{{ i18n.tokenTitle }}</strong>
+        </p>
 
-      <p>
-        <gl-sprintf :message="$options.i18n.tokenBody">
-          <template #link="{ content }">
-            <gl-link :href="basicInstallPath" target="_blank"> {{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </p>
+        <p>
+          <gl-sprintf :message="i18n.tokenBody">
+            <template #link="{ content }">
+              <gl-link :href="basicInstallPath" target="_blank"> {{ content }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </p>
 
-      <p>
-        <gl-alert
-          :title="$options.i18n.tokenSingleUseWarningTitle"
-          variant="warning"
-          :dismissible="false"
-        >
-          {{ $options.i18n.tokenSingleUseWarningBody }}
-        </gl-alert>
-      </p>
+        <p>
+          <gl-alert :title="i18n.tokenSingleUseWarningTitle" variant="warning" :dismissible="false">
+            {{ i18n.tokenSingleUseWarningBody }}
+          </gl-alert>
+        </p>
 
-      <p>
-        <gl-form-input-group readonly :value="agentToken" :select-on-click="true">
-          <template #append>
-            <clipboard-button :text="agentToken" :title="$options.i18n.copyToken" />
-          </template>
-        </gl-form-input-group>
-      </p>
+        <p>
+          <gl-form-input-group readonly :value="agentToken" :select-on-click="true">
+            <template #append>
+              <clipboard-button :text="agentToken" :title="i18n.copyToken" />
+            </template>
+          </gl-form-input-group>
+        </p>
 
-      <p>
-        <strong>{{ $options.i18n.basicInstallTitle }}</strong>
-      </p>
+        <p>
+          <strong>{{ i18n.basicInstallTitle }}</strong>
+        </p>
 
-      <p>
-        {{ $options.i18n.basicInstallBody }}
-      </p>
+        <p>
+          {{ i18n.basicInstallBody }}
+        </p>
 
-      <p>
-        <code-block :code="agentRegistrationCommand" />
-      </p>
+        <p>
+          <code-block :code="agentRegistrationCommand" />
+        </p>
 
-      <p>
-        <strong>{{ $options.i18n.advancedInstallTitle }}</strong>
-      </p>
+        <p>
+          <strong>{{ i18n.advancedInstallTitle }}</strong>
+        </p>
 
-      <p>
-        <gl-sprintf :message="$options.i18n.advancedInstallBody">
-          <template #link="{ content }">
-            <gl-link :href="advancedInstallPath" target="_blank"> {{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
+        <p>
+          <gl-sprintf :message="i18n.advancedInstallBody">
+            <template #link="{ content }">
+              <gl-link :href="advancedInstallPath" target="_blank"> {{ content }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </p>
+      </template>
+    </template>
+
+    <template v-else>
+      <div class="gl-text-center gl-mb-5">
+        <img
+          :alt="i18n.altText"
+          :src="emptyStateImage"
+          height="100"
+          data-testid="agents-modal-empty-image"
+        />
+      </div>
+      <p>{{ i18n.modalBody }}</p>
+      <p class="gl-mb-0">
+        <gl-link :href="installAgentPath" target="_blank">
+          {{ i18n.docsLinkText }}
+        </gl-link>
       </p>
     </template>
 
     <template #modal-footer>
-      <gl-button v-if="canCancel" @click="closeModal">{{ $options.i18n.cancel }} </gl-button>
+      <gl-button v-if="canCancel" @click="closeModal">{{ i18n.cancel }} </gl-button>
 
       <gl-button v-if="registered" variant="confirm" category="primary" @click="closeModal"
-        >{{ $options.i18n.close }}
+        >{{ i18n.close }}
       </gl-button>
 
       <gl-button
-        v-else
+        v-else-if="modalType === 'register'"
         :disabled="!nextButtonDisabled"
         variant="confirm"
         category="primary"
         @click="registerAgent"
-        >{{ $options.i18n.registerAgentButton }}
+        >{{ i18n.registerAgentButton }}
+      </gl-button>
+
+      <gl-button
+        v-if="modalType === 'install'"
+        :href="repositoryPath"
+        variant="confirm"
+        category="secondary"
+        data-testid="agent-secondary-button"
+        >{{ i18n.secondaryButton }}
+      </gl-button>
+
+      <gl-button
+        v-if="modalType === 'install'"
+        variant="confirm"
+        category="primary"
+        @click="closeModal"
+        >{{ i18n.done }}
       </gl-button>
     </template>
   </gl-modal>
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index 9fefdf450c4224..1018e03fc49550 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -64,43 +64,56 @@ export const STATUSES = {
   creating: { title: __('Creating') },
 };
 
-export const I18N_INSTALL_AGENT_MODAL = {
-  registerAgentButton: s__('ClusterAgents|Register Agent'),
-  close: __('Close'),
-  cancel: __('Cancel'),
+export const I18N_AGENT_MODAL = {
+  register: {
+    registerAgentButton: s__('ClusterAgents|Register Agent'),
+    close: __('Close'),
+    cancel: __('Cancel'),
 
-  modalTitle: s__('ClusterAgents|Install new Agent'),
+    modalTitle: s__('ClusterAgents|Connect with Agent'),
 
-  selectAgentTitle: s__('ClusterAgents|Select which Agent you want to install'),
-  selectAgentBody: s__(
-    `ClusterAgents|Select the Agent you want to register with GitLab and install on your cluster. To learn more about the Kubernetes Agent registration process %{linkStart}go to the documentation%{linkEnd}.`,
-  ),
+    selectAgentTitle: s__('ClusterAgents|Select which Agent you want to install'),
+    selectAgentBody: s__(
+      'ClusterAgents|Select an Agent to register with GitLab and install on your cluster.',
+    ),
+    learnMoreLink: s__('ClusterAgents|Learn more about the GitLab Kubernetes Agent registration.'),
 
-  copyToken: s__('ClusterAgents|Copy token'),
-  tokenTitle: s__('ClusterAgents|Registration token'),
-  tokenBody: s__(
-    `ClusterAgents|The registration token will be used to connect the Agent on your cluster to GitLab. To learn more about the registration tokens and how they are used %{linkStart}go to the documentation%{linkEnd}.`,
-  ),
+    copyToken: s__('ClusterAgents|Copy token'),
+    tokenTitle: s__('ClusterAgents|Registration token'),
+    tokenBody: s__(
+      `ClusterAgents|The registration token will be used to connect the Agent on your cluster to GitLab. To learn more about the registration tokens and how they are used %{linkStart}go to the documentation%{linkEnd}.`,
+    ),
 
-  tokenSingleUseWarningTitle: s__(
-    'ClusterAgents|The token value will not be shown again after you close this window.',
-  ),
-  tokenSingleUseWarningBody: s__(
-    `ClusterAgents|The recommended installation method provided below includes the token. If you want to follow the alternative installation method provided in the docs make sure you save the token value before you close the window.`,
-  ),
+    tokenSingleUseWarningTitle: s__(
+      'ClusterAgents|The token value will not be shown again after you close this window.',
+    ),
+    tokenSingleUseWarningBody: s__(
+      `ClusterAgents|The recommended installation method provided below includes the token. If you want to follow the alternative installation method provided in the docs make sure you save the token value before you close the window.`,
+    ),
 
-  basicInstallTitle: s__('ClusterAgents|Recommended installation method'),
-  basicInstallBody: __(
-    `Open a CLI and connect to the cluster you want to install the Agent in. Use this installation method to minimize any manual steps. The token is already included in the command.`,
-  ),
+    basicInstallTitle: s__('ClusterAgents|Recommended installation method'),
+    basicInstallBody: __(
+      `Open a CLI and connect to the cluster you want to install the Agent in. Use this installation method to minimize any manual steps. The token is already included in the command.`,
+    ),
 
-  advancedInstallTitle: s__('ClusterAgents|Alternative installation methods'),
-  advancedInstallBody: s__(
-    'ClusterAgents|For alternative installation methods %{linkStart}go to the documentation%{linkEnd}.',
-  ),
+    advancedInstallTitle: s__('ClusterAgents|Alternative installation methods'),
+    advancedInstallBody: s__(
+      'ClusterAgents|For alternative installation methods %{linkStart}go to the documentation%{linkEnd}.',
+    ),
 
-  registrationErrorTitle: __('Failed to register Agent'),
-  unknownError: s__('ClusterAgents|An unknown error occurred. Please try again.'),
+    registrationErrorTitle: __('Failed to register Agent'),
+    unknownError: s__('ClusterAgents|An unknown error occurred. Please try again.'),
+  },
+  install: {
+    modalTitle: s__('ClusterAgents|Install new Agent'),
+    modalBody: s__(
+      'ClusterAgents|To install an Agent you should create an agent directory in the Repository first. We recommend that you add the Agent configuration to the directory before you start the installation process.',
+    ),
+    docsLinkText: s__('ClusterAgents|Learn more about installing a GitLab Kubernetes Agent'),
+    altText: s__('ClusterAgents|GitLab Kubernetes Agent'),
+    secondaryButton: s__('ClusterAgents|Go to the repository'),
+    done: __('Done'),
+  },
 };
 
 export const I18N_AVAILABLE_AGENTS_DROPDOWN = {
@@ -149,11 +162,6 @@ export const I18N_AGENTS_EMPTY_STATE = {
     'ClusterAgents|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}',
   ),
   learnMoreText: s__('ClusterAgents|Learn more about the GitLab Kubernetes Agent.'),
-  warningText: s__(
-    'ClusterAgents|To install an Agent you should create an agent directory in the Repository first. We recommend that you add the Agent configuration to the directory before you start the installation process.',
-  ),
-  readMoreText: s__('ClusterAgents|Read more about getting started'),
-  repositoryButtonText: s__('ClusterAgents|Go to the repository'),
   primaryButtonText: s__('ClusterAgents|Connect with a GitLab Agent'),
 };
 
diff --git a/app/assets/javascripts/clusters_list/graphql/cache_update.js b/app/assets/javascripts/clusters_list/graphql/cache_update.js
index dd633820952d67..c32f25f83a4d82 100644
--- a/app/assets/javascripts/clusters_list/graphql/cache_update.js
+++ b/app/assets/javascripts/clusters_list/graphql/cache_update.js
@@ -1,29 +1,64 @@
 import produce from 'immer';
 import { getAgentConfigPath } from '../clusters_util';
 
+export const hasErrors = ({ errors = [] }) => errors?.length;
+
 export function addAgentToStore(store, createClusterAgent, query, variables) {
-  const { clusterAgent } = createClusterAgent;
-  const sourceData = store.readQuery({
-    query,
-    variables,
-  });
-
-  const data = produce(sourceData, (draftData) => {
-    const configuration = {
-      name: clusterAgent.name,
-      path: getAgentConfigPath(clusterAgent.name),
-      webPath: clusterAgent.webPath,
-      __typename: 'TreeEntry',
-    };
-
-    draftData.project.clusterAgents.nodes.push(clusterAgent);
-    draftData.project.clusterAgents.count += 1;
-    draftData.project.repository.tree.trees.nodes.push(configuration);
-  });
-
-  store.writeQuery({
-    query,
-    variables,
-    data,
-  });
+  if (!hasErrors(createClusterAgent)) {
+    const { clusterAgent } = createClusterAgent;
+    const sourceData = store.readQuery({
+      query,
+      variables,
+    });
+
+    const data = produce(sourceData, (draftData) => {
+      const configuration = {
+        name: clusterAgent.name,
+        path: getAgentConfigPath(clusterAgent.name),
+        webPath: clusterAgent.webPath,
+        __typename: 'TreeEntry',
+      };
+
+      draftData.project.clusterAgents.nodes.push(clusterAgent);
+      draftData.project.clusterAgents.count += 1;
+      draftData.project.repository.tree.trees.nodes.push(configuration);
+    });
+
+    store.writeQuery({
+      query,
+      variables,
+      data,
+    });
+  }
+}
+
+export function addAgentConfigToStore(
+  store,
+  clusterAgentTokenCreate,
+  clusterAgent,
+  query,
+  variables,
+) {
+  if (!hasErrors(clusterAgentTokenCreate)) {
+    const sourceData = store.readQuery({
+      query,
+      variables,
+    });
+
+    const data = produce(sourceData, (draftData) => {
+      const configuration = {
+        agentName: clusterAgent.name,
+        __typename: 'AgentConfiguration',
+      };
+
+      draftData.project.clusterAgents.nodes.push(clusterAgent);
+      draftData.project.agentConfigurations.nodes.push(configuration);
+    });
+
+    store.writeQuery({
+      query,
+      variables,
+      data,
+    });
+  }
 }
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index b450bca4f41032..8246229aac9773 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -7,20 +7,6 @@
     }
   }
 
-  .agents-empty-state {
-    .text-content {
-      @include gl-max-w-full;
-      @include media-breakpoint-up(lg) {
-        max-width: 70%;
-      }
-    }
-
-    .gl-alert-actions {
-      @include gl-mt-0;
-      @include gl-flex-wrap;
-    }
-  }
-
   .gl-card-body {
     @include media-breakpoint-up(sm) {
       @include gl-pt-2;
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ca55085c5be059..86187375f596ec 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7413,7 +7413,6 @@ msgstr ""
 
 msgid "ClusterAgents|For alternative installation methods %{linkStart}go to the documentation%{linkEnd}."
 msgstr ""
-
 msgid "ClusterAgents|GitLab Agents"
 msgstr ""
 
@@ -7441,6 +7440,12 @@ msgstr ""
 msgid "ClusterAgents|Learn how to troubleshoot"
 msgstr ""
 
+msgid "ClusterAgents|Learn more about installing a GitLab Kubernetes Agent"
+msgstr ""
+
+msgid "ClusterAgents|Learn more about the GitLab Kubernetes Agent registration."
+msgstr ""
+
 msgid "ClusterAgents|Learn more about the GitLab Kubernetes Agent."
 msgstr ""
 
@@ -7469,8 +7474,6 @@ msgid "ClusterAgents|Read more about getting started"
 msgstr ""
 
 msgid "ClusterAgents|Recommended"
-msgstr ""
-
 msgid "ClusterAgents|Recommended installation method"
 msgstr ""
 
@@ -7489,7 +7492,7 @@ msgstr ""
 msgid "ClusterAgents|Select an Agent"
 msgstr ""
 
-msgid "ClusterAgents|Select the Agent you want to register with GitLab and install on your cluster. To learn more about the Kubernetes Agent registration process %{linkStart}go to the documentation%{linkEnd}."
+msgid "ClusterAgents|Select an Agent to register with GitLab and install on your cluster."
 msgstr ""
 
 msgid "ClusterAgents|Select which Agent you want to install"
diff --git a/spec/features/clusters/create_agent_spec.rb b/spec/features/clusters/create_agent_spec.rb
index f40932c4750dd7..906f0d1b4374b4 100644
--- a/spec/features/clusters/create_agent_spec.rb
+++ b/spec/features/clusters/create_agent_spec.rb
@@ -25,7 +25,7 @@
 
   it 'allows the user to select an agent to install, and displays the resulting agent token' do
     click_button('Actions')
-    expect(page).to have_content('Install new Agent')
+    expect(page).to have_content('Register Agent')
 
     click_button('Select an Agent')
     click_button('example-agent-2')
diff --git a/spec/frontend/clusters_list/components/agent_empty_state_spec.js b/spec/frontend/clusters_list/components/agent_empty_state_spec.js
index 38f0e0ba2c4f5a..f6918311934640 100644
--- a/spec/frontend/clusters_list/components/agent_empty_state_spec.js
+++ b/spec/frontend/clusters_list/components/agent_empty_state_spec.js
@@ -1,25 +1,20 @@
-import { GlAlert, GlEmptyState, GlSprintf } from '@gitlab/ui';
+import { GlEmptyState, GlSprintf } from '@gitlab/ui';
 import AgentEmptyState from '~/clusters_list/components/agent_empty_state.vue';
+import { INSTALL_AGENT_MODAL_ID } from '~/clusters_list/constants';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { helpPagePath } from '~/helpers/help_page_helper';
 
 const emptyStateImage = '/path/to/image';
-const projectPath = 'path/to/project';
 const multipleClustersDocsUrl = helpPagePath('user/project/clusters/multiple_kubernetes_clusters');
 const installDocsUrl = helpPagePath('administration/clusters/kas');
 
 describe('AgentEmptyStateComponent', () => {
   let wrapper;
-
-  const propsData = {
-    hasConfigurations: false,
-  };
   const provideData = {
     emptyStateImage,
-    projectPath,
   };
 
-  const findConfigurationsAlert = () => wrapper.findComponent(GlAlert);
   const findMultipleClustersDocsLink = () => wrapper.findByTestId('multiple-clusters-docs-link');
   const findInstallDocsLink = () => wrapper.findByTestId('install-docs-link');
   const findIntegrationButton = () => wrapper.findByTestId('integration-primary-button');
@@ -27,8 +22,10 @@ describe('AgentEmptyStateComponent', () => {
 
   beforeEach(() => {
     wrapper = shallowMountExtended(AgentEmptyState, {
-      propsData,
       provide: provideData,
+      directives: {
+        GlModalDirective: createMockDirective(),
+      },
       stubs: { GlEmptyState, GlSprintf },
     });
   });
@@ -39,33 +36,22 @@ describe('AgentEmptyStateComponent', () => {
     }
   });
 
+  it('renders the empty state', () => {
+    expect(findEmptyState().exists()).toBe(true);
+  });
+
+  it('renders button for the agent registration', () => {
+    expect(findIntegrationButton().exists()).toBe(true);
+  });
+
   it('renders correct href attributes for the links', () => {
     expect(findMultipleClustersDocsLink().attributes('href')).toBe(multipleClustersDocsUrl);
     expect(findInstallDocsLink().attributes('href')).toBe(installDocsUrl);
   });
 
-  describe('when there are no agent configurations in repository', () => {
-    it('should render notification message box', () => {
-      expect(findConfigurationsAlert().exists()).toBe(true);
-    });
-
-    it('should disable integration button', () => {
-      expect(findIntegrationButton().attributes('disabled')).toBe('true');
-    });
-  });
+  it('renders correct modal id for the agent registration modal', () => {
+    const binding = getBinding(findIntegrationButton().element, 'gl-modal-directive');
 
-  describe('when there is a list of agent configurations', () => {
-    beforeEach(() => {
-      propsData.hasConfigurations = true;
-      wrapper = shallowMountExtended(AgentEmptyState, {
-        propsData,
-        provide: provideData,
-      });
-    });
-    it('should render content without notification message box', () => {
-      expect(findEmptyState().exists()).toBe(true);
-      expect(findConfigurationsAlert().exists()).toBe(false);
-      expect(findIntegrationButton().attributes('disabled')).toBeUndefined();
-    });
+    expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
   });
 });
diff --git a/spec/frontend/clusters_list/components/agents_spec.js b/spec/frontend/clusters_list/components/agents_spec.js
index 2dec7cdc973e28..24afb986424ea3 100644
--- a/spec/frontend/clusters_list/components/agents_spec.js
+++ b/spec/frontend/clusters_list/components/agents_spec.js
@@ -19,7 +19,6 @@ describe('Agents', () => {
   };
   const provideData = {
     projectPath: 'path/to/project',
-    kasAddress: 'kas.example.com',
   };
 
   const createWrapper = ({ props = {}, agents = [], pageInfo = null, trees = [], count = 0 }) => {
@@ -216,24 +215,6 @@ describe('Agents', () => {
     });
   });
 
-  describe('when the agent configurations are present', () => {
-    const trees = [
-      {
-        name: 'agent-1',
-        path: '.gitlab/agents/agent-1',
-        webPath: '/project/path/.gitlab/agents/agent-1',
-      },
-    ];
-
-    beforeEach(() => {
-      return createWrapper({ agents: [], trees });
-    });
-
-    it('should pass the correct hasConfigurations boolean value to empty state component', () => {
-      expect(findEmptyState().props('hasConfigurations')).toEqual(true);
-    });
-  });
-
   describe('when agents query has errored', () => {
     beforeEach(() => {
       return createWrapper({ agents: null });
diff --git a/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js b/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js
index 40c2c59e187dd0..bcc1d4e8b9ebcb 100644
--- a/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js
+++ b/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js
@@ -1,14 +1,7 @@
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { createLocalVue, mount } from '@vue/test-utils';
-import VueApollo from 'vue-apollo';
+import { shallowMount } from '@vue/test-utils';
 import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue';
 import { I18N_AVAILABLE_AGENTS_DROPDOWN } from '~/clusters_list/constants';
-import agentConfigurationsQuery from '~/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;
@@ -18,46 +11,19 @@ describe('AvailableAgentsDropdown', () => {
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
   const findConfiguredAgentItem = () => findDropdownItems().at(0);
 
-  const createWrapper = ({ propsData = {}, isLoading = false }) => {
-    const provide = {
-      projectPath: 'path/to/project',
-    };
-
-    wrapper = (() => {
-      if (isLoading) {
-        const mocks = {
-          $apollo: {
-            queries: {
-              agents: {
-                loading: true,
-              },
-            },
-          },
-        };
-
-        return mount(AvailableAgentsDropdown, { mocks, provide, propsData });
-      }
-
-      const apolloProvider = createMockApollo([
-        [agentConfigurationsQuery, jest.fn().mockResolvedValue(agentConfigurationsResponse)],
-      ]);
-
-      return mount(AvailableAgentsDropdown, {
-        localVue,
-        apolloProvider,
-        provide,
-        propsData,
-      });
-    })();
+  const createWrapper = ({ propsData }) => {
+    wrapper = shallowMount(AvailableAgentsDropdown, {
+      propsData,
+    });
   };
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('there are agents available', () => {
     const propsData = {
+      availableAgents: ['configured-agent'],
       isRegistering: false,
     };
 
@@ -69,12 +35,6 @@ describe('AvailableAgentsDropdown', () => {
       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');
@@ -93,6 +53,7 @@ describe('AvailableAgentsDropdown', () => {
 
   describe('registration in progress', () => {
     const propsData = {
+      availableAgents: ['configured-agent'],
       isRegistering: true,
     };
 
@@ -108,22 +69,4 @@ describe('AvailableAgentsDropdown', () => {
       expect(findDropdown().props('loading')).toBe(true);
     });
   });
-
-  describe('agents query is loading', () => {
-    const propsData = {
-      isRegistering: false,
-    };
-
-    beforeEach(() => {
-      createWrapper({ propsData, 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);
-    });
-  });
 });
diff --git a/spec/frontend/clusters_list/components/install_agent_modal_spec.js b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
index 6c2ea45b99bcc3..b86410faa38aa7 100644
--- a/spec/frontend/clusters_list/components/install_agent_modal_spec.js
+++ b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
@@ -1,10 +1,12 @@
 import { GlAlert, GlButton, GlFormInputGroup } from '@gitlab/ui';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue';
 import InstallAgentModal from '~/clusters_list/components/install_agent_modal.vue';
-import { I18N_INSTALL_AGENT_MODAL, MAX_LIST_COUNT } from '~/clusters_list/constants';
+import { I18N_AGENT_MODAL, MAX_LIST_COUNT } from '~/clusters_list/constants';
 import getAgentsQuery from '~/clusters_list/graphql/queries/get_agents.query.graphql';
+import getAgentConfigurations from '~/clusters_list/graphql/queries/agent_configurations.query.graphql';
 import createAgentMutation from '~/clusters_list/graphql/mutations/create_agent.mutation.graphql';
 import createAgentTokenMutation from '~/clusters_list/graphql/mutations/create_agent_token.mutation.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -23,6 +25,8 @@ const localVue = createLocalVue();
 localVue.use(VueApollo);
 
 const projectPath = 'path/to/project';
+const kasAddress = 'kas.example.com';
+const emptyStateImage = 'path/to/image';
 const defaultBranchName = 'default';
 const maxAgents = MAX_LIST_COUNT;
 
@@ -30,7 +34,16 @@ describe('InstallAgentModal', () => {
   let wrapper;
   let apolloProvider;
 
-  const i18n = I18N_INSTALL_AGENT_MODAL;
+  const configurations = [{ agentName: 'agent-name' }];
+  const apolloQueryResponse = {
+    data: {
+      project: {
+        clusterAgents: { nodes: [] },
+        agentConfigurations: { nodes: configurations },
+      },
+    },
+  };
+
   const findModal = () => wrapper.findComponent(ModalStub);
   const findAgentDropdown = () => findModal().findComponent(AvailableAgentsDropdown);
   const findAlert = () => findModal().findComponent(GlAlert);
@@ -40,6 +53,8 @@ describe('InstallAgentModal', () => {
       .wrappers.find((button) => button.props('variant') === variant);
   const findActionButton = () => findButtonByVariant('confirm');
   const findCancelButton = () => findButtonByVariant('default');
+  const findSecondaryButton = () => wrapper.findByTestId('agent-secondary-button');
+  const findImage = () => wrapper.findByTestId('agents-modal-empty-image');
 
   const expectDisabledAttribute = (element, disabled) => {
     if (disabled) {
@@ -52,7 +67,8 @@ describe('InstallAgentModal', () => {
   const createWrapper = () => {
     const provide = {
       projectPath,
-      kasAddress: 'kas.example.com',
+      kasAddress,
+      emptyStateImage,
     };
 
     const propsData = {
@@ -60,7 +76,7 @@ describe('InstallAgentModal', () => {
       maxAgents,
     };
 
-    wrapper = shallowMount(InstallAgentModal, {
+    wrapper = shallowMountExtended(InstallAgentModal, {
       attachTo: document.body,
       stubs: {
         GlModal: ModalStub,
@@ -85,10 +101,12 @@ describe('InstallAgentModal', () => {
     });
   };
 
-  const mockSelectedAgentResponse = () => {
+  const mockSelectedAgentResponse = async () => {
     createWrapper();
     writeQuery();
 
+    await wrapper.vm.$nextTick();
+
     wrapper.vm.setAgentName('agent-name');
     findActionButton().vm.$emit('click');
 
@@ -96,121 +114,160 @@ describe('InstallAgentModal', () => {
   };
 
   beforeEach(() => {
+    apolloProvider = createMockApollo([
+      [getAgentConfigurations, jest.fn().mockResolvedValue(apolloQueryResponse)],
+    ]);
     createWrapper();
   });
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
     apolloProvider = null;
   });
 
-  describe('initial state', () => {
-    it('renders the dropdown for available agents', () => {
-      expect(findAgentDropdown().isVisible()).toBe(true);
-      expect(findModal().text()).not.toContain(i18n.basicInstallTitle);
-      expect(findModal().findComponent(GlFormInputGroup).exists()).toBe(false);
-      expect(findModal().findComponent(GlAlert).exists()).toBe(false);
-      expect(findModal().findComponent(CodeBlock).exists()).toBe(false);
-    });
+  describe('when agent configurations are present', () => {
+    const i18n = I18N_AGENT_MODAL.register;
 
-    it('renders a cancel button', () => {
-      expect(findCancelButton().isVisible()).toBe(true);
-      expectDisabledAttribute(findCancelButton(), false);
-    });
+    describe('initial state', () => {
+      it('renders the dropdown for available agents', () => {
+        expect(findAgentDropdown().isVisible()).toBe(true);
+        expect(findModal().text()).not.toContain(i18n.basicInstallTitle);
+        expect(findModal().findComponent(GlFormInputGroup).exists()).toBe(false);
+        expect(findModal().findComponent(GlAlert).exists()).toBe(false);
+        expect(findModal().findComponent(CodeBlock).exists()).toBe(false);
+      });
 
-    it('renders a disabled next button', () => {
-      expect(findActionButton().isVisible()).toBe(true);
-      expect(findActionButton().text()).toBe(i18n.registerAgentButton);
-      expectDisabledAttribute(findActionButton(), true);
-    });
-  });
+      it('renders a cancel button', () => {
+        expect(findCancelButton().isVisible()).toBe(true);
+        expectDisabledAttribute(findCancelButton(), false);
+      });
 
-  describe('an agent is selected', () => {
-    beforeEach(() => {
-      findAgentDropdown().vm.$emit('agentSelected');
+      it('renders a disabled next button', () => {
+        expect(findActionButton().isVisible()).toBe(true);
+        expect(findActionButton().text()).toBe(i18n.registerAgentButton);
+        expectDisabledAttribute(findActionButton(), true);
+      });
     });
 
-    it('enables the next button', () => {
-      expect(findActionButton().isVisible()).toBe(true);
-      expectDisabledAttribute(findActionButton(), false);
-    });
-  });
+    describe('an agent is selected', () => {
+      beforeEach(() => {
+        findAgentDropdown().vm.$emit('agentSelected');
+      });
 
-  describe('registering an agent', () => {
-    const createAgentHandler = jest.fn().mockResolvedValue(createAgentResponse);
-    const createAgentTokenHandler = jest.fn().mockResolvedValue(createAgentTokenResponse);
+      it('enables the next button', () => {
+        expect(findActionButton().isVisible()).toBe(true);
+        expectDisabledAttribute(findActionButton(), false);
+      });
+    });
 
-    beforeEach(() => {
-      apolloProvider = createMockApollo([
-        [createAgentMutation, createAgentHandler],
-        [createAgentTokenMutation, createAgentTokenHandler],
-      ]);
+    describe('registering an agent', () => {
+      const createAgentHandler = jest.fn().mockResolvedValue(createAgentResponse);
+      const createAgentTokenHandler = jest.fn().mockResolvedValue(createAgentTokenResponse);
 
-      return mockSelectedAgentResponse(apolloProvider);
-    });
+      beforeEach(() => {
+        apolloProvider = createMockApollo([
+          [getAgentConfigurations, jest.fn().mockResolvedValue(apolloQueryResponse)],
+          [createAgentMutation, createAgentHandler],
+          [createAgentTokenMutation, createAgentTokenHandler],
+        ]);
 
-    it('creates an agent and token', () => {
-      expect(createAgentHandler).toHaveBeenCalledWith({
-        input: { name: 'agent-name', projectPath },
+        return mockSelectedAgentResponse();
       });
 
-      expect(createAgentTokenHandler).toHaveBeenCalledWith({
-        input: { clusterAgentId: 'agent-id', name: 'agent-name' },
-      });
-    });
+      it('creates an agent and token', () => {
+        expect(createAgentHandler).toHaveBeenCalledWith({
+          input: { name: 'agent-name', projectPath },
+        });
 
-    it('renders a close button', () => {
-      expect(findActionButton().isVisible()).toBe(true);
-      expect(findActionButton().text()).toBe(i18n.close);
-      expectDisabledAttribute(findActionButton(), false);
-    });
+        expect(createAgentTokenHandler).toHaveBeenCalledWith({
+          input: { clusterAgentId: 'agent-id', name: 'agent-name' },
+        });
+      });
 
-    it('shows agent instructions', () => {
-      const modalText = findModal().text();
-      expect(modalText).toContain(i18n.basicInstallTitle);
-      expect(modalText).toContain(i18n.basicInstallBody);
+      it('renders a close button', () => {
+        expect(findActionButton().isVisible()).toBe(true);
+        expect(findActionButton().text()).toBe(i18n.close);
+        expectDisabledAttribute(findActionButton(), false);
+      });
 
-      const token = findModal().findComponent(GlFormInputGroup);
-      expect(token.props('value')).toBe('mock-agent-token');
+      it('shows agent instructions', () => {
+        const modalText = findModal().text();
+        expect(modalText).toContain(i18n.basicInstallTitle);
+        expect(modalText).toContain(i18n.basicInstallBody);
 
-      const alert = findModal().findComponent(GlAlert);
-      expect(alert.props('title')).toBe(i18n.tokenSingleUseWarningTitle);
+        const token = findModal().findComponent(GlFormInputGroup);
+        expect(token.props('value')).toBe('mock-agent-token');
 
-      const code = findModal().findComponent(CodeBlock).props('code');
-      expect(code).toContain('--agent-token=mock-agent-token');
-      expect(code).toContain('--kas-address=kas.example.com');
-    });
+        const alert = findModal().findComponent(GlAlert);
+        expect(alert.props('title')).toBe(i18n.tokenSingleUseWarningTitle);
 
-    describe('error creating agent', () => {
-      beforeEach(() => {
-        apolloProvider = createMockApollo([
-          [createAgentMutation, jest.fn().mockResolvedValue(createAgentErrorResponse)],
-        ]);
+        const code = findModal().findComponent(CodeBlock).props('code');
+        expect(code).toContain('--agent-token=mock-agent-token');
+        expect(code).toContain('--kas-address=kas.example.com');
+      });
 
-        return mockSelectedAgentResponse();
+      describe('error creating agent', () => {
+        beforeEach(() => {
+          apolloProvider = createMockApollo([
+            [getAgentConfigurations, jest.fn().mockResolvedValue(apolloQueryResponse)],
+            [createAgentMutation, jest.fn().mockResolvedValue(createAgentErrorResponse)],
+          ]);
+
+          return mockSelectedAgentResponse();
+        });
+
+        it('displays the error message', () => {
+          expect(findAlert().text()).toBe(
+            createAgentErrorResponse.data.createClusterAgent.errors[0],
+          );
+        });
       });
 
-      it('displays the error message', () => {
-        expect(findAlert().text()).toBe(createAgentErrorResponse.data.createClusterAgent.errors[0]);
+      describe('error creating token', () => {
+        beforeEach(() => {
+          apolloProvider = createMockApollo([
+            [getAgentConfigurations, jest.fn().mockResolvedValue(apolloQueryResponse)],
+            [createAgentMutation, jest.fn().mockResolvedValue(createAgentResponse)],
+            [createAgentTokenMutation, jest.fn().mockResolvedValue(createAgentTokenErrorResponse)],
+          ]);
+
+          return mockSelectedAgentResponse();
+        });
+
+        it('displays the error message', async () => {
+          expect(findAlert().text()).toBe(
+            createAgentTokenErrorResponse.data.clusterAgentTokenCreate.errors[0],
+          );
+        });
       });
     });
+  });
 
-    describe('error creating token', () => {
-      beforeEach(() => {
-        apolloProvider = createMockApollo([
-          [createAgentMutation, jest.fn().mockResolvedValue(createAgentResponse)],
-          [createAgentTokenMutation, jest.fn().mockResolvedValue(createAgentTokenErrorResponse)],
-        ]);
+  describe('when there are no agent configurations present', () => {
+    const i18n = I18N_AGENT_MODAL.install;
+    const apolloQueryEmptyResponse = {
+      data: {
+        project: {
+          clusterAgents: { nodes: [] },
+          agentConfigurations: { nodes: [] },
+        },
+      },
+    };
 
-        return mockSelectedAgentResponse();
-      });
+    beforeEach(() => {
+      apolloProvider = createMockApollo([
+        [getAgentConfigurations, jest.fn().mockResolvedValue(apolloQueryEmptyResponse)],
+      ]);
+      createWrapper();
+    });
 
-      it('displays the error message', () => {
-        expect(findAlert().text()).toBe(
-          createAgentTokenErrorResponse.data.clusterAgentTokenCreate.errors[0],
-        );
-      });
+    it('renders empty state image', () => {
+      expect(findImage().attributes('src')).toBe(emptyStateImage);
+    });
+
+    it('renders a secondary button', () => {
+      expect(findSecondaryButton().isVisible()).toBe(true);
+      expect(findSecondaryButton().text()).toBe(i18n.secondaryButton);
     });
   });
 });
-- 
GitLab


From 92df7a5d8c3f769ffc8fc57ae3c76488f23e4d9b Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Mon, 15 Nov 2021 19:45:01 +0200
Subject: [PATCH 07/11] Implemented suggestions after the FE review

---
 .../clusters_list/components/install_agent_modal.vue     | 9 ++-------
 .../clusters_list/components/install_agent_modal_spec.js | 2 +-
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
index 3da00fbb3b0c0f..3610fb30986c21 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -314,16 +314,11 @@ export default {
 
     <template v-else>
       <div class="gl-text-center gl-mb-5">
-        <img
-          :alt="i18n.altText"
-          :src="emptyStateImage"
-          height="100"
-          data-testid="agents-modal-empty-image"
-        />
+        <img :alt="i18n.altText" :src="emptyStateImage" height="100" />
       </div>
       <p>{{ i18n.modalBody }}</p>
       <p class="gl-mb-0">
-        <gl-link :href="installAgentPath" target="_blank">
+        <gl-link :href="installAgentPath">
           {{ i18n.docsLinkText }}
         </gl-link>
       </p>
diff --git a/spec/frontend/clusters_list/components/install_agent_modal_spec.js b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
index b86410faa38aa7..fd8a87402a39ec 100644
--- a/spec/frontend/clusters_list/components/install_agent_modal_spec.js
+++ b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
@@ -54,7 +54,7 @@ describe('InstallAgentModal', () => {
   const findActionButton = () => findButtonByVariant('confirm');
   const findCancelButton = () => findButtonByVariant('default');
   const findSecondaryButton = () => wrapper.findByTestId('agent-secondary-button');
-  const findImage = () => wrapper.findByTestId('agents-modal-empty-image');
+  const findImage = () => wrapper.findByRole('img', { alt: I18N_AGENT_MODAL.install.altText });
 
   const expectDisabledAttribute = (element, disabled) => {
     if (disabled) {
-- 
GitLab


From e7cd6b9b2acbc500fc78d8a6902a8bc9fed03b07 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Tue, 16 Nov 2021 12:54:12 +0200
Subject: [PATCH 08/11] Added computed properties for the modal types

---
 .../components/install_agent_modal.vue         | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
index 3610fb30986c21..8280570e28db27 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -115,6 +115,12 @@ export default {
     modalSize() {
       return this.modalType === 'install' ? 'sm' : 'md';
     },
+    isInstallModal() {
+      return this.modalType === 'install';
+    },
+    isRegisterModal() {
+      return this.modalType === 'register';
+    },
   },
   methods: {
     setAgentName(name) {
@@ -230,7 +236,7 @@ export default {
     lazy
     @hidden="resetModal"
   >
-    <template v-if="modalType === 'register'">
+    <template v-if="isRegisterModal">
       <template v-if="!registered">
         <p>
           <strong>{{ i18n.selectAgentTitle }}</strong>
@@ -332,7 +338,7 @@ export default {
       </gl-button>
 
       <gl-button
-        v-else-if="modalType === 'register'"
+        v-else-if="isRegisterModal"
         :disabled="!nextButtonDisabled"
         variant="confirm"
         category="primary"
@@ -341,7 +347,7 @@ export default {
       </gl-button>
 
       <gl-button
-        v-if="modalType === 'install'"
+        v-if="isInstallModal"
         :href="repositoryPath"
         variant="confirm"
         category="secondary"
@@ -349,11 +355,7 @@ export default {
         >{{ i18n.secondaryButton }}
       </gl-button>
 
-      <gl-button
-        v-if="modalType === 'install'"
-        variant="confirm"
-        category="primary"
-        @click="closeModal"
+      <gl-button v-if="isInstallModal" variant="confirm" category="primary" @click="closeModal"
         >{{ i18n.done }}
       </gl-button>
     </template>
-- 
GitLab


From 593db6ae5167eda61d0259cfc64c2c06e2e0a80e Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 16 Nov 2021 13:09:18 +0000
Subject: [PATCH 09/11] Apply 1 suggestion(s) to 1 file(s)

---
 .../clusters_list/components/agent_empty_state.vue         | 6 +-----
 .../clusters_list/components/install_agent_modal.vue       | 4 ++--
 locale/gitlab.pot                                          | 7 +++++--
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
index 3e4c11688d30b6..37cec0b2891adb 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -17,12 +17,8 @@ export default {
   directives: {
     GlModalDirective,
   },
-  inject: ['emptyStateImage', 'projectPath'],
+  inject: ['emptyStateImage'],
   props: {
-    hasConfigurations: {
-      type: Boolean,
-      required: true,
-    },
     isChildComponent: {
       default: false,
       required: false,
diff --git a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
index 8280570e28db27..e5e0e153d8d2b6 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -77,7 +77,7 @@ export default {
       return !this.registering && this.agentName !== null;
     },
     canCancel() {
-      return !this.registered && !this.registering && this.modalType !== 'install';
+      return !this.registered && !this.registering && this.isRegisterModal;
     },
     agentRegistrationCommand() {
       return generateAgentRegistrationCommand(this.agentToken, this.kasAddress);
@@ -113,7 +113,7 @@ export default {
       return !this.availableAgents?.length && !this.registered ? 'install' : 'register';
     },
     modalSize() {
-      return this.modalType === 'install' ? 'sm' : 'md';
+      return this.isInstallModal ? 'sm' : 'md';
     },
     isInstallModal() {
       return this.modalType === 'install';
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 86187375f596ec..82fb8f63ed6653 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7413,12 +7413,16 @@ msgstr ""
 
 msgid "ClusterAgents|For alternative installation methods %{linkStart}go to the documentation%{linkEnd}."
 msgstr ""
+
 msgid "ClusterAgents|GitLab Agents"
 msgstr ""
 
 msgid "ClusterAgents|GitLab Agents provide an increased level of security when integrating with clusters. %{linkStart}Learn more about the GitLab Kubernetes Agent.%{linkEnd}"
 msgstr ""
 
+msgid "ClusterAgents|GitLab Kubernetes Agent"
+msgstr ""
+
 msgid "ClusterAgents|Go to the repository"
 msgstr ""
 
@@ -7470,10 +7474,9 @@ msgstr ""
 msgid "ClusterAgents|Not connected"
 msgstr ""
 
-msgid "ClusterAgents|Read more about getting started"
+msgid "ClusterAgents|Recommended"
 msgstr ""
 
-msgid "ClusterAgents|Recommended"
 msgid "ClusterAgents|Recommended installation method"
 msgstr ""
 
-- 
GitLab


From 9f9e45d9d9537a8ca51577fd717286936bcfe7d3 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Tue, 16 Nov 2021 23:24:26 +0200
Subject: [PATCH 10/11] Changed the GraphQL error type to fix failing spec

---
 .../components/install_agent_modal.vue         | 18 +++++++++++++++++-
 .../javascripts/clusters_list/constants.js     |  5 +++++
 lib/gitlab/kas/client.rb                       |  2 +-
 locale/gitlab.pot                              |  3 +++
 .../components/install_agent_modal_spec.js     |  2 ++
 5 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
index e5e0e153d8d2b6..01f355bbf2d541 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -12,7 +12,7 @@ import { helpPagePath } from '~/helpers/help_page_helper';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
 import { generateAgentRegistrationCommand } from '../clusters_util';
-import { INSTALL_AGENT_MODAL_ID, I18N_AGENT_MODAL } from '../constants';
+import { INSTALL_AGENT_MODAL_ID, I18N_AGENT_MODAL, KAS_DISABLED_ERROR } from '../constants';
 import { addAgentToStore, addAgentConfigToStore } from '../graphql/cache_update';
 import createAgent from '../graphql/mutations/create_agent.mutation.graphql';
 import createAgentToken from '../graphql/mutations/create_agent_token.mutation.graphql';
@@ -57,6 +57,9 @@ export default {
       update(data) {
         this.populateAvailableAgents(data);
       },
+      error(error) {
+        this.kasDisabled = error?.message?.indexOf(KAS_DISABLED_ERROR) >= 0;
+      },
     },
   },
   data() {
@@ -67,6 +70,7 @@ export default {
       error: null,
       clusterAgent: null,
       availableAgents: [],
+      kasDisabled: false,
     };
   },
   computed: {
@@ -90,6 +94,9 @@ export default {
     advancedInstallPath() {
       return helpPagePath('user/clusters/agent/install/index', { anchor: 'advanced-installation' });
     },
+    enableKasPath() {
+      return helpPagePath('administration/clusters/kas');
+    },
     getAgentsQueryVariables() {
       return {
         defaultBranchName: this.defaultBranchName,
@@ -323,6 +330,15 @@ export default {
         <img :alt="i18n.altText" :src="emptyStateImage" height="100" />
       </div>
       <p>{{ i18n.modalBody }}</p>
+
+      <p v-if="kasDisabled">
+        <gl-sprintf :message="i18n.enableKasText">
+          <template #link="{ content }">
+            <gl-link :href="enableKasPath"> {{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
+
       <p class="gl-mb-0">
         <gl-link :href="installAgentPath">
           {{ i18n.docsLinkText }}
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index 1018e03fc49550..a245102633e2e1 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -110,12 +110,17 @@ export const I18N_AGENT_MODAL = {
       'ClusterAgents|To install an Agent you should create an agent directory in the Repository first. We recommend that you add the Agent configuration to the directory before you start the installation process.',
     ),
     docsLinkText: s__('ClusterAgents|Learn more about installing a GitLab Kubernetes Agent'),
+    enableKasText: s__(
+      'ClusterAgents|The GitLab Agent also requires %{linkStart}enabling the Agent Server%{linkEnd}',
+    ),
     altText: s__('ClusterAgents|GitLab Kubernetes Agent'),
     secondaryButton: s__('ClusterAgents|Go to the repository'),
     done: __('Done'),
   },
 };
 
+export const KAS_DISABLED_ERROR = 'GitLab KAS is not enabled';
+
 export const I18N_AVAILABLE_AGENTS_DROPDOWN = {
   selectAgent: s__('ClusterAgents|Select an Agent'),
   registeringAgent: s__('ClusterAgents|Registering Agent'),
diff --git a/lib/gitlab/kas/client.rb b/lib/gitlab/kas/client.rb
index 753a185344edf9..b3098b9ad0f8ef 100644
--- a/lib/gitlab/kas/client.rb
+++ b/lib/gitlab/kas/client.rb
@@ -11,7 +11,7 @@ class Client
         configuration_project: Gitlab::Agent::ConfigurationProject::Rpc::ConfigurationProject::Stub
       }.freeze
 
-      ConfigurationError = Class.new(StandardError)
+      ConfigurationError = Class.new(GraphQL::ExecutionError)
 
       def initialize
         raise ConfigurationError, 'GitLab KAS is not enabled' unless Gitlab::Kas.enabled?
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 82fb8f63ed6653..fc4cbc0befd130 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7504,6 +7504,9 @@ msgstr ""
 msgid "ClusterAgents|The Agent has not been connected in a long time. There might be a connectivity issue. Last contact was %{timeAgo}."
 msgstr ""
 
+msgid "ClusterAgents|The GitLab Agent also requires %{linkStart}enabling the Agent Server%{linkEnd}"
+msgstr ""
+
 msgid "ClusterAgents|The recommended installation method provided below includes the token. If you want to follow the alternative installation method provided in the docs make sure you save the token value before you close the window."
 msgstr ""
 
diff --git a/spec/frontend/clusters_list/components/install_agent_modal_spec.js b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
index fd8a87402a39ec..e324418bdedd99 100644
--- a/spec/frontend/clusters_list/components/install_agent_modal_spec.js
+++ b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
@@ -26,6 +26,7 @@ localVue.use(VueApollo);
 
 const projectPath = 'path/to/project';
 const kasAddress = 'kas.example.com';
+const kasEnabled = true;
 const emptyStateImage = 'path/to/image';
 const defaultBranchName = 'default';
 const maxAgents = MAX_LIST_COUNT;
@@ -68,6 +69,7 @@ describe('InstallAgentModal', () => {
     const provide = {
       projectPath,
       kasAddress,
+      kasEnabled,
       emptyStateImage,
     };
 
-- 
GitLab


From edc339f2fe57631f192208bf97c34755fc0d54c3 Mon Sep 17 00:00:00 2001
From: anna_vovchenko <avovchenko@gitlab.com>
Date: Thu, 18 Nov 2021 01:31:25 +0200
Subject: [PATCH 11/11] Moved GraphQL error handling to the resolver

---
 app/assets/javascripts/clusters_list/constants.js          | 2 +-
 app/graphql/resolvers/kas/agent_configurations_resolver.rb | 2 +-
 lib/gitlab/kas/client.rb                                   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index a245102633e2e1..a740a6827cd4b2 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -119,7 +119,7 @@ export const I18N_AGENT_MODAL = {
   },
 };
 
-export const KAS_DISABLED_ERROR = 'GitLab KAS is not enabled';
+export const KAS_DISABLED_ERROR = 'Gitlab::Kas::Client::ConfigurationError';
 
 export const I18N_AVAILABLE_AGENTS_DROPDOWN = {
   selectAgent: s__('ClusterAgents|Select an Agent'),
diff --git a/app/graphql/resolvers/kas/agent_configurations_resolver.rb b/app/graphql/resolvers/kas/agent_configurations_resolver.rb
index 238dae0bf127e8..a1b1d3bfe4ccc7 100644
--- a/app/graphql/resolvers/kas/agent_configurations_resolver.rb
+++ b/app/graphql/resolvers/kas/agent_configurations_resolver.rb
@@ -14,7 +14,7 @@ def resolve
         return [] unless can_read_agent_configuration?
 
         kas_client.list_agent_config_files(project: project)
-      rescue GRPC::BadStatus => e
+      rescue GRPC::BadStatus, Gitlab::Kas::Client::ConfigurationError => e
         raise Gitlab::Graphql::Errors::ResourceNotAvailable, e.class.name
       end
 
diff --git a/lib/gitlab/kas/client.rb b/lib/gitlab/kas/client.rb
index b3098b9ad0f8ef..753a185344edf9 100644
--- a/lib/gitlab/kas/client.rb
+++ b/lib/gitlab/kas/client.rb
@@ -11,7 +11,7 @@ class Client
         configuration_project: Gitlab::Agent::ConfigurationProject::Rpc::ConfigurationProject::Stub
       }.freeze
 
-      ConfigurationError = Class.new(GraphQL::ExecutionError)
+      ConfigurationError = Class.new(StandardError)
 
       def initialize
         raise ConfigurationError, 'GitLab KAS is not enabled' unless Gitlab::Kas.enabled?
-- 
GitLab