Merge branch 'ce-9262-move-project-search-bar-into-modal-dialog-on-operations-dashboard-page' into 'master'

CE backport: Add reusable project_selector component

See merge request gitlab-org/gitlab-ce!25036

6 files changed, 296 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>
diff --git a/app/assets/javascripts/lib/utils/highlight.js b/app/assets/javascripts/lib/utils/highlight.js
new file mode 100644
index 00000000000..4f7eff2cca1
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/highlight.js
@@ -0,0 +1,44 @@
+import fuzzaldrinPlus from 'fuzzaldrin-plus';
+import _ from 'underscore';
+import sanitize from 'sanitize-html';
+
+/**
+ * Wraps substring matches with HTML `<span>` elements.
+ * Inputs are sanitized before highlighting, so this
+ * filter is safe to use with `v-html` (as long as `matchPrefix`
+ * and `matchSuffix` are not being dynamically generated).
+ *
+ * Note that this function can't be used inside `v-html` as a filter
+ * (Vue filters cannot be used inside `v-html`).
+ *
+ * @param {String} string The string to highlight
+ * @param {String} match The substring match to highlight in the string
+ * @param {String} matchPrefix The string to insert at the beginning of a match
+ * @param {String} matchSuffix The string to insert at the end of a match
+ */
+export default function highlight(string, match = '', matchPrefix = '<b>', matchSuffix = '</b>') {
+  if (_.isUndefined(string) || _.isNull(string)) {
+    return '';
+  }
+
+  if (_.isUndefined(match) || _.isNull(match) || match === '') {
+    return string;
+  }
+
+  const sanitizedValue = sanitize(string.toString(), { allowedTags: [] });
+
+  // occurences is an array of character indices that should be
+  // highlighted in the original string, i.e. [3, 4, 5, 7]
+  const occurences = fuzzaldrinPlus.match(sanitizedValue, match.toString());
+
+  return sanitizedValue
+    .split('')
+    .map((character, i) => {
+      if (_.contains(occurences, i)) {
+        return `${matchPrefix}${character}${matchSuffix}`;
+      }
+
+      return character;
+    })
+    .join('');
+}
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index c49b1bb5a2f..1b7f8732c65 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -1,3 +1,5 @@
+import _ from 'underscore';
+
 /**
  * Adds a , to a string composed by numbers, at every 3 chars.
  *
@@ -160,3 +162,33 @@ export const splitCamelCase = string =>
     .replace(/([A-Z]+)([A-Z][a-z])/g, ' $1 $2')
     .replace(/([a-z\d])([A-Z])/g, '$1 $2')
     .trim();
+
+/**
+ * Intelligently truncates an item's namespace by doing two things:
+ * 1. Only include group names in path by removing the item name
+ * 2. Only include the first and last group names in the path
+ *    when the namespace includes more than 2 groups
+ *
+ * @param {String} string A string namespace,
+ *      i.e. "My Group / My Subgroup / My Project"
+ */
+export const truncateNamespace = (string = '') => {
+  if (_.isNull(string) || !_.isString(string)) {
+    return '';
+  }
+
+  const namespaceArray = string.split(' / ');
+
+  if (namespaceArray.length === 1) {
+    return string;
+  }
+
+  namespaceArray.splice(-1, 1);
+  let namespace = namespaceArray.join(' / ');
+
+  if (namespaceArray.length > 2) {
+    namespace = `${namespaceArray[0]} / ... / ${namespaceArray.pop()}`;
+  }
+
+  return namespace;
+};
diff --git a/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue b/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue
new file mode 100644
index 00000000000..071bae7f665
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue
@@ -0,0 +1,74 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import highlight from '~/lib/utils/highlight';
+import { truncateNamespace } from '~/lib/utils/text_utility';
+import _ from 'underscore';
+
+export default {
+  name: 'ProjectListItem',
+  components: {
+    Icon,
+    ProjectAvatar,
+    GlButton,
+  },
+  props: {
+    project: {
+      type: Object,
+      required: true,
+      validator: p => _.isFinite(p.id) && _.isString(p.name) && _.isString(p.name_with_namespace),
+    },
+    selected: {
+      type: Boolean,
+      required: true,
+    },
+    matcher: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    truncatedNamespace() {
+      return truncateNamespace(this.project.name_with_namespace);
+    },
+    highlightedProjectName() {
+      return highlight(this.project.name, this.matcher);
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+<template>
+  <gl-button
+    class="d-flex align-items-center btn pt-1 pb-1 border-0 project-list-item"
+    @click="onClick"
+  >
+    <icon
+      class="prepend-left-10 append-right-10 flex-shrink-0 position-top-0 js-selected-icon"
+      :class="{ 'js-selected visible': selected, 'js-unselected invisible': !selected }"
+      name="mobile-issue-close"
+    />
+    <project-avatar class="flex-shrink-0 js-project-avatar" :project="project" :size="32" />
+    <div class="d-flex flex-wrap project-namespace-name-container">
+      <div
+        v-if="truncatedNamespace"
+        :title="project.name_with_namespace"
+        class="text-secondary text-truncate js-project-namespace"
+      >
+        {{ truncatedNamespace }}
+        <span v-if="truncatedNamespace" class="text-secondary">/&nbsp;</span>
+      </div>
+      <div
+        :title="project.name"
+        class="js-project-name text-truncate"
+        v-html="highlightedProjectName"
+      ></div>
+    </div>
+  </gl-button>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue b/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue
new file mode 100644
index 00000000000..596fd48f96a
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue
@@ -0,0 +1,103 @@
+<script>
+import _ from 'underscore';
+import { GlLoadingIcon } from '@gitlab/ui';
+import ProjectListItem from './project_list_item.vue';
+
+const SEARCH_INPUT_TIMEOUT_MS = 500;
+
+export default {
+  name: 'ProjectSelector',
+  components: {
+    GlLoadingIcon,
+    ProjectListItem,
+  },
+  props: {
+    projectSearchResults: {
+      type: Array,
+      required: true,
+    },
+    selectedProjects: {
+      type: Array,
+      required: true,
+    },
+    showNoResultsMessage: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    showMinimumSearchQueryMessage: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    showLoadingIndicator: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    showSearchErrorMessage: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      searchQuery: '',
+    };
+  },
+  methods: {
+    projectClicked(project) {
+      this.$emit('projectClicked', project);
+    },
+    isSelected(project) {
+      return Boolean(_.findWhere(this.selectedProjects, { id: project.id }));
+    },
+    focusSearchInput() {
+      this.$refs.searchInput.focus();
+    },
+    onInput: _.debounce(function debouncedOnInput() {
+      this.$emit('searched', this.searchQuery);
+    }, SEARCH_INPUT_TIMEOUT_MS),
+  },
+};
+</script>
+<template>
+  <div>
+    <input
+      ref="searchInput"
+      v-model="searchQuery"
+      :placeholder="__('Search your projects')"
+      type="search"
+      class="form-control mb-3 js-project-selector-input"
+      autofocus
+      @input="onInput"
+    />
+    <div class="d-flex flex-column">
+      <gl-loading-icon v-if="showLoadingIndicator" :size="2" class="py-2 px-4" />
+      <div v-if="!showLoadingIndicator" class="d-flex flex-column">
+        <project-list-item
+          v-for="project in projectSearchResults"
+          :key="project.id"
+          :selected="isSelected(project)"
+          :project="project"
+          :matcher="searchQuery"
+          class="js-project-list-item"
+          @click="projectClicked(project)"
+        />
+      </div>
+      <div v-if="showNoResultsMessage" class="text-muted ml-2 js-no-results-message">
+        {{ __('Sorry, no projects matched your search') }}
+      </div>
+      <div
+        v-if="showMinimumSearchQueryMessage"
+        class="text-muted ml-2 js-minimum-search-query-message"
+      >
+        {{ __('Enter at least three characters to search') }}
+      </div>
+      <div v-if="showSearchErrorMessage" class="text-danger ml-2 js-search-error-message">
+        {{ __('Something went wrong, unable to search projects') }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/stylesheets/components/project_list_item.scss b/app/assets/stylesheets/components/project_list_item.scss
new file mode 100644
index 00000000000..8e7c2c4398c
--- /dev/null
+++ b/app/assets/stylesheets/components/project_list_item.scss
@@ -0,0 +1,24 @@
+.project-list-item {
+  &:not(:disabled):not(.disabled) {
+    &:focus,
+    &:active,
+    &:focus:active {
+      outline: none;
+      box-shadow: none;
+    }
+  }
+}
+
+// When housed inside a modal, the edge of each item
+// should extend to the edge of the modal.
+.modal-body {
+  .project-list-item {
+    border-radius: 0;
+    margin-left: -$gl-padding;
+    margin-right: -$gl-padding;
+
+    .project-namespace-name-container {
+      overflow: hidden;
+    }
+  }
+}