1 files changed, 26 insertions, 18 deletions
diff --git a/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue b/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue
index d4f04a0d055..0ac4a40ff4a 100644
--- a/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue
+++ b/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue
@@ -1,12 +1,14 @@
 <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,26 @@ 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>
+    <pipeline-editor-file-nav v-if="showFileNav" v-on="$listeners" />
+    <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>