1 files changed, 121 insertions, 0 deletions
diff --git a/app/assets/javascripts/ide/components/shared/tokened_input.vue b/app/assets/javascripts/ide/components/shared/tokened_input.vue
new file mode 100644
index 00000000000..a7a12f6785d
--- /dev/null
+++ b/app/assets/javascripts/ide/components/shared/tokened_input.vue
@@ -0,0 +1,121 @@
+<script>
+import { __ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    placeholder: {
+      type: String,
+      required: false,
+      default: __('Search'),
+    },
+    tokens: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    value: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      backspaceCount: 0,
+    };
+  },
+  computed: {
+    placeholderText() {
+      return this.tokens.length
+        ? ''
+        : this.placeholder;
+    },
+  },
+  watch: {
+    tokens() {
+      this.$refs.input.focus();
+    },
+  },
+  methods: {
+    onFocus() {
+      this.$emit('focus');
+    },
+    onBlur() {
+      this.$emit('blur');
+    },
+    onInput(evt) {
+      this.$emit('input', evt.target.value);
+    },
+    onBackspace() {
+      if (!this.value && this.tokens.length) {
+        this.backspaceCount += 1;
+      } else {
+        this.backspaceCount = 0;
+        return;
+      }
+
+      if (this.backspaceCount > 1) {
+        this.removeToken(this.tokens[this.tokens.length - 1]);
+        this.backspaceCount = 0;
+      }
+    },
+    removeToken(token) {
+      this.$emit('removeToken', token);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="filtered-search-wrapper">
+    <div class="filtered-search-box">
+      <div class="tokens-container list-unstyled">
+        <div
+          v-for="token in tokens"
+          :key="token.label"
+          class="filtered-search-token"
+        >
+          <button
+            class="selectable btn-blank"
+            type="button"
+            @click.stop="removeToken(token)"
+            @keyup.delete="removeToken(token)"
+          >
+            <div
+              class="value-container rounded"
+            >
+              <div
+                class="value"
+              >{{ token.label }}</div>
+              <div
+                class="remove-token inverted"
+              >
+                <icon
+                  :size="10"
+                  name="close"
+                />
+              </div>
+            </div>
+          </button>
+        </div>
+        <div class="input-token">
+          <input
+            ref="input"
+            :placeholder="placeholderText"
+            :value="value"
+            type="search"
+            class="form-control filtered-search"
+            @input="onInput"
+            @focus="onFocus"
+            @blur="onBlur"
+            @keyup.delete="onBackspace"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>