Add latest changes from gitlab-org/gitlab@master

6 files changed, 35 insertions, 4 deletions

diff --git a/app/assets/javascripts/grafana_integration/components/grafana_integration.vue b/app/assets/javascripts/grafana_integration/components/grafana_integration.vue
index 2d3212429db..35135792c5b 100644
--- a/app/assets/javascripts/grafana_integration/components/grafana_integration.vue
+++ b/app/assets/javascripts/grafana_integration/components/grafana_integration.vue
@@ -1,11 +1,12 @@
 <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"
diff --git a/app/assets/javascripts/grafana_integration/index.js b/app/assets/javascripts/grafana_integration/index.js
index 58c28e09f80..a93edab4388 100644
--- a/app/assets/javascripts/grafana_integration/index.js
+++ b/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),
diff --git a/app/assets/javascripts/grafana_integration/store/actions.js b/app/assets/javascripts/grafana_integration/store/actions.js
index 98085fdcb2d..d83f1e0831c 100644
--- a/app/assets/javascripts/grafana_integration/store/actions.js
+++ b/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,
         },
       },
     })
diff --git a/app/assets/javascripts/grafana_integration/store/mutation_types.js b/app/assets/javascripts/grafana_integration/store/mutation_types.js
index 33ce3228823..314c3a4039a 100644
--- a/app/assets/javascripts/grafana_integration/store/mutation_types.js
+++ b/app/assets/javascripts/grafana_integration/store/mutation_types.js
@@ -1,2 +1,3 @@
 export const SET_GRAFANA_URL = 'SET_GRAFANA_URL';
 export const SET_GRAFANA_TOKEN = 'SET_GRAFANA_TOKEN';
+export const SET_GRAFANA_ENABLED = 'SET_GRAFANA_ENABLED';
diff --git a/app/assets/javascripts/grafana_integration/store/mutations.js b/app/assets/javascripts/grafana_integration/store/mutations.js
index e8d63a9a732..0992030d404 100644
--- a/app/assets/javascripts/grafana_integration/store/mutations.js
+++ b/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;
+  },
 };
diff --git a/app/assets/javascripts/grafana_integration/store/state.js b/app/assets/javascripts/grafana_integration/store/state.js
index c25742c82bc..a912eb58327 100644
--- a/app/assets/javascripts/grafana_integration/store/state.js
+++ b/app/assets/javascripts/grafana_integration/store/state.js
@@ -1,5 +1,8 @@
+import { parseBoolean } from '~/lib/utils/common_utils';
+
 export default (initialState = {}) => ({
   operationsSettingsEndpoint: initialState.operationsSettingsEndpoint,
   grafanaToken: initialState.grafanaIntegrationToken || '',
   grafanaUrl: initialState.grafanaIntegrationUrl || '',
+  grafanaEnabled: parseBoolean(initialState.grafanaIntegrationEnabled) || false,
 });