Add latest changes from gitlab-org/gitlab@master

2 files changed, 117 insertions, 11 deletions

diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue
index dcc0fa501a3..a4ca2a6c857 100644
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -8,8 +8,9 @@ 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';
 
-import { APPLICATION_STATUS } from '../constants';
+import { APPLICATION_STATUS, ELASTIC_STACK } from '../constants';
 
 export default {
   components: {
@@ -18,6 +19,7 @@ export default {
     GlLink,
     UninstallApplicationButton,
     UninstallApplicationConfirmationModal,
+    UpdateApplicationConfirmationModal,
   },
   directives: {
     GlModalDirective,
@@ -233,6 +235,17 @@ export default {
 
       return label;
     },
+    updatingNeedsConfirmation() {
+      if (this.version) {
+        const majorVersion = parseInt(this.version.split('.')[0], 10);
+
+        if (!Number.isNaN(majorVersion)) {
+          return this.id === ELASTIC_STACK && majorVersion < 3;
+        }
+      }
+
+      return false;
+    },
     isUpdating() {
       // Since upgrading is handled asynchronously on the backend we need this check to prevent any delay on the frontend
       return this.status === APPLICATION_STATUS.UPDATING;
@@ -248,6 +261,12 @@ export default {
         title: this.title,
       });
     },
+    updateModalId() {
+      return `update-${this.id}`;
+    },
+    uninstallModalId() {
+      return `uninstall-${this.id}`;
+    },
   },
   watch: {
     updateSuccessful(updateSuccessful) {
@@ -268,7 +287,7 @@ export default {
         params: this.installApplicationRequestParams,
       });
     },
-    updateClicked() {
+    updateConfirmed() {
       eventHub.$emit('updateApplication', {
         id: this.id,
         params: this.installApplicationRequestParams,
@@ -356,14 +375,36 @@ export default {
           >
             {{ updateFailureDescription }}
           </div>
-          <loading-button
-            v-if="updateAvailable || updateFailed || isUpdating"
-            class="btn btn-primary js-cluster-application-update-button mt-2"
-            :loading="isUpdating"
-            :disabled="isUpdating"
-            :label="updateButtonLabel"
-            @click="updateClicked"
-          />
+          <template v-if="updateAvailable || updateFailed || isUpdating">
+            <template v-if="updatingNeedsConfirmation">
+              <loading-button
+                v-gl-modal-directive="updateModalId"
+                class="btn btn-primary js-cluster-application-update-button mt-2"
+                :loading="isUpdating"
+                :disabled="isUpdating"
+                :label="updateButtonLabel"
+                data-qa-selector="update_button_with_confirmation"
+                :data-qa-application="id"
+              />
+
+              <update-application-confirmation-modal
+                :application="id"
+                :application-title="title"
+                @confirm="updateConfirmed()"
+              />
+            </template>
+
+            <loading-button
+              v-else
+              class="btn btn-primary js-cluster-application-update-button mt-2"
+              :loading="isUpdating"
+              :disabled="isUpdating"
+              :label="updateButtonLabel"
+              data-qa-selector="update_button"
+              :data-qa-application="id"
+              @click="updateConfirmed"
+            />
+          </template>
         </div>
       </div>
       <div
@@ -389,7 +430,7 @@ export default {
           />
           <uninstall-application-button
             v-if="displayUninstallButton"
-            v-gl-modal-directive="'uninstall-' + id"
+            v-gl-modal-directive="uninstallModalId"
             :status="status"
             data-qa-selector="uninstall_button"
             :data-qa-application="id"
diff --git a/app/assets/javascripts/clusters/components/update_application_confirmation_modal.vue b/app/assets/javascripts/clusters/components/update_application_confirmation_modal.vue
new file mode 100644
index 00000000000..04aa28e9b74
--- /dev/null
+++ b/app/assets/javascripts/clusters/components/update_application_confirmation_modal.vue
@@ -0,0 +1,65 @@
+<script>
+import { GlModal } from '@gitlab/ui';
+import { sprintf, s__ } from '~/locale';
+import { ELASTIC_STACK } from '../constants';
+
+const CUSTOM_APP_WARNING_TEXT = {
+  [ELASTIC_STACK]: s__(
+    'ClusterIntegration|Your Elasticsearch cluster will be re-created during this upgrade. Your logs will be re-indexed, and you will lose historical logs from hosts terminated in the last 30 days.',
+  ),
+};
+
+export default {
+  components: {
+    GlModal,
+  },
+  props: {
+    application: {
+      type: String,
+      required: true,
+    },
+    applicationTitle: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    title() {
+      return sprintf(s__('ClusterIntegration|Update %{appTitle}'), {
+        appTitle: this.applicationTitle,
+      });
+    },
+    warningText() {
+      return sprintf(
+        s__('ClusterIntegration|You are about to update %{appTitle} on your cluster.'),
+        {
+          appTitle: this.applicationTitle,
+        },
+      );
+    },
+    customAppWarningText() {
+      return CUSTOM_APP_WARNING_TEXT[this.application];
+    },
+    modalId() {
+      return `update-${this.application}`;
+    },
+  },
+  methods: {
+    confirmUpdate() {
+      this.$emit('confirm');
+    },
+  },
+};
+</script>
+<template>
+  <gl-modal
+    ok-variant="danger"
+    cancel-variant="light"
+    :ok-title="title"
+    :modal-id="modalId"
+    :title="title"
+    @ok="confirmUpdate()"
+  >
+    {{ warningText }} <span v-html="customAppWarningText"></span>
+  </gl-modal>
+</template>