diff options
Diffstat (limited to 'app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue')
-rw-r--r-- | app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue | 44 |
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> |