Add db to tablelistitem + re-add database to syntax help text (#241)

amundsen_application/static/css/_typography-default.scss

@@ -125,6 +125,12 @@ body {
   font-family: $font-family-monospace;
 }
 
+.resource-type {
+  color: $gray;
+  font-size: 13px;
+  font-family: $font-family-monospace;
+}
+
 .helper-text {
   color: $text-medium;
   font-size: 12px;

amundsen_application/static/js/components/SearchPage/SearchBar/constants.ts

@@ -4,7 +4,7 @@ export const ERROR_CLASSNAME = 'error';
 export const PLACEHOLDER_DEFAULT = 'search for data resources...';
 
 export const SUBTEXT_DEFAULT = `Search within a category using the pattern with wildcard support 'category:*searchTerm*', e.g. 'schema:*core*'.
-  Current categories are 'column', 'schema', 'table', and 'tag'.`;
+  Current categories are 'column', 'database', 'schema', 'table', and 'tag'.`;
 export const SYNTAX_ERROR_CATEGORY = `Advanced search syntax only supports searching one category. Please remove all extra ':'`;
 export const SYNTAX_ERROR_PREFIX = 'Did you mean ';
 export const SYNTAX_ERROR_SPACING_SUFFIX = ` ? Please remove the space around the ':'.`;

amundsen_application/static/js/components/common/ResourceListItem/TableListItem/index.tsx

@@ -38,7 +38,7 @@ class TableListItem extends React.Component<TableListItemProps, {}> {
         <Link className="resource-list-item table-list-item" to={ this.getLink() }>
           <img className="icon icon-database icon-color" />
           <div className="content">
-            <div className={ hasLastUpdated? "col-sm-9 col-md-10" : "col-sm-12"}>
+            <div className="col-sm-6 col-md-8">
               <div className="resource-name title-2">
                 <div className="truncated">
                   { `${table.schema_name}.${table.name}`}
@@ -47,6 +47,9 @@ class TableListItem extends React.Component<TableListItemProps, {}> {
               </div>
               <div className="body-secondary-3 truncated">{ table.description }</div>
             </div>
+            <div className="resource-type hidden-xs col-sm-3 col-md-2 text-center">
+              { table.database }
+            </div>
             {
               hasLastUpdated &&
               <div className="hidden-xs col-sm-3 col-md-2">

amundsen_application/static/js/components/common/ResourceListItem/TableListItem/tests/index.spec.tsx

@@ -14,7 +14,7 @@ describe('TableListItem', () => {
       table: {
         type: ResourceType.table,
         cluster: '',
-        database: '',
+        database: 'testdb',
         description: 'I am the description',
         key: '',
         last_updated_epoch: 1553829681,
@@ -52,13 +52,17 @@ describe('TableListItem', () => {
       expect(wrapper.find('.content').children().at(0).children().at(1).text()).toEqual('I am the description');
     });
 
+    it('renders resource type', () => {
+      expect(wrapper.find('.content').children().at(1).text()).toEqual(props.table.database);
+    });
+
     describe('if props.table has last_updated_epoch', () => {
       it('renders Last Update title', () => {
-        expect(wrapper.find('.content').children().at(1).children().at(0).text()).toEqual('Last Updated');
+        expect(wrapper.find('.content').children().at(2).children().at(0).text()).toEqual('Last Updated');
       });
 
       it('renders getDateLabel value', () => {
-        expect(wrapper.find('.content').children().at(1).children().at(1).text()).toEqual(wrapper.instance().getDateLabel());
+        expect(wrapper.find('.content').children().at(2).children().at(1).text()).toEqual(wrapper.instance().getDateLabel());
       });
     });
 
@@ -74,7 +78,7 @@ describe('TableListItem', () => {
           name: 'tableName',
           schema_name: 'tableSchema',
         }});
-        expect(wrapper.find('.content').children().at(1).exists()).toBeFalsy();
+        expect(wrapper.find('.content').children().at(2).exists()).toBeFalsy();
       });
     });
   });