Remove instructions to install Agent if KAS is not set up

This commit modifies the vue conditions to show the
install instructions for only KAS reay instances.

Changelog: changed

app/assets/javascripts/clusters_list/components/install_agent_modal.vue

@@ -142,6 +142,9 @@ export default {
     isAgentRegistrationModal() {
       return this.modalType === MODAL_TYPE_REGISTER;
     },
+    isKasEnabledInEmptyStateModal() {
+      return this.isEmptyStateModal && !this.kasDisabled;
+    },
   },
   methods: {
     setAgentName(name) {
@@ -350,18 +353,18 @@ export default {
         <img :alt="i18n.altText" :src="emptyStateImage" height="100" />
       </div>
 
-      <p>
-        <gl-sprintf :message="i18n.modalBody">
+      <p v-if="kasDisabled">
+        <gl-sprintf :message="i18n.enableKasText">
           <template #link="{ content }">
-            <gl-link :href="$options.installAgentPath"> {{ content }}</gl-link>
+            <gl-link :href="$options.enableKasPath">{{ content }}</gl-link>
           </template>
         </gl-sprintf>
       </p>
 
-      <p v-if="kasDisabled">
-        <gl-sprintf :message="i18n.enableKasText">
+      <p v-else>
+        <gl-sprintf :message="i18n.modalBody">
           <template #link="{ content }">
-            <gl-link :href="$options.enableKasPath"> {{ content }}</gl-link>
+            <gl-link :href="$options.installAgentPath">{{ content }}</gl-link>
           </template>
         </gl-sprintf>
       </p>
@@ -401,7 +404,7 @@ export default {
       </gl-button>
 
       <gl-button
-        v-if="isEmptyStateModal"
+        v-if="isKasEnabledInEmptyStateModal"
         :href="repositoryPath"
         variant="confirm"
         category="secondary"

spec/frontend/clusters_list/components/install_agent_modal_spec.js

-import { GlAlert, GlButton, GlFormInputGroup } from '@gitlab/ui';
+import { GlAlert, GlButton, GlFormInputGroup, GlSprintf } from '@gitlab/ui';
 import { createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import { sprintf } from '~/locale';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { mockTracking } from 'helpers/tracking_helper';
 import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue';
@@ -27,6 +28,7 @@ import {
   createAgentTokenResponse,
   createAgentTokenErrorResponse,
   getAgentResponse,
+  kasDisabledErrorResponse,
 } from '../mocks/apollo';
 import ModalStub from '../stubs';
 
@@ -35,7 +37,6 @@ 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;
@@ -80,7 +81,6 @@ describe('InstallAgentModal', () => {
     const provide = {
       projectPath,
       kasAddress,
-      kasEnabled,
       emptyStateImage,
     };
 
@@ -92,6 +92,7 @@ describe('InstallAgentModal', () => {
     wrapper = shallowMountExtended(InstallAgentModal, {
       attachTo: document.body,
       stubs: {
+        GlSprintf,
         GlModal: ModalStub,
       },
       localVue,
@@ -306,4 +307,34 @@ describe('InstallAgentModal', () => {
       });
     });
   });
+
+  describe('when KAS is disabled', () => {
+    const i18n = I18N_AGENT_MODAL.empty_state;
+    beforeEach(() => {
+      apolloProvider = createMockApollo([
+        [getAgentConfigurations, jest.fn().mockResolvedValue(kasDisabledErrorResponse)],
+      ]);
+
+      return mockSelectedAgentResponse();
+    });
+
+    it('renders empty state image', () => {
+      expect(findImage().attributes('src')).toBe(emptyStateImage);
+    });
+
+    it('renders an instruction to enable the KAS', () => {
+      expect(findModal().text()).toContain(
+        sprintf(i18n.enableKasText, { linkStart: '', linkEnd: '' }),
+      );
+    });
+
+    it('renders a cancel button', () => {
+      expect(findActionButton().isVisible()).toBe(true);
+      expect(findActionButton().text()).toBe(i18n.done);
+    });
+
+    it("doesn't render a secondary button", () => {
+      expect(findSecondaryButton().exists()).toBe(false);
+    });
+  });
 });

spec/frontend/clusters_list/mocks/apollo.js

@@ -76,6 +76,11 @@ export const getAgentResponse = {
   },
 };
 
+export const kasDisabledErrorResponse = {
+  data: {},
+  errors: [{ message: 'Gitlab::Kas::Client::ConfigurationError' }],
+};
+
 export const mockDeleteResponse = {
   data: { clusterAgentDelete: { errors: [] } },
 };