Add input field with search history [SCI-9102]

app/assets/stylesheets/shared_styles/constants/shadows.scss

@@ -1,2 +1,7 @@
 $flyout-shadow: 0px 1px 4px rgba(35, 31, 32, 0.15);
-$modal-shadow: 0px 4px 16px rgba(35, 31, 32, 0.15);
+$modal-shadow: 0px 4px 16px rgba(35, 31, 32, 0.15);
+
+
+.sn-shadow-menu-sm {
+  box-shadow: 0px 16px 32px 0px rgba(16, 24, 40, 0.07);
+}

app/assets/stylesheets/tailwind/inputs.css

@@ -66,4 +66,8 @@
   .sci-input-container-v2 textarea:focus {
     border-color: var(--sn-science-blue);
   }
+
+  .sci-input-container-v2 .history-flyout li:hover {
+    background-color: var(--sn-super-light-grey);
+  }
 }

app/javascript/vue/shared/filters/inputs/text_filter.vue

@@ -1,24 +1,22 @@
 <template>
   <div>
     <label>{{ filter.label }}</label>
-    <div class="sci-input-container">
-      <input  class="sci-input-field"
-              type="text"
-              :id="filter.key"
-              :placeholder="filter.placeholder"
-              :value="value"
-              @input="update($event.target.value)">
-    </div>
+    <inputWithHistory :modelValue="value" @update:modelValue="update" :placeholder="filter.placeholder" :id="'textSearch' + filter.key"/>
   </div>
 </template>
 
 <script>
+  import inputWithHistory from '../../input_with_history.vue';
+
   export default {
     name: 'TextFilter',
     props: {
       filter: { type: Object, required: true },
       value: { type: String }
     },
+    components: {
+      inputWithHistory
+    },
     methods: {
       update(value) {
         this.$emit('update', { key: this.filter.key, value: value });

app/javascript/vue/shared/input_with_history.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div class="sci-input-container-v2">
+      <input :value="modelValue"
+             :placeholder="placeholder"
+             :id="id"
+             type="text"
+             class="sci-input-field"
+             @focus="showHistory"
+             @blur="hideHistory"
+             @change="saveQuery"
+             ref="input" />
+      <div v-if="historyShown" class="absolute top-10 z-10 bg-white w-full sn-shadow-menu-sm p-4 history-flyout">
+        <ul class="px-0 mb-0">
+          <li v-for="(query, index) in previousQueries" :key="`query_${index}`"
+              class="cursor-pointer list-none p-1.5 leading-8 truncate" @click="selectFromHistory(query)"
+          >
+            <i class="sn-icon sn-icon-created ml-1 mr-2.5 text-sn-grey"></i>
+            {{ query }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'inputWithHistory',
+    props: {
+      modelValue: { type: String },
+      placeholder: { type: String },
+      id: { type: String }
+    },
+    data() {
+      return {
+        previousQueries: [],
+        historyShown: false
+      }
+    },
+    mounted() {
+      this.previousQueries = JSON.parse(localStorage.getItem(this.id) || '[]');
+    },
+    methods: {
+      showHistory() {
+        this.historyShown = true;
+      },
+      hideHistory() {
+        setTimeout(() => {
+          this.historyShown = false;
+        }, 200);
+      },
+      selectFromHistory(value) {
+        this.$emit('update:modelValue', value)
+      },
+      saveQuery(event) {
+        let newValue = event.target.value
+
+        if (newValue == this.modelValue) return;
+
+        if (newValue.length > 0) {
+          this.previousQueries.push(newValue)
+
+          if (this.previousQueries.length > 5) {
+            this.previousQueries.shift();
+          }
+
+          localStorage.setItem(this.id, JSON.stringify(this.previousQueries));
+
+        }
+        this.$emit('update:modelValue', newValue)
+      }
+    }
+  }
+</script>