Fix the primary button on KAS installation modal

This commit fixes the UX issue that currently sets the
cancel button to a primary button.

Changelog: fixed

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

@@ -403,25 +403,25 @@ export default {
         >{{ i18n.cancel }}
       </gl-button>
 
-      <gl-button
-        v-if="isKasEnabledInEmptyStateModal"
-        :href="repositoryPath"
-        variant="confirm"
-        category="secondary"
-        data-testid="agent-secondary-button"
-        >{{ i18n.secondaryButton }}
-      </gl-button>
-
       <gl-button
         v-if="isEmptyStateModal"
         variant="confirm"
-        category="primary"
+        category="secondary"
         :data-track-action="$options.EVENT_ACTIONS_CLICK"
         :data-track-label="$options.EVENT_LABEL_MODAL"
         data-track-property="done"
         @click="closeModal"
         >{{ i18n.done }}
       </gl-button>
+
+      <gl-button
+        v-if="isKasEnabledInEmptyStateModal"
+        :href="repositoryPath"
+        variant="confirm"
+        category="primary"
+        data-testid="agent-primary-button"
+        >{{ i18n.primaryButton }}
+      </gl-button>
     </template>
   </gl-modal>
 </template>

app/assets/javascripts/clusters_list/constants.js

@@ -112,7 +112,7 @@ export const I18N_AGENT_MODAL = {
       "ClusterAgents|Your instance doesn't have the %{linkStart}GitLab Agent Server (KAS)%{linkEnd} set up. Ask a GitLab Administrator to install it.",
     ),
     altText: s__('ClusterAgents|GitLab Agent for Kubernetes'),
-    secondaryButton: s__('ClusterAgents|Go to the repository files'),
+    primaryButton: s__('ClusterAgents|Go to the repository files'),
     done: __('Cancel'),
   },
 };

spec/frontend/clusters_list/components/install_agent_modal_spec.js

@@ -66,7 +66,7 @@ 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 findPrimaryButton = () => wrapper.findByTestId('agent-primary-button');
   const findImage = () => wrapper.findByRole('img', { alt: I18N_AGENT_MODAL.empty_state.altText });
 
   const expectDisabledAttribute = (element, disabled) => {
@@ -295,9 +295,9 @@ describe('InstallAgentModal', () => {
       expect(findImage().attributes('src')).toBe(emptyStateImage);
     });
 
-    it('renders a secondary button', () => {
-      expect(findSecondaryButton().isVisible()).toBe(true);
-      expect(findSecondaryButton().text()).toBe(i18n.secondaryButton);
+    it('renders a primary button', () => {
+      expect(findPrimaryButton().isVisible()).toBe(true);
+      expect(findPrimaryButton().text()).toBe(i18n.primaryButton);
     });
 
     it('sends the event with the modalType', () => {
@@ -335,7 +335,7 @@ describe('InstallAgentModal', () => {
     });
 
     it("doesn't render a secondary button", () => {
-      expect(findSecondaryButton().exists()).toBe(false);
+      expect(findPrimaryButton().exists()).toBe(false);
     });
   });
 });