Add reusable project_selector component

This commit adds a resuable UI component that allows a user to search
for a project name, shows the search results, and allows the user to
select one or more projects.  This component communicates with its
parent using props and events.

This component was originally created for use in the EE-specific
"Operations Dashboard" page, but it is applicable for CE use cases as
well, and so was added as a CE shared component.

In addition, some logic was extracted from the frequent_items_list_item
component into shared filters to avoid logic duplication.

1 files changed, 19 insertions, 38 deletions

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
index 42d14b65b3a..92c3bcb5012 100644
--- a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
@@ -1,6 +1,9 @@
 <script>
 /* eslint-disable vue/require-default-prop */
-import Identicon from '../../vue_shared/components/identicon.vue';
+import _ from 'underscore';
+import Identicon from '~/vue_shared/components/identicon.vue';
+import highlight from '~/lib/utils/highlight';
+import { truncateNamespace } from '~/lib/utils/text_utility';
 
 export default {
   components: {
@@ -36,43 +39,13 @@ export default {
   },
   computed: {
     hasAvatar() {
-      return this.avatarUrl !== null;
+      return _.isString(this.avatarUrl) && !_.isEmpty(this.avatarUrl);
     },
-    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;
+      return truncateNamespace(this.namespace);
+    },
+    highlightedItemName() {
+      return highlight(this.itemName, this.matcher);
     },
   },
 };
@@ -92,8 +65,16 @@ export default {
         />
       </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">
+        <div
+          :title="itemName"
+          class="frequent-items-item-title js-frequent-items-item-title"
+          v-html="highlightedItemName"
+        ></div>
+        <div
+          v-if="namespace"
+          :title="namespace"
+          class="frequent-items-item-namespace js-frequent-items-item-namespace"
+        >
           {{ truncatedNamespace }}
         </div>
       </div>