Add latest changes from gitlab-org/gitlab@14-4-stable-eev14.4.0-rc42

7 files changed, 119 insertions, 97 deletions

diff --git a/spec/frontend/pipeline_editor/components/editor/text_editor_spec.js b/spec/frontend/pipeline_editor/components/editor/text_editor_spec.js
index 85222f2ecbb..a43da4b0f19 100644
--- a/spec/frontend/pipeline_editor/components/editor/text_editor_spec.js
+++ b/spec/frontend/pipeline_editor/components/editor/text_editor_spec.js
@@ -112,11 +112,6 @@ describe('Pipeline Editor | Text editor component', () => {
       it('configures editor with syntax highlight', () => {
         expect(mockUse).toHaveBeenCalledTimes(1);
         expect(mockRegisterCiSchema).toHaveBeenCalledTimes(1);
-        expect(mockRegisterCiSchema).toHaveBeenCalledWith({
-          projectNamespace: mockProjectNamespace,
-          projectPath: mockProjectPath,
-          ref: mockCommitSha,
-        });
       });
     });
 
diff --git a/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js b/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js
index 753682d438b..44656b2b67d 100644
--- a/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js
+++ b/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js
@@ -5,22 +5,18 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import PipelineStatus, { i18n } from '~/pipeline_editor/components/header/pipeline_status.vue';
 import getPipelineQuery from '~/pipeline_editor/graphql/queries/client/pipeline.graphql';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import PipelineEditorMiniGraph from '~/pipeline_editor/components/header/pipeline_editor_mini_graph.vue';
 import { mockCommitSha, mockProjectPipeline, mockProjectFullPath } from '../../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
-const mockProvide = {
-  projectFullPath: mockProjectFullPath,
-};
-
 describe('Pipeline Status', () => {
   let wrapper;
   let mockApollo;
   let mockPipelineQuery;
 
-  const createComponentWithApollo = () => {
+  const createComponentWithApollo = (glFeatures = {}) => {
     const handlers = [[getPipelineQuery, mockPipelineQuery]];
     mockApollo = createMockApollo(handlers);
 
@@ -30,19 +26,23 @@ describe('Pipeline Status', () => {
       propsData: {
         commitSha: mockCommitSha,
       },
-      provide: mockProvide,
+      provide: {
+        glFeatures,
+        projectFullPath: mockProjectFullPath,
+      },
       stubs: { GlLink, GlSprintf },
     });
   };
 
   const findIcon = () => wrapper.findComponent(GlIcon);
-  const findCiIcon = () => wrapper.findComponent(CiIcon);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findPipelineEditorMiniGraph = () => wrapper.findComponent(PipelineEditorMiniGraph);
   const findPipelineId = () => wrapper.find('[data-testid="pipeline-id"]');
   const findPipelineCommit = () => wrapper.find('[data-testid="pipeline-commit"]');
   const findPipelineErrorMsg = () => wrapper.find('[data-testid="pipeline-error-msg"]');
   const findPipelineLoadingMsg = () => wrapper.find('[data-testid="pipeline-loading-msg"]');
   const findPipelineViewBtn = () => wrapper.find('[data-testid="pipeline-view-btn"]');
+  const findStatusIcon = () => wrapper.find('[data-testid="pipeline-status-icon"]');
 
   beforeEach(() => {
     mockPipelineQuery = jest.fn();
@@ -50,9 +50,7 @@ describe('Pipeline Status', () => {
 
   afterEach(() => {
     mockPipelineQuery.mockReset();
-
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('loading icon', () => {
@@ -73,13 +71,13 @@ describe('Pipeline Status', () => {
 
   describe('when querying data', () => {
     describe('when data is set', () => {
-      beforeEach(async () => {
+      beforeEach(() => {
         mockPipelineQuery.mockResolvedValue({
-          data: { project: mockProjectPipeline },
+          data: { project: mockProjectPipeline() },
         });
 
         createComponentWithApollo();
-        await waitForPromises();
+        waitForPromises();
       });
 
       it('query is called with correct variables', async () => {
@@ -91,20 +89,24 @@ describe('Pipeline Status', () => {
       });
 
       it('does not render error', () => {
-        expect(findIcon().exists()).toBe(false);
+        expect(findPipelineErrorMsg().exists()).toBe(false);
       });
 
       it('renders pipeline data', () => {
         const {
           id,
           detailedStatus: { detailsPath },
-        } = mockProjectPipeline.pipeline;
+        } = mockProjectPipeline().pipeline;
 
-        expect(findCiIcon().exists()).toBe(true);
+        expect(findStatusIcon().exists()).toBe(true);
         expect(findPipelineId().text()).toBe(`#${id.match(/\d+/g)[0]}`);
         expect(findPipelineCommit().text()).toBe(mockCommitSha);
         expect(findPipelineViewBtn().attributes('href')).toBe(detailsPath);
       });
+
+      it('does not render the pipeline mini graph', () => {
+        expect(findPipelineEditorMiniGraph().exists()).toBe(false);
+      });
     });
 
     describe('when data cannot be fetched', () => {
@@ -121,11 +123,26 @@ describe('Pipeline Status', () => {
       });
 
       it('does not render pipeline data', () => {
-        expect(findCiIcon().exists()).toBe(false);
+        expect(findStatusIcon().exists()).toBe(false);
         expect(findPipelineId().exists()).toBe(false);
         expect(findPipelineCommit().exists()).toBe(false);
         expect(findPipelineViewBtn().exists()).toBe(false);
       });
     });
   });
+
+  describe('when feature flag for pipeline mini graph is enabled', () => {
+    beforeEach(() => {
+      mockPipelineQuery.mockResolvedValue({
+        data: { project: mockProjectPipeline() },
+      });
+
+      createComponentWithApollo({ pipelineEditorMiniGraph: true });
+      waitForPromises();
+    });
+
+    it('renders the pipeline mini graph', () => {
+      expect(findPipelineEditorMiniGraph().exists()).toBe(true);
+    });
+  });
 });
diff --git a/spec/frontend/pipeline_editor/components/header/pipline_editor_mini_graph_spec.js b/spec/frontend/pipeline_editor/components/header/pipline_editor_mini_graph_spec.js
new file mode 100644
index 00000000000..3d7c3c839da
--- /dev/null
+++ b/spec/frontend/pipeline_editor/components/header/pipline_editor_mini_graph_spec.js
@@ -0,0 +1,42 @@
+import { shallowMount } from '@vue/test-utils';
+import PipelineEditorMiniGraph from '~/pipeline_editor/components/header/pipeline_editor_mini_graph.vue';
+import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue';
+import { mockProjectPipeline } from '../../mock_data';
+
+describe('Pipeline Status', () => {
+  let wrapper;
+
+  const createComponent = ({ hasStages = true } = {}) => {
+    wrapper = shallowMount(PipelineEditorMiniGraph, {
+      propsData: {
+        pipeline: mockProjectPipeline({ hasStages }).pipeline,
+      },
+    });
+  };
+
+  const findPipelineMiniGraph = () => wrapper.findComponent(PipelineMiniGraph);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when there are stages', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders pipeline mini graph', () => {
+      expect(findPipelineMiniGraph().exists()).toBe(true);
+    });
+  });
+
+  describe('when there are no stages', () => {
+    beforeEach(() => {
+      createComponent({ hasStages: false });
+    });
+
+    it('does not render pipeline mini graph', () => {
+      expect(findPipelineMiniGraph().exists()).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/pipeline_editor/components/ui/pipeline_editor_empty_state_spec.js b/spec/frontend/pipeline_editor/components/ui/pipeline_editor_empty_state_spec.js
index b019bae886c..8e0a73b6e7c 100644
--- a/spec/frontend/pipeline_editor/components/ui/pipeline_editor_empty_state_spec.js
+++ b/spec/frontend/pipeline_editor/components/ui/pipeline_editor_empty_state_spec.js
@@ -6,9 +6,6 @@ import PipelineEditorEmptyState from '~/pipeline_editor/components/ui/pipeline_e
 describe('Pipeline editor empty state', () => {
   let wrapper;
   const defaultProvide = {
-    glFeatures: {
-      pipelineEditorEmptyStateAction: false,
-    },
     emptyStateIllustrationPath: 'my/svg/path',
   };
 
@@ -51,24 +48,6 @@ describe('Pipeline editor empty state', () => {
       expect(findFileNav().exists()).toBe(true);
     });
 
-    describe('with feature flag off', () => {
-      it('does not renders a CTA button', () => {
-        expect(findConfirmButton().exists()).toBe(false);
-      });
-    });
-  });
-
-  describe('with feature flag on', () => {
-    beforeEach(() => {
-      createComponent({
-        provide: {
-          glFeatures: {
-            pipelineEditorEmptyStateAction: true,
-          },
-        },
-      });
-    });
-
     it('renders a CTA button', () => {
       expect(findConfirmButton().exists()).toBe(true);
       expect(findConfirmButton().text()).toBe(wrapper.vm.$options.i18n.btnText);
diff --git a/spec/frontend/pipeline_editor/mock_data.js b/spec/frontend/pipeline_editor/mock_data.js
index f2104f25324..0b0ff14486e 100644
--- a/spec/frontend/pipeline_editor/mock_data.js
+++ b/spec/frontend/pipeline_editor/mock_data.js
@@ -247,20 +247,47 @@ export const mockEmptySearchBranches = {
 export const mockBranchPaginationLimit = 10;
 export const mockTotalBranches = 20; // must be greater than mockBranchPaginationLimit to test pagination
 
-export const mockProjectPipeline = {
-  pipeline: {
-    commitPath: '/-/commit/aabbccdd',
-    id: 'gid://gitlab/Ci::Pipeline/118',
-    iid: '28',
-    shortSha: mockCommitSha,
-    status: 'SUCCESS',
-    detailedStatus: {
-      detailsPath: '/root/sample-ci-project/-/pipelines/118"',
-      group: 'success',
-      icon: 'status_success',
-      text: 'passed',
+export const mockProjectPipeline = ({ hasStages = true } = {}) => {
+  const stages = hasStages
+    ? {
+        edges: [
+          {
+            node: {
+              id: 'gid://gitlab/Ci::Stage/605',
+              name: 'prepare',
+              status: 'success',
+              detailedStatus: {
+                detailsPath: '/root/sample-ci-project/-/pipelines/268#prepare',
+                group: 'success',
+                hasDetails: true,
+                icon: 'status_success',
+                id: 'success-605-605',
+                label: 'passed',
+                text: 'passed',
+                tooltip: 'passed',
+              },
+            },
+          },
+        ],
+      }
+    : null;
+
+  return {
+    pipeline: {
+      commitPath: '/-/commit/aabbccdd',
+      id: 'gid://gitlab/Ci::Pipeline/118',
+      iid: '28',
+      shortSha: mockCommitSha,
+      status: 'SUCCESS',
+      detailedStatus: {
+        detailsPath: '/root/sample-ci-project/-/pipelines/118',
+        group: 'success',
+        icon: 'status_success',
+        text: 'passed',
+      },
+      stages,
     },
-  },
+  };
 };
 
 export const mockLintResponse = {
diff --git a/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js b/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js
index 393cad0546b..b6713319e69 100644
--- a/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js
+++ b/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js
@@ -22,7 +22,6 @@ import {
   mockCiConfigPath,
   mockCiConfigQueryResponse,
   mockBlobContentQueryResponse,
-  mockBlobContentQueryResponseEmptyCiFile,
   mockBlobContentQueryResponseNoCiFile,
   mockCiYml,
   mockCommitSha,
@@ -43,9 +42,6 @@ const MockSourceEditor = {
 const mockProvide = {
   ciConfigPath: mockCiConfigPath,
   defaultBranch: mockDefaultBranch,
-  glFeatures: {
-    pipelineEditorEmptyStateAction: false,
-  },
   projectFullPath: mockProjectFullPath,
 };
 
@@ -221,37 +217,12 @@ describe('Pipeline editor app component', () => {
       });
     });
 
-    describe('with an empty CI config file', () => {
-      describe('with empty state feature flag on', () => {
-        it('does not show the empty screen state', async () => {
-          mockBlobContentData.mockResolvedValue(mockBlobContentQueryResponseEmptyCiFile);
-
-          await createComponentWithApollo({
-            provide: {
-              glFeatures: {
-                pipelineEditorEmptyStateAction: true,
-              },
-            },
-          });
-
-          expect(findEmptyState().exists()).toBe(false);
-          expect(findTextEditor().exists()).toBe(true);
-        });
-      });
-    });
-
-    describe('when landing on the empty state with feature flag on', () => {
-      it('user can click on CTA button and see an empty editor', async () => {
+    describe('with no CI config setup', () => {
+      it('user can click on CTA button to get started', async () => {
         mockBlobContentData.mockResolvedValue(mockBlobContentQueryResponseNoCiFile);
         mockLatestCommitShaQuery.mockResolvedValue(mockEmptyCommitShaResults);
 
-        await createComponentWithApollo({
-          provide: {
-            glFeatures: {
-              pipelineEditorEmptyStateAction: true,
-            },
-          },
-        });
+        await createComponentWithApollo();
 
         expect(findEmptyState().exists()).toBe(true);
         expect(findTextEditor().exists()).toBe(false);
diff --git a/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js b/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js
index 7aba336b8e8..335049892ec 100644
--- a/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js
+++ b/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js
@@ -25,7 +25,6 @@ describe('Pipeline editor home wrapper', () => {
       },
       provide: {
         glFeatures: {
-          pipelineEditorDrawer: true,
           ...glFeatures,
         },
       },
@@ -94,12 +93,4 @@ describe('Pipeline editor home wrapper', () => {
       expect(findCommitSection().exists()).toBe(true);
     });
   });
-
-  describe('Pipeline drawer', () => {
-    it('hides the drawer when the feature flag is off', () => {
-      createComponent({ glFeatures: { pipelineEditorDrawer: false } });
-
-      expect(findPipelineEditorDrawer().exists()).toBe(false);
-    });
-  });
 });