From b78fed870014501bead683bbf96e05f4cb8028f7 Mon Sep 17 00:00:00 2001
From: Seyi Adebajo <sadebajo@linkedin.com>
Date: Mon, 14 Nov 2016 13:36:04 -0800
Subject: [PATCH] DSS-5677: Updates UI to more closely match spec, changes
 search input behaviour to filter from search

---
 web/app/views/main.scala.html | 40 +++++++++++++++++++++--------------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/web/app/views/main.scala.html b/web/app/views/main.scala.html
index d76af5d38e..ede839a492 100644
--- a/web/app/views/main.scala.html
+++ b/web/app/views/main.scala.html
@@ -1380,18 +1380,22 @@
                         {{/ember-selector}}
                     </label>
 
-                    <div class="field-search">
-                        <input type="text"
-                               id="compliance-typeahead"
-                               class="field-search__input form-control"
-                               placeholder="Search for field names...">
-                    </div>
+                    <header class="typeahead-header">
+                        <div class="field-names">
+                            <h4>Field Names</h4>
+                            <input type="text"
+                                   id="compliance-typeahead"
+                                   class="field-search__input form-control"
+                                   placeholder="Filter field names...">
+                        </div>
+                        <h4>Data Type</h4>
+                    </header>
                     <section class="typeahead-matches">
                         {{#each matchingFields as |matchingField|}}
-                            {{#draggable-item content=matchingField.value class="draggable__item"}}
+                            {{#draggable-item content=matchingField.value class="draggable__item item-source"}}
                                 <span class="match-pill__value">{{matchingField.value}}</span>
                                 {{#if matchingField.dataType}}
-                                    <sub class="match-pill__data-type">Data Type: {{matchingField.dataType}}</sub>
+                                    <span class="match-pill__data-type">{{matchingField.dataType}}</span>
                                 {{/if}}
                             {{/draggable-item}}
                         {{else}}
@@ -1477,18 +1481,22 @@
                         {{/ember-selector}}
                     </label>
 
-                    <div class="field-search">
-                        <input type="text"
-                               id="confidential-typeahead"
-                               class="field-search__input form-control"
-                               placeholder="Search for field names...">
-                    </div>
+                    <header class="typeahead-header">
+                        <div class="field-names">
+                            <h4>Field Names</h4>
+                            <input type="text"
+                                   id="compliance-typeahead"
+                                   class="field-search__input form-control"
+                                   placeholder="Filter field names...">
+                        </div>
+                        <h4>Data Type</h4>
+                    </header>
                     <section class="typeahead-matches">
                         {{#each matchingFields as |matchingField|}}
-                            {{#draggable-item content=matchingField.value class="draggable__item"}}
+                            {{#draggable-item content=matchingField.value class="draggable__item item-source"}}
                                 <span class="match-pill__value">{{matchingField.value}}</span>
                                 {{#if matchingField.dataType}}
-                                    <sub class="match-pill__data-type">Data Type: {{matchingField.dataType}}</sub>
+                                    <span class="match-pill__data-type">{{matchingField.dataType}}</span>
                                 {{/if}}
                             {{/draggable-item}}
                         {{else}}