Made the flash body class optional

10 files changed, 20 insertions, 19 deletions

diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index c48d5ee9f3d..7c42dcafd6b 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -10,7 +10,7 @@ const hideFlash = (flashEl, fadeTransition = true) => {
 
   flashEl.addEventListener('transitionend', () => {
     flashEl.remove();
-    document.body.classList.remove('flash-shown');
+    if (document.body.classList.contains('flash-show')) document.body.classList.remove('flash-shown');
   }, {
     once: true,
     passive: true,
@@ -65,6 +65,7 @@ const createFlash = function createFlash(
   parent = document,
   actionConfig = null,
   fadeTransition = true,
+  addBodyClass = false,
 ) {
   const flashContainer = parent.querySelector('.flash-container');
 
@@ -87,7 +88,7 @@ const createFlash = function createFlash(
 
   flashContainer.style.display = 'block';
 
-  document.body.classList.add('flash-shown');
+  if (addBodyClass) document.body.classList.add('flash-shown');
 
   return flashContainer;
 };
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 9ffc57358ea..f99228012f4 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -71,7 +71,7 @@ export default {
         })
         .then(() => this.setupEditor())
         .catch((err) => {
-          flash('Error setting up monaco. Please try again.');
+          flash('Error setting up monaco. Please try again.', 'alert', document, null, false, true);
           throw err;
         });
     },
diff --git a/app/assets/javascripts/ide/ide_router.js b/app/assets/javascripts/ide/ide_router.js
index a9cbf8e370f..a7fb9e0588a 100644
--- a/app/assets/javascripts/ide/ide_router.js
+++ b/app/assets/javascripts/ide/ide_router.js
@@ -84,13 +84,13 @@ router.beforeEach((to, from, next) => {
           }
         })
         .catch((e) => {
-          flash('Error while loading the branch files. Please try again.');
+          flash('Error while loading the branch files. Please try again.', 'alert', document, null, false, true);
           throw e;
         });
       }
     })
     .catch((e) => {
-      flash('Error while loading the project data. Please try again.');
+      flash('Error while loading the project data. Please try again.', 'alert', document, null, false, true);
       throw e;
     });
   }
diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js
index b30358eed8c..ed7d446e775 100644
--- a/app/assets/javascripts/ide/stores/actions.js
+++ b/app/assets/javascripts/ide/stores/actions.js
@@ -3,7 +3,7 @@ import { visitUrl } from '../../lib/utils/url_utility';
 import flash from '../../flash';
 import service from '../services';
 import * as types from './mutation_types';
-import { stripeHtml } from '../../lib/utils/text_utility';
+import { stripHtml } from '../../lib/utils/text_utility';
 
 export const redirectToUrl = (_, url) => visitUrl(url);
 
@@ -82,7 +82,7 @@ export const checkCommitStatus = ({ state }) =>
 
       return false;
     })
-    .catch(() => flash('Error checking branch data. Please try again.'));
+    .catch(() => flash('Error checking branch data. Please try again.', 'alert', document, null, false, true));
 
 export const commitChanges = (
   { commit, state, dispatch, getters },
@@ -145,7 +145,7 @@ export const commitChanges = (
     .catch((err) => {
       let errMsg = 'Error committing changes. Please try again.';
       if (err.responseJSON && err.responseJSON.message) {
-        errMsg += ` (${stripeHtml(err.responseJSON.message)})`;
+        errMsg += ` (${stripHtml(err.responseJSON.message)})`;
       }
       flash(errMsg);
       window.dispatchEvent(new Event('resize'));
diff --git a/app/assets/javascripts/ide/stores/actions/branch.js b/app/assets/javascripts/ide/stores/actions/branch.js
index 32bdf7fec22..589ec28c6a4 100644
--- a/app/assets/javascripts/ide/stores/actions/branch.js
+++ b/app/assets/javascripts/ide/stores/actions/branch.js
@@ -17,7 +17,7 @@ export const getBranchData = (
         resolve(data);
       })
       .catch(() => {
-        flash('Error loading branch data. Please try again.');
+        flash('Error loading branch data. Please try again.', 'alert', document, null, false, true);
         reject(new Error(`Branch not loaded - ${projectId}/${branchId}`));
       });
   } else {
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index 512a7253801..670af2fb89e 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -69,7 +69,7 @@ export const getFileData = ({ state, commit, dispatch }, file) => {
     })
     .catch(() => {
       commit(types.TOGGLE_LOADING, file);
-      flash('Error loading file data. Please try again.');
+      flash('Error loading file data. Please try again.', 'alert', document, null, false, true);
     });
 };
 
@@ -77,7 +77,7 @@ export const getRawFileData = ({ commit, dispatch }, file) => service.getRawFile
   .then((raw) => {
     commit(types.SET_FILE_RAW_DATA, { file, raw });
   })
-  .catch(() => flash('Error loading file content. Please try again.'));
+  .catch(() => flash('Error loading file content. Please try again.', 'alert', document, null, false, true));
 
 export const changeFileContent = ({ commit }, { file, content }) => {
   commit(types.UPDATE_FILE_CONTENT, { file, content });
@@ -118,7 +118,7 @@ export const createTempFile = ({ state, commit, dispatch }, { projectId, branchI
     url: newUrl,
   });
 
-  if (findEntry(parent.tree, 'blob', file.name)) return flash(`The name "${file.name}" is already taken in this directory.`);
+  if (findEntry(parent.tree, 'blob', file.name)) return flash(`The name "${file.name}" is already taken in this directory.`, 'alert', document, null, false, true);
 
   commit(types.CREATE_TMP_FILE, {
     parent,
diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js
index 02d4bd87ab0..faeceb430a2 100644
--- a/app/assets/javascripts/ide/stores/actions/project.js
+++ b/app/assets/javascripts/ide/stores/actions/project.js
@@ -18,7 +18,7 @@ export const getProjectData = (
       resolve(data);
     })
     .catch(() => {
-      flash('Error loading project data. Please try again.');
+      flash('Error loading project data. Please try again.', 'alert', document, null, false, true);
       reject(new Error(`Project not loaded ${namespace}/${projectId}`));
     });
   } else {
diff --git a/app/assets/javascripts/ide/stores/actions/tree.js b/app/assets/javascripts/ide/stores/actions/tree.js
index 25909400a75..302ba45edee 100644
--- a/app/assets/javascripts/ide/stores/actions/tree.js
+++ b/app/assets/javascripts/ide/stores/actions/tree.js
@@ -52,7 +52,7 @@ export const getTreeData = (
         resolve(data);
       })
       .catch((e) => {
-        flash('Error loading tree data. Please try again.');
+        flash('Error loading tree data. Please try again.', 'alert', document, null, false, true);
         if (tree) commit(types.TOGGLE_LOADING, tree);
         reject(e);
       });
@@ -151,7 +151,7 @@ export const getLastCommitData = ({ state, commit, dispatch, getters }, tree = s
 
       dispatch('getLastCommitData', tree);
     })
-    .catch(() => flash('Error fetching log data.'));
+    .catch(() => flash('Error fetching log data.', 'alert', document, null, false, true));
 };
 
 export const updateDirectoryData = (
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index cb6e06ea584..62d80c4a649 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -72,4 +72,4 @@ export function capitalizeFirstCharacter(text) {
  * @param {*} replace
  * @returns {String}
  */
-export const stripeHtml = (string, replace = '') => string.replace(/<[^>]*>/g, replace);
+export const stripHtml = (string, replace = '') => string.replace(/<[^>]*>/g, replace);
diff --git a/spec/javascripts/lib/utils/text_utility_spec.js b/spec/javascripts/lib/utils/text_utility_spec.js
index 6f8dad6b835..69a23d7b2f3 100644
--- a/spec/javascripts/lib/utils/text_utility_spec.js
+++ b/spec/javascripts/lib/utils/text_utility_spec.js
@@ -63,13 +63,13 @@ describe('text_utility', () => {
     });
   });
 
-  describe('stripeHtml', () => {
+  describe('stripHtml', () => {
     it('replaces html tag with the default replacement', () => {
-      expect(textUtils.stripeHtml('This is a text with <p>html</p>.')).toEqual('This is a text with html.');
+      expect(textUtils.stripHtml('This is a text with <p>html</p>.')).toEqual('This is a text with html.');
     });
 
     it('replaces html tags with the provided replacement', () => {
-      expect(textUtils.stripeHtml('This is a text with <p>html</p>.', ' ')).toEqual('This is a text with  html .');
+      expect(textUtils.stripHtml('This is a text with <p>html</p>.', ' ')).toEqual('This is a text with  html .');
     });
   });
 });