Add latest changes from gitlab-org/gitlab@13-4-stable-ee

11 files changed, 133 insertions, 42 deletions

diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index 92517203972..a75646db162 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -237,7 +237,7 @@ export default class Clusters {
   }
 
   addBannerCloseHandler(el, status) {
-    el.querySelector('.js-close-banner').addEventListener('click', () => {
+    el.querySelector('.js-close').addEventListener('click', () => {
       el.classList.add('hidden');
       this.setBannerDismissedState(status, true);
     });
diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue
index c86db28515f..412260da958 100644
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -1,9 +1,8 @@
 <script>
-import { GlLink, GlModalDirective, GlSprintf } from '@gitlab/ui';
+import { GlLink, GlModalDirective, GlSprintf, GlButton, GlAlert } from '@gitlab/ui';
 import { s__, __, sprintf } from '~/locale';
 import eventHub from '../event_hub';
 import identicon from '../../vue_shared/components/identicon.vue';
-import loadingButton from '../../vue_shared/components/loading_button.vue';
 import UninstallApplicationButton from './uninstall_application_button.vue';
 import UninstallApplicationConfirmationModal from './uninstall_application_confirmation_modal.vue';
 import UpdateApplicationConfirmationModal from './update_application_confirmation_modal.vue';
@@ -12,9 +11,10 @@ import { APPLICATION_STATUS, ELASTIC_STACK } from '../constants';
 
 export default {
   components: {
-    loadingButton,
+    GlButton,
     identicon,
     GlLink,
+    GlAlert,
     GlSprintf,
     UninstallApplicationButton,
     UninstallApplicationConfirmationModal,
@@ -382,24 +382,28 @@ export default {
             </template>
           </div>
 
-          <div
+          <gl-alert
             v-if="updateFailed && !isUpdating"
-            class="bs-callout bs-callout-danger cluster-application-banner mt-2 mb-0 js-cluster-application-update-details"
+            variant="danger"
+            :dismissible="false"
+            class="gl-mt-3 gl-mb-0 js-cluster-application-update-details"
           >
             {{ updateFailureDescription }}
-          </div>
+          </gl-alert>
           <template v-if="updateAvailable || updateFailed || isUpdating">
             <template v-if="updatingNeedsConfirmation">
-              <loading-button
+              <gl-button
                 v-gl-modal-directive="updateModalId"
-                class="btn btn-primary js-cluster-application-update-button mt-2"
+                class="js-cluster-application-update-button mt-2"
+                variant="info"
+                category="primary"
                 :loading="isUpdating"
                 :disabled="isUpdating"
-                :label="updateButtonLabel"
                 data-qa-selector="update_button_with_confirmation"
                 :data-qa-application="id"
-              />
-
+              >
+                {{ updateButtonLabel }}
+              </gl-button>
               <update-application-confirmation-modal
                 :application="id"
                 :application-title="title"
@@ -407,16 +411,19 @@ export default {
               />
             </template>
 
-            <loading-button
+            <gl-button
               v-else
-              class="btn btn-primary js-cluster-application-update-button mt-2"
+              class="js-cluster-application-update-button mt-2"
+              variant="info"
+              category="primary"
               :loading="isUpdating"
               :disabled="isUpdating"
-              :label="updateButtonLabel"
               data-qa-selector="update_button"
               :data-qa-application="id"
               @click="updateConfirmed"
-            />
+            >
+              {{ updateButtonLabel }}
+            </gl-button>
           </template>
         </div>
       </div>
@@ -431,16 +438,18 @@ export default {
           }}</a>
         </div>
         <div class="btn-group table-action-buttons">
-          <loading-button
+          <gl-button
             v-if="displayInstallButton"
             :loading="installButtonLoading"
             :disabled="disabled || installButtonDisabled"
-            :label="installButtonLabel"
             class="js-cluster-application-install-button"
+            variant="default"
             data-qa-selector="install_button"
             :data-qa-application="id"
             @click="installClicked"
-          />
+          >
+            {{ installButtonLabel }}
+          </gl-button>
           <uninstall-application-button
             v-if="displayUninstallButton"
             v-gl-modal-directive="uninstallModalId"
diff --git a/app/assets/javascripts/clusters/components/knative_domain_editor.vue b/app/assets/javascripts/clusters/components/knative_domain_editor.vue
index 1236d2a46c9..2617ea0bdea 100644
--- a/app/assets/javascripts/clusters/components/knative_domain_editor.vue
+++ b/app/assets/javascripts/clusters/components/knative_domain_editor.vue
@@ -6,8 +6,8 @@ import {
   GlLoadingIcon,
   GlSearchBoxByType,
   GlSprintf,
+  GlButton,
 } from '@gitlab/ui';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
 import { __, s__ } from '~/locale';
 
@@ -17,7 +17,7 @@ const { UPDATING, UNINSTALLING } = APPLICATION_STATUS;
 
 export default {
   components: {
-    LoadingButton,
+    GlButton,
     ClipboardButton,
     GlLoadingIcon,
     GlDeprecatedDropdown,
@@ -130,7 +130,7 @@ export default {
         <gl-search-box-by-type
           v-model.trim="searchQuery"
           :placeholder="s__('ClusterIntegration|Search domains')"
-          class="m-2"
+          class="gl-m-3"
         />
         <gl-deprecated-dropdown-item
           v-for="domain in filteredDomains"
@@ -215,13 +215,16 @@ export default {
         }}
       </p>
 
-      <loading-button
-        class="btn-success js-knative-save-domain-button mt-3 ml-3"
+      <gl-button
+        class="js-knative-save-domain-button gl-mt-5 gl-ml-5"
+        variant="success"
+        category="primary"
         :loading="saving"
         :disabled="saveButtonDisabled"
-        :label="saveButtonLabel"
         @click="$emit('save')"
-      />
+      >
+        {{ saveButtonLabel }}
+      </gl-button>
     </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/clusters/components/new_cluster.vue b/app/assets/javascripts/clusters/components/new_cluster.vue
new file mode 100644
index 00000000000..2e74ad073c5
--- /dev/null
+++ b/app/assets/javascripts/clusters/components/new_cluster.vue
@@ -0,0 +1,34 @@
+<script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { mapState } from 'vuex';
+import { s__ } from '~/locale';
+
+export default {
+  i18n: {
+    title: s__('ClusterIntegration|Enter the details for your Kubernetes cluster'),
+    information: s__(
+      'ClusterIntegration|Please enter access information for your Kubernetes cluster. If you need help, you can read our %{linkStart}documentation%{linkEnd} on Kubernetes',
+    ),
+  },
+  components: {
+    GlLink,
+    GlSprintf,
+  },
+  computed: {
+    ...mapState(['clusterConnectHelpPath']),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h4>{{ $options.i18n.title }}</h4>
+    <p>
+      <gl-sprintf :message="$options.i18n.information">
+        <template #link="{ content }">
+          <gl-link :href="clusterConnectHelpPath" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+  </div>
+</template>
diff --git a/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue b/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue
index 3e3b102f0aa..c157b04b4f5 100644
--- a/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue
+++ b/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue
@@ -1,6 +1,7 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import { escape } from 'lodash';
-import { GlModal, GlButton, GlDeprecatedButton, GlFormInput, GlSprintf } from '@gitlab/ui';
+import { GlModal, GlButton, GlFormInput, GlSprintf } from '@gitlab/ui';
 import SplitButton from '~/vue_shared/components/split_button.vue';
 import { s__, sprintf } from '~/locale';
 import csrf from '~/lib/utils/csrf';
@@ -28,7 +29,6 @@ export default {
     SplitButton,
     GlModal,
     GlButton,
-    GlDeprecatedButton,
     GlFormInput,
     GlSprintf,
   },
@@ -174,24 +174,31 @@ export default {
         }}</span>
       </template>
       <template #modal-footer>
-        <gl-deprecated-button variant="secondary" @click="handleCancel">{{
-          s__('Cancel')
-        }}</gl-deprecated-button>
+        <gl-button variant="secondary" @click="handleCancel">{{ s__('Cancel') }}</gl-button>
         <template v-if="confirmCleanup">
-          <gl-deprecated-button :disabled="!canSubmit" variant="warning" @click="handleSubmit">{{
-            s__('ClusterIntegration|Remove integration')
-          }}</gl-deprecated-button>
-          <gl-deprecated-button
+          <gl-button
+            :disabled="!canSubmit"
+            variant="warning"
+            category="primary"
+            @click="handleSubmit"
+            >{{ s__('ClusterIntegration|Remove integration') }}</gl-button
+          >
+          <gl-button
             :disabled="!canSubmit"
             variant="danger"
+            category="primary"
             @click="handleSubmit(true)"
-            >{{ s__('ClusterIntegration|Remove integration and resources') }}</gl-deprecated-button
+            >{{ s__('ClusterIntegration|Remove integration and resources') }}</gl-button
           >
         </template>
         <template v-else>
-          <gl-deprecated-button :disabled="!canSubmit" variant="danger" @click="handleSubmit">{{
-            s__('ClusterIntegration|Remove integration')
-          }}</gl-deprecated-button>
+          <gl-button
+            :disabled="!canSubmit"
+            variant="danger"
+            category="primary"
+            @click="handleSubmit"
+            >{{ s__('ClusterIntegration|Remove integration') }}</gl-button
+          >
         </template>
       </template>
     </gl-modal>
diff --git a/app/assets/javascripts/clusters/components/uninstall_application_button.vue b/app/assets/javascripts/clusters/components/uninstall_application_button.vue
index 8465312d84d..73191d6d84d 100644
--- a/app/assets/javascripts/clusters/components/uninstall_application_button.vue
+++ b/app/assets/javascripts/clusters/components/uninstall_application_button.vue
@@ -1,5 +1,5 @@
 <script>
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import { GlButton } from '@gitlab/ui';
 import { APPLICATION_STATUS } from '~/clusters/constants';
 import { __ } from '~/locale';
 
@@ -7,7 +7,7 @@ const { UPDATING, UNINSTALLING } = APPLICATION_STATUS;
 
 export default {
   components: {
-    LoadingButton,
+    GlButton,
   },
   props: {
     status: {
@@ -30,5 +30,7 @@ export default {
 </script>
 
 <template>
-  <loading-button :label="label" :disabled="disabled" :loading="loading" />
+  <gl-button :disabled="disabled" variant="default" :loading="loading">
+    {{ label }}
+  </gl-button>
 </template>
diff --git a/app/assets/javascripts/clusters/components/uninstall_application_confirmation_modal.vue b/app/assets/javascripts/clusters/components/uninstall_application_confirmation_modal.vue
index e33431d2ea1..f82f4dd5012 100644
--- a/app/assets/javascripts/clusters/components/uninstall_application_confirmation_modal.vue
+++ b/app/assets/javascripts/clusters/components/uninstall_application_confirmation_modal.vue
@@ -1,4 +1,5 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import { GlModal } from '@gitlab/ui';
 import trackUninstallButtonClickMixin from 'ee_else_ce/clusters/mixins/track_uninstall_button_click';
 import { sprintf, s__ } from '~/locale';
diff --git a/app/assets/javascripts/clusters/components/update_application_confirmation_modal.vue b/app/assets/javascripts/clusters/components/update_application_confirmation_modal.vue
index 04aa28e9b74..0aedc6e84fa 100644
--- a/app/assets/javascripts/clusters/components/update_application_confirmation_modal.vue
+++ b/app/assets/javascripts/clusters/components/update_application_confirmation_modal.vue
@@ -1,4 +1,5 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import { GlModal } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import { ELASTIC_STACK } from '../constants';
diff --git a/app/assets/javascripts/clusters/new_cluster.js b/app/assets/javascripts/clusters/new_cluster.js
new file mode 100644
index 00000000000..71f585fd307
--- /dev/null
+++ b/app/assets/javascripts/clusters/new_cluster.js
@@ -0,0 +1,19 @@
+import Vue from 'vue';
+import NewCluster from './components/new_cluster.vue';
+import { createStore } from './stores/new_cluster';
+
+export default () => {
+  const entryPoint = document.querySelector('#js-cluster-new');
+
+  if (!entryPoint) {
+    return null;
+  }
+
+  return new Vue({
+    el: '#js-cluster-new',
+    store: createStore(entryPoint.dataset),
+    render(createElement) {
+      return createElement(NewCluster);
+    },
+  });
+};
diff --git a/app/assets/javascripts/clusters/stores/new_cluster/index.js b/app/assets/javascripts/clusters/stores/new_cluster/index.js
new file mode 100644
index 00000000000..ae082c07f26
--- /dev/null
+++ b/app/assets/javascripts/clusters/stores/new_cluster/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/stores/new_cluster/state.js b/app/assets/javascripts/clusters/stores/new_cluster/state.js
new file mode 100644
index 00000000000..1ca1ac8de18
--- /dev/null
+++ b/app/assets/javascripts/clusters/stores/new_cluster/state.js
@@ -0,0 +1,3 @@
+export default (initialState = {}) => ({
+  clusterConnectHelpPath: initialState.clusterConnectHelpPath,
+});