Add latest changes from gitlab-org/gitlab@master

7 files changed, 362 insertions, 13 deletions

diff --git a/spec/frontend/boards/components/board_new_issue_spec.js b/spec/frontend/boards/components/board_new_issue_spec.js
index 08ef119aad8..8b0100d069a 100644
--- a/spec/frontend/boards/components/board_new_issue_spec.js
+++ b/spec/frontend/boards/components/board_new_issue_spec.js
@@ -6,7 +6,7 @@ import BoardNewItem from '~/boards/components/board_new_item.vue';
 import ProjectSelect from '~/boards/components/project_select.vue';
 import eventHub from '~/boards/eventhub';
 
-import { mockList, mockGroupProjects } from '../mock_data';
+import { mockList, mockGroupProjects, mockIssue, mockIssue2 } from '../mock_data';
 
 Vue.use(Vuex);
 
@@ -16,7 +16,7 @@ const mockActions = { addListNewIssue: addListNewIssuesSpy };
 const createComponent = ({
   state = { selectedProject: mockGroupProjects[0], fullPath: mockGroupProjects[0].fullPath },
   actions = mockActions,
-  getters = { isGroupBoard: () => true, isProjectBoard: () => false },
+  getters = { isGroupBoard: () => true, getBoardItemsByList: () => () => [] },
 } = {}) =>
   shallowMount(BoardNewIssue, {
     store: new Vuex.Store({
@@ -75,10 +75,39 @@ describe('Issue boards new issue form', () => {
         assigneeIds: [],
         milestoneId: undefined,
         projectPath: mockGroupProjects[0].fullPath,
+        moveAfterId: undefined,
       },
     });
   });
 
+  describe('when list has an existing issues', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        getters: {
+          isGroupBoard: () => true,
+          getBoardItemsByList: () => () => [mockIssue, mockIssue2],
+        },
+      });
+    });
+
+    it('it uses the first issue ID as moveAfterId', async () => {
+      findBoardNewItem().vm.$emit('form-submit', { title: 'Foo' });
+
+      await nextTick();
+      expect(addListNewIssuesSpy).toHaveBeenCalledWith(expect.any(Object), {
+        list: mockList,
+        issueInput: {
+          title: 'Foo',
+          labelIds: [],
+          assigneeIds: [],
+          milestoneId: undefined,
+          projectPath: mockGroupProjects[0].fullPath,
+          moveAfterId: mockIssue.id,
+        },
+      });
+    });
+  });
+
   it('emits event `toggle-issue-form` with current list Id suffix on eventHub when `board-new-item` emits form-cancel event', async () => {
     jest.spyOn(eventHub, '$emit').mockImplementation();
     findBoardNewItem().vm.$emit('form-cancel');
@@ -99,7 +128,7 @@ describe('Issue boards new issue form', () => {
   describe('when in project issue board', () => {
     beforeEach(() => {
       wrapper = createComponent({
-        getters: { isGroupBoard: () => false, isProjectBoard: () => true },
+        getters: { isGroupBoard: () => false },
       });
     });
 
diff --git a/spec/frontend/environments/canary_ingress_spec.js b/spec/frontend/environments/canary_ingress_spec.js
index 6c7a786e652..d58f9f9b8a2 100644
--- a/spec/frontend/environments/canary_ingress_spec.js
+++ b/spec/frontend/environments/canary_ingress_spec.js
@@ -3,6 +3,7 @@ import { mount } from '@vue/test-utils';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import CanaryIngress from '~/environments/components/canary_ingress.vue';
 import { CANARY_UPDATE_MODAL } from '~/environments/constants';
+import { rolloutStatus } from './graphql/mock_data';
 
 describe('/environments/components/canary_ingress.vue', () => {
   let wrapper;
@@ -13,16 +14,18 @@ describe('/environments/components/canary_ingress.vue', () => {
       .at(x / 5)
       .vm.$emit('click');
 
-  const createComponent = () => {
+  const createComponent = (props = {}, options = {}) => {
     wrapper = mount(CanaryIngress, {
       propsData: {
         canaryIngress: {
           canary_weight: 60,
         },
+        ...props,
       },
       directives: {
         GlModal: createMockDirective(),
       },
+      ...options,
     });
   };
 
@@ -94,9 +97,25 @@ describe('/environments/components/canary_ingress.vue', () => {
     });
 
     it('is set to open the change modal', () => {
-      const options = canaryWeightDropdown.findAll(GlDropdownItem);
-      expect(options).toHaveLength(21);
-      options.wrappers.forEach((w, i) => expect(w.text()).toBe((i * 5).toString()));
+      canaryWeightDropdown
+        .findAll(GlDropdownItem)
+        .wrappers.forEach((w) =>
+          expect(getBinding(w.element, 'gl-modal')).toMatchObject({ value: CANARY_UPDATE_MODAL }),
+        );
+    });
+  });
+
+  describe('graphql', () => {
+    beforeEach(() => {
+      createComponent({
+        graphql: true,
+        canaryIngress: rolloutStatus.canaryIngress,
+      });
+    });
+
+    it('shows the correct weight', () => {
+      const canaryWeightDropdown = wrapper.find('[data-testid="canary-weight"]');
+      expect(canaryWeightDropdown.props('text')).toBe('50');
     });
   });
 });
diff --git a/spec/frontend/environments/deploy_board_component_spec.js b/spec/frontend/environments/deploy_board_component_spec.js
index 2033cf00cff..f0fb4d1027c 100644
--- a/spec/frontend/environments/deploy_board_component_spec.js
+++ b/spec/frontend/environments/deploy_board_component_spec.js
@@ -4,6 +4,7 @@ import Vue, { nextTick } from 'vue';
 import CanaryIngress from '~/environments/components/canary_ingress.vue';
 import DeployBoard from '~/environments/components/deploy_board.vue';
 import { deployBoardMockData, environment } from './mock_data';
+import { rolloutStatus } from './graphql/mock_data';
 
 const logsPath = `gitlab-org/gitlab-test/-/logs?environment_name=${environment.name}`;
 
@@ -28,7 +29,7 @@ describe('Deploy Board', () => {
     });
 
     it('should render percentage with completion value provided', () => {
-      expect(wrapper.vm.$refs.percentage.innerText).toEqual(`${deployBoardMockData.completion}%`);
+      expect(wrapper.find({ ref: 'percentage' }).text()).toBe(`${deployBoardMockData.completion}%`);
     });
 
     it('should render total instance count', () => {
@@ -57,20 +58,74 @@ describe('Deploy Board', () => {
 
     it('sets up a tooltip for the legend', () => {
       const iconSpan = wrapper.find('[data-testid="legend-tooltip-target"]');
-      const tooltip = wrapper.find(GlTooltip);
-      const icon = iconSpan.find(GlIcon);
+      const tooltip = wrapper.findComponent(GlTooltip);
+      const icon = iconSpan.findComponent(GlIcon);
 
       expect(tooltip.props('target')()).toBe(iconSpan.element);
       expect(icon.props('name')).toBe('question');
     });
 
     it('renders the canary weight selector', () => {
-      const canary = wrapper.find(CanaryIngress);
+      const canary = wrapper.findComponent(CanaryIngress);
       expect(canary.exists()).toBe(true);
       expect(canary.props('canaryIngress')).toEqual({ canary_weight: 50 });
     });
   });
 
+  describe('with new valid data', () => {
+    beforeEach(async () => {
+      wrapper = createComponent({
+        graphql: true,
+        deployBoardData: rolloutStatus,
+      });
+      await nextTick();
+    });
+
+    it('should render percentage with completion value provided', () => {
+      expect(wrapper.find({ ref: 'percentage' }).text()).toBe(`${rolloutStatus.completion}%`);
+    });
+
+    it('should render total instance count', () => {
+      const renderedTotal = wrapper.find('.deploy-board-instances-text');
+      const actualTotal = rolloutStatus.instances.length;
+      const output = `${actualTotal > 1 ? 'Instances' : 'Instance'} (${actualTotal})`;
+
+      expect(renderedTotal.text()).toEqual(output);
+    });
+
+    it('should render all instances', () => {
+      const instances = wrapper.findAll('.deploy-board-instances-container a');
+
+      expect(instances).toHaveLength(rolloutStatus.instances.length);
+      expect(
+        instances.at(1).classes(`deployment-instance-${rolloutStatus.instances[2].status}`),
+      ).toBe(true);
+    });
+
+    it('should render an abort and a rollback button with the provided url', () => {
+      const buttons = wrapper.findAll('.deploy-board-actions a');
+
+      expect(buttons.at(0).attributes('href')).toEqual(rolloutStatus.rollbackUrl);
+      expect(buttons.at(1).attributes('href')).toEqual(rolloutStatus.abortUrl);
+    });
+
+    it('sets up a tooltip for the legend', () => {
+      const iconSpan = wrapper.find('[data-testid="legend-tooltip-target"]');
+      const tooltip = wrapper.findComponent(GlTooltip);
+      const icon = iconSpan.findComponent(GlIcon);
+
+      expect(tooltip.props('target')()).toBe(iconSpan.element);
+      expect(icon.props('name')).toBe('question');
+    });
+
+    it('renders the canary weight selector', () => {
+      const canary = wrapper.findComponent(CanaryIngress);
+      expect(canary.exists()).toBe(true);
+      expect(canary.props('canaryIngress')).toEqual({ canaryWeight: 50 });
+      expect(canary.props('graphql')).toBe(true);
+    });
+  });
+
   describe('with empty state', () => {
     beforeEach((done) => {
       wrapper = createComponent({
@@ -102,7 +157,7 @@ describe('Deploy Board', () => {
     });
 
     it('should render loading spinner', () => {
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
     });
   });
 
diff --git a/spec/frontend/environments/deploy_board_wrapper_spec.js b/spec/frontend/environments/deploy_board_wrapper_spec.js
new file mode 100644
index 00000000000..c8e6df4d324
--- /dev/null
+++ b/spec/frontend/environments/deploy_board_wrapper_spec.js
@@ -0,0 +1,124 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlCollapse, GlIcon } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { stubTransition } from 'helpers/stub_transition';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { __, s__ } from '~/locale';
+import DeployBoardWrapper from '~/environments/components/deploy_board_wrapper.vue';
+import DeployBoard from '~/environments/components/deploy_board.vue';
+import setEnvironmentToChangeCanaryMutation from '~/environments/graphql/mutations/set_environment_to_change_canary.mutation.graphql';
+import { resolvedEnvironment, rolloutStatus } from './graphql/mock_data';
+
+Vue.use(VueApollo);
+
+describe('~/environments/components/deploy_board_wrapper.vue', () => {
+  let wrapper;
+  let mockApollo;
+
+  const findDeployBoard = () => wrapper.findComponent(DeployBoard);
+
+  const createWrapper = ({ propsData = {} } = {}) => {
+    mockApollo = createMockApollo();
+    return mountExtended(DeployBoardWrapper, {
+      propsData: { environment: resolvedEnvironment, rolloutStatus, ...propsData },
+      provide: { helpPagePath: '/help' },
+      stubs: { transition: stubTransition() },
+      apolloProvider: mockApollo,
+    });
+  };
+
+  const expandCollapsedSection = async () => {
+    const button = wrapper.findByRole('button', { name: __('Expand') });
+    await button.trigger('click');
+
+    return button;
+  };
+
+  afterEach(() => {
+    wrapper?.destroy();
+  });
+
+  it('is labeled Kubernetes Pods', () => {
+    wrapper = createWrapper();
+
+    expect(wrapper.findByText(s__('DeployBoard|Kubernetes Pods')).exists()).toBe(true);
+  });
+
+  describe('collapse', () => {
+    let icon;
+    let collapse;
+
+    beforeEach(() => {
+      wrapper = createWrapper();
+      collapse = wrapper.findComponent(GlCollapse);
+      icon = wrapper.findComponent(GlIcon);
+    });
+
+    it('is collapsed by default', () => {
+      expect(collapse.attributes('visible')).toBeUndefined();
+      expect(icon.props('name')).toBe('angle-right');
+    });
+
+    it('opens on click', async () => {
+      const button = await expandCollapsedSection();
+
+      expect(button.attributes('aria-label')).toBe(__('Collapse'));
+      expect(collapse.attributes('visible')).toBe('visible');
+      expect(icon.props('name')).toBe('angle-down');
+
+      const deployBoard = findDeployBoard();
+      expect(deployBoard.exists()).toBe(true);
+    });
+  });
+
+  describe('deploy board', () => {
+    it('passes the rollout status on and sets graphql to true', async () => {
+      wrapper = createWrapper();
+      await expandCollapsedSection();
+
+      const deployBoard = findDeployBoard();
+      expect(deployBoard.props('deployBoardData')).toEqual(rolloutStatus);
+      expect(deployBoard.props('graphql')).toBe(true);
+    });
+
+    it('sets the update to the canary via graphql', () => {
+      wrapper = createWrapper();
+      jest.spyOn(mockApollo.defaultClient, 'mutate');
+      const deployBoard = findDeployBoard();
+      deployBoard.vm.$emit('changeCanaryWeight', 15);
+      expect(mockApollo.defaultClient.mutate).toHaveBeenCalledWith({
+        mutation: setEnvironmentToChangeCanaryMutation,
+        variables: { environment: resolvedEnvironment, weight: 15 },
+      });
+    });
+
+    describe('is loading', () => {
+      it('should set the loading prop', async () => {
+        wrapper = createWrapper({
+          propsData: { rolloutStatus: { ...rolloutStatus, status: 'loading' } },
+        });
+
+        await expandCollapsedSection();
+
+        const deployBoard = findDeployBoard();
+
+        expect(deployBoard.props('isLoading')).toBe(true);
+      });
+    });
+
+    describe('is empty', () => {
+      it('should set the empty prop', async () => {
+        wrapper = createWrapper({
+          propsData: { rolloutStatus: { ...rolloutStatus, status: 'not_found' } },
+        });
+
+        await expandCollapsedSection();
+
+        const deployBoard = findDeployBoard();
+
+        expect(deployBoard.props('isEmpty')).toBe(true);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/environments/graphql/mock_data.js b/spec/frontend/environments/graphql/mock_data.js
index fce30973547..1b7b35702de 100644
--- a/spec/frontend/environments/graphql/mock_data.js
+++ b/spec/frontend/environments/graphql/mock_data.js
@@ -1,3 +1,69 @@
+export const rolloutStatus = {
+  instances: [
+    {
+      status: 'succeeded',
+      tooltip: 'tanuki-2334 Finished',
+      podName: 'production-tanuki-1',
+      stable: false,
+    },
+    {
+      status: 'succeeded',
+      tooltip: 'tanuki-2335 Finished',
+      podName: 'production-tanuki-1',
+      stable: false,
+    },
+    {
+      status: 'succeeded',
+      tooltip: 'tanuki-2336 Finished',
+      podName: 'production-tanuki-1',
+      stable: false,
+    },
+    {
+      status: 'succeeded',
+      tooltip: 'tanuki-2337 Finished',
+      podName: 'production-tanuki-1',
+      stable: false,
+    },
+    {
+      status: 'succeeded',
+      tooltip: 'tanuki-2338 Finished',
+      podName: 'production-tanuki-1',
+      stable: false,
+    },
+    {
+      status: 'succeeded',
+      tooltip: 'tanuki-2339 Finished',
+      podName: 'production-tanuki-1',
+      stable: false,
+    },
+    { status: 'succeeded', tooltip: 'tanuki-2340 Finished', podName: 'production-tanuki-1' },
+    { status: 'succeeded', tooltip: 'tanuki-2334 Finished', podName: 'production-tanuki-1' },
+    { status: 'succeeded', tooltip: 'tanuki-2335 Finished', podName: 'production-tanuki-1' },
+    { status: 'succeeded', tooltip: 'tanuki-2336 Finished', podName: 'production-tanuki-1' },
+    { status: 'succeeded', tooltip: 'tanuki-2337 Finished', podName: 'production-tanuki-1' },
+    { status: 'succeeded', tooltip: 'tanuki-2338 Finished', podName: 'production-tanuki-1' },
+    { status: 'succeeded', tooltip: 'tanuki-2339 Finished', podName: 'production-tanuki-1' },
+    { status: 'succeeded', tooltip: 'tanuki-2340 Finished', podName: 'production-tanuki-1' },
+    { status: 'running', tooltip: 'tanuki-2341 Deploying', podName: 'production-tanuki-1' },
+    { status: 'running', tooltip: 'tanuki-2342 Deploying', podName: 'production-tanuki-1' },
+    { status: 'running', tooltip: 'tanuki-2343 Deploying', podName: 'production-tanuki-1' },
+    { status: 'failed', tooltip: 'tanuki-2344 Failed', podName: 'production-tanuki-1' },
+    { status: 'unknown', tooltip: 'tanuki-2345 Ready', podName: 'production-tanuki-1' },
+    { status: 'unknown', tooltip: 'tanuki-2346 Ready', podName: 'production-tanuki-1' },
+    { status: 'pending', tooltip: 'tanuki-2348 Preparing', podName: 'production-tanuki-1' },
+    { status: 'pending', tooltip: 'tanuki-2349 Preparing', podName: 'production-tanuki-1' },
+    { status: 'pending', tooltip: 'tanuki-2350 Preparing', podName: 'production-tanuki-1' },
+    { status: 'pending', tooltip: 'tanuki-2353 Preparing', podName: 'production-tanuki-1' },
+    { status: 'pending', tooltip: 'tanuki-2354 waiting', podName: 'production-tanuki-1' },
+    { status: 'pending', tooltip: 'tanuki-2355 waiting', podName: 'production-tanuki-1' },
+    { status: 'pending', tooltip: 'tanuki-2356 waiting', podName: 'production-tanuki-1' },
+  ],
+  abortUrl: 'url',
+  rollbackUrl: 'url',
+  completion: 100,
+  status: 'found',
+  canaryIngress: { canaryWeight: 50 },
+};
 export const environmentsApp = {
   environments: [
     {
diff --git a/spec/frontend/environments/new_environment_item_spec.js b/spec/frontend/environments/new_environment_item_spec.js
index 0d5d216ba02..db596688dad 100644
--- a/spec/frontend/environments/new_environment_item_spec.js
+++ b/spec/frontend/environments/new_environment_item_spec.js
@@ -8,7 +8,8 @@ import { formatDate, getTimeago } from '~/lib/utils/datetime_utility';
 import { __, s__, sprintf } from '~/locale';
 import EnvironmentItem from '~/environments/components/new_environment_item.vue';
 import Deployment from '~/environments/components/deployment.vue';
-import { resolvedEnvironment } from './graphql/mock_data';
+import DeployBoardWrapper from '~/environments/components/deploy_board_wrapper.vue';
+import { resolvedEnvironment, rolloutStatus } from './graphql/mock_data';
 
 Vue.use(VueApollo);
 
@@ -455,4 +456,35 @@ describe('~/environments/components/new_environment_item.vue', () => {
       expect(emptyState.exists()).toBe(false);
     });
   });
+
+  describe('deploy boards', () => {
+    it('should show a deploy board if the environment has a rollout status', async () => {
+      const environment = {
+        ...resolvedEnvironment,
+        rolloutStatus,
+      };
+
+      wrapper = createWrapper({
+        propsData: { environment },
+        apolloProvider: createApolloProvider(),
+      });
+
+      await expandCollapsedSection();
+
+      const deployBoard = wrapper.findComponent(DeployBoardWrapper);
+      expect(deployBoard.exists()).toBe(true);
+      expect(deployBoard.props('rolloutStatus')).toBe(rolloutStatus);
+    });
+
+    it('should not show a deploy board if the environment has no rollout status', async () => {
+      wrapper = createWrapper({
+        apolloProvider: createApolloProvider(),
+      });
+
+      await expandCollapsedSection();
+
+      const deployBoard = wrapper.findComponent(DeployBoardWrapper);
+      expect(deployBoard.exists()).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/environments/new_environments_app_spec.js b/spec/frontend/environments/new_environments_app_spec.js
index be86a202499..42e3608109b 100644
--- a/spec/frontend/environments/new_environments_app_spec.js
+++ b/spec/frontend/environments/new_environments_app_spec.js
@@ -10,6 +10,7 @@ import EnvironmentsApp from '~/environments/components/new_environments_app.vue'
 import EnvironmentsFolder from '~/environments/components/new_environment_folder.vue';
 import EnvironmentsItem from '~/environments/components/new_environment_item.vue';
 import StopEnvironmentModal from '~/environments/components/stop_environment_modal.vue';
+import CanaryUpdateModal from '~/environments/components/canary_update_modal.vue';
 import { resolvedEnvironmentsApp, resolvedFolder, resolvedEnvironment } from './graphql/mock_data';
 
 Vue.use(VueApollo);
@@ -20,6 +21,8 @@ describe('~/environments/components/new_environments_app.vue', () => {
   let environmentFolderMock;
   let paginationMock;
   let environmentToStopMock;
+  let environmentToChangeCanaryMock;
+  let weightMock;
 
   const createApolloProvider = () => {
     const mockResolvers = {
@@ -30,6 +33,8 @@ describe('~/environments/components/new_environments_app.vue', () => {
         environmentToStop: environmentToStopMock,
         environmentToDelete: jest.fn().mockResolvedValue(resolvedEnvironment),
         environmentToRollback: jest.fn().mockResolvedValue(resolvedEnvironment),
+        environmentToChangeCanary: environmentToChangeCanaryMock,
+        weight: weightMock,
       },
     };
 
@@ -53,6 +58,8 @@ describe('~/environments/components/new_environments_app.vue', () => {
     environmentsApp,
     folder,
     environmentToStop = {},
+    environmentToChangeCanary = {},
+    weight = 0,
     pageInfo = {
       total: 20,
       perPage: 5,
@@ -67,6 +74,8 @@ describe('~/environments/components/new_environments_app.vue', () => {
     environmentFolderMock.mockReturnValue(folder);
     paginationMock.mockReturnValue(pageInfo);
     environmentToStopMock.mockReturnValue(environmentToStop);
+    environmentToChangeCanaryMock.mockReturnValue(environmentToChangeCanary);
+    weightMock.mockReturnValue(weight);
     const apolloProvider = createApolloProvider();
     wrapper = createWrapper({ apolloProvider, provide });
 
@@ -78,6 +87,8 @@ describe('~/environments/components/new_environments_app.vue', () => {
     environmentAppMock = jest.fn();
     environmentFolderMock = jest.fn();
     environmentToStopMock = jest.fn();
+    environmentToChangeCanaryMock = jest.fn();
+    weightMock = jest.fn();
     paginationMock = jest.fn();
   });
 
@@ -207,6 +218,19 @@ describe('~/environments/components/new_environments_app.vue', () => {
 
       expect(modal.props('environment')).toMatchObject(resolvedEnvironment);
     });
+
+    it('should pass the environment to change canary to the canary update modal', async () => {
+      await createWrapperWithMocked({
+        environmentsApp: resolvedEnvironmentsApp,
+        folder: resolvedFolder,
+        environmentToChangeCanary: resolvedEnvironment,
+        weight: 10,
+      });
+
+      const modal = wrapper.findComponent(CanaryUpdateModal);
+
+      expect(modal.props('environment')).toMatchObject(resolvedEnvironment);
+    });
   });
 
   describe('pagination', () => {