diff options
Diffstat (limited to 'app/assets/javascripts/blob/components/blob_edit_header.vue')
-rw-r--r-- | app/assets/javascripts/blob/components/blob_edit_header.vue | 47 |
1 files changed, 34 insertions, 13 deletions
diff --git a/app/assets/javascripts/blob/components/blob_edit_header.vue b/app/assets/javascripts/blob/components/blob_edit_header.vue index e1e1d76f721..2cbbbddceeb 100644 --- a/app/assets/javascripts/blob/components/blob_edit_header.vue +++ b/app/assets/javascripts/blob/components/blob_edit_header.vue @@ -1,9 +1,10 @@ <script> -import { GlFormInput } from '@gitlab/ui'; +import { GlFormInput, GlButton } from '@gitlab/ui'; export default { components: { GlFormInput, + GlButton, }, inheritAttrs: false, props: { @@ -11,6 +12,16 @@ export default { type: String, required: true, }, + canDelete: { + type: Boolean, + required: false, + default: true, + }, + showDelete: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -21,17 +32,27 @@ export default { </script> <template> <div class="js-file-title file-title-flex-parent"> - <gl-form-input - id="snippet_file_name" - v-model="name" - :placeholder=" - s__('Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby') - " - name="snippet_file_name" - class="form-control js-snippet-file-name" - type="text" - v-bind="$attrs" - @change="$emit('input', name)" - /> + <div class="gl-display-flex gl-align-items-center gl-w-full"> + <gl-form-input + v-model="name" + :placeholder=" + s__('Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby') + " + name="snippet_file_name" + class="form-control js-snippet-file-name" + type="text" + v-bind="$attrs" + @change="$emit('input', name)" + /> + <gl-button + v-if="showDelete" + class="gl-ml-4" + variant="danger" + category="secondary" + :disabled="!canDelete" + @click="$emit('delete')" + >{{ s__('Snippets|Delete file') }}</gl-button + > + </div> </div> </template> |