diff --git a/amundsen_application/static/js/components/TableDetail/TableHeaderBullets/index.tsx b/amundsen_application/static/js/components/TableDetail/TableHeaderBullets/index.tsx new file mode 100644 index 000000000..355bf7e55 --- /dev/null +++ b/amundsen_application/static/js/components/TableDetail/TableHeaderBullets/index.tsx @@ -0,0 +1,27 @@ +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 = ({ cluster, database }) => { + return ( + + ); +}; + +TableHeaderBullets.defaultProps = { + cluster: '', + database: '', +}; + +export default TableHeaderBullets; diff --git a/amundsen_application/static/js/components/TableDetail/TableHeaderBullets/tests/index.spec.tsx b/amundsen_application/static/js/components/TableDetail/TableHeaderBullets/tests/index.spec.tsx new file mode 100644 index 000000000..6474b245d --- /dev/null +++ b/amundsen_application/static/js/components/TableDetail/TableHeaderBullets/tests/index.spec.tsx @@ -0,0 +1,61 @@ +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) => { + const props: TableHeaderBulletsProps = { + database: 'hive', + cluster: 'main', + ...propOverrides + }; + const wrapper = shallow(); + 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); + }); + }); +}); diff --git a/amundsen_application/static/js/components/TableDetail/index.tsx b/amundsen_application/static/js/components/TableDetail/index.tsx index 30eee51bc..1dcddf950 100644 --- a/amundsen_application/static/js/components/TableDetail/index.tsx +++ b/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
-
    -
  • { getDisplayNameByResource(ResourceType.table) }
  • -
  • { getDatabaseDisplayName(data.database) }
  • -
  • { data.cluster }
  • -
+ { data.badges.length > 0 && diff --git a/amundsen_application/static/js/components/common/SearchBar/InlineSearchResults/SearchItemList/tests/index.spec.tsx b/amundsen_application/static/js/components/common/SearchBar/InlineSearchResults/SearchItemList/tests/index.spec.tsx index 15a4e537c..22e7d078a 100644 --- a/amundsen_application/static/js/components/common/SearchBar/InlineSearchResults/SearchItemList/tests/index.spec.tsx +++ b/amundsen_application/static/js/components/common/SearchBar/InlineSearchResults/SearchItemList/tests/index.spec.tsx @@ -1,5 +1,6 @@ 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) diff --git a/amundsen_application/static/js/components/common/SearchBar/InlineSearchResults/tests/index.spec.tsx b/amundsen_application/static/js/components/common/SearchBar/InlineSearchResults/tests/index.spec.tsx index 42d47b991..b97292acb 100644 --- a/amundsen_application/static/js/components/common/SearchBar/InlineSearchResults/tests/index.spec.tsx +++ b/amundsen_application/static/js/components/common/SearchBar/InlineSearchResults/tests/index.spec.tsx @@ -1,5 +1,6 @@ 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);