Add latest changes from gitlab-org/gitlab@master

6 files changed, 100 insertions, 6 deletions

diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index 83bdea15e62..0a8af7c9a9a 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -20,7 +20,6 @@ import ClustersService from './services/clusters_service';
 import ClustersStore from './stores/clusters_store';
 import Applications from './components/applications.vue';
 import RemoveClusterConfirmation from './components/remove_cluster_confirmation.vue';
-import setupToggleButtons from '../toggle_buttons';
 import initProjectSelectDropdown from '~/project_select';
 import initServerlessSurveyBanner from '~/serverless/survey_banner';
 
@@ -128,10 +127,6 @@ export default class Clusters {
     Clusters.initDismissableCallout();
     initSettingsPanels();
 
-    const toggleButtonsContainer = document.querySelector('.js-cluster-enable-toggle-area');
-    if (toggleButtonsContainer) {
-      setupToggleButtons(toggleButtonsContainer);
-    }
     this.initApplications(clusterType);
     this.initEnvironments();
 
diff --git a/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue b/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue
index 45f2dd48961..5e256bfd80b 100644
--- a/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue
+++ b/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue
@@ -118,7 +118,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="gl-display-flex gl-justify-content-end">
     <split-button
       v-if="canCleanupResources"
       :action-items="$options.splitButtonActionItems"
diff --git a/app/assets/javascripts/clusters/forms/components/integration_form.vue b/app/assets/javascripts/clusters/forms/components/integration_form.vue
new file mode 100644
index 00000000000..1ac9a4ee59e
--- /dev/null
+++ b/app/assets/javascripts/clusters/forms/components/integration_form.vue
@@ -0,0 +1,58 @@
+<script>
+import { GlFormGroup, GlToggle, GlTooltipDirective } from '@gitlab/ui';
+import { mapState } from 'vuex';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlToggle,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  data() {
+    return {
+      toggleEnabled: true,
+    };
+  },
+  computed: {
+    ...mapState(['enabled', 'editable']),
+  },
+  mounted() {
+    this.toggleEnabled = this.enabled;
+  },
+};
+</script>
+
+<template>
+  <div class="d-flex align-items-center">
+    <gl-form-group>
+      <div class="gl-display-flex gl-align-items-center">
+        <h4 class="gl-pr-3 gl-m-0 ">{{ s__('ClusterIntegration|GitLab Integration') }}</h4>
+        <input
+          id="cluster_enabled"
+          class="js-project-feature-toggle-input"
+          type="hidden"
+          :value="toggleEnabled"
+          name="cluster[enabled]"
+        />
+        <div id="tooltipcontainer" class="js-cluster-enable-toggle-area">
+          <gl-toggle
+            v-model="toggleEnabled"
+            v-gl-tooltip:tooltipcontainer
+            class="gl-mb-0 js-project-feature-toggle"
+            data-qa-selector="integration_status_toggle"
+            :aria-describedby="__('Toggle Kubernetes cluster')"
+            :disabled="!editable"
+            :is_checked="toggleEnabled"
+            :title="
+              s__(
+                'ClusterIntegration|Enable or disable GitLab\'s connection to your Kubernetes cluster.',
+              )
+            "
+          />
+        </div>
+      </div>
+    </gl-form-group>
+  </div>
+</template>
diff --git a/app/assets/javascripts/clusters/forms/show/index.js b/app/assets/javascripts/clusters/forms/show/index.js
new file mode 100644
index 00000000000..26a6ab5f0e3
--- /dev/null
+++ b/app/assets/javascripts/clusters/forms/show/index.js
@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import IntegrationForm from '../components/integration_form.vue';
+import { createStore } from '../stores';
+
+export default () => {
+  const entryPoint = document.querySelector('#js-cluster-integration-form');
+
+  if (!entryPoint) {
+    return;
+  }
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: entryPoint,
+    store: createStore(entryPoint.dataset),
+
+    render(createElement) {
+      return createElement(IntegrationForm);
+    },
+  });
+};
diff --git a/app/assets/javascripts/clusters/forms/stores/index.js b/app/assets/javascripts/clusters/forms/stores/index.js
new file mode 100644
index 00000000000..ae082c07f26
--- /dev/null
+++ b/app/assets/javascripts/clusters/forms/stores/index.js
@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import state from './state';
+
+Vue.use(Vuex);
+
+export const createStore = initialState =>
+  new Vuex.Store({
+    state: state(initialState),
+  });
+
+export default createStore;
diff --git a/app/assets/javascripts/clusters/forms/stores/state.js b/app/assets/javascripts/clusters/forms/stores/state.js
new file mode 100644
index 00000000000..a88954d5b94
--- /dev/null
+++ b/app/assets/javascripts/clusters/forms/stores/state.js
@@ -0,0 +1,8 @@
+import { parseBoolean } from '../../../lib/utils/common_utils';
+
+export default (initialState = {}) => {
+  return {
+    enabled: parseBoolean(initialState.enabled),
+    editable: parseBoolean(initialState.editable),
+  };
+};