1 files changed, 63 insertions, 0 deletions
diff --git a/app/assets/javascripts/blob/filepath_form/components/filepath_form.vue b/app/assets/javascripts/blob/filepath_form/components/filepath_form.vue
new file mode 100644
index 00000000000..7a3e31a642b
--- /dev/null
+++ b/app/assets/javascripts/blob/filepath_form/components/filepath_form.vue
@@ -0,0 +1,63 @@
+<script>
+import { GlFormInput } from '@gitlab/ui';
+import TemplateSelector from '~/blob/filepath_form/components/template_selector.vue';
+
+export default {
+  components: {
+    GlFormInput,
+    TemplateSelector,
+  },
+  props: {
+    templates: {
+      type: Object,
+      required: true,
+    },
+    initialTemplate: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    inputOptions: {
+      type: Object,
+      required: true,
+    },
+    suggestCiYmlData: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      filename: this.inputOptions.value || '',
+      showTemplateSelector: true,
+    };
+  },
+  beforeMount() {
+    const navLinksElement = document.querySelector('.file-editor .nav-links');
+    navLinksElement?.addEventListener('click', (e) => {
+      this.showTemplateSelector = e.target.href.split('#')[1] !== 'preview';
+    });
+  },
+  methods: {
+    onTemplateSelected(data) {
+      this.$emit('template-selected', data);
+    },
+  },
+};
+</script>
+<template>
+  <div
+    class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-w-full gl-lg-w-auto gl-gap-3 gl-mr-3"
+  >
+    <gl-form-input v-model="filename" v-bind="inputOptions" />
+    <template-selector
+      v-if="showTemplateSelector"
+      :filename="filename"
+      :templates="templates"
+      :initial-template="initialTemplate"
+      :suggest-ci-yml-data="suggestCiYmlData"
+      @selected="onTemplateSelected"
+    />
+  </div>
+</template>