diff options
author | Luke "Jared" Bennett <lbennett@gitlab.com> | 2017-05-05 20:59:41 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-05-05 20:59:41 +0300 |
commit | bef42d9a36bf465878e0edc19c9e154f73f12b13 (patch) | |
tree | 0609f74a8e1824c2450c26dcffe469b2d9e5e92e /app/assets/javascripts/filtered_search | |
parent | b81535351023a3b19870ce052d8c3d0563391686 (diff) |
Fallback localstorage cases
Diffstat (limited to 'app/assets/javascripts/filtered_search')
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; |