Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42

6 files changed, 134 insertions, 63 deletions

diff --git a/spec/frontend/pipeline_editor/components/commit/commit_form_spec.js b/spec/frontend/pipeline_editor/components/commit/commit_form_spec.js
index 7244a179820..59bd71b0e60 100644
--- a/spec/frontend/pipeline_editor/components/commit/commit_form_spec.js
+++ b/spec/frontend/pipeline_editor/components/commit/commit_form_spec.js
@@ -17,6 +17,8 @@ describe('Pipeline Editor | Commit Form', () => {
       propsData: {
         defaultMessage: mockCommitMessage,
         currentBranch: mockDefaultBranch,
+        hasUnsavedChanges: true,
+        isNewCiConfigFile: false,
         ...props,
       },
 
@@ -82,6 +84,27 @@ describe('Pipeline Editor | Commit Form', () => {
     });
   });
 
+  describe('submit button', () => {
+    it.each`
+      hasUnsavedChanges | isNewCiConfigFile | isDisabled | btnState
+      ${false}          | ${false}          | ${true}    | ${'disabled'}
+      ${true}           | ${false}          | ${false}   | ${'enabled'}
+      ${true}           | ${true}           | ${false}   | ${'enabled'}
+      ${false}          | ${true}           | ${false}   | ${'enabled'}
+    `(
+      'is $btnState when hasUnsavedChanges:$hasUnsavedChanges and isNewCiConfigfile:$isNewCiConfigFile',
+      ({ hasUnsavedChanges, isNewCiConfigFile, isDisabled }) => {
+        createComponent({ props: { hasUnsavedChanges, isNewCiConfigFile } });
+
+        if (isDisabled) {
+          expect(findSubmitBtn().attributes('disabled')).toBe('true');
+        } else {
+          expect(findSubmitBtn().attributes('disabled')).toBeUndefined();
+        }
+      },
+    );
+  });
+
   describe('when user inputs values', () => {
     const anotherMessage = 'Another commit message';
     const anotherBranch = 'my-branch';
diff --git a/spec/frontend/pipeline_editor/components/commit/commit_section_spec.js b/spec/frontend/pipeline_editor/components/commit/commit_section_spec.js
index b54feea6ff7..33c76309951 100644
--- a/spec/frontend/pipeline_editor/components/commit/commit_section_spec.js
+++ b/spec/frontend/pipeline_editor/components/commit/commit_section_spec.js
@@ -51,6 +51,7 @@ describe('Pipeline Editor | Commit section', () => {
   const defaultProps = {
     ciFileContent: mockCiYml,
     commitSha: mockCommitSha,
+    hasUnsavedChanges: true,
     isNewCiConfigFile: false,
   };
 
diff --git a/spec/frontend/pipeline_editor/components/drawer/pipeline_editor_drawer_spec.js b/spec/frontend/pipeline_editor/components/drawer/pipeline_editor_drawer_spec.js
index 4df7768b035..ba06f113120 100644
--- a/spec/frontend/pipeline_editor/components/drawer/pipeline_editor_drawer_spec.js
+++ b/spec/frontend/pipeline_editor/components/drawer/pipeline_editor_drawer_spec.js
@@ -1,7 +1,6 @@
 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import { stubExperiments } from 'helpers/experimentation_helper';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import FirstPipelineCard from '~/pipeline_editor/components/drawer/cards/first_pipeline_card.vue';
 import GettingStartedCard from '~/pipeline_editor/components/drawer/cards/getting_started_card.vue';
@@ -38,7 +37,6 @@ describe('Pipeline editor drawer', () => {
 
   beforeEach(() => {
     originalObjects.push(window.gon, window.gl);
-    stubExperiments({ pipeline_editor_walkthrough: 'control' });
   });
 
   afterEach(() => {
@@ -48,33 +46,15 @@ describe('Pipeline editor drawer', () => {
   });
 
   describe('default expanded state', () => {
-    describe('when experiment control', () => {
-      it('sets the drawer to be opened by default', async () => {
-        createComponent();
-        expect(findDrawerContent().exists()).toBe(false);
-        await nextTick();
-        expect(findDrawerContent().exists()).toBe(true);
-      });
-    });
-
-    describe('when experiment candidate', () => {
-      beforeEach(() => {
-        stubExperiments({ pipeline_editor_walkthrough: 'candidate' });
-      });
-
-      it('sets the drawer to be closed by default', async () => {
-        createComponent();
-        expect(findDrawerContent().exists()).toBe(false);
-        await nextTick();
-        expect(findDrawerContent().exists()).toBe(false);
-      });
+    it('sets the drawer to be closed by default', async () => {
+      createComponent();
+      expect(findDrawerContent().exists()).toBe(false);
     });
   });
 
   describe('when the drawer is collapsed', () => {
     beforeEach(async () => {
       createComponent();
-      await clickToggleBtn();
     });
 
     it('shows the left facing arrow icon', () => {
@@ -101,6 +81,7 @@ describe('Pipeline editor drawer', () => {
   describe('when the drawer is expanded', () => {
     beforeEach(async () => {
       createComponent();
+      await clickToggleBtn();
     });
 
     it('shows the right facing arrow icon', () => {
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 f15d5f334d6..6cdf9a93d55 100644
--- a/spec/frontend/pipeline_editor/components/editor/text_editor_spec.js
+++ b/spec/frontend/pipeline_editor/components/editor/text_editor_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 
 import { EDITOR_READY_EVENT } from '~/editor/constants';
+import { SOURCE_EDITOR_DEBOUNCE } from '~/pipeline_editor/constants';
 import TextEditor from '~/pipeline_editor/components/editor/text_editor.vue';
 import {
   mockCiConfigPath,
@@ -22,7 +23,7 @@ describe('Pipeline Editor | Text editor component', () => {
 
   const MockSourceEditor = {
     template: '<div/>',
-    props: ['value', 'fileName'],
+    props: ['value', 'fileName', 'editorOptions', 'debounceValue'],
   };
 
   const createComponent = (glFeatures = {}, mountFn = shallowMount) => {
@@ -90,6 +91,14 @@ describe('Pipeline Editor | Text editor component', () => {
       expect(findEditor().props('fileName')).toBe(mockCiConfigPath);
     });
 
+    it('passes down editor configs options', () => {
+      expect(findEditor().props('editorOptions')).toEqual({ quickSuggestions: true });
+    });
+
+    it('passes down editor debounce value', () => {
+      expect(findEditor().props('debounceValue')).toBe(SOURCE_EDITOR_DEBOUNCE);
+    });
+
     it('bubbles up events', () => {
       findEditor().vm.$emit(EDITOR_READY_EVENT, editorInstanceDetail);
 
diff --git a/spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js b/spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js
index f6154f50bc0..fee52db9b64 100644
--- a/spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js
+++ b/spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js
@@ -7,7 +7,6 @@ import WalkthroughPopover from '~/pipeline_editor/components/walkthrough_popover
 import CiLint from '~/pipeline_editor/components/lint/ci_lint.vue';
 import PipelineEditorTabs from '~/pipeline_editor/components/pipeline_editor_tabs.vue';
 import EditorTab from '~/pipeline_editor/components/ui/editor_tab.vue';
-import { stubExperiments } from 'helpers/experimentation_helper';
 import {
   CREATE_TAB,
   EDITOR_APP_STATUS_EMPTY,
@@ -245,50 +244,30 @@ describe('Pipeline editor tabs component', () => {
     });
   });
 
-  describe('pipeline_editor_walkthrough experiment', () => {
-    describe('when in control path', () => {
-      beforeEach(() => {
-        stubExperiments({ pipeline_editor_walkthrough: 'control' });
-      });
-
-      it('does not show walkthrough popover', async () => {
-        createComponent({ mountFn: mount });
+  describe('pipeline editor walkthrough', () => {
+    describe('when isNewCiConfigFile prop is true (default)', () => {
+      beforeEach(async () => {
+        createComponent({
+          mountFn: mount,
+        });
         await nextTick();
-        expect(findWalkthroughPopover().exists()).toBe(false);
       });
-    });
 
-    describe('when in candidate path', () => {
-      beforeEach(() => {
-        stubExperiments({ pipeline_editor_walkthrough: 'candidate' });
-      });
-
-      describe('when isNewCiConfigFile prop is true (default)', () => {
-        beforeEach(async () => {
-          createComponent({
-            mountFn: mount,
-          });
-          await nextTick();
-        });
-
-        it('shows walkthrough popover', async () => {
-          expect(findWalkthroughPopover().exists()).toBe(true);
-        });
+      it('shows walkthrough popover', async () => {
+        expect(findWalkthroughPopover().exists()).toBe(true);
       });
+    });
 
-      describe('when isNewCiConfigFile prop is false', () => {
-        it('does not show walkthrough popover', async () => {
-          createComponent({ props: { isNewCiConfigFile: false }, mountFn: mount });
-          await nextTick();
-          expect(findWalkthroughPopover().exists()).toBe(false);
-        });
+    describe('when isNewCiConfigFile prop is false', () => {
+      it('does not show walkthrough popover', async () => {
+        createComponent({ props: { isNewCiConfigFile: false }, mountFn: mount });
+        await nextTick();
+        expect(findWalkthroughPopover().exists()).toBe(false);
       });
     });
   });
 
   it('sets listeners on walkthrough popover', async () => {
-    stubExperiments({ pipeline_editor_walkthrough: 'candidate' });
-
     const handler = jest.fn();
 
     createComponent({
diff --git a/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js b/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js
index 0a2c03b7850..0ce6cc3f2d4 100644
--- a/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js
+++ b/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js
@@ -18,12 +18,15 @@ import {
   COMMIT_SUCCESS,
   COMMIT_SUCCESS_WITH_REDIRECT,
   COMMIT_FAILURE,
+  EDITOR_APP_STATUS_LOADING,
 } from '~/pipeline_editor/constants';
 import getBlobContent from '~/pipeline_editor/graphql/queries/blob_content.query.graphql';
 import getCiConfigData from '~/pipeline_editor/graphql/queries/ci_config.query.graphql';
 import getTemplate from '~/pipeline_editor/graphql/queries/get_starter_template.query.graphql';
 import getLatestCommitShaQuery from '~/pipeline_editor/graphql/queries/latest_commit_sha.query.graphql';
 import getPipelineQuery from '~/pipeline_editor/graphql/queries/pipeline.query.graphql';
+import getCurrentBranch from '~/pipeline_editor/graphql/queries/client/current_branch.query.graphql';
+import getAppStatus from '~/pipeline_editor/graphql/queries/client/app_status.query.graphql';
 
 import PipelineEditorApp from '~/pipeline_editor/pipeline_editor_app.vue';
 import PipelineEditorHome from '~/pipeline_editor/pipeline_editor_home.vue';
@@ -84,9 +87,6 @@ describe('Pipeline editor app component', () => {
             initialCiFileContent: {
               loading: blobLoading,
             },
-            ciConfigData: {
-              loading: false,
-            },
           },
         },
       },
@@ -94,7 +94,11 @@ describe('Pipeline editor app component', () => {
     });
   };
 
-  const createComponentWithApollo = async ({ provide = {}, stubs = {} } = {}) => {
+  const createComponentWithApollo = async ({
+    provide = {},
+    stubs = {},
+    withUndefinedBranch = false,
+  } = {}) => {
     const handlers = [
       [getBlobContent, mockBlobContentData],
       [getCiConfigData, mockCiConfigData],
@@ -105,6 +109,31 @@ describe('Pipeline editor app component', () => {
 
     mockApollo = createMockApollo(handlers, resolvers);
 
+    if (!withUndefinedBranch) {
+      mockApollo.clients.defaultClient.cache.writeQuery({
+        query: getCurrentBranch,
+        data: {
+          workBranches: {
+            __typename: 'BranchList',
+            current: {
+              __typename: 'WorkBranch',
+              name: mockDefaultBranch,
+            },
+          },
+        },
+      });
+    }
+
+    mockApollo.clients.defaultClient.cache.writeQuery({
+      query: getAppStatus,
+      data: {
+        app: {
+          __typename: 'AppData',
+          status: EDITOR_APP_STATUS_LOADING,
+        },
+      },
+    });
+
     const options = {
       localVue,
       mocks: {},
@@ -145,6 +174,55 @@ describe('Pipeline editor app component', () => {
     });
   });
 
+  describe('skipping queries', () => {
+    describe('when branchName is undefined', () => {
+      beforeEach(async () => {
+        await createComponentWithApollo({ withUndefinedBranch: true });
+      });
+
+      it('does not calls getBlobContent', () => {
+        expect(mockBlobContentData).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when branchName is defined', () => {
+      beforeEach(async () => {
+        await createComponentWithApollo();
+      });
+
+      it('calls getBlobContent', () => {
+        expect(mockBlobContentData).toHaveBeenCalled();
+      });
+    });
+
+    describe('when commit sha is undefined', () => {
+      beforeEach(async () => {
+        mockLatestCommitShaQuery.mockResolvedValue(undefined);
+        await createComponentWithApollo();
+      });
+
+      it('calls getBlobContent', () => {
+        expect(mockBlobContentData).toHaveBeenCalled();
+      });
+
+      it('does not call ciConfigData', () => {
+        expect(mockCiConfigData).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when commit sha is defined', () => {
+      beforeEach(async () => {
+        mockBlobContentData.mockResolvedValue(mockBlobContentQueryResponse);
+        mockLatestCommitShaQuery.mockResolvedValue(mockCommitShaResults);
+        await createComponentWithApollo();
+      });
+
+      it('calls ciConfigData', () => {
+        expect(mockCiConfigData).toHaveBeenCalled();
+      });
+    });
+  });
+
   describe('when queries are called', () => {
     beforeEach(() => {
       mockBlobContentData.mockResolvedValue(mockBlobContentQueryResponse);