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