Adds "Active" state checkbox to Grafana Integration

* Adds state, mutation, and action
* Adds infrastructure
* Adds spec for mutation

app/assets/javascripts/grafana_integration/components/grafana_integration.vue

 <script>
-import { GlButton, GlFormGroup, GlFormInput, GlLink } from '@gitlab/ui';
+import { GlButton, GlFormGroup, GlFormInput, GlFormCheckbox, GlLink } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import { mapState, mapActions } from 'vuex';
 
 export default {
   components: {
     GlButton,
+    GlFormCheckbox,
     GlFormGroup,
     GlFormInput,
     GlLink,
@@ -15,7 +16,15 @@ export default {
     return { placeholderUrl: 'https://my-url.grafana.net/my-dashboard' };
   },
   computed: {
-    ...mapState(['operationsSettingsEndpoint', 'grafanaToken', 'grafanaUrl']),
+    ...mapState(['operationsSettingsEndpoint', 'grafanaToken', 'grafanaUrl', 'grafanaEnabled']),
+    integrationEnabled: {
+      get() {
+        return this.grafanaEnabled;
+      },
+      set(grafanaEnabled) {
+        this.setGrafanaEnabled(grafanaEnabled);
+      },
+    },
     localGrafanaToken: {
       get() {
         return this.grafanaToken;
@@ -34,7 +43,12 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['setGrafanaUrl', 'setGrafanaToken', 'updateGrafanaIntegration']),
+    ...mapActions([
+      'setGrafanaUrl',
+      'setGrafanaToken',
+      'setGrafanaEnabled',
+      'updateGrafanaIntegration',
+    ]),
   },
 };
 </script>
@@ -52,6 +66,13 @@ 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="s__('GrafanaIntegration|Grafana URL')"
           label-for="grafana-url"

app/assets/javascripts/grafana_integration/index.js

@@ -4,7 +4,6 @@ import GrafanaIntegration from './components/grafana_integration.vue';
 
 export default () => {
   const el = document.querySelector('.js-grafana-integration');
-
   return new Vue({
     el,
     store: store(el.dataset),

app/assets/javascripts/grafana_integration/store/actions.js

@@ -9,6 +9,9 @@ export const setGrafanaUrl = ({ commit }, url) => commit(mutationTypes.SET_GRAFA
 export const setGrafanaToken = ({ commit }, token) =>
   commit(mutationTypes.SET_GRAFANA_TOKEN, token);
 
+export const setGrafanaEnabled = ({ commit }, enabled) =>
+  commit(mutationTypes.SET_GRAFANA_ENABLED, enabled);
+
 export const updateGrafanaIntegration = ({ state, dispatch }) =>
   axios
     .patch(state.operationsSettingsEndpoint, {
@@ -16,6 +19,7 @@ export const updateGrafanaIntegration = ({ state, dispatch }) =>
         grafana_integration_attributes: {
           grafana_url: state.grafanaUrl,
           token: state.grafanaToken,
+          enabled: state.grafanaEnabled,
         },
       },
     })

app/assets/javascripts/grafana_integration/store/mutation_types.js

 export const SET_GRAFANA_URL = 'SET_GRAFANA_URL';
 export const SET_GRAFANA_TOKEN = 'SET_GRAFANA_TOKEN';
+export const SET_GRAFANA_ENABLED = 'SET_GRAFANA_ENABLED';

app/assets/javascripts/grafana_integration/store/mutations.js

@@ -7,4 +7,7 @@ export default {
   [types.SET_GRAFANA_TOKEN](state, token) {
     state.grafanaToken = token;
   },
+  [types.SET_GRAFANA_ENABLED](state, enabled) {
+    state.grafanaEnabled = enabled;
+  },
 };

app/assets/javascripts/grafana_integration/store/state.js

+import { parseBoolean } from '~/lib/utils/common_utils';
+
 export default (initialState = {}) => ({
   operationsSettingsEndpoint: initialState.operationsSettingsEndpoint,
   grafanaToken: initialState.grafanaIntegrationToken || '',
   grafanaUrl: initialState.grafanaIntegrationUrl || '',
+  grafanaEnabled: parseBoolean(initialState.grafanaIntegrationEnabled) || false,
 });

app/views/projects/settings/operations/_grafana_integration.html.haml

 .js-grafana-integration{ data: { operations_settings_endpoint: project_settings_operations_path(@project),
-  grafana_integration: { url: grafana_integration_url, token: grafana_integration_token } } }
+  grafana_integration: { url: grafana_integration_url, token: grafana_integration_token, enabled: grafana_integration_enabled?.to_s } } }

changelogs/unreleased/lm-grafana-auth-checkbox.yml

+---
+title: Add grafana integration active status checkbox
+merge_request: 19255
+author:
+type: added

locale/gitlab.pot

@@ -8307,6 +8307,9 @@ msgstr ""
 msgid "GrafanaIntegration|API Token"
 msgstr ""
 
+msgid "GrafanaIntegration|Active"
+msgstr ""
+
 msgid "GrafanaIntegration|Embed Grafana charts in GitLab issues."
 msgstr ""
 

spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap

@@ -35,6 +35,15 @@ exports[`grafana integration component default state to match the default snapsh
     class="settings-content"
   >
     <form>
+      <glformcheckbox-stub
+        class="mb-4"
+        id="grafana-integration-enabled"
+      >
+        
+        Active
+      
+      </glformcheckbox-stub>
+       
       <glformgroup-stub
         description="Enter the base URL of the Grafana instance."
         label="Grafana URL"

spec/frontend/grafana_integration/components/grafana_integration_spec.js

@@ -86,6 +86,7 @@ describe('grafana integration component', () => {
             grafana_integration_attributes: {
               grafana_url: grafanaIntegrationUrl,
               token: grafanaIntegrationToken,
+              enabled: false,
             },
           },
         },

spec/frontend/grafana_integration/store/mutations_spec.js

@@ -25,4 +25,11 @@ describe('grafana integration mutations', () => {
       expect(localState.grafanaToken).toBe(mockToken);
     });
   });
+  describe('SET_GRAFANA_ENABLED', () => {
+    it('updates grafanaEnabled for integration', () => {
+      mutations.SET_GRAFANA_ENABLED(localState, true);
+
+      expect(localState.grafanaEnabled).toBe(true);
+    });
+  });
 });