diff options
Diffstat (limited to 'app/assets/javascripts/profile/preferences/components/integration_view.vue')
-rw-r--r-- | app/assets/javascripts/profile/preferences/components/integration_view.vue | 56 |
1 files changed, 23 insertions, 33 deletions
diff --git a/app/assets/javascripts/profile/preferences/components/integration_view.vue b/app/assets/javascripts/profile/preferences/components/integration_view.vue index c2952629a5d..9924f248b89 100644 --- a/app/assets/javascripts/profile/preferences/components/integration_view.vue +++ b/app/assets/javascripts/profile/preferences/components/integration_view.vue @@ -1,13 +1,14 @@ <script> -import { GlFormText, GlIcon, GlLink } from '@gitlab/ui'; +import { GlIcon, GlLink, GlFormGroup, GlFormCheckbox } from '@gitlab/ui'; import IntegrationHelpText from '~/vue_shared/components/integrations_help_text.vue'; export default { name: 'IntegrationView', components: { - GlFormText, GlIcon, GlLink, + GlFormGroup, + GlFormCheckbox, IntegrationHelpText, }, inject: ['userFields'], @@ -31,7 +32,7 @@ export default { }, data() { return { - isEnabled: this.userFields[this.config.formName], + isEnabled: this.userFields[this.config.formName] ? '1' : '0', }; }, computed: { @@ -46,36 +47,25 @@ export default { </script> <template> - <div> - <label class="label-bold"> + <gl-form-group> + <template #label> {{ config.title }} - </label> - <gl-link class="has-tooltip" title="More information" :href="helpLink"> - <gl-icon name="question-o" class="vertical-align-middle" /> - </gl-link> - <div class="form-group form-check" data-testid="profile-preferences-integration-form-group"> - <!-- Necessary for Rails to receive the value when not checked --> - <input - :name="formName" - type="hidden" - value="0" - data-testid="profile-preferences-integration-hidden-field" - /> - <input - :id="formId" - v-model="isEnabled" - type="checkbox" - class="form-check-input" - :name="formName" - value="1" - data-testid="profile-preferences-integration-checkbox" - /> - <label class="form-check-label" :for="formId"> - {{ config.label }} - </label> - <gl-form-text tag="div"> + <gl-link class="has-tooltip" title="More information" :href="helpLink"> + <gl-icon name="question-o" class="vertical-align-middle" /> + </gl-link> + </template> + <!-- Necessary for Rails to receive the value when not checked --> + <input + :name="formName" + type="hidden" + value="0" + data-testid="profile-preferences-integration-hidden-field" + /> + <gl-form-checkbox :id="formId" :checked="isEnabled" :name="formName" value="1" + >{{ config.label }} + <template #help> <integration-help-text :message="message" :message-url="messageUrl" /> - </gl-form-text> - </div> - </div> + </template> + </gl-form-checkbox> + </gl-form-group> </template> |