Add latest changes from gitlab-org/gitlab@15-1-stable-ee

3 files changed, 259 insertions, 225 deletions

diff --git a/spec/frontend/clusters/agents/components/create_token_button_spec.js b/spec/frontend/clusters/agents/components/create_token_button_spec.js
index fb1a3aa2963..73856b74a8d 100644
--- a/spec/frontend/clusters/agents/components/create_token_button_spec.js
+++ b/spec/frontend/clusters/agents/components/create_token_button_spec.js
@@ -1,262 +1,71 @@
-import { GlButton, GlTooltip, GlModal, GlFormInput, GlFormTextarea, GlAlert } from '@gitlab/ui';
-import Vue from 'vue';
-import VueApollo from 'vue-apollo';
-import createMockApollo from 'helpers/mock_apollo_helper';
-import waitForPromises from 'helpers/wait_for_promises';
+import { GlButton, GlTooltip } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { mockTracking } from 'helpers/tracking_helper';
-import {
-  EVENT_LABEL_MODAL,
-  EVENT_ACTIONS_OPEN,
-  TOKEN_NAME_LIMIT,
-  TOKEN_STATUS_ACTIVE,
-  MAX_LIST_COUNT,
-  CREATE_TOKEN_MODAL,
-} from '~/clusters/agents/constants';
-import createNewAgentToken from '~/clusters/agents/graphql/mutations/create_new_agent_token.mutation.graphql';
-import getClusterAgentQuery from '~/clusters/agents/graphql/queries/get_cluster_agent.query.graphql';
-import AgentToken from '~/clusters_list/components/agent_token.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import CreateTokenButton from '~/clusters/agents/components/create_token_button.vue';
-import {
-  clusterAgentToken,
-  getTokenResponse,
-  createAgentTokenErrorResponse,
-} from '../../mock_data';
-
-Vue.use(VueApollo);
+import { CREATE_TOKEN_MODAL } from '~/clusters/agents/constants';
 
 describe('CreateTokenButton', () => {
   let wrapper;
-  let apolloProvider;
-  let trackingSpy;
-  let createResponse;
-
-  const clusterAgentId = 'cluster-agent-id';
-  const cursor = {
-    first: MAX_LIST_COUNT,
-    last: null,
-  };
-  const agentName = 'cluster-agent';
-  const projectPath = 'path/to/project';
 
   const defaultProvide = {
-    agentName,
-    projectPath,
     canAdminCluster: true,
   };
-  const propsData = {
-    clusterAgentId,
-    cursor,
-  };
 
-  const findModal = () => wrapper.findComponent(GlModal);
-  const findBtn = () => wrapper.findComponent(GlButton);
-  const findInput = () => wrapper.findComponent(GlFormInput);
-  const findTextarea = () => wrapper.findComponent(GlFormTextarea);
-  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findButton = () => wrapper.findComponent(GlButton);
   const findTooltip = () => wrapper.findComponent(GlTooltip);
-  const findAgentInstructions = () => findModal().findComponent(AgentToken);
-  const findButtonByVariant = (variant) =>
-    findModal()
-      .findAll(GlButton)
-      .wrappers.find((button) => button.props('variant') === variant);
-  const findActionButton = () => findButtonByVariant('confirm');
-  const findCancelButton = () => wrapper.findByTestId('agent-token-close-button');
-
-  const expectDisabledAttribute = (element, disabled) => {
-    if (disabled) {
-      expect(element.attributes('disabled')).toBe('true');
-    } else {
-      expect(element.attributes('disabled')).toBeUndefined();
-    }
-  };
-
-  const createMockApolloProvider = ({ mutationResponse }) => {
-    createResponse = jest.fn().mockResolvedValue(mutationResponse);
-
-    return createMockApollo([[createNewAgentToken, createResponse]]);
-  };
-
-  const writeQuery = () => {
-    apolloProvider.clients.defaultClient.cache.writeQuery({
-      query: getClusterAgentQuery,
-      data: getTokenResponse.data,
-      variables: {
-        agentName,
-        projectPath,
-        tokenStatus: TOKEN_STATUS_ACTIVE,
-        ...cursor,
-      },
-    });
-  };
 
-  const createWrapper = async ({ provideData = {} } = {}) => {
+  const createWrapper = ({ provideData = {} } = {}) => {
     wrapper = shallowMountExtended(CreateTokenButton, {
-      apolloProvider,
       provide: {
         ...defaultProvide,
         ...provideData,
       },
-      propsData,
+      directives: {
+        GlModalDirective: createMockDirective(),
+      },
       stubs: {
-        GlModal,
         GlTooltip,
       },
     });
-    wrapper.vm.$refs.modal.hide = jest.fn();
-
-    trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
   };
 
-  const mockCreatedResponse = (mutationResponse) => {
-    apolloProvider = createMockApolloProvider({ mutationResponse });
-    writeQuery();
-
-    createWrapper();
-
-    findInput().vm.$emit('input', 'new-token');
-    findTextarea().vm.$emit('input', 'new-token-description');
-    findActionButton().vm.$emit('click');
-
-    return waitForPromises();
-  };
-
-  beforeEach(() => {
-    createWrapper();
-  });
-
   afterEach(() => {
     wrapper.destroy();
-    apolloProvider = null;
-    createResponse = null;
   });
 
-  describe('create agent token action', () => {
-    it('displays create agent token button', () => {
-      expect(findBtn().text()).toBe('Create token');
+  describe('when user can create token', () => {
+    beforeEach(() => {
+      createWrapper();
     });
 
-    describe('when user cannot create token', () => {
-      beforeEach(() => {
-        createWrapper({ provideData: { canAdminCluster: false } });
-      });
-
-      it('disabled the button', () => {
-        expect(findBtn().attributes('disabled')).toBe('true');
-      });
-
-      it('shows a disabled tooltip', () => {
-        expect(findTooltip().attributes('title')).toBe(
-          'Requires a Maintainer or greater role to perform these actions',
-        );
-      });
+    it('displays create agent token button', () => {
+      expect(findButton().text()).toBe('Create token');
     });
 
-    describe('when user can create a token and clicks the button', () => {
-      beforeEach(() => {
-        findBtn().vm.$emit('click');
-      });
-
-      it('displays a token creation modal', () => {
-        expect(findModal().isVisible()).toBe(true);
-      });
-
-      describe('initial state', () => {
-        it('renders an input for the token name', () => {
-          expect(findInput().exists()).toBe(true);
-          expectDisabledAttribute(findInput(), false);
-          expect(findInput().attributes('max-length')).toBe(TOKEN_NAME_LIMIT.toString());
-        });
-
-        it('renders a textarea for the token description', () => {
-          expect(findTextarea().exists()).toBe(true);
-          expectDisabledAttribute(findTextarea(), false);
-        });
-
-        it('renders a cancel button', () => {
-          expect(findCancelButton().isVisible()).toBe(true);
-          expectDisabledAttribute(findCancelButton(), false);
-        });
-
-        it('renders a disabled next button', () => {
-          expect(findActionButton().text()).toBe('Create token');
-          expectDisabledAttribute(findActionButton(), true);
-        });
-
-        it('sends tracking event for modal shown', () => {
-          findModal().vm.$emit('show');
-          expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_OPEN, {
-            label: EVENT_LABEL_MODAL,
-          });
-        });
-      });
-
-      describe('when user inputs the token name', () => {
-        beforeEach(() => {
-          expectDisabledAttribute(findActionButton(), true);
-          findInput().vm.$emit('input', 'new-token');
-        });
-
-        it('enables the next button', () => {
-          expectDisabledAttribute(findActionButton(), false);
-        });
-      });
-
-      describe('when user clicks the create-token button', () => {
-        beforeEach(async () => {
-          const loadingResponse = new Promise(() => {});
-          await mockCreatedResponse(loadingResponse);
-
-          findInput().vm.$emit('input', 'new-token');
-          findActionButton().vm.$emit('click');
-        });
-
-        it('disables the create-token button', () => {
-          expectDisabledAttribute(findActionButton(), true);
-        });
-
-        it('hides the cancel button', () => {
-          expect(findCancelButton().exists()).toBe(false);
-        });
-      });
-
-      describe('creating a new token', () => {
-        beforeEach(async () => {
-          await mockCreatedResponse(clusterAgentToken);
-        });
+    it('displays create agent token button as not disabled', () => {
+      expect(findButton().attributes('disabled')).toBeUndefined();
+    });
 
-        it('creates a token', () => {
-          expect(createResponse).toHaveBeenCalledWith({
-            input: { clusterAgentId, name: 'new-token', description: 'new-token-description' },
-          });
-        });
+    it('triggers the modal', () => {
+      const binding = getBinding(findButton().element, 'gl-modal-directive');
 
-        it('shows agent instructions', () => {
-          expect(findAgentInstructions().props()).toMatchObject({
-            agentName,
-            agentToken: 'token-secret',
-            modalId: CREATE_TOKEN_MODAL,
-          });
-        });
+      expect(binding.value).toBe(CREATE_TOKEN_MODAL);
+    });
+  });
 
-        it('renders a close button', () => {
-          expect(findActionButton().isVisible()).toBe(true);
-          expect(findActionButton().text()).toBe('Close');
-          expectDisabledAttribute(findActionButton(), false);
-        });
-      });
+  describe('when user cannot create token', () => {
+    beforeEach(() => {
+      createWrapper({ provideData: { canAdminCluster: false } });
+    });
 
-      describe('error creating a new token', () => {
-        beforeEach(async () => {
-          await mockCreatedResponse(createAgentTokenErrorResponse);
-        });
+    it('disabled the button', () => {
+      expect(findButton().attributes('disabled')).toBe('true');
+    });
 
-        it('displays the error message', async () => {
-          expect(findAlert().text()).toBe(
-            createAgentTokenErrorResponse.data.clusterAgentTokenCreate.errors[0],
-          );
-        });
-      });
+    it('shows a disabled tooltip', () => {
+      expect(findTooltip().attributes('title')).toBe(
+        'Requires a Maintainer or greater role to perform these actions',
+      );
     });
   });
 });
diff --git a/spec/frontend/clusters/agents/components/create_token_modal_spec.js b/spec/frontend/clusters/agents/components/create_token_modal_spec.js
new file mode 100644
index 00000000000..ad48afe10b6
--- /dev/null
+++ b/spec/frontend/clusters/agents/components/create_token_modal_spec.js
@@ -0,0 +1,223 @@
+import { GlButton, GlModal, GlFormInput, GlFormTextarea, GlAlert } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { mockTracking } from 'helpers/tracking_helper';
+import {
+  EVENT_LABEL_MODAL,
+  EVENT_ACTIONS_OPEN,
+  TOKEN_NAME_LIMIT,
+  TOKEN_STATUS_ACTIVE,
+  MAX_LIST_COUNT,
+  CREATE_TOKEN_MODAL,
+} from '~/clusters/agents/constants';
+import createNewAgentToken from '~/clusters/agents/graphql/mutations/create_new_agent_token.mutation.graphql';
+import getClusterAgentQuery from '~/clusters/agents/graphql/queries/get_cluster_agent.query.graphql';
+import AgentToken from '~/clusters_list/components/agent_token.vue';
+import CreateTokenModal from '~/clusters/agents/components/create_token_modal.vue';
+import {
+  clusterAgentToken,
+  getTokenResponse,
+  createAgentTokenErrorResponse,
+} from '../../mock_data';
+
+Vue.use(VueApollo);
+
+describe('CreateTokenModal', () => {
+  let wrapper;
+  let apolloProvider;
+  let trackingSpy;
+  let createResponse;
+
+  const clusterAgentId = 'cluster-agent-id';
+  const cursor = {
+    first: MAX_LIST_COUNT,
+    last: null,
+  };
+  const agentName = 'cluster-agent';
+  const projectPath = 'path/to/project';
+
+  const provide = {
+    agentName,
+    projectPath,
+  };
+  const propsData = {
+    clusterAgentId,
+    cursor,
+  };
+
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findInput = () => wrapper.findComponent(GlFormInput);
+  const findTextarea = () => wrapper.findComponent(GlFormTextarea);
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findAgentInstructions = () => findModal().findComponent(AgentToken);
+  const findButtonByVariant = (variant) =>
+    findModal()
+      .findAll(GlButton)
+      .wrappers.find((button) => button.props('variant') === variant);
+  const findActionButton = () => findButtonByVariant('confirm');
+  const findCancelButton = () => wrapper.findByTestId('agent-token-close-button');
+
+  const expectDisabledAttribute = (element, disabled) => {
+    if (disabled) {
+      expect(element.attributes('disabled')).toBe('true');
+    } else {
+      expect(element.attributes('disabled')).toBeUndefined();
+    }
+  };
+
+  const createMockApolloProvider = ({ mutationResponse }) => {
+    createResponse = jest.fn().mockResolvedValue(mutationResponse);
+
+    return createMockApollo([[createNewAgentToken, createResponse]]);
+  };
+
+  const writeQuery = () => {
+    apolloProvider.clients.defaultClient.cache.writeQuery({
+      query: getClusterAgentQuery,
+      data: getTokenResponse.data,
+      variables: {
+        agentName,
+        projectPath,
+        tokenStatus: TOKEN_STATUS_ACTIVE,
+        ...cursor,
+      },
+    });
+  };
+
+  const createWrapper = () => {
+    wrapper = shallowMountExtended(CreateTokenModal, {
+      apolloProvider,
+      provide,
+      propsData,
+      stubs: {
+        GlModal,
+      },
+    });
+    wrapper.vm.$refs.modal.hide = jest.fn();
+
+    trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+  };
+
+  const mockCreatedResponse = (mutationResponse) => {
+    apolloProvider = createMockApolloProvider({ mutationResponse });
+    writeQuery();
+
+    createWrapper();
+
+    findInput().vm.$emit('input', 'new-token');
+    findTextarea().vm.$emit('input', 'new-token-description');
+    findActionButton().vm.$emit('click');
+
+    return waitForPromises();
+  };
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    apolloProvider = null;
+    createResponse = null;
+  });
+
+  describe('initial state', () => {
+    it('renders an input for the token name', () => {
+      expect(findInput().exists()).toBe(true);
+      expectDisabledAttribute(findInput(), false);
+      expect(findInput().attributes('max-length')).toBe(TOKEN_NAME_LIMIT.toString());
+    });
+
+    it('renders a textarea for the token description', () => {
+      expect(findTextarea().exists()).toBe(true);
+      expectDisabledAttribute(findTextarea(), false);
+    });
+
+    it('renders a cancel button', () => {
+      expect(findCancelButton().isVisible()).toBe(true);
+      expectDisabledAttribute(findCancelButton(), false);
+    });
+
+    it('renders a disabled next button', () => {
+      expect(findActionButton().text()).toBe('Create token');
+      expectDisabledAttribute(findActionButton(), true);
+    });
+
+    it('sends tracking event for modal shown', () => {
+      findModal().vm.$emit('show');
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_OPEN, {
+        label: EVENT_LABEL_MODAL,
+      });
+    });
+  });
+
+  describe('when user inputs the token name', () => {
+    beforeEach(() => {
+      expectDisabledAttribute(findActionButton(), true);
+      findInput().vm.$emit('input', 'new-token');
+    });
+
+    it('enables the next button', () => {
+      expectDisabledAttribute(findActionButton(), false);
+    });
+  });
+
+  describe('when user clicks the create-token button', () => {
+    beforeEach(async () => {
+      const loadingResponse = new Promise(() => {});
+      await mockCreatedResponse(loadingResponse);
+
+      findInput().vm.$emit('input', 'new-token');
+      findActionButton().vm.$emit('click');
+    });
+
+    it('disables the create-token button', () => {
+      expectDisabledAttribute(findActionButton(), true);
+    });
+
+    it('hides the cancel button', () => {
+      expect(findCancelButton().exists()).toBe(false);
+    });
+  });
+
+  describe('creating a new token', () => {
+    beforeEach(async () => {
+      await mockCreatedResponse(clusterAgentToken);
+    });
+
+    it('creates a token', () => {
+      expect(createResponse).toHaveBeenCalledWith({
+        input: { clusterAgentId, name: 'new-token', description: 'new-token-description' },
+      });
+    });
+
+    it('shows agent instructions', () => {
+      expect(findAgentInstructions().props()).toMatchObject({
+        agentName,
+        agentToken: 'token-secret',
+        modalId: CREATE_TOKEN_MODAL,
+      });
+    });
+
+    it('renders a close button', () => {
+      expect(findActionButton().isVisible()).toBe(true);
+      expect(findActionButton().text()).toBe('Close');
+      expectDisabledAttribute(findActionButton(), false);
+    });
+  });
+
+  describe('error creating a new token', () => {
+    beforeEach(async () => {
+      await mockCreatedResponse(createAgentTokenErrorResponse);
+    });
+
+    it('displays the error message', async () => {
+      expect(findAlert().text()).toBe(
+        createAgentTokenErrorResponse.data.clusterAgentTokenCreate.errors[0],
+      );
+    });
+  });
+});
diff --git a/spec/frontend/clusters/agents/components/token_table_spec.js b/spec/frontend/clusters/agents/components/token_table_spec.js
index f6baaf87fa4..6caeaf5c192 100644
--- a/spec/frontend/clusters/agents/components/token_table_spec.js
+++ b/spec/frontend/clusters/agents/components/token_table_spec.js
@@ -2,6 +2,7 @@ import { GlEmptyState, GlTooltip, GlTruncate } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import TokenTable from '~/clusters/agents/components/token_table.vue';
 import CreateTokenButton from '~/clusters/agents/components/create_token_button.vue';
+import CreateTokenModal from '~/clusters/agents/components/create_token_modal.vue';
 import { useFakeDate } from 'helpers/fake_date';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { MAX_LIST_COUNT } from '~/clusters/agents/constants';
@@ -50,6 +51,7 @@ describe('ClusterAgentTokenTable', () => {
 
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
   const findCreateTokenBtn = () => wrapper.findComponent(CreateTokenButton);
+  const findCreateModal = () => wrapper.findComponent(CreateTokenModal);
 
   beforeEach(() => {
     return createComponent(defaultTokens);
@@ -63,8 +65,8 @@ describe('ClusterAgentTokenTable', () => {
     expect(findCreateTokenBtn().exists()).toBe(true);
   });
 
-  it('passes the correct params to the create token component', () => {
-    expect(findCreateTokenBtn().props()).toMatchObject({
+  it('passes the correct params to the create token modal component', () => {
+    expect(findCreateModal().props()).toMatchObject({
       clusterAgentId,
       cursor,
     });