Add latest changes from gitlab-org/gitlab@master

3 files changed, 150 insertions, 6 deletions

diff --git a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
index 28f43476dc8..4914a9a1ced 100644
--- a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
@@ -17,7 +17,8 @@ import GraphViewSelector from '~/pipelines/components/graph/graph_view_selector.
 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';
+import getUserCallouts from '~/pipelines/graphql/queries/get_user_callouts.query.graphql';
+import { mapCallouts, mockCalloutsResponse, mockPipelineResponse } from './mock_data';
 
 const defaultProvide = {
   graphqlResourceEtag: 'frog/amphibirama/etag/',
@@ -31,15 +32,16 @@ describe('Pipeline graph wrapper', () => {
   useLocalStorageSpy();
 
   let wrapper;
-  const getAlert = () => wrapper.find(GlAlert);
+  const getAlert = () => wrapper.findComponent(GlAlert);
   const getDependenciesToggle = () => wrapper.find('[data-testid="show-links-toggle"]');
-  const getLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const getLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const getLinksLayer = () => wrapper.findComponent(LinksLayer);
   const getGraph = () => wrapper.find(PipelineGraph);
   const getStageColumnTitle = () => wrapper.find('[data-testid="stage-column-title"]');
   const getAllStageColumnGroupsInColumn = () =>
     wrapper.find(StageColumnComponent).findAll('[data-testid="stage-column-group"]');
   const getViewSelector = () => wrapper.find(GraphViewSelector);
+  const getViewSelectorTrip = () => getViewSelector().findComponent(GlAlert);
 
   const createComponent = ({
     apolloProvider,
@@ -62,12 +64,19 @@ describe('Pipeline graph wrapper', () => {
   };
 
   const createComponentWithApollo = ({
+    calloutsList = [],
     data = {},
     getPipelineDetailsHandler = jest.fn().mockResolvedValue(mockPipelineResponse),
     mountFn = shallowMount,
     provide = {},
   } = {}) => {
-    const requestHandlers = [[getPipelineDetails, getPipelineDetailsHandler]];
+    const callouts = mapCallouts(calloutsList);
+    const getUserCalloutsHandler = jest.fn().mockResolvedValue(mockCalloutsResponse(callouts));
+
+    const requestHandlers = [
+      [getPipelineDetails, getPipelineDetailsHandler],
+      [getUserCallouts, getUserCalloutsHandler],
+    ];
 
     const apolloProvider = createMockApollo(requestHandlers);
     createComponent({ apolloProvider, data, provide, mountFn });
@@ -325,6 +334,57 @@ describe('Pipeline graph wrapper', () => {
       });
     });
 
+    describe('when pipelineGraphLayersView feature flag is on, layers view is selected, and links are active', () => {
+      beforeEach(async () => {
+        createComponentWithApollo({
+          provide: {
+            glFeatures: {
+              pipelineGraphLayersView: true,
+            },
+          },
+          data: {
+            currentViewType: LAYER_VIEW,
+            showLinks: true,
+          },
+          mountFn: mount,
+        });
+
+        jest.runOnlyPendingTimers();
+        await wrapper.vm.$nextTick();
+      });
+
+      it('shows the hover tip in the view selector', async () => {
+        await getViewSelector().setData({ showLinksActive: true });
+        expect(getViewSelectorTrip().exists()).toBe(true);
+      });
+    });
+
+    describe('when hover tip would otherwise show, but it has been previously dismissed', () => {
+      beforeEach(async () => {
+        createComponentWithApollo({
+          provide: {
+            glFeatures: {
+              pipelineGraphLayersView: true,
+            },
+          },
+          data: {
+            currentViewType: LAYER_VIEW,
+            showLinks: true,
+          },
+          mountFn: mount,
+          calloutsList: ['pipeline_needs_hover_tip'.toUpperCase()],
+        });
+
+        jest.runOnlyPendingTimers();
+        await wrapper.vm.$nextTick();
+      });
+
+      it('does not show the hover tip', async () => {
+        await getViewSelector().setData({ showLinksActive: true });
+        expect(getViewSelectorTrip().exists()).toBe(false);
+      });
+    });
+
     describe('when feature flag is on and local storage is set', () => {
       beforeEach(async () => {
         localStorage.setItem(VIEW_TYPE_KEY, LAYER_VIEW);
diff --git a/spec/frontend/pipelines/graph/graph_view_selector_spec.js b/spec/frontend/pipelines/graph/graph_view_selector_spec.js
index abf25a84634..5b2a29de443 100644
--- a/spec/frontend/pipelines/graph/graph_view_selector_spec.js
+++ b/spec/frontend/pipelines/graph/graph_view_selector_spec.js
@@ -1,4 +1,4 @@
-import { GlLoadingIcon, GlSegmentedControl } from '@gitlab/ui';
+import { GlAlert, 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';
@@ -12,16 +12,19 @@ describe('the graph view selector component', () => {
   const findLayersViewLabel = () => findViewTypeSelector().findAll('label').at(1);
   const findSwitcherLoader = () => wrapper.find('[data-testid="switcher-loading-state"]');
   const findToggleLoader = () => findDependenciesToggle().find(GlLoadingIcon);
+  const findHoverTip = () => wrapper.findComponent(GlAlert);
 
   const defaultProps = {
     showLinks: false,
+    tipPreviouslyDismissed: false,
     type: STAGE_VIEW,
   };
 
   const defaultData = {
-    showLinksActive: false,
+    hoverTipDismissed: false,
     isToggleLoading: false,
     isSwitcherLoading: false,
+    showLinksActive: false,
   };
 
   const createComponent = ({ data = {}, mountFn = shallowMount, props = {} } = {}) => {
@@ -121,4 +124,66 @@ describe('the graph view selector component', () => {
       expect(wrapper.emitted().updateShowLinksState).toEqual([[true]]);
     });
   });
+
+  describe('hover tip callout', () => {
+    describe('when links are live and it has not been previously dismissed', () => {
+      beforeEach(() => {
+        createComponent({
+          props: {
+            showLinks: true,
+          },
+          data: {
+            showLinksActive: true,
+          },
+          mountFn: mount,
+        });
+      });
+
+      it('is displayed', () => {
+        expect(findHoverTip().exists()).toBe(true);
+        expect(findHoverTip().text()).toBe(wrapper.vm.$options.i18n.hoverTipText);
+      });
+
+      it('emits dismissHoverTip event when the tip is dismissed', async () => {
+        expect(wrapper.emitted().dismissHoverTip).toBeUndefined();
+        await findHoverTip().find('button').trigger('click');
+        expect(wrapper.emitted().dismissHoverTip).toHaveLength(1);
+      });
+    });
+
+    describe('when links are live and it has been previously dismissed', () => {
+      beforeEach(() => {
+        createComponent({
+          props: {
+            showLinks: true,
+            tipPreviouslyDismissed: true,
+          },
+          data: {
+            showLinksActive: true,
+          },
+        });
+      });
+
+      it('is not displayed', () => {
+        expect(findHoverTip().exists()).toBe(false);
+      });
+    });
+
+    describe('when links are not live', () => {
+      beforeEach(() => {
+        createComponent({
+          props: {
+            showLinks: true,
+          },
+          data: {
+            showLinksActive: false,
+          },
+        });
+      });
+
+      it('is not displayed', () => {
+        expect(findHoverTip().exists()).toBe(false);
+      });
+    });
+  });
 });
diff --git a/spec/frontend/pipelines/graph/mock_data.js b/spec/frontend/pipelines/graph/mock_data.js
index cf420f68f37..472f2a8b211 100644
--- a/spec/frontend/pipelines/graph/mock_data.js
+++ b/spec/frontend/pipelines/graph/mock_data.js
@@ -669,3 +669,22 @@ export const pipelineWithUpstreamDownstream = (base) => {
 
   return generateResponse(pip, 'root/abcd-dag');
 };
+
+export const mapCallouts = (callouts) =>
+  callouts.map((callout) => {
+    return { featureName: callout, __typename: 'UserCallout' };
+  });
+
+export const mockCalloutsResponse = (mappedCallouts) => ({
+  data: {
+    currentUser: {
+      id: 45,
+      __typename: 'User',
+      callouts: {
+        id: 5,
+        __typename: 'UserCalloutConnection',
+        nodes: mappedCallouts,
+      },
+    },
+  },
+});