Merge branch 'branch-switcher-empty-state' into 'master'

Add branch switcher to pipeline editor empty state

See merge request gitlab-org/gitlab!60465

app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue

 <script>
 import { GlButton, GlSprintf } from '@gitlab/ui';
 import { __ } from '~/locale';
+import PipelineEditorFileNav from '~/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
     GlButton,
     GlSprintf,
+    PipelineEditorFileNav,
   },
   i18n: {
     title: __('Optimize your workflow with CI/CD Pipelines'),
@@ -22,6 +24,9 @@ export default {
     },
   },
   computed: {
+    showFileNav() {
+      return this.glFeatures.pipelineEditorBranchSwitcher;
+    },
     showCTAButton() {
       return this.glFeatures.pipelineEditorEmptyStateAction;
     },
@@ -34,23 +39,28 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-mt-11">
-    <img :src="emptyStateIllustrationPath" />
-    <h1 class="gl-font-size-h1">{{ $options.i18n.title }}</h1>
-    <p class="gl-mt-3">
-      <gl-sprintf :message="$options.i18n.body">
-        <template #code="{ content }">
-          <code>{{ content }}</code>
-        </template>
-      </gl-sprintf>
-    </p>
-    <gl-button
-      v-if="showCTAButton"
-      variant="confirm"
-      class="gl-mt-3"
-      @click="createEmptyConfigFile"
-    >
-      {{ $options.i18n.btnText }}
-    </gl-button>
+  <div>
+    <div class="gl-mb-5">
+      <pipeline-editor-file-nav v-if="showFileNav" v-on="$listeners" />
+    </div>
+    <div class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-mt-11">
+      <img :src="emptyStateIllustrationPath" />
+      <h1 class="gl-font-size-h1">{{ $options.i18n.title }}</h1>
+      <p class="gl-mt-3">
+        <gl-sprintf :message="$options.i18n.body">
+          <template #code="{ content }">
+            <code>{{ content }}</code>
+          </template>
+        </gl-sprintf>
+      </p>
+      <gl-button
+        v-if="showCTAButton"
+        variant="confirm"
+        class="gl-mt-3"
+        @click="createEmptyConfigFile"
+      >
+        {{ $options.i18n.btnText }}
+      </gl-button>
+    </div>
   </div>
 </template>

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

@@ -80,6 +80,12 @@ export default {
 
         this.lastCommittedContent = fileContent;
         this.currentCiFileContent = fileContent;
+
+        // make sure to reset the start screen flag during a refetch
+        // e.g. when switching branches
+        if (fileContent.length) {
+          this.showStartScreen = false;
+        }
       },
       error(error) {
         this.handleBlobContentError(error);
@@ -236,6 +242,7 @@ export default {
     <pipeline-editor-empty-state
       v-else-if="showStartScreen"
       @createEmptyConfigFile="setNewEmptyCiConfigFile"
+      @refetchContent="refetchContent"
     />
     <div v-else>
       <pipeline-editor-messages

spec/frontend/pipeline_editor/components/ui/pipeline_editor_empty_state_spec.js

 import { GlButton, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import PipelineEditorFileNav from '~/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue';
 import PipelineEditorEmptyState from '~/pipeline_editor/components/ui/pipeline_editor_empty_state.vue';
 
 describe('Pipeline editor empty state', () => {
   let wrapper;
   const defaultProvide = {
     glFeatures: {
+      pipelineEditorBranchSwitcher: true,
       pipelineEditorEmptyStateAction: false,
     },
     emptyStateIllustrationPath: 'my/svg/path',
@@ -17,6 +19,7 @@ describe('Pipeline editor empty state', () => {
     });
   };
 
+  const findFileNav = () => wrapper.findComponent(PipelineEditorFileNav);
   const findSvgImage = () => wrapper.find('img');
   const findTitle = () => wrapper.find('h1');
   const findConfirmButton = () => wrapper.findComponent(GlButton);
@@ -45,6 +48,10 @@ describe('Pipeline editor empty state', () => {
       expect(findDescription().html()).toContain(wrapper.vm.$options.i18n.body);
     });
 
+    it('renders the file nav', () => {
+      expect(findFileNav().exists()).toBe(true);
+    });
+
     describe('with feature flag off', () => {
       it('does not renders a CTA button', () => {
         expect(findConfirmButton().exists()).toBe(false);
@@ -75,5 +82,17 @@ describe('Pipeline editor empty state', () => {
       await findConfirmButton().vm.$emit('click');
       expect(wrapper.emitted(expectedEvent)).toHaveLength(1);
     });
+
+    describe('with branch switcher feature flag OFF', () => {
+      it('does not render the file nav', () => {
+        createComponent({
+          provide: {
+            glFeatures: { pipelineEditorBranchSwitcher: false },
+          },
+        });
+
+        expect(findFileNav().exists()).toBe(false);
+      });
+    });
   });
 });

spec/frontend/pipeline_editor/pipeline_editor_app_spec.js

@@ -301,20 +301,35 @@ describe('Pipeline editor app component', () => {
   });
 
   describe('when refetching content', () => {
-    beforeEach(async () => {
+    it('refetches blob content', async () => {
       await createComponentWithApollo();
-
       jest
         .spyOn(wrapper.vm.$apollo.queries.initialCiFileContent, 'refetch')
         .mockImplementation(jest.fn());
-    });
 
-    it('refetches blob content', async () => {
       expect(wrapper.vm.$apollo.queries.initialCiFileContent.refetch).toHaveBeenCalledTimes(0);
 
       await wrapper.vm.refetchContent();
 
       expect(wrapper.vm.$apollo.queries.initialCiFileContent.refetch).toHaveBeenCalledTimes(1);
     });
+
+    it('hides start screen when refetch fetches CI file', async () => {
+      mockBlobContentData.mockRejectedValue({
+        response: {
+          status: httpStatusCodes.NOT_FOUND,
+        },
+      });
+      await createComponentWithApollo();
+
+      expect(findEmptyState().exists()).toBe(true);
+      expect(findEditorHome().exists()).toBe(false);
+
+      mockBlobContentData.mockResolvedValue(mockCiYml);
+      await wrapper.vm.$apollo.queries.initialCiFileContent.refetch();
+
+      expect(findEmptyState().exists()).toBe(false);
+      expect(findEditorHome().exists()).toBe(true);
+    });
   });
 });