Create TableHeaderBullets component (#397)

* Create TableHeaderBullets component

* Fix mocks

amundsen_application/static/js/components/TableDetail/TableHeaderBullets/index.tsx

+import * as React from 'react';
+
+import { getDisplayNameByResource, getDatabaseDisplayName } from 'config/config-utils';
+
+import { ResourceType } from 'interfaces/Resources';
+
+export interface TableHeaderBulletsProps {
+  cluster: string;
+  database: string;
+}
+
+const TableHeaderBullets: React.SFC<TableHeaderBulletsProps> = ({ cluster, database }) => {
+  return (
+    <ul className="header-bullets">
+      <li>{ getDisplayNameByResource(ResourceType.table)}</li>
+      <li>{ getDatabaseDisplayName(database) }</li>
+      <li>{ cluster }</li>
+    </ul>
+  );
+};
+
+TableHeaderBullets.defaultProps = {
+  cluster: '',
+  database: '',
+};
+
+export default TableHeaderBullets;

amundsen_application/static/js/components/TableDetail/TableHeaderBullets/tests/index.spec.tsx

+import * as React from 'react';
+
+import { mocked } from 'ts-jest/utils';
+import { shallow } from 'enzyme';
+
+import TableHeaderBullets, { TableHeaderBulletsProps } from '../';
+
+import { ResourceType } from 'interfaces/Resources';
+
+const MOCK_RESOURCE_DISPLAY_NAME = 'Test';
+const MOCK_DB_DISPLAY_NAME = 'AlsoTest';
+
+jest.mock('config/config-utils', () => ({
+  getDisplayNameByResource: jest.fn(),
+  getDatabaseDisplayName: jest.fn()
+}));
+import { getDatabaseDisplayName, getDisplayNameByResource } from 'config/config-utils';
+
+describe('TableHeaderBullets', () => {
+  const setup = (propOverrides?: Partial<TableHeaderBulletsProps>) => {
+    const props: TableHeaderBulletsProps = {
+      database: 'hive',
+      cluster: 'main',
+      ...propOverrides
+    };
+    const wrapper = shallow(<TableHeaderBullets {...props} />);
+    return { props, wrapper };
+  };
+
+  describe('render', () => {
+    let props: TableHeaderBulletsProps;
+    let wrapper;
+    let listElement;
+    beforeAll(() => {
+      mocked(getDatabaseDisplayName).mockImplementation(() => MOCK_DB_DISPLAY_NAME);
+      mocked(getDisplayNameByResource).mockImplementation(() => MOCK_RESOURCE_DISPLAY_NAME);
+      const setupResult = setup();
+      props = setupResult.props;
+      wrapper = setupResult.wrapper;
+      listElement = wrapper.find('ul');
+    });
+
+    it('renders a list with correct class', () => {
+      expect(listElement.props().className).toEqual('header-bullets');
+    });
+
+    it('renders a list with resource display name', () => {
+      expect(getDisplayNameByResource).toHaveBeenCalledWith(ResourceType.table);
+      expect(listElement.find('li').at(0).text()).toEqual(MOCK_RESOURCE_DISPLAY_NAME);
+    });
+
+    it('renders a list with database display name', () => {
+      expect(getDatabaseDisplayName).toHaveBeenCalledWith(props.database);
+      expect(listElement.find('li').at(1).text()).toEqual(MOCK_DB_DISPLAY_NAME);
+    });
+
+    it('renders a list with cluster', () => {
+      expect(listElement.find('li').at(2).text()).toEqual(props.cluster);
+    });
+  });
+});

amundsen_application/static/js/components/TableDetail/index.tsx

@@ -24,6 +24,7 @@ import OwnerEditor from 'components/TableDetail/OwnerEditor';
 import ReportTableIssue from 'components/TableDetail/ReportTableIssue';
 import SourceLink from 'components/TableDetail/SourceLink';
 import TableDescEditableText from 'components/TableDetail/TableDescEditableText';
+import TableHeaderBullets from 'components/TableDetail/TableHeaderBullets';
 import TableIssues from 'components/TableDetail/TableIssues';
 import WatermarkLabel from 'components/TableDetail/WatermarkLabel';
 import WriterLink from 'components/TableDetail/WriterLink';
@@ -32,7 +33,7 @@ import { TableMetadata } from 'interfaces/TableMetadata';
 
 import { EditableSection } from 'components/TableDetail/EditableSection';
 
-import { getDisplayNameByResource, getDatabaseDisplayName, getDatabaseIconClass, issueTrackingEnabled, notificationsEnabled } from 'config/config-utils';
+import { getDatabaseIconClass, issueTrackingEnabled, notificationsEnabled } from 'config/config-utils';
 
 import { ResourceType } from 'interfaces/Resources';
 import { formatDateTimeShort } from 'utils/dateUtils';
@@ -142,11 +143,10 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
               </h3>
               <BookmarkIcon bookmarkKey={ this.props.tableData.key }/>
               <div className="body-2">
-                <ul className="header-bullets">
-                  <li>{ getDisplayNameByResource(ResourceType.table) }</li>
-                  <li>{ getDatabaseDisplayName(data.database) }</li>
-                  <li>{ data.cluster }</li>
-                </ul>
+                <TableHeaderBullets
+                  database={ data.database }
+                  cluster={ data.cluster }
+                />
                 {
                   data.badges.length > 0 &&
                   <BadgeList badges={ data.badges } />

amundsen_application/static/js/components/common/SearchBar/InlineSearchResults/SearchItemList/tests/index.spec.tsx

 import * as React from 'react';
 
+import { mocked } from 'ts-jest/utils';
 import { shallow } from 'enzyme';
 
 import SearchItemList, { SearchItemListProps } from '../';
@@ -82,8 +83,7 @@ describe('SearchItemList', () => {
 
     describe('renders ResourceType.user SearchItem based on config', () =>{
       it('when indexUsersEnabled = true, renders SearchItem', () => {
-        // @ts-ignore: Known issue but can't find solution: https://github.com/kulshekhar/ts-jest/issues/661
-        indexUsersEnabled.mockImplementation(() => true);
+        mocked(indexUsersEnabled).mockImplementation(() => true);
         setUpResult = setup();
         props = setUpResult.props;
         wrapper = setUpResult.wrapper;
@@ -101,8 +101,7 @@ describe('SearchItemList', () => {
       });
 
       it('when indexUsersEnabled = false, does not render SearchItem', () => {
-        // @ts-ignore: Known issue but can't find solution: https://github.com/kulshekhar/ts-jest/issues/661
-        indexUsersEnabled.mockImplementation(() => false);
+        mocked(indexUsersEnabled).mockImplementation(() => false);
         wrapper = setup().wrapper;
         const item = wrapper.find('SearchItem').findWhere(item => item.prop('resourceType') === ResourceType.user);
         expect(item.exists()).toBe(false)

amundsen_application/static/js/components/common/SearchBar/InlineSearchResults/tests/index.spec.tsx

 import * as React from 'react';
 
+import { mocked } from 'ts-jest/utils';
 import { shallow } from 'enzyme';
 
 import { InlineSearchResults, InlineSearchResultsProps, mapStateToProps } from '../';
@@ -210,8 +211,7 @@ describe('InlineSearchResults', () => {
     });
     it('returns the results of getDatabaseIconClass for ResourceType.table', () => {
       const mockClass = 'test-class';
-      // @ts-ignore: Known issue but can't find solution: https://github.com/kulshekhar/ts-jest/issues/661
-      getDatabaseIconClass.mockImplementation(() => mockClass);
+      mocked(getDatabaseIconClass).mockImplementation(() => mockClass);
       const givenTable = props.tables.results[0];
       const output = wrapper.instance().getSuggestedResultIconClass(ResourceType.table, givenTable);
       expect(output).toEqual(mockClass);
@@ -285,8 +285,7 @@ describe('InlineSearchResults', () => {
     });
     it('returns the results of getDatabaseDisplayName for ResourceType.table', () => {
       const mockName = 'Hive';
-      // @ts-ignore: Known issue but can't find solution: https://github.com/kulshekhar/ts-jest/issues/661
-      getDatabaseDisplayName.mockImplementation(() => mockName);
+      mocked(getDatabaseDisplayName).mockImplementation(() => mockName);
       const givenTable = props.tables.results[0];
       const output = wrapper.instance().getSuggestedResultType(ResourceType.table, givenTable);
       expect(output).toEqual(mockName);
@@ -401,16 +400,14 @@ describe('InlineSearchResults', () => {
 
       describe('calls renderResultsByResource for ResourceType.user based on config', () => {
         it('does not call if indexUsersEnabled() = false', () => {
-          // @ts-ignore: Known issue but can't find solution: https://github.com/kulshekhar/ts-jest/issues/661
-          indexUsersEnabled.mockImplementation(() => false);
+          mocked(indexUsersEnabled).mockImplementation(() => false);
           renderResultsByResourceSpy.mockClear();
           wrapper.instance().renderResults();
           expect(renderResultsByResourceSpy).not.toHaveBeenCalledWith(ResourceType.user);
         });
 
         it('calls if indexUsersEnabled() = true', () => {
-          // @ts-ignore: Known issue but can't find solution: https://github.com/kulshekhar/ts-jest/issues/661
-          indexUsersEnabled.mockImplementation(() => true);
+          mocked(indexUsersEnabled).mockImplementation(() => true);
           renderResultsByResourceSpy.mockClear();
           wrapper.instance().renderResults();
           expect(renderResultsByResourceSpy).toHaveBeenCalledWith(ResourceType.user);