Add file nav to pipeline editor empty state

This replaces the branch switcher component in the
empty state with the file nave component, which should be
visible to the user as we add more features to it in the
future.

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

@@ -2,13 +2,13 @@
 import { GlButton, GlSprintf } from '@gitlab/ui';
 import { __ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import BranchSwitcher from '../file_nav/branch_switcher.vue';
+import PipelineEditorFileNav from '~/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue';
 
 export default {
   components: {
-    BranchSwitcher,
     GlButton,
     GlSprintf,
+    PipelineEditorFileNav,
   },
   i18n: {
     title: __('Optimize your workflow with CI/CD Pipelines'),
@@ -24,7 +24,7 @@ export default {
     },
   },
   computed: {
-    showBranchSwitcher() {
+    showFileNav() {
       return this.glFeatures.pipelineEditorBranchSwitcher;
     },
     showCTAButton() {
@@ -41,7 +41,7 @@ export default {
 <template>
   <div>
     <div class="gl-mb-5">
-      <branch-switcher v-if="showBranchSwitcher" v-on="$listeners" />
+      <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" />

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 BranchSwitcher from '~/pipeline_editor/components/file_nav/branch_switcher.vue';
+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', () => {
@@ -19,7 +19,7 @@ describe('Pipeline editor empty state', () => {
     });
   };
 
-  const findBranchSwitcher = () => wrapper.findComponent(BranchSwitcher);
+  const findFileNav = () => wrapper.findComponent(PipelineEditorFileNav);
   const findSvgImage = () => wrapper.find('img');
   const findTitle = () => wrapper.find('h1');
   const findConfirmButton = () => wrapper.findComponent(GlButton);
@@ -48,8 +48,8 @@ describe('Pipeline editor empty state', () => {
       expect(findDescription().html()).toContain(wrapper.vm.$options.i18n.body);
     });
 
-    it('renders the branch switcher', () => {
-      expect(findBranchSwitcher().exists()).toBe(true);
+    it('renders the file nav', () => {
+      expect(findFileNav().exists()).toBe(true);
     });
 
     describe('with feature flag off', () => {
@@ -84,14 +84,14 @@ describe('Pipeline editor empty state', () => {
     });
 
     describe('with branch switcher feature flag OFF', () => {
-      it('does not render the branch switcher', () => {
+      it('does not render the file nav', () => {
         createComponent({
           provide: {
             glFeatures: { pipelineEditorBranchSwitcher: false },
           },
         });
 
-        expect(findBranchSwitcher().exists()).toBe(false);
+        expect(findFileNav().exists()).toBe(false);
       });
     });
   });