Fallback localstorage cases

6 files changed, 50 insertions, 8 deletions

diff --git a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js
index 9126422b335..15052dbd362 100644
--- a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js
+++ b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js
@@ -8,6 +8,11 @@ export default {
       type: Array,
       required: true,
     },
+    isLocalStorageAvailable: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
 
   computed: {
@@ -47,7 +52,12 @@ export default {
 
   template: `
     <div>
-      <ul v-if="hasItems">
+      <div
+        v-if="!isLocalStorageAvailable"
+        class="dropdown-info-note">
+        This feature requires local storage to be enabled
+      </div>
+      <ul v-else-if="hasItems">
         <li
           v-for="(item, index) in processedItems"
           :key="index">
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index 36af0674ac6..9fea563370f 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -1,5 +1,3 @@
-/* global Flash */
-
 import FilteredSearchContainer from './container';
 import RecentSearchesRoot from './recent_searches_root';
 import RecentSearchesStore from './stores/recent_searches_store';
@@ -15,7 +13,9 @@ class FilteredSearchManager {
     this.tokensContainer = this.container.querySelector('.tokens-container');
     this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
 
-    this.recentSearchesStore = new RecentSearchesStore();
+    this.recentSearchesStore = new RecentSearchesStore({
+      isLocalStorageAvailable: RecentSearchesService.isAvailable(),
+    });
     let recentSearchesKey = 'issue-recent-searches';
     if (page === 'merge_requests') {
       recentSearchesKey = 'merge-request-recent-searches';
@@ -24,9 +24,10 @@ class FilteredSearchManager {
 
     // Fetch recent searches from localStorage
     this.fetchingRecentSearchesPromise = this.recentSearchesService.fetch()
-      .catch(() => {
+      .catch((error) => {
+        if (error.name === 'RecentSearchesServiceError') return undefined;
         // eslint-disable-next-line no-new
-        new Flash('An error occured while parsing recent searches');
+        new window.Flash('An error occured while parsing recent searches');
         // Gracefully fail to empty array
         return [];
       })
diff --git a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
index 453ecccc6fc..59ce0587e1e 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
@@ -183,6 +183,9 @@ class FilteredSearchVisualTokens {
 
   static moveInputToTheRight() {
     const input = FilteredSearchContainer.container.querySelector('.filtered-search');
+
+    if (!input) return;
+
     const inputLi = input.parentElement;
     const tokenContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
 
diff --git a/app/assets/javascripts/filtered_search/recent_searches_root.js b/app/assets/javascripts/filtered_search/recent_searches_root.js
index 4e38409e12a..b2e6f63aacf 100644
--- a/app/assets/javascripts/filtered_search/recent_searches_root.js
+++ b/app/assets/javascripts/filtered_search/recent_searches_root.js
@@ -29,12 +29,15 @@ class RecentSearchesRoot {
   }
 
   render() {
+    const state = this.store.state;
     this.vm = new Vue({
       el: this.wrapperElement,
-      data: this.store.state,
+      data() { return state; },
       template: `
         <recent-searches-dropdown-content
-          :items="recentSearches" />
+          :items="recentSearches"
+          :is-local-storage-available="isLocalStorageAvailable"
+          />
       `,
       components: {
         'recent-searches-dropdown-content': RecentSearchesDropdownContent,
diff --git a/app/assets/javascripts/filtered_search/services/recent_searches_service.js b/app/assets/javascripts/filtered_search/services/recent_searches_service.js
index 3e402d5aed0..a056dea928d 100644
--- a/app/assets/javascripts/filtered_search/services/recent_searches_service.js
+++ b/app/assets/javascripts/filtered_search/services/recent_searches_service.js
@@ -1,9 +1,17 @@
+import RecentSearchesServiceError from './recent_searches_service_error';
+import AccessorUtilities from '../../lib/utils/accessor';
+
 class RecentSearchesService {
   constructor(localStorageKey = 'issuable-recent-searches') {
     this.localStorageKey = localStorageKey;
   }
 
   fetch() {
+    if (!RecentSearchesService.isAvailable()) {
+      const error = new RecentSearchesServiceError();
+      return Promise.reject(error);
+    }
+
     const input = window.localStorage.getItem(this.localStorageKey);
 
     let searches = [];
@@ -19,8 +27,14 @@ class RecentSearchesService {
   }
 
   save(searches = []) {
+    if (!RecentSearchesService.isAvailable()) return;
+
     window.localStorage.setItem(this.localStorageKey, JSON.stringify(searches));
   }
+
+  static isAvailable() {
+    return AccessorUtilities.isLocalStorageAccessSafe();
+  }
 }
 
 export default RecentSearchesService;
diff --git a/app/assets/javascripts/filtered_search/services/recent_searches_service_error.js b/app/assets/javascripts/filtered_search/services/recent_searches_service_error.js
new file mode 100644
index 00000000000..5917b223d63
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/services/recent_searches_service_error.js
@@ -0,0 +1,11 @@
+class RecentSearchesServiceError {
+  constructor(message) {
+    this.name = 'RecentSearchesServiceError';
+    this.message = message || 'Recent Searches Service is unavailable';
+  }
+}
+
+// Can't use `extends` for builtin prototypes and get true inheritance yet
+RecentSearchesServiceError.prototype = Error.prototype;
+
+export default RecentSearchesServiceError;