From 37394207a49ee5bb8d400790eb8a312fc5e337eb Mon Sep 17 00:00:00 2001 From: Gabe Lyons Date: Tue, 26 Oct 2021 12:13:53 -0700 Subject: [PATCH] fix(react): fix up yarn test error reporting (#3462) --- datahub-web-react/src/Mocks.tsx | 16 +++ .../schema/components/SchemaHeader.tsx | 12 +-- .../schema/utils/schemaTitleRenderer.tsx | 1 + .../stats/snapshot/SnapshotStatsView.tsx | 4 +- .../profile/sidebar/EntitySidebar.tsx | 2 +- .../profile/sidebar/SidebarAboutSection.tsx | 8 +- .../Schema/components/ForeignKeyLabel.tsx | 62 +++--------- .../Dataset/Schema/components/SchemaRow.tsx | 97 ++++++++++--------- .../Dataset/Schema/components/TypeLabel.tsx | 2 +- .../src/app/preview/DefaultPreviewCard.tsx | 18 ++-- .../src/app/search/SearchFilters.tsx | 1 + .../src/app/shared/avatar/CustomAvatar.tsx | 12 +-- 12 files changed, 114 insertions(+), 121 deletions(-) diff --git a/datahub-web-react/src/Mocks.tsx b/datahub-web-react/src/Mocks.tsx index e75e16289b..5c47814b61 100644 --- a/datahub-web-react/src/Mocks.tsx +++ b/datahub-web-react/src/Mocks.tsx @@ -27,6 +27,7 @@ import { GetTagDocument } from './graphql/tag.generated'; import { GetMlModelDocument } from './graphql/mlModel.generated'; import { GetMlModelGroupDocument } from './graphql/mlModelGroup.generated'; import { GetGlossaryTermDocument, GetGlossaryTermQuery } from './graphql/glossaryTerm.generated'; +import { GetMeDocument } from './graphql/me.generated'; const user1 = { username: 'sdas', @@ -2503,4 +2504,19 @@ export const mocks = [ } as GetSearchResultsForMultipleQuery, }, }, + { + request: { + query: GetMeDocument, + variables: {}, + }, + result: { + data: { + __typename: 'Query', + me: { + __typename: 'AuthenticatedUser', + corpUser: user1, + }, + } as GetSearchResultsForMultipleQuery, + }, + }, ]; diff --git a/datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaHeader.tsx b/datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaHeader.tsx index 82a61d254c..1fa416387b 100644 --- a/datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaHeader.tsx +++ b/datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaHeader.tsx @@ -18,14 +18,14 @@ const ShowVersionButton = styled(Button)` display: none; `; -const KeyButton = styled(Button)<{ highlighted: boolean }>` +const KeyButton = styled(Button)<{ $highlighted: boolean }>` border-radius: 8px 0px 0px 8px; - font-weight: ${(props) => (props.highlighted ? '600' : '400')}; + font-weight: ${(props) => (props.$highlighted ? '600' : '400')}; `; -const ValueButton = styled(Button)<{ highlighted: boolean }>` +const ValueButton = styled(Button)<{ $highlighted: boolean }>` border-radius: 0px 8px 8px 0px; - font-weight: ${(props) => (props.highlighted ? '600' : '400')}; + font-weight: ${(props) => (props.$highlighted ? '600' : '400')}; `; const KeyValueButtonGroup = styled.div` @@ -87,10 +87,10 @@ export default function SchemaHeader({ )} {hasKeySchema && ( - setShowKeySchema(true)}> + setShowKeySchema(true)}> Key - setShowKeySchema(false)}> + setShowKeySchema(false)}> Value diff --git a/datahub-web-react/src/app/entity/dataset/profile/schema/utils/schemaTitleRenderer.tsx b/datahub-web-react/src/app/entity/dataset/profile/schema/utils/schemaTitleRenderer.tsx index 34aba2f15b..6d9e9f0655 100644 --- a/datahub-web-react/src/app/entity/dataset/profile/schema/utils/schemaTitleRenderer.tsx +++ b/datahub-web-react/src/app/entity/dataset/profile/schema/utils/schemaTitleRenderer.tsx @@ -70,6 +70,7 @@ export default function useSchemaTitleRenderer( ) .map((constraint) => ( {value})) || + .map((value) => {value})) || unknownValue() ); }, @@ -171,6 +171,8 @@ export default function DataProfileView({ profile }: Props) { pagination={false} columns={columnStatsColumns} dataSource={columnStatsTableData} + // TODO: this table's types should be cleaned up so `any` is not needed here or in the column definitions + rowKey={(record: any) => record.name} /> diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/EntitySidebar.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/EntitySidebar.tsx index 3836661846..d3dd43cc58 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/EntitySidebar.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/EntitySidebar.tsx @@ -28,7 +28,7 @@ export const EntitySidebar = ({ sidebarSections }: Props) => { if (section.display?.visible(entityData, baseEntity) !== true) { return null; } - return ; + return ; })} ); diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/SidebarAboutSection.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/SidebarAboutSection.tsx index c7a858f9ac..d2a2ad7853 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/SidebarAboutSection.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/SidebarAboutSection.tsx @@ -92,7 +92,13 @@ export const SidebarAboutSection = () => { {links?.length > 0 ? ( {(links || []).map((link) => ( - + {link.description || link.label} diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/ForeignKeyLabel.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/ForeignKeyLabel.tsx index 4e4fb10cd6..38a781b817 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/ForeignKeyLabel.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/ForeignKeyLabel.tsx @@ -1,21 +1,16 @@ -import React, { useContext, useState } from 'react'; -import { Badge, Table } from 'antd'; +import React, { useContext } from 'react'; +import { Badge } from 'antd'; import styled from 'styled-components'; import { green } from '@ant-design/colors'; -import Modal from 'antd/lib/modal/Modal'; -import { Link } from 'react-router-dom'; import { ANTD_GRAY } from '../../../../constants'; -import { EntityType, ForeignKeyConstraint } from '../../../../../../../types.generated'; -import { useBaseEntity } from '../../../../EntityContext'; -import { GetDatasetQuery } from '../../../../../../../graphql/dataset.generated'; -import { useEntityRegistry } from '../../../../../../useEntityRegistry'; +import { ForeignKeyConstraint } from '../../../../../../../types.generated'; import { FkContext } from '../utils/selectedFkContext'; -const ForeignKeyBadge = styled(Badge)<{ highlight: boolean }>` +const ForeignKeyBadge = styled(Badge)<{ $highlight: boolean }>` margin-left: 4px; &&& .ant-badge-count { - background-color: ${(props) => (props.highlight ? green[1] : ANTD_GRAY[1])}; + background-color: ${(props) => (props.$highlight ? green[1] : ANTD_GRAY[1])}; color: ${green[5]}; border: 1px solid ${green[2]}; font-size: 12px; @@ -33,9 +28,6 @@ type Props = { onClick: (params: { fieldPath: string; constraint?: ForeignKeyConstraint | null } | null) => void; }; -const zip = (a, b) => - Array.from(Array(Math.max(b.length, a.length)), (_, i) => ({ source: a[i]?.fieldPath, foreign: b[i]?.fieldPath })); - export default function ForeignKeyLabel({ fieldPath, constraint, @@ -44,52 +36,26 @@ export default function ForeignKeyLabel({ onClick, }: Props) { const selectedFk = useContext(FkContext); - const [showModal, setShowModal] = useState(false); - const baseEntity = useBaseEntity(); - const entityRegistry = useEntityRegistry(); - const sourceColumn = { - title: ( - - {baseEntity.dataset?.name} - - ), - dataIndex: 'source', - key: 'source', + const onOpenFk = () => { + if (selectedFk?.fieldPath === fieldPath && selectedFk?.constraint?.name === constraint?.name) { + onClick(null); + } else { + onClick({ fieldPath, constraint }); + } }; - const foreignColumn = { - title: ( - - {constraint?.foreignDataset?.name} - - ), - dataIndex: 'foreign', - key: 'foreign', - }; - - const rows = zip(constraint?.sourceFields, constraint?.foreignFields); - return ( <> - setShowModal(false)}> - - (e.key === 'Enter' ? setShowModal(true) : null)} - onClick={() => { - if (selectedFk?.fieldPath === fieldPath && selectedFk?.constraint?.name === constraint?.name) { - onClick(null); - } else { - onClick({ fieldPath, constraint }); - } - }} + onKeyPress={(e) => (e.key === 'Enter' ? onOpenFk() : null)} + onClick={onOpenFk} onMouseEnter={() => setHighlightedConstraint(constraint?.name || null)} onMouseLeave={() => setHighlightedConstraint(null)} > - + ); diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaRow.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaRow.tsx index a5e1dc15fd..42d7d89ffa 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaRow.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaRow.tsx @@ -10,24 +10,21 @@ import { ANTD_GRAY } from '../../../../constants'; import { useBaseEntity } from '../../../../EntityContext'; import { FkContext } from '../utils/selectedFkContext'; -const ForeignKeyContent = styled.div` +const ForeignKeyContent = styled.tr` position: absolute; display: flex; flex-direction: column; width: 100%; - max-height: 600px; - height: 600px; z-index: 99999; - margin-top: -590px; + margin-top: -587px; box-shadow: inset 0 7px 16px -7px ${ANTD_GRAY[5]}; `; const EntitySidePanel = styled.div` overflow-y: scroll; - max-height: 548px; - width: 900px; - height: 548px; + max-height: 545px; padding: 8px; + width: 900px; border-right: 1px solid ${ANTD_GRAY[4]}; background-color: white; `; @@ -53,8 +50,6 @@ const ConstraintSection = styled.div` min-height: 100%; display: flex; justify-content: space-between; - max-height: 548px; - min-height: 548px; background-color: ${ANTD_GRAY[2]}; `; @@ -69,7 +64,7 @@ const BodyContent = styled.div` `; const HeaderContent = styled.div` - margin-top: 12px; + padding-top: 8px; min-height: 40px; font-size: 16px; font-weight: 500; @@ -77,6 +72,12 @@ const HeaderContent = styled.div` border-bottom: 1px solid ${ANTD_GRAY[4]}; `; +const ForiegnKeyTd = styled.td` + &&& { + padding: 0; + } +`; + const DatasetLink = styled(Link)` color: ${ANTD_GRAY[9]}; font-weight: 800; @@ -104,46 +105,48 @@ export const SchemaRow = ({ {children} {fieldPath === selectedFk?.fieldPath && ( - - Foreign Key to{' '} - - {selectedFk.constraint?.foreignDataset?.name} - - - - - - {entityRegistry.renderProfile( + + + Foreign Key to{' '} + - - -
- {baseEntity.dataset?.name} - {selectedFk.constraint?.sourceFields?.map((field) => ( -
- -
- ))} -
- {'--->'} -
- {selectedFk.constraint?.foreignDataset?.name} - {selectedFk.constraint?.foreignFields?.map((field) => ( -
- -
- ))} -
- - + > + {selectedFk.constraint?.foreignDataset?.name} + + + + + + {entityRegistry.renderProfile( + EntityType.Dataset, + selectedFk.constraint?.foreignDataset?.urn || '', + )} + + + +
+ {baseEntity.dataset?.name} + {selectedFk.constraint?.sourceFields?.map((field) => ( +
+ +
+ ))} +
+ {'--->'} +
+ {selectedFk.constraint?.foreignDataset?.name} + {selectedFk.constraint?.foreignFields?.map((field) => ( +
+ +
+ ))} +
+ + + )} diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/TypeLabel.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/TypeLabel.tsx index e527aa6378..be8c10bab8 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/TypeLabel.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/TypeLabel.tsx @@ -32,7 +32,7 @@ export default function TypeLabel({ type, nativeDataType }: Props) { const NativeDataTypeTooltip = ({ children }) => nativeDataType ? ( - {children} + {children} ) : ( <>{children} diff --git a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx index cad4480a33..b2bb4bc8b9 100644 --- a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx +++ b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx @@ -141,8 +141,8 @@ export default function DefaultPreviewCard({ return (
- - + + {logoComponent && logoComponent} {!!logoUrl && } @@ -150,14 +150,12 @@ export default function DefaultPreviewCard({ {type} - - {name || ' '} - - - - - - + {name || ' '} + + + + + {description.length > 0 && ( {description} diff --git a/datahub-web-react/src/app/search/SearchFilters.tsx b/datahub-web-react/src/app/search/SearchFilters.tsx index 1488892c2b..d72b0dfca6 100644 --- a/datahub-web-react/src/app/search/SearchFilters.tsx +++ b/datahub-web-react/src/app/search/SearchFilters.tsx @@ -49,6 +49,7 @@ export const SearchFilters = ({ facets, selectedFilters, onFilterSelect, loading <> {cachedProps.facets.map((facet) => ( ` +const AvatarStyled = styled(Avatar)<{ size?: number; $backgroundColor: string }>` color: #fff; - background-color: ${(props) => props.backgroundColor}; + background-color: ${(props) => props.$backgroundColor}; font-size: ${(props) => (props.size ? `${Math.max(props.size / 2.0, 14)}px` : '14px')} !important; margin-right: 4px; height: 24px; @@ -43,20 +43,20 @@ export default function CustomAvatar({ isGroup = false, }: Props) { const avatarWithInitial = name ? ( - + {name.charAt(0).toUpperCase()} ) : ( - + ); const avatarWithDefault = useDefaultAvatar ? ( - + ) : ( avatarWithInitial ); const avatar = photoUrl && photoUrl !== '' ? ( - + ) : ( avatarWithDefault );