Added user filter component

app/assets/javascripts/boards/components/modal/filters.js.es6

 /* global Vue */
-/* global UsersSelect */
 /* global MilestoneSelect */
+//= require_tree ./filters
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.ModalFilters = Vue.extend({
-    computed: {
-      currentUsername() {
-        return gon.current_username;
-      },
-    },
     mounted() {
-      new UsersSelect();
       new MilestoneSelect();
     },
+    components: {
+      'user-filter': gl.issueBoards.ModalFilterUser,
+    },
     template: `
       <div class="modal-filters">
-        <div class="dropdown">
-          <button
-            class="dropdown-menu-toggle js-user-search js-author-search"
-            type="button"
-            data-toggle="dropdown"
-            data-any-user="Any Author"
-            data-current-user="true"
-            data-field-name="author_id"
-            :data-project-id="12"
-            :data-first-user="currentUsername">
-            Author
-            <i class="fa fa-chevron-down"></i>
-          </button>
-          <div class="dropdown-menu dropdown-select dropdown-menu-user dropdown-menu-selectable dropdown-menu-author">
-            <div class="dropdown-title">
-              <span>Filter by author</span>
-              <button
-                class="dropdown-title-button dropdown-menu-close"
-                aria-label="Close"
-                type="button">
-                <i class="fa fa-times dropdown-menu-close-icon"></i>
-              </button>
-            </div>
-            <div class="dropdown-input">
-              <input
-                type="search"
-                class="dropdown-input-field"
-                placeholder="Search authors"
-                autocomplete="off" />
-              <i class="fa fa-search dropdown-input-search"></i>
-              <i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
-            </div>
-            <div class="dropdown-content"></div>
-            <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
-          </div>
-        </div>
-        <div class="dropdown">
-          <button
-            class="dropdown-menu-toggle js-user-search js-assignee-search"
-            type="button"
-            data-toggle="dropdown"
-            data-any-user="Any Assignee"
-            data-null-user="true"
-            data-current-user="true"
-            data-field-name="assignee_id"
-            :data-project-id="12"
-            :data-first-user="currentUsername">
-            Assignee
-            <i class="fa fa-chevron-down"></i>
-          </button>
-          <div class="dropdown-menu dropdown-select dropdown-menu-user dropdown-menu-selectable dropdown-menu-author">
-            <div class="dropdown-title">
-              <span>Filter by assignee</span>
-              <button
-                class="dropdown-title-button dropdown-menu-close"
-                aria-label="Close"
-                type="button">
-                <i class="fa fa-times dropdown-menu-close-icon"></i>
-              </button>
-            </div>
-            <div class="dropdown-input">
-              <input
-                type="search"
-                class="dropdown-input-field"
-                placeholder="Search assignee"
-                autocomplete="off" />
-              <i class="fa fa-search dropdown-input-search"></i>
-              <i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
-            </div>
-            <div class="dropdown-content"></div>
-            <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
-          </div>
-        </div>
+        <user-filter
+          dropdown-class-name="dropdown-menu-author"
+          toggle-class-name="js-user-search js-author-search"
+          toggle-label="Author"
+          field-name="author_id"></user-filter>
+        <user-filter
+          dropdown-class-name="dropdown-menu-author"
+          toggle-class-name="js-assignee-search"
+          toggle-label="Assignee"
+          field-name="assignee_id"
+          :null-user="true"></user-filter>
         <div class="dropdown">
           <button
             class="dropdown-menu-toggle js-milestone-select"

app/assets/javascripts/boards/components/modal/filters/user.js.es6

+/* global Vue */
+/* global UsersSelect */
+(() => {
+  gl.issueBoards.ModalFilterUser = Vue.extend({
+    props: {
+      toggleClassName: {
+        type: String,
+        required: true,
+      },
+      dropdownClassName: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      toggleLabel: {
+        type: String,
+        required: true,
+      },
+      fieldName: {
+        type: String,
+        required: true,
+      },
+      nullUser: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    mounted() {
+      new UsersSelect();
+    },
+    computed: {
+      currentUsername() {
+        return gon.current_username;
+      },
+      dropdownTitle() {
+        return `Filter by ${this.toggleLabel.toLowerCase()}`;
+      },
+      inputPlaceholder() {
+        return `Search ${this.toggleLabel.toLowerCase()}`;
+      },
+    },
+    template: `
+      <div class="dropdown">
+        <button
+          class="dropdown-menu-toggle js-user-search"
+          :class="toggleClassName"
+          type="button"
+          data-toggle="dropdown"
+          data-current-user="true"
+          :data-any-user="'Any ' + toggleLabel"
+          :data-null-user="nullUser"
+          :data-field-name="fieldName"
+          :data-project-id="12"
+          :data-first-user="currentUsername">
+          {{ toggleLabel }}
+          <i class="fa fa-chevron-down"></i>
+        </button>
+        <div
+          class="dropdown-menu dropdown-select dropdown-menu-user dropdown-menu-selectable"
+          :class="dropdownClassName">
+          <div class="dropdown-title">
+            {{ dropdownTitle }}
+            <button
+              class="dropdown-title-button dropdown-menu-close"
+              aria-label="Close"
+              type="button">
+              <i class="fa fa-times dropdown-menu-close-icon"></i>
+            </button>
+          </div>
+          <div class="dropdown-input">
+            <input
+              type="search"
+              class="dropdown-input-field"
+              autocomplete="off"
+              :placeholder="inputPlaceholder" />
+            <i class="fa fa-search dropdown-input-search"></i>
+            <i
+              role="button"
+              class="fa fa-times dropdown-input-clear js-dropdown-input-clear">
+            </i>
+          </div>
+          <div class="dropdown-content"></div>
+          <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
+        </div>
+      </div>
+    `,
+  });
+})();