Add latest changes from gitlab-org/gitlab@master

4 files changed, 82 insertions, 29 deletions

diff --git a/spec/frontend/pipelines/graph/graph_component_spec.js b/spec/frontend/pipelines/graph/graph_component_spec.js
index 4b2b61c8edd..4c3b155919a 100644
--- a/spec/frontend/pipelines/graph/graph_component_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_spec.js
@@ -66,7 +66,6 @@ describe('graph component', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('with data', () => {
diff --git a/spec/frontend/pipelines/graph/linked_pipeline_spec.js b/spec/frontend/pipelines/graph/linked_pipeline_spec.js
index d800a8c341e..17c91908bad 100644
--- a/spec/frontend/pipelines/graph/linked_pipeline_spec.js
+++ b/spec/frontend/pipelines/graph/linked_pipeline_spec.js
@@ -1,5 +1,5 @@
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
+import { GlButton, GlLoadingIcon, GlPopover } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { UPSTREAM, DOWNSTREAM } from '~/pipelines/components/graph/constants';
 import LinkedPipelineComponent from '~/pipelines/components/graph/linked_pipeline.vue';
@@ -9,15 +9,20 @@ import mockPipeline from './linked_pipelines_mock_data';
 describe('Linked pipeline', () => {
   let wrapper;
 
+  const defaultProps = {
+    pipeline: mockPipeline,
+    columnTitle: 'Downstream',
+    type: DOWNSTREAM,
+    expanded: false,
+    isLoading: false,
+    isMultiProjectVizAvailable: true,
+  };
+
   const downstreamProps = {
     pipeline: {
       ...mockPipeline,
       multiproject: false,
     },
-    columnTitle: 'Downstream',
-    type: DOWNSTREAM,
-    expanded: false,
-    isLoading: false,
   };
 
   const upstreamProps = {
@@ -27,21 +32,29 @@ describe('Linked pipeline', () => {
   };
 
   const findButton = () => wrapper.find(GlButton);
-  const findDownstreamPipelineTitle = () => wrapper.find('[data-testid="downstream-title"]');
-  const findPipelineLabel = () => wrapper.find('[data-testid="downstream-pipeline-label"]');
-  const findLinkedPipeline = () => wrapper.find({ ref: 'linkedPipeline' });
+  const findDownstreamPipelineTitle = () => wrapper.findByTestId('downstream-title');
+  const findPipelineLabel = () => wrapper.findByTestId('downstream-pipeline-label');
+  const findLinkedPipeline = () => wrapper.findByTestId('linkedPipeline');
+  const findLinkedPipelineBody = () => wrapper.findByTestId('linkedPipelineBody');
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
-  const findPipelineLink = () => wrapper.find('[data-testid="pipelineLink"]');
-  const findExpandButton = () => wrapper.find('[data-testid="expand-pipeline-button"]');
+  const findPipelineLink = () => wrapper.findByTestId('pipelineLink');
+  const findExpandButton = () => wrapper.findByTestId('expand-pipeline-button');
+  const findPopover = () => wrapper.find(GlPopover);
 
   const createWrapper = (propsData, data = []) => {
-    wrapper = mount(LinkedPipelineComponent, {
-      propsData,
+    wrapper = mountExtended(LinkedPipelineComponent, {
+      propsData: {
+        ...defaultProps,
+        ...propsData,
+      },
       data() {
         return {
           ...data,
         };
       },
+      provide: {
+        multiProjectHelpPath: '/ci/pipelines/multi-project-pipelines',
+      },
     });
   };
 
@@ -92,7 +105,7 @@ describe('Linked pipeline', () => {
     });
 
     it('should render the tooltip text as the title attribute', () => {
-      const titleAttr = findLinkedPipeline().attributes('title');
+      const titleAttr = findLinkedPipelineBody().attributes('title');
 
       expect(titleAttr).toContain(mockPipeline.project.name);
       expect(titleAttr).toContain(mockPipeline.status.label);
@@ -168,10 +181,6 @@ describe('Linked pipeline', () => {
 
   describe('when isLoading is true', () => {
     const props = {
-      pipeline: mockPipeline,
-      columnTitle: 'Downstream',
-      type: DOWNSTREAM,
-      expanded: false,
       isLoading: true,
     };
 
@@ -184,19 +193,43 @@ describe('Linked pipeline', () => {
     });
   });
 
-  describe('on click/hover', () => {
-    const props = {
-      pipeline: mockPipeline,
-      columnTitle: 'Downstream',
-      type: DOWNSTREAM,
-      expanded: false,
-      isLoading: false,
-    };
-
+  describe('when the user does not have access to the multi-project pipeline viz feature', () => {
     beforeEach(() => {
+      const props = { isMultiProjectVizAvailable: false };
       createWrapper(props);
     });
 
+    it('the multi-project expand button is disabled', () => {
+      expect(findExpandButton().props('disabled')).toBe(true);
+    });
+
+    it('it adds the popover text inside the DOM', () => {
+      expect(findPopover().exists()).toBe(true);
+      expect(findPopover().text()).toContain(
+        'Gitlab Premium users have access to the multi-project pipeline graph to improve the visualization of these pipelines.',
+      );
+    });
+  });
+
+  describe('when the user has access to the multi-project pipeline viz feature', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('the multi-project expand button is enabled', () => {
+      expect(findExpandButton().props('disabled')).toBe(false);
+    });
+
+    it('does not add the popover text inside the DOM', () => {
+      expect(findPopover().exists()).toBe(false);
+    });
+  });
+
+  describe('on click/hover', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
     it('emits `pipelineClicked` event', () => {
       jest.spyOn(wrapper.vm, '$emit');
       findButton().trigger('click');
diff --git a/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js b/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js
index 1673065e09c..4e10e0eff78 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 @@ const processedPipeline = pipelineWithUpstreamDownstream(mockPipelineResponse);
 describe('Linked Pipelines Column', () => {
   const defaultProps = {
     columnTitle: 'Downstream',
+    isMultiProjectVizAvailable: true,
     linkedPipelines: processedPipeline.downstream,
     showLinks: false,
     type: DOWNSTREAM,
@@ -51,6 +52,9 @@ describe('Linked Pipelines Column', () => {
         ...defaultProps,
         ...props,
       },
+      provide: {
+        multiProjectHelpPath: 'ci/pipelines/multi-project-pipeline',
+      },
     });
   };
 
@@ -67,7 +71,6 @@ describe('Linked Pipelines Column', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('it renders correctly', () => {
diff --git a/spec/frontend/pipelines/graph/mock_data.js b/spec/frontend/pipelines/graph/mock_data.js
index 0cf7dc507f4..e706a62dbd8 100644
--- a/spec/frontend/pipelines/graph/mock_data.js
+++ b/spec/frontend/pipelines/graph/mock_data.js
@@ -13,6 +13,15 @@ export const mockPipelineResponse = {
         usesNeeds: true,
         downstream: null,
         upstream: null,
+        user: {
+          __typename: 'UserCore',
+          id: 'gid://gitlab/User/1',
+          namespace: {
+            __typename: 'Namespace',
+            id: 'gid://gitlab/Namespaces::UserNamespace/1',
+            crossProjectPipelineAvailable: true,
+          },
+        },
         userPermissions: {
           __typename: 'PipelinePermissions',
           updatePipeline: true,
@@ -780,6 +789,15 @@ export const wrappedPipelineReturn = {
         id: 'gid://gitlab/Ci::Pipeline/175',
         iid: '38',
         complete: true,
+        user: {
+          __typename: 'UserCore',
+          id: 'gid://gitlab/User/1',
+          namespace: {
+            __typename: 'Namespace',
+            id: 'gid://gitlab/Namespaces::UserNamespace/1',
+            crossProjectPipelineAvailable: true,
+          },
+        },
         usesNeeds: true,
         userPermissions: {
           __typename: 'PipelinePermissions',