1 files changed, 96 insertions, 0 deletions
diff --git a/app/assets/javascripts/super_sidebar/components/frequent_items_list.vue b/app/assets/javascripts/super_sidebar/components/frequent_items_list.vue
new file mode 100644
index 00000000000..11bf2ddbd30
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/frequent_items_list.vue
@@ -0,0 +1,96 @@
+<script>
+import * as Sentry from '@sentry/browser';
+import AccessorUtilities from '~/lib/utils/accessor';
+import { getTopFrequentItems, formatContextSwitcherItems } from '../utils';
+import ItemsList from './items_list.vue';
+
+export default {
+  components: {
+    ItemsList,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    pristineText: {
+      type: String,
+      required: true,
+    },
+    storageKey: {
+      type: String,
+      required: true,
+    },
+    maxItems: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      cachedFrequentItems: [],
+    };
+  },
+  computed: {
+    isEmpty() {
+      return !this.cachedFrequentItems.length;
+    },
+  },
+  created() {
+    this.getItemsFromLocalStorage();
+  },
+  methods: {
+    getItemsFromLocalStorage() {
+      if (!AccessorUtilities.canUseLocalStorage()) {
+        return;
+      }
+      try {
+        const parsedCachedFrequentItems = JSON.parse(localStorage.getItem(this.storageKey));
+        const topFrequentItems = getTopFrequentItems(parsedCachedFrequentItems, this.maxItems);
+        this.cachedFrequentItems = formatContextSwitcherItems(topFrequentItems);
+      } catch (e) {
+        Sentry.captureException(e);
+      }
+    },
+    handleItemRemove(item) {
+      try {
+        // Remove item from local storage
+        const parsedCachedFrequentItems = JSON.parse(localStorage.getItem(this.storageKey));
+        localStorage.setItem(
+          this.storageKey,
+          JSON.stringify(parsedCachedFrequentItems.filter((i) => i.id !== item.id)),
+        );
+
+        // Update the list
+        this.cachedFrequentItems = this.cachedFrequentItems.filter((i) => i.id !== item.id);
+      } catch (e) {
+        Sentry.captureException(e);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <li class="gl-py-3">
+    <div
+      data-testid="list-title"
+      aria-hidden="true"
+      class="gl-display-flex gl-align-items-center gl-text-transform-uppercase gl-text-secondary gl-font-weight-semibold gl-font-xs gl-line-height-12 gl-letter-spacing-06em gl-my-3"
+    >
+      <span class="gl-flex-grow-1 gl-px-3">{{ title }}</span>
+    </div>
+    <div
+      v-if="isEmpty"
+      data-testid="empty-text"
+      class="gl-text-gray-500 gl-font-sm gl-my-3 gl-mx-3"
+    >
+      {{ pristineText }}
+    </div>
+    <items-list :aria-label="title" :items="cachedFrequentItems" @remove-item="handleItemRemove">
+      <template #view-all-items>
+        <slot name="view-all-items"></slot>
+      </template>
+    </items-list>
+  </li>
+</template>