diff options
Diffstat (limited to 'app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue')
-rw-r--r-- | app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue | 48 |
1 files changed, 25 insertions, 23 deletions
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue b/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue index 43bf2e1a90c..0a8fec49aac 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue @@ -1,5 +1,5 @@ <script> -import { GlTooltipDirective } from '@gitlab/ui'; +import { GlTooltipDirective, GlFormCheckbox } from '@gitlab/ui'; import { createNamespacedHelpers } from 'vuex'; import { s__ } from '~/locale'; @@ -8,19 +8,20 @@ const { mapActions: mapCommitActions, mapGetters: mapCommitGetters } = createNam ); export default { + components: { GlFormCheckbox }, directives: { GlTooltip: GlTooltipDirective, }, + i18n: { + newMrText: s__('IDE|Start a new merge request'), + tooltipText: s__( + 'IDE|This option is disabled because you are not allowed to create merge requests in this project.', + ), + }, computed: { ...mapCommitGetters(['shouldHideNewMrOption', 'shouldDisableNewMrOption', 'shouldCreateMR']), tooltipText() { - if (this.shouldDisableNewMrOption) { - return s__( - 'IDE|This option is disabled because you are not allowed to create merge requests in this project.', - ); - } - - return ''; + return this.shouldDisableNewMrOption ? this.$options.i18n.tooltipText : null; }, }, methods: { @@ -30,22 +31,23 @@ export default { </script> <template> - <fieldset v-if="!shouldHideNewMrOption"> - <hr class="my-2" /> - <label - v-gl-tooltip="tooltipText" - class="mb-0 js-ide-commit-new-mr" - :class="{ 'is-disabled': shouldDisableNewMrOption }" + <fieldset + v-if="!shouldHideNewMrOption" + v-gl-tooltip="tooltipText" + data-testid="new-merge-request-fieldset" + class="js-ide-commit-new-mr" + :class="{ 'is-disabled': shouldDisableNewMrOption }" + > + <hr class="gl-mt-3 gl-mb-4" /> + + <gl-form-checkbox + :disabled="shouldDisableNewMrOption" + :checked="shouldCreateMR" + @change="toggleShouldCreateMR" > - <input - :disabled="shouldDisableNewMrOption" - :checked="shouldCreateMR" - type="checkbox" - @change="toggleShouldCreateMR" - /> - <span class="gl-ml-3 ide-option-label"> - {{ __('Start a new merge request') }} + <span class="ide-option-label"> + {{ $options.i18n.newMrText }} </span> - </label> + </gl-form-checkbox> </fieldset> </template> |