Add persistent flash messages

4 files changed, 58 insertions, 2 deletions

diff --git a/app/assets/javascripts/lib/utils/flash_queue.js b/app/assets/javascripts/lib/utils/flash_queue.js
new file mode 100644
index 00000000000..f77afddbae3
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/flash_queue.js
@@ -0,0 +1,46 @@
+import _ from 'underscore';
+import createFlash from '~/flash';
+import AccessorUtilities from '~/lib/utils/accessor';
+
+const FLASH_QUEUE_KEY = 'flash-key';
+
+export function popFlashMessage() {
+  const page = $('body').attr('data-page');
+  let savedFlashMessages;
+  let returnVal = false;
+
+  if (!page) {
+    return returnVal;
+  }
+
+  if (AccessorUtilities.isLocalStorageAccessSafe()) {
+    savedFlashMessages = JSON.parse(window.localStorage.getItem(FLASH_QUEUE_KEY));
+    const queuedMessage = _.findWhere(savedFlashMessages, { bodyData: page });
+    if (queuedMessage) {
+      const queuedMessageIndex = _.findIndex(savedFlashMessages, { bodyData: page });
+      createFlash(queuedMessage.message, queuedMessage.type);
+      savedFlashMessages.splice(queuedMessageIndex, 1);
+      window.localStorage.setItem(FLASH_QUEUE_KEY, JSON.stringify(savedFlashMessages));
+    }
+    returnVal = true;
+  }
+
+  return returnVal;
+}
+
+export function saveFlashMessage(bodyData, message, type) {
+  let savedFlashMessages;
+
+  if (AccessorUtilities.isLocalStorageAccessSafe()) {
+    savedFlashMessages = JSON.parse(window.localStorage.getItem(FLASH_QUEUE_KEY));
+    if (!savedFlashMessages) {
+      savedFlashMessages = [];
+    }
+    savedFlashMessages.push({
+      bodyData,
+      message,
+      type,
+    });
+    window.localStorage.setItem(FLASH_QUEUE_KEY, JSON.stringify(savedFlashMessages));
+  }
+}
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 659dc9eaa1f..f76e2ae47a0 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -33,6 +33,7 @@ import './milestone_select';
 import './projects_dropdown';
 import './render_gfm';
 import initBreadcrumbs from './breadcrumb';
+import { popFlashMessage } from './lib/utils/flash_queue';
 
 import initDispatcher from './dispatcher';
 
@@ -262,4 +263,5 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   initDispatcher();
+  popFlashMessage();
 });
diff --git a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
index eb49a5780bd..af85c3915df 100644
--- a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
+++ b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
@@ -1,6 +1,7 @@
 <script>
   import axios from '~/lib/utils/axios_utils';
   import createFlash from '~/flash';
+  import { saveFlashMessage } from '~/lib/utils/flash_queue';
   import GlModal from '~/vue_shared/components/gl_modal.vue';
   import { redirectTo } from '~/lib/utils/url_utility';
   import { s__, sprintf } from '~/locale';
@@ -36,7 +37,10 @@
         return axios.post(this.url)
           .then((response) => {
             eventHub.$emit('promoteMilestoneModal.requestFinished', { milestoneUrl: this.url, successful: true });
-            redirectTo(response.request.responseURL);
+            const responseURL = new URL(response.request.responseURL);
+            const bodyData = responseURL.searchParams.get('body_data');
+            saveFlashMessage(bodyData, `${this.milestoneTitle} promoted to group milestone`, 'notice');
+            redirectTo(`${responseURL.protocol}//${responseURL.host}${responseURL.pathname}`);
           })
           .catch((error) => {
             eventHub.$emit('promoteMilestoneModal.requestFinished', { milestoneUrl: this.url, successful: false });
diff --git a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
index a48784f08a4..a6388d886e2 100644
--- a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
+++ b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
@@ -1,5 +1,6 @@
 <script>
   import axios from '~/lib/utils/axios_utils';
+  import { saveFlashMessage } from '~/lib/utils/flash_queue';
   import createFlash from '~/flash';
   import GlModal from '~/vue_shared/components/gl_modal.vue';
   import { redirectTo } from '~/lib/utils/url_utility';
@@ -50,7 +51,10 @@
         return axios.post(this.url)
           .then((response) => {
             eventHub.$emit('promoteLabelModal.requestFinished', { labelUrl: this.url, successful: true });
-            redirectTo(response.request.responseURL);
+            const responseURL = new URL(response.request.responseURL);
+            const bodyData = responseURL.searchParams.get('body_data');
+            saveFlashMessage(bodyData, `${this.labelTitle} promoted to group label`, 'notice');
+            redirectTo(`${responseURL.protocol}//${responseURL.host}${responseURL.pathname}`);
           })
           .catch((error) => {
             eventHub.$emit('promoteLabelModal.requestFinished', { labelUrl: this.url, successful: false });