1<script> 2import { GlFormText, GlIcon, GlLink } from '@gitlab/ui'; 3import IntegrationHelpText from '~/vue_shared/components/integrations_help_text.vue'; 4 5export default { 6 name: 'IntegrationView', 7 components: { 8 GlFormText, 9 GlIcon, 10 GlLink, 11 IntegrationHelpText, 12 }, 13 inject: ['userFields'], 14 props: { 15 helpLink: { 16 type: String, 17 required: true, 18 }, 19 message: { 20 type: String, 21 required: true, 22 }, 23 messageUrl: { 24 type: String, 25 required: true, 26 }, 27 config: { 28 type: Object, 29 required: true, 30 }, 31 }, 32 data() { 33 return { 34 isEnabled: this.userFields[this.config.formName], 35 }; 36 }, 37 computed: { 38 formName() { 39 return `user[${this.config.formName}]`; 40 }, 41 formId() { 42 return `user_${this.config.formName}`; 43 }, 44 }, 45}; 46</script> 47 48<template> 49 <div> 50 <label class="label-bold"> 51 {{ config.title }} 52 </label> 53 <gl-link class="has-tooltip" title="More information" :href="helpLink"> 54 <gl-icon name="question-o" class="vertical-align-middle" /> 55 </gl-link> 56 <div class="form-group form-check" data-testid="profile-preferences-integration-form-group"> 57 <!-- Necessary for Rails to receive the value when not checked --> 58 <input 59 :name="formName" 60 type="hidden" 61 value="0" 62 data-testid="profile-preferences-integration-hidden-field" 63 /> 64 <input 65 :id="formId" 66 v-model="isEnabled" 67 type="checkbox" 68 class="form-check-input" 69 :name="formName" 70 value="1" 71 data-testid="profile-preferences-integration-checkbox" 72 /> 73 <label class="form-check-label" :for="formId"> 74 {{ config.label }} 75 </label> 76 <gl-form-text tag="div"> 77 <integration-help-text :message="message" :message-url="messageUrl" /> 78 </gl-form-text> 79 </div> 80 </div> 81</template> 82