Resolve "Add dropdown to Groups link in top bar"

15 files changed, 743 insertions, 0 deletions

diff --git a/app/assets/javascripts/frequent_items/components/app.vue b/app/assets/javascripts/frequent_items/components/app.vue
new file mode 100644
index 00000000000..2f030de8967
--- /dev/null
+++ b/app/assets/javascripts/frequent_items/components/app.vue
@@ -0,0 +1,122 @@
+<script>
+import { mapState, mapActions, mapGetters } from 'vuex';
+import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+import AccessorUtilities from '~/lib/utils/accessor';
+import eventHub from '../event_hub';
+import store from '../store/';
+import { FREQUENT_ITEMS, STORAGE_KEY } from '../constants';
+import { isMobile, updateExistingFrequentItem } from '../utils';
+import FrequentItemsSearchInput from './frequent_items_search_input.vue';
+import FrequentItemsList from './frequent_items_list.vue';
+import frequentItemsMixin from './frequent_items_mixin';
+
+export default {
+  store,
+  components: {
+    LoadingIcon,
+    FrequentItemsSearchInput,
+    FrequentItemsList,
+  },
+  mixins: [frequentItemsMixin],
+  props: {
+    currentUserName: {
+      type: String,
+      required: true,
+    },
+    currentItem: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState(['searchQuery', 'isLoadingItems', 'isFetchFailed', 'items']),
+    ...mapGetters(['hasSearchQuery']),
+    translations() {
+      return this.getTranslations(['loadingMessage', 'header']);
+    },
+  },
+  created() {
+    const { namespace, currentUserName, currentItem } = this;
+    const storageKey = `${currentUserName}/${STORAGE_KEY[namespace]}`;
+
+    this.setNamespace(namespace);
+    this.setStorageKey(storageKey);
+
+    if (currentItem.id) {
+      this.logItemAccess(storageKey, currentItem);
+    }
+
+    eventHub.$on(`${this.namespace}-dropdownOpen`, this.dropdownOpenHandler);
+  },
+  beforeDestroy() {
+    eventHub.$off(`${this.namespace}-dropdownOpen`, this.dropdownOpenHandler);
+  },
+  methods: {
+    ...mapActions(['setNamespace', 'setStorageKey', 'fetchFrequentItems']),
+    dropdownOpenHandler() {
+      if (this.searchQuery === '' || isMobile()) {
+        this.fetchFrequentItems();
+      }
+    },
+    logItemAccess(storageKey, item) {
+      if (!AccessorUtilities.isLocalStorageAccessSafe()) {
+        return false;
+      }
+
+      // Check if there's any frequent items list set
+      const storedRawItems = localStorage.getItem(storageKey);
+      const storedFrequentItems = storedRawItems
+        ? JSON.parse(storedRawItems)
+        : [{ ...item, frequency: 1 }]; // No frequent items list set, set one up.
+
+      // Check if item already exists in list
+      const itemMatchIndex = storedFrequentItems.findIndex(
+        frequentItem => frequentItem.id === item.id,
+      );
+
+      if (itemMatchIndex > -1) {
+        storedFrequentItems[itemMatchIndex] = updateExistingFrequentItem(
+          storedFrequentItems[itemMatchIndex],
+          item,
+        );
+      } else {
+        if (storedFrequentItems.length === FREQUENT_ITEMS.MAX_COUNT) {
+          storedFrequentItems.shift();
+        }
+
+        storedFrequentItems.push({ ...item, frequency: 1 });
+      }
+
+      return localStorage.setItem(storageKey, JSON.stringify(storedFrequentItems));
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <frequent-items-search-input
+      :namespace="namespace"
+    />
+    <loading-icon
+      v-if="isLoadingItems"
+      :label="translations.loadingMessage"
+      class="loading-animation prepend-top-20"
+      size="2"
+    />
+    <div
+      v-if="!isLoadingItems && !hasSearchQuery"
+      class="section-header"
+    >
+      {{ translations.header }}
+    </div>
+    <frequent-items-list
+      v-if="!isLoadingItems"
+      :items="items"
+      :namespace="namespace"
+      :has-search-query="hasSearchQuery"
+      :is-fetch-failed="isFetchFailed"
+      :matcher="searchQuery"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_list.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list.vue
new file mode 100644
index 00000000000..8e511aa2a36
--- /dev/null
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_list.vue
@@ -0,0 +1,78 @@
+<script>
+import FrequentItemsListItem from './frequent_items_list_item.vue';
+import frequentItemsMixin from './frequent_items_mixin';
+
+export default {
+  components: {
+    FrequentItemsListItem,
+  },
+  mixins: [frequentItemsMixin],
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    hasSearchQuery: {
+      type: Boolean,
+      required: true,
+    },
+    isFetchFailed: {
+      type: Boolean,
+      required: true,
+    },
+    matcher: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    translations() {
+      return this.getTranslations([
+        'itemListEmptyMessage',
+        'itemListErrorMessage',
+        'searchListEmptyMessage',
+        'searchListErrorMessage',
+      ]);
+    },
+    isListEmpty() {
+      return this.items.length === 0;
+    },
+    listEmptyMessage() {
+      if (this.hasSearchQuery) {
+        return this.isFetchFailed
+          ? this.translations.searchListErrorMessage
+          : this.translations.searchListEmptyMessage;
+      }
+
+      return this.isFetchFailed
+        ? this.translations.itemListErrorMessage
+        : this.translations.itemListEmptyMessage;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="frequent-items-list-container">
+    <ul class="list-unstyled">
+      <li
+        v-if="isListEmpty"
+        :class="{ 'section-failure': isFetchFailed }"
+        class="section-empty"
+      >
+        {{ listEmptyMessage }}
+      </li>
+      <frequent-items-list-item
+        v-for="item in items"
+        v-else
+        :key="item.id"
+        :item-id="item.id"
+        :item-name="item.name"
+        :namespace="item.namespace"
+        :web-url="item.webUrl"
+        :avatar-url="item.avatarUrl"
+        :matcher="matcher"
+      />
+    </ul>
+  </div>
+</template>
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
new file mode 100644
index 00000000000..1f1665ff7fe
--- /dev/null
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
@@ -0,0 +1,117 @@
+<script>
+/* eslint-disable vue/require-default-prop, vue/require-prop-types */
+import Identicon from '../../vue_shared/components/identicon.vue';
+
+export default {
+  components: {
+    Identicon,
+  },
+  props: {
+    matcher: {
+      type: String,
+      required: false,
+    },
+    itemId: {
+      type: Number,
+      required: true,
+    },
+    itemName: {
+      type: String,
+      required: true,
+    },
+    namespace: {
+      type: String,
+      required: false,
+    },
+    webUrl: {
+      type: String,
+      required: true,
+    },
+    avatarUrl: {
+      required: true,
+      validator(value) {
+        return value === null || typeof value === 'string';
+      },
+    },
+  },
+  computed: {
+    hasAvatar() {
+      return this.avatarUrl !== null;
+    },
+    highlightedItemName() {
+      if (this.matcher) {
+        const matcherRegEx = new RegExp(this.matcher, 'gi');
+        const matches = this.itemName.match(matcherRegEx);
+
+        if (matches && matches.length > 0) {
+          return this.itemName.replace(matches[0], `<b>${matches[0]}</b>`);
+        }
+      }
+      return this.itemName;
+    },
+    /**
+     * Smartly truncates item namespace by doing two things;
+     * 1. Only include Group names in path by removing item name
+     * 2. Only include first and last group names in the path
+     *    when namespace has more than 2 groups present
+     *
+     * First part (removal of item name from namespace) can be
+     * done from backend but doing so involves migration of
+     * existing item namespaces which is not wise thing to do.
+     */
+    truncatedNamespace() {
+      if (!this.namespace) {
+        return null;
+      }
+      const namespaceArr = this.namespace.split(' / ');
+
+      namespaceArr.splice(-1, 1);
+      let namespace = namespaceArr.join(' / ');
+
+      if (namespaceArr.length > 2) {
+        namespace = `${namespaceArr[0]} / ... / ${namespaceArr.pop()}`;
+      }
+
+      return namespace;
+    },
+  },
+};
+</script>
+
+<template>
+  <li class="frequent-items-list-item-container">
+    <a
+      :href="webUrl"
+      class="clearfix"
+    >
+      <div class="frequent-items-item-avatar-container">
+        <img
+          v-if="hasAvatar"
+          :src="avatarUrl"
+          class="avatar s32"
+        />
+        <identicon
+          v-else
+          :entity-id="itemId"
+          :entity-name="itemName"
+          size-class="s32"
+        />
+      </div>
+      <div class="frequent-items-item-metadata-container">
+        <div
+          :title="itemName"
+          class="frequent-items-item-title"
+          v-html="highlightedItemName"
+        >
+        </div>
+        <div
+          v-if="truncatedNamespace"
+          :title="namespace"
+          class="frequent-items-item-namespace"
+        >
+          {{ truncatedNamespace }}
+        </div>
+      </div>
+    </a>
+  </li>
+</template>
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_mixin.js b/app/assets/javascripts/frequent_items/components/frequent_items_mixin.js
new file mode 100644
index 00000000000..704dc83ca8e
--- /dev/null
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_mixin.js
@@ -0,0 +1,23 @@
+import { TRANSLATION_KEYS } from '../constants';
+
+export default {
+  props: {
+    namespace: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    getTranslations(keys) {
+      const translationStrings = keys.reduce(
+        (acc, key) => ({
+          ...acc,
+          [key]: TRANSLATION_KEYS[this.namespace][key],
+        }),
+        {},
+      );
+
+      return translationStrings;
+    },
+  },
+};
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue b/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue
new file mode 100644
index 00000000000..a6a265eb3fd
--- /dev/null
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue
@@ -0,0 +1,55 @@
+<script>
+import _ from 'underscore';
+import { mapActions } from 'vuex';
+import eventHub from '../event_hub';
+import frequentItemsMixin from './frequent_items_mixin';
+
+export default {
+  mixins: [frequentItemsMixin],
+  data() {
+    return {
+      searchQuery: '',
+    };
+  },
+  computed: {
+    translations() {
+      return this.getTranslations(['searchInputPlaceholder']);
+    },
+  },
+  watch: {
+    searchQuery: _.debounce(function debounceSearchQuery() {
+      this.setSearchQuery(this.searchQuery);
+    }, 500),
+  },
+  mounted() {
+    eventHub.$on(`${this.namespace}-dropdownOpen`, this.setFocus);
+  },
+  beforeDestroy() {
+    eventHub.$off(`${this.namespace}-dropdownOpen`, this.setFocus);
+  },
+  methods: {
+    ...mapActions(['setSearchQuery']),
+    setFocus() {
+      this.$refs.search.focus();
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="search-input-container d-none d-sm-block">
+    <input
+      ref="search"
+      v-model="searchQuery"
+      :placeholder="translations.searchInputPlaceholder"
+      type="search"
+      class="form-control"
+    />
+    <i
+      v-if="!searchQuery"
+      class="search-icon fa fa-fw fa-search"
+      aria-hidden="true"
+    >
+    </i>
+  </div>
+</template>
diff --git a/app/assets/javascripts/frequent_items/constants.js b/app/assets/javascripts/frequent_items/constants.js
new file mode 100644
index 00000000000..9bc17f5ef4f
--- /dev/null
+++ b/app/assets/javascripts/frequent_items/constants.js
@@ -0,0 +1,38 @@
+import { s__ } from '~/locale';
+
+export const FREQUENT_ITEMS = {
+  MAX_COUNT: 20,
+  LIST_COUNT_DESKTOP: 5,
+  LIST_COUNT_MOBILE: 3,
+  ELIGIBLE_FREQUENCY: 3,
+};
+
+export const HOUR_IN_MS = 3600000;
+
+export const STORAGE_KEY = {
+  projects: 'frequent-projects',
+  groups: 'frequent-groups',
+};
+
+export const TRANSLATION_KEYS = {
+  projects: {
+    loadingMessage: s__('ProjectsDropdown|Loading projects'),
+    header: s__('ProjectsDropdown|Frequently visited'),
+    itemListErrorMessage: s__(
+      'ProjectsDropdown|This feature requires browser localStorage support',
+    ),
+    itemListEmptyMessage: s__('ProjectsDropdown|Projects you visit often will appear here'),
+    searchListErrorMessage: s__('ProjectsDropdown|Something went wrong on our end.'),
+    searchListEmptyMessage: s__('ProjectsDropdown|Sorry, no projects matched your search'),
+    searchInputPlaceholder: s__('ProjectsDropdown|Search your projects'),
+  },
+  groups: {
+    loadingMessage: s__('GroupsDropdown|Loading groups'),
+    header: s__('GroupsDropdown|Frequently visited'),
+    itemListErrorMessage: s__('GroupsDropdown|This feature requires browser localStorage support'),
+    itemListEmptyMessage: s__('GroupsDropdown|Groups you visit often will appear here'),
+    searchListErrorMessage: s__('GroupsDropdown|Something went wrong on our end.'),
+    searchListEmptyMessage: s__('GroupsDropdown|Sorry, no groups matched your search'),
+    searchInputPlaceholder: s__('GroupsDropdown|Search your groups'),
+  },
+};
diff --git a/app/assets/javascripts/frequent_items/event_hub.js b/app/assets/javascripts/frequent_items/event_hub.js
new file mode 100644
index 00000000000..0948c2e5352
--- /dev/null
+++ b/app/assets/javascripts/frequent_items/event_hub.js
@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();
diff --git a/app/assets/javascripts/frequent_items/index.js b/app/assets/javascripts/frequent_items/index.js
new file mode 100644
index 00000000000..5157ff211dc
--- /dev/null
+++ b/app/assets/javascripts/frequent_items/index.js
@@ -0,0 +1,69 @@
+import $ from 'jquery';
+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import eventHub from '~/frequent_items/event_hub';
+import frequentItems from './components/app.vue';
+
+Vue.use(Translate);
+
+const frequentItemDropdowns = [
+  {
+    namespace: 'projects',
+    key: 'project',
+  },
+  {
+    namespace: 'groups',
+    key: 'group',
+  },
+];
+
+document.addEventListener('DOMContentLoaded', () => {
+  frequentItemDropdowns.forEach(dropdown => {
+    const { namespace, key } = dropdown;
+    const el = document.getElementById(`js-${namespace}-dropdown`);
+    const navEl = document.getElementById(`nav-${namespace}-dropdown`);
+
+    // Don't do anything if element doesn't exist (No groups dropdown)
+    // This is for when the user accesses GitLab without logging in
+    if (!el || !navEl) {
+      return;
+    }
+
+    $(navEl).on('shown.bs.dropdown', () => {
+      eventHub.$emit(`${namespace}-dropdownOpen`);
+    });
+
+    // eslint-disable-next-line no-new
+    new Vue({
+      el,
+      components: {
+        frequentItems,
+      },
+      data() {
+        const { dataset } = this.$options.el;
+        const item = {
+          id: Number(dataset[`${key}Id`]),
+          name: dataset[`${key}Name`],
+          namespace: dataset[`${key}Namespace`],
+          webUrl: dataset[`${key}WebUrl`],
+          avatarUrl: dataset[`${key}AvatarUrl`] || null,
+          lastAccessedOn: Date.now(),
+        };
+
+        return {
+          currentUserName: dataset.userName,
+          currentItem: item,
+        };
+      },
+      render(createElement) {
+        return createElement('frequent-items', {
+          props: {
+            namespace,
+            currentUserName: this.currentUserName,
+            currentItem: this.currentItem,
+          },
+        });
+      },
+    });
+  });
+});
diff --git a/app/assets/javascripts/frequent_items/store/actions.js b/app/assets/javascripts/frequent_items/store/actions.js
new file mode 100644
index 00000000000..3dd89a82a42
--- /dev/null
+++ b/app/assets/javascripts/frequent_items/store/actions.js
@@ -0,0 +1,81 @@
+import Api from '~/api';
+import AccessorUtilities from '~/lib/utils/accessor';
+import * as types from './mutation_types';
+import { getTopFrequentItems } from '../utils';
+
+export const setNamespace = ({ commit }, namespace) => {
+  commit(types.SET_NAMESPACE, namespace);
+};
+
+export const setStorageKey = ({ commit }, key) => {
+  commit(types.SET_STORAGE_KEY, key);
+};
+
+export const requestFrequentItems = ({ commit }) => {
+  commit(types.REQUEST_FREQUENT_ITEMS);
+};
+export const receiveFrequentItemsSuccess = ({ commit }, data) => {
+  commit(types.RECEIVE_FREQUENT_ITEMS_SUCCESS, data);
+};
+export const receiveFrequentItemsError = ({ commit }) => {
+  commit(types.RECEIVE_FREQUENT_ITEMS_ERROR);
+};
+
+export const fetchFrequentItems = ({ state, dispatch }) => {
+  dispatch('requestFrequentItems');
+
+  if (AccessorUtilities.isLocalStorageAccessSafe()) {
+    const storedFrequentItems = JSON.parse(localStorage.getItem(state.storageKey));
+
+    dispatch(
+      'receiveFrequentItemsSuccess',
+      !storedFrequentItems ? [] : getTopFrequentItems(storedFrequentItems),
+    );
+  } else {
+    dispatch('receiveFrequentItemsError');
+  }
+};
+
+export const requestSearchedItems = ({ commit }) => {
+  commit(types.REQUEST_SEARCHED_ITEMS);
+};
+export const receiveSearchedItemsSuccess = ({ commit }, data) => {
+  commit(types.RECEIVE_SEARCHED_ITEMS_SUCCESS, data);
+};
+export const receiveSearchedItemsError = ({ commit }) => {
+  commit(types.RECEIVE_SEARCHED_ITEMS_ERROR);
+};
+export const fetchSearchedItems = ({ state, dispatch }, searchQuery) => {
+  dispatch('requestSearchedItems');
+
+  const params = {
+    simple: true,
+    per_page: 20,
+    membership: !!gon.current_user_id,
+  };
+
+  if (state.namespace === 'projects') {
+    params.order_by = 'last_activity_at';
+  }
+
+  return Api[state.namespace](searchQuery, params)
+    .then(results => {
+      dispatch('receiveSearchedItemsSuccess', results);
+    })
+    .catch(() => {
+      dispatch('receiveSearchedItemsError');
+    });
+};
+
+export const setSearchQuery = ({ commit, dispatch }, query) => {
+  commit(types.SET_SEARCH_QUERY, query);
+
+  if (query) {
+    dispatch('fetchSearchedItems', query);
+  } else {
+    dispatch('fetchFrequentItems');
+  }
+};
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/frequent_items/store/getters.js b/app/assets/javascripts/frequent_items/store/getters.js
new file mode 100644
index 00000000000..00165db6684
--- /dev/null
+++ b/app/assets/javascripts/frequent_items/store/getters.js
@@ -0,0 +1,4 @@
+export const hasSearchQuery = state => state.searchQuery !== '';
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/frequent_items/store/index.js b/app/assets/javascripts/frequent_items/store/index.js
new file mode 100644
index 00000000000..ece9e6419dd
--- /dev/null
+++ b/app/assets/javascripts/frequent_items/store/index.js
@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import * as actions from './actions';
+import * as getters from './getters';
+import mutations from './mutations';
+import state from './state';
+
+Vue.use(Vuex);
+
+export default () =>
+  new Vuex.Store({
+    actions,
+    getters,
+    mutations,
+    state: state(),
+  });
diff --git a/app/assets/javascripts/frequent_items/store/mutation_types.js b/app/assets/javascripts/frequent_items/store/mutation_types.js
new file mode 100644
index 00000000000..cbe2c9401ad
--- /dev/null
+++ b/app/assets/javascripts/frequent_items/store/mutation_types.js
@@ -0,0 +1,9 @@
+export const SET_NAMESPACE = 'SET_NAMESPACE';
+export const SET_STORAGE_KEY = 'SET_STORAGE_KEY';
+export const SET_SEARCH_QUERY = 'SET_SEARCH_QUERY';
+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';
diff --git a/app/assets/javascripts/frequent_items/store/mutations.js b/app/assets/javascripts/frequent_items/store/mutations.js
new file mode 100644
index 00000000000..41b660a243f
--- /dev/null
+++ b/app/assets/javascripts/frequent_items/store/mutations.js
@@ -0,0 +1,71 @@
+import * as types from './mutation_types';
+
+export default {
+  [types.SET_NAMESPACE](state, namespace) {
+    Object.assign(state, {
+      namespace,
+    });
+  },
+  [types.SET_STORAGE_KEY](state, storageKey) {
+    Object.assign(state, {
+      storageKey,
+    });
+  },
+  [types.SET_SEARCH_QUERY](state, searchQuery) {
+    const hasSearchQuery = searchQuery !== '';
+
+    Object.assign(state, {
+      searchQuery,
+      isLoadingItems: true,
+      hasSearchQuery,
+    });
+  },
+  [types.REQUEST_FREQUENT_ITEMS](state) {
+    Object.assign(state, {
+      isLoadingItems: true,
+      hasSearchQuery: false,
+    });
+  },
+  [types.RECEIVE_FREQUENT_ITEMS_SUCCESS](state, rawItems) {
+    Object.assign(state, {
+      items: rawItems,
+      isLoadingItems: false,
+      hasSearchQuery: false,
+      isFetchFailed: false,
+    });
+  },
+  [types.RECEIVE_FREQUENT_ITEMS_ERROR](state) {
+    Object.assign(state, {
+      isLoadingItems: false,
+      hasSearchQuery: false,
+      isFetchFailed: true,
+    });
+  },
+  [types.REQUEST_SEARCHED_ITEMS](state) {
+    Object.assign(state, {
+      isLoadingItems: true,
+      hasSearchQuery: true,
+    });
+  },
+  [types.RECEIVE_SEARCHED_ITEMS_SUCCESS](state, rawItems) {
+    Object.assign(state, {
+      items: rawItems.map(rawItem => ({
+        id: rawItem.id,
+        name: rawItem.name,
+        namespace: rawItem.name_with_namespace || rawItem.full_name,
+        webUrl: rawItem.web_url,
+        avatarUrl: rawItem.avatar_url,
+      })),
+      isLoadingItems: false,
+      hasSearchQuery: true,
+      isFetchFailed: false,
+    });
+  },
+  [types.RECEIVE_SEARCHED_ITEMS_ERROR](state) {
+    Object.assign(state, {
+      isLoadingItems: false,
+      hasSearchQuery: true,
+      isFetchFailed: true,
+    });
+  },
+};
diff --git a/app/assets/javascripts/frequent_items/store/state.js b/app/assets/javascripts/frequent_items/store/state.js
new file mode 100644
index 00000000000..75b04febee4
--- /dev/null
+++ b/app/assets/javascripts/frequent_items/store/state.js
@@ -0,0 +1,8 @@
+export default () => ({
+  namespace: '',
+  storageKey: '',
+  searchQuery: '',
+  isLoadingItems: false,
+  isFetchFailed: false,
+  items: [],
+});
diff --git a/app/assets/javascripts/frequent_items/utils.js b/app/assets/javascripts/frequent_items/utils.js
new file mode 100644
index 00000000000..aba692e4b99
--- /dev/null
+++ b/app/assets/javascripts/frequent_items/utils.js
@@ -0,0 +1,49 @@
+import _ from 'underscore';
+import bp from '~/breakpoints';
+import { FREQUENT_ITEMS, HOUR_IN_MS } from './constants';
+
+export const isMobile = () => {
+  const screenSize = bp.getBreakpointSize();
+
+  return screenSize === 'sm' || screenSize === 'xs';
+};
+
+export const getTopFrequentItems = items => {
+  if (!items) {
+    return [];
+  }
+  const frequentItemsCount = isMobile()
+    ? FREQUENT_ITEMS.LIST_COUNT_MOBILE
+    : FREQUENT_ITEMS.LIST_COUNT_DESKTOP;
+
+  const frequentItems = items.filter(item => item.frequency >= FREQUENT_ITEMS.ELIGIBLE_FREQUENCY);
+
+  if (!frequentItems || frequentItems.length === 0) {
+    return [];
+  }
+
+  frequentItems.sort((itemA, itemB) => {
+    // Sort all frequent items in decending order of frequency
+    // and then by lastAccessedOn with recent most first
+    if (itemA.frequency !== itemB.frequency) {
+      return itemB.frequency - itemA.frequency;
+    } else if (itemA.lastAccessedOn !== itemB.lastAccessedOn) {
+      return itemB.lastAccessedOn - itemA.lastAccessedOn;
+    }
+
+    return 0;
+  });
+
+  return _.first(frequentItems, frequentItemsCount);
+};
+
+export const updateExistingFrequentItem = (frequentItem, item) => {
+  const accessedOverHourAgo =
+    Math.abs(item.lastAccessedOn - frequentItem.lastAccessedOn) / HOUR_IN_MS > 1;
+
+  return {
+    ...item,
+    frequency: accessedOverHourAgo ? frequentItem.frequency + 1 : frequentItem.frequency,
+    lastAccessedOn: accessedOverHourAgo ? Date.now() : frequentItem.lastAccessedOn,
+  };
+};