1 files changed, 33 insertions, 17 deletions

diff --git a/app/assets/javascripts/grafana_integration/components/grafana_integration.vue b/app/assets/javascripts/grafana_integration/components/grafana_integration.vue
index e941318dce0..3911201457f 100644
--- a/app/assets/javascripts/grafana_integration/components/grafana_integration.vue
+++ b/app/assets/javascripts/grafana_integration/components/grafana_integration.vue
@@ -1,5 +1,13 @@
 <script>
-import { GlButton, GlFormGroup, GlFormInput, GlFormCheckbox, GlIcon, GlLink } from '@gitlab/ui';
+import {
+  GlButton,
+  GlFormGroup,
+  GlFormInput,
+  GlFormCheckbox,
+  GlIcon,
+  GlLink,
+  GlSprintf,
+} from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import { helpPagePath } from '~/helpers/help_page_helper';
 
@@ -11,6 +19,7 @@ export default {
     GlFormInput,
     GlIcon,
     GlLink,
+    GlSprintf,
   },
   data() {
     return {
@@ -78,13 +87,11 @@ export default {
     </div>
     <div class="settings-content">
       <form>
-        <gl-form-checkbox
-          id="grafana-integration-enabled"
-          v-model="integrationEnabled"
-          class="mb-4"
-        >
-          {{ s__('GrafanaIntegration|Active') }}
-        </gl-form-checkbox>
+        <gl-form-group :label="__('Enable authentication')" label-for="grafana-integration-enabled">
+          <gl-form-checkbox id="grafana-integration-enabled" v-model="integrationEnabled">
+            {{ s__('GrafanaIntegration|Active') }}
+          </gl-form-checkbox>
+        </gl-form-group>
         <gl-form-group
           :label="s__('GrafanaIntegration|Grafana URL')"
           label-for="grafana-url"
@@ -95,18 +102,27 @@ export default {
         <gl-form-group :label="s__('GrafanaIntegration|API token')" label-for="grafana-token">
           <gl-form-input id="grafana-token" v-model="localGrafanaToken" />
           <p class="form-text text-muted">
-            {{ s__('GrafanaIntegration|Enter the Grafana API token.') }}
-            <a
-              href="https://grafana.com/docs/http_api/auth/#create-api-token"
-              target="_blank"
-              rel="noopener noreferrer"
+            <gl-sprintf
+              :message="
+                s__('GrafanaIntegration|Enter the %{docLinkStart}Grafana API token%{docLinkEnd}.')
+              "
             >
-              {{ __('More information.') }}
-              <gl-icon name="external-link" class="vertical-align-middle" />
-            </a>
+              <template #docLink="{ content }">
+                <gl-link
+                  href="https://grafana.com/docs/http_api/auth/#create-api-token"
+                  target="_blank"
+                  >{{ content }} <gl-icon name="external-link" class="gl-vertical-align-middle"
+                /></gl-link>
+              </template>
+            </gl-sprintf>
           </p>
         </gl-form-group>
-        <gl-button variant="success" category="primary" @click="updateGrafanaIntegration">
+        <gl-button
+          variant="confirm"
+          category="primary"
+          data-testid="save-grafana-settings-button"
+          @click="updateGrafanaIntegration"
+        >
           {{ __('Save changes') }}
         </gl-button>
       </form>