Add latest changes from gitlab-org/gitlab@master

4 files changed, 178 insertions, 4 deletions

diff --git a/spec/frontend/pipelines/graph/graph_component_spec.js b/spec/frontend/pipelines/graph/graph_component_spec.js
index e8fb036368a..30914ba99a5 100644
--- a/spec/frontend/pipelines/graph/graph_component_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_spec.js
@@ -22,6 +22,7 @@ describe('graph component', () => {
 
   const defaultProps = {
     pipeline: generateResponse(mockPipelineResponse, 'root/fungi-xoxo'),
+    showLinks: false,
     viewType: STAGE_VIEW,
     configPaths: {
       metricsPath: '',
diff --git a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
index 8c469966be4..d785818166d 100644
--- a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
@@ -15,6 +15,7 @@ import PipelineGraph from '~/pipelines/components/graph/graph_component.vue';
 import PipelineGraphWrapper from '~/pipelines/components/graph/graph_component_wrapper.vue';
 import GraphViewSelector from '~/pipelines/components/graph/graph_view_selector.vue';
 import StageColumnComponent from '~/pipelines/components/graph/stage_column_component.vue';
+import LinksLayer from '~/pipelines/components/graph_shared/links_layer.vue';
 import * as parsingUtils from '~/pipelines/components/parsing_utils';
 import { mockPipelineResponse } from './mock_data';
 
@@ -31,7 +32,9 @@ describe('Pipeline graph wrapper', () => {
 
   let wrapper;
   const getAlert = () => wrapper.find(GlAlert);
+  const getDependenciesToggle = () => wrapper.find('[data-testid="show-links-toggle"]');
   const getLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const getLinksLayer = () => wrapper.findComponent(LinksLayer);
   const getGraph = () => wrapper.find(PipelineGraph);
   const getStageColumnTitle = () => wrapper.find('[data-testid="stage-column-title"]');
   const getAllStageColumnGroupsInColumn = () =>
@@ -59,6 +62,7 @@ describe('Pipeline graph wrapper', () => {
   };
 
   const createComponentWithApollo = ({
+    data = {},
     getPipelineDetailsHandler = jest.fn().mockResolvedValue(mockPipelineResponse),
     mountFn = shallowMount,
     provide = {},
@@ -66,7 +70,7 @@ describe('Pipeline graph wrapper', () => {
     const requestHandlers = [[getPipelineDetails, getPipelineDetailsHandler]];
 
     const apolloProvider = createMockApollo(requestHandlers);
-    createComponent({ apolloProvider, provide, mountFn });
+    createComponent({ apolloProvider, data, provide, mountFn });
   };
 
   afterEach(() => {
@@ -74,6 +78,15 @@ describe('Pipeline graph wrapper', () => {
     wrapper = null;
   });
 
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
   describe('when data is loading', () => {
     it('displays the loading icon', () => {
       createComponentWithApollo();
@@ -282,6 +295,36 @@ describe('Pipeline graph wrapper', () => {
       });
     });
 
+    describe('when pipelineGraphLayersView feature flag is on and layers view is selected', () => {
+      beforeEach(async () => {
+        createComponentWithApollo({
+          provide: {
+            glFeatures: {
+              pipelineGraphLayersView: true,
+            },
+          },
+          data: {
+            currentViewType: LAYER_VIEW,
+          },
+          mountFn: mount,
+        });
+
+        jest.runOnlyPendingTimers();
+        await wrapper.vm.$nextTick();
+      });
+
+      it('sets showLinks to true', async () => {
+        /* This spec uses .props for performance reasons. */
+        expect(getLinksLayer().exists()).toBe(true);
+        expect(getLinksLayer().props('showLinks')).toBe(false);
+        expect(getViewSelector().props('type')).toBe(LAYER_VIEW);
+        await getDependenciesToggle().trigger('click');
+        jest.runOnlyPendingTimers();
+        await wrapper.vm.$nextTick();
+        expect(wrapper.findComponent(LinksLayer).props('showLinks')).toBe(true);
+      });
+    });
+
     describe('when feature flag is on and local storage is set', () => {
       beforeEach(async () => {
         localStorage.setItem(VIEW_TYPE_KEY, LAYER_VIEW);
@@ -299,10 +342,15 @@ describe('Pipeline graph wrapper', () => {
         await wrapper.vm.$nextTick();
       });
 
+      afterEach(() => {
+        localStorage.clear();
+      });
+
       it('reads the view type from localStorage when available', () => {
-        expect(wrapper.find('[data-testid="pipeline-view-selector"] code').text()).toContain(
-          'needs:',
-        );
+        const viewSelectorNeedsSegment = wrapper
+          .findAll('[data-testid="pipeline-view-selector"] > label')
+          .at(1);
+        expect(viewSelectorNeedsSegment.classes()).toContain('active');
       });
     });
 
diff --git a/spec/frontend/pipelines/graph/graph_view_selector_spec.js b/spec/frontend/pipelines/graph/graph_view_selector_spec.js
new file mode 100644
index 00000000000..abf25a84634
--- /dev/null
+++ b/spec/frontend/pipelines/graph/graph_view_selector_spec.js
@@ -0,0 +1,124 @@
+import { GlLoadingIcon, GlSegmentedControl } from '@gitlab/ui';
+import { mount, shallowMount } from '@vue/test-utils';
+import { LAYER_VIEW, STAGE_VIEW } from '~/pipelines/components/graph/constants';
+import GraphViewSelector from '~/pipelines/components/graph/graph_view_selector.vue';
+
+describe('the graph view selector component', () => {
+  let wrapper;
+
+  const findDependenciesToggle = () => wrapper.find('[data-testid="show-links-toggle"]');
+  const findViewTypeSelector = () => wrapper.findComponent(GlSegmentedControl);
+  const findStageViewLabel = () => findViewTypeSelector().findAll('label').at(0);
+  const findLayersViewLabel = () => findViewTypeSelector().findAll('label').at(1);
+  const findSwitcherLoader = () => wrapper.find('[data-testid="switcher-loading-state"]');
+  const findToggleLoader = () => findDependenciesToggle().find(GlLoadingIcon);
+
+  const defaultProps = {
+    showLinks: false,
+    type: STAGE_VIEW,
+  };
+
+  const defaultData = {
+    showLinksActive: false,
+    isToggleLoading: false,
+    isSwitcherLoading: false,
+  };
+
+  const createComponent = ({ data = {}, mountFn = shallowMount, props = {} } = {}) => {
+    wrapper = mountFn(GraphViewSelector, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+      data() {
+        return {
+          ...defaultData,
+          ...data,
+        };
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when showing stage view', () => {
+    beforeEach(() => {
+      createComponent({ mountFn: mount });
+    });
+
+    it('shows the Stage view label as active in the selector', () => {
+      expect(findStageViewLabel().classes()).toContain('active');
+    });
+
+    it('does not show the Job dependencies (links) toggle', () => {
+      expect(findDependenciesToggle().exists()).toBe(false);
+    });
+  });
+
+  describe('when showing Job dependencies view', () => {
+    beforeEach(() => {
+      createComponent({
+        mountFn: mount,
+        props: {
+          type: LAYER_VIEW,
+        },
+      });
+    });
+
+    it('shows the Job dependencies view label as active in the selector', () => {
+      expect(findLayersViewLabel().classes()).toContain('active');
+    });
+
+    it('shows the Job dependencies (links) toggle', () => {
+      expect(findDependenciesToggle().exists()).toBe(true);
+    });
+  });
+
+  describe('events', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+      createComponent({
+        mountFn: mount,
+        props: {
+          type: LAYER_VIEW,
+        },
+      });
+    });
+
+    it('shows loading state and emits updateViewType when view type toggled', async () => {
+      expect(wrapper.emitted().updateViewType).toBeUndefined();
+      expect(findSwitcherLoader().exists()).toBe(false);
+
+      await findStageViewLabel().trigger('click');
+      /*
+        Loading happens before the event is emitted or timers are run.
+        Then we run the timer because the event is emitted in setInterval
+        which is what gives the loader a chace to show up.
+      */
+      expect(findSwitcherLoader().exists()).toBe(true);
+      jest.runOnlyPendingTimers();
+
+      expect(wrapper.emitted().updateViewType).toHaveLength(1);
+      expect(wrapper.emitted().updateViewType).toEqual([[STAGE_VIEW]]);
+    });
+
+    it('shows loading state and emits updateShowLinks when show links toggle is clicked', async () => {
+      expect(wrapper.emitted().updateShowLinksState).toBeUndefined();
+      expect(findToggleLoader().exists()).toBe(false);
+
+      await findDependenciesToggle().trigger('click');
+      /*
+        Loading happens before the event is emitted or timers are run.
+        Then we run the timer because the event is emitted in setInterval
+        which is what gives the loader a chace to show up.
+      */
+      expect(findToggleLoader().exists()).toBe(true);
+      jest.runOnlyPendingTimers();
+
+      expect(wrapper.emitted().updateShowLinksState).toHaveLength(1);
+      expect(wrapper.emitted().updateShowLinksState).toEqual([[true]]);
+    });
+  });
+});
diff --git a/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js b/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js
index 8aecfc1b649..8a37c3cae4e 100644
--- a/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js
+++ b/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js
@@ -26,6 +26,7 @@ describe('Linked Pipelines Column', () => {
   const defaultProps = {
     columnTitle: 'Downstream',
     linkedPipelines: processedPipeline.downstream,
+    showLinks: false,
     type: DOWNSTREAM,
     viewType: STAGE_VIEW,
     configPaths: {