4 files changed, 50 insertions, 0 deletions
diff --git a/app/assets/javascripts/frequent_items/store/actions.js b/app/assets/javascripts/frequent_items/store/actions.js
index babc2ef2e32..e5ef49ec402 100644
--- a/app/assets/javascripts/frequent_items/store/actions.js
+++ b/app/assets/javascripts/frequent_items/store/actions.js
@@ -12,6 +12,10 @@ export const setStorageKey = ({ commit }, key) => {
   commit(types.SET_STORAGE_KEY, key);
 };
 
+export const toggleItemsListEditablity = ({ commit }) => {
+  commit(types.TOGGLE_ITEMS_LIST_EDITABILITY);
+};
+
 export const requestFrequentItems = ({ commit }) => {
   commit(types.REQUEST_FREQUENT_ITEMS);
 };
@@ -81,3 +85,28 @@ export const setSearchQuery = ({ commit, dispatch }, query) => {
     dispatch('fetchFrequentItems');
   }
 };
+
+export const removeFrequentItemSuccess = ({ commit }, itemId) => {
+  commit(types.RECEIVE_REMOVE_FREQUENT_ITEM_SUCCESS, itemId);
+};
+
+export const removeFrequentItemError = ({ commit }) => {
+  commit(types.RECEIVE_REMOVE_FREQUENT_ITEM_ERROR);
+};
+
+export const removeFrequentItem = ({ state, dispatch }, itemId) => {
+  if (AccessorUtilities.canUseLocalStorage()) {
+    try {
+      const storedRawItems = JSON.parse(localStorage.getItem(state.storageKey));
+      localStorage.setItem(
+        state.storageKey,
+        JSON.stringify(storedRawItems.filter((item) => item.id !== itemId)),
+      );
+      dispatch('removeFrequentItemSuccess', itemId);
+    } catch {
+      dispatch('removeFrequentItemError');
+    }
+  } else {
+    dispatch('removeFrequentItemError');
+  }
+};
diff --git a/app/assets/javascripts/frequent_items/store/mutation_types.js b/app/assets/javascripts/frequent_items/store/mutation_types.js
index cbe2c9401ad..9c9346081e9 100644
--- a/app/assets/javascripts/frequent_items/store/mutation_types.js
+++ b/app/assets/javascripts/frequent_items/store/mutation_types.js
@@ -1,9 +1,12 @@
 export const SET_NAMESPACE = 'SET_NAMESPACE';
 export const SET_STORAGE_KEY = 'SET_STORAGE_KEY';
 export const SET_SEARCH_QUERY = 'SET_SEARCH_QUERY';
+export const TOGGLE_ITEMS_LIST_EDITABILITY = 'TOGGLE_ITEMS_LIST_EDITABILITY';
 export const REQUEST_FREQUENT_ITEMS = 'REQUEST_FREQUENT_ITEMS';
 export const RECEIVE_FREQUENT_ITEMS_SUCCESS = 'RECEIVE_FREQUENT_ITEMS_SUCCESS';
 export const RECEIVE_FREQUENT_ITEMS_ERROR = 'RECEIVE_FREQUENT_ITEMS_ERROR';
 export const REQUEST_SEARCHED_ITEMS = 'REQUEST_SEARCHED_ITEMS';
 export const RECEIVE_SEARCHED_ITEMS_SUCCESS = 'RECEIVE_SEARCHED_ITEMS_SUCCESS';
 export const RECEIVE_SEARCHED_ITEMS_ERROR = 'RECEIVE_SEARCHED_ITEMS_ERROR';
+export const RECEIVE_REMOVE_FREQUENT_ITEM_SUCCESS = 'RECEIVE_REMOVE_FREQUENT_ITEM_SUCCESS';
+export const RECEIVE_REMOVE_FREQUENT_ITEM_ERROR = 'RECEIVE_REMOVE_FREQUENT_ITEM_ERROR';
diff --git a/app/assets/javascripts/frequent_items/store/mutations.js b/app/assets/javascripts/frequent_items/store/mutations.js
index eee00243867..65f54e6ed05 100644
--- a/app/assets/javascripts/frequent_items/store/mutations.js
+++ b/app/assets/javascripts/frequent_items/store/mutations.js
@@ -20,6 +20,11 @@ export default {
       hasSearchQuery,
     });
   },
+  [types.TOGGLE_ITEMS_LIST_EDITABILITY](state) {
+    Object.assign(state, {
+      isItemsListEditable: !state.isItemsListEditable,
+    });
+  },
   [types.REQUEST_FREQUENT_ITEMS](state) {
     Object.assign(state, {
       isLoadingItems: true,
@@ -69,4 +74,15 @@ export default {
       isFetchFailed: true,
     });
   },
+  [types.RECEIVE_REMOVE_FREQUENT_ITEM_SUCCESS](state, itemId) {
+    Object.assign(state, {
+      items: state.items.filter((item) => item.id !== itemId),
+      isItemRemovalFailed: false,
+    });
+  },
+  [types.RECEIVE_REMOVE_FREQUENT_ITEM_ERROR](state) {
+    Object.assign(state, {
+      isItemRemovalFailed: true,
+    });
+  },
 };
diff --git a/app/assets/javascripts/frequent_items/store/state.js b/app/assets/javascripts/frequent_items/store/state.js
index c5c0b25fdf2..ee94e9cd221 100644
--- a/app/assets/javascripts/frequent_items/store/state.js
+++ b/app/assets/javascripts/frequent_items/store/state.js
@@ -5,5 +5,7 @@ export default ({ dropdownType = '' } = {}) => ({
   searchQuery: '',
   isLoadingItems: false,
   isFetchFailed: false,
+  isItemsListEditable: false,
+  isItemRemovalFailed: false,
   items: [],
 });