fix(react): fix up yarn test error reporting (#3462)

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,
+        },
+    },
 ];

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 && (
                         <KeyValueButtonGroup>
-                            <KeyButton highlighted={showKeySchema} onClick={() => setShowKeySchema(true)}>
+                            <KeyButton $highlighted={showKeySchema} onClick={() => setShowKeySchema(true)}>
                                 Key
                             </KeyButton>
-                            <ValueButton highlighted={!showKeySchema} onClick={() => setShowKeySchema(false)}>
+                            <ValueButton $highlighted={!showKeySchema} onClick={() => setShowKeySchema(false)}>
                                 Value
                             </ValueButton>
                         </KeyValueButtonGroup>

datahub-web-react/src/app/entity/dataset/profile/schema/utils/schemaTitleRenderer.tsx

@@ -70,6 +70,7 @@ export default function useSchemaTitleRenderer(
                         )
                         .map((constraint) => (
                             <ForeignKeyLabel
+                                key={constraint?.name}
                                 fieldPath={fieldPath}
                                 constraint={constraint}
                                 highlight={constraint?.name === highlightedConstraint}

datahub-web-react/src/app/entity/dataset/profile/stats/snapshot/SnapshotStatsView.tsx

@@ -121,7 +121,7 @@ export default function DataProfileView({ profile }: Props) {
                         (sampleValues &&
                             sampleValues
                                 .slice(0, sampleValues.length < 3 ? sampleValues?.length : 3)
-                                .map((value) => <Tag>{value}</Tag>)) ||
+                                .map((value) => <Tag key={value}>{value}</Tag>)) ||
                         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}
                 />
             </StatsSection>
         </>

datahub-web-react/src/app/entity/shared/containers/profile/sidebar/EntitySidebar.tsx

@@ -28,7 +28,7 @@ export const EntitySidebar = <T,>({ sidebarSections }: Props) => {
                 if (section.display?.visible(entityData, baseEntity) !== true) {
                     return null;
                 }
-                return <section.component properties={section.properties} />;
+                return <section.component key={`${section.component}`} properties={section.properties} />;
             })}
         </ContentContainer>
     );

datahub-web-react/src/app/entity/shared/containers/profile/sidebar/SidebarAboutSection.tsx

@@ -92,7 +92,13 @@ export const SidebarAboutSection = () => {
             {links?.length > 0 ? (
                 <SidebarLinkList>
                     {(links || []).map((link) => (
-                        <LinkButton type="link" href={link.url} target="_blank" rel="noreferrer">
+                        <LinkButton
+                            type="link"
+                            href={link.url}
+                            target="_blank"
+                            rel="noreferrer"
+                            key={`${link.label}-${link.url}-${link.author}`}
+                        >
                             <LinkOutlined />
                             {link.description || link.label}
                         </LinkButton>

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<GetDatasetQuery>();
-    const entityRegistry = useEntityRegistry();
 
-    const sourceColumn = {
-        title: (
-            <Link to={entityRegistry.getEntityUrl(EntityType.Dataset, baseEntity?.dataset?.urn || '')}>
-                {baseEntity.dataset?.name}
-            </Link>
-        ),
-        dataIndex: 'source',
-        key: 'source',
+    const onOpenFk = () => {
+        if (selectedFk?.fieldPath === fieldPath && selectedFk?.constraint?.name === constraint?.name) {
+            onClick(null);
+        } else {
+            onClick({ fieldPath, constraint });
+        }
     };
 
-    const foreignColumn = {
-        title: (
-            <Link to={entityRegistry.getEntityUrl(EntityType.Dataset, constraint?.foreignDataset?.urn || '')}>
-                {constraint?.foreignDataset?.name}
-            </Link>
-        ),
-        dataIndex: 'foreign',
-        key: 'foreign',
-    };
-
-    const rows = zip(constraint?.sourceFields, constraint?.foreignFields);
-
     return (
         <>
-            <Modal title={constraint?.name || 'Foreign Key'} visible={showModal} onCancel={() => setShowModal(false)}>
-                <Table columns={[sourceColumn, foreignColumn]} dataSource={rows} pagination={false} />
-            </Modal>
             <span
                 role="button"
                 tabIndex={0}
-                onKeyPress={(e) => (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)}
             >
-                <ForeignKeyBadge highlight={highlight || selectedFk?.fieldPath === fieldPath} count="Foreign Key" />
+                <ForeignKeyBadge $highlight={highlight || selectedFk?.fieldPath === fieldPath} count="Foreign Key" />
             </span>
         </>
     );

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 = ({
             <tr className={className}>{children}</tr>
             {fieldPath === selectedFk?.fieldPath && (
                 <ForeignKeyContent>
-                    <HeaderContent>
-                        Foreign Key to{' '}
-                        <DatasetLink
-                            to={entityRegistry.getEntityUrl(
-                                EntityType.Dataset,
-                                selectedFk.constraint?.foreignDataset?.urn || '',
-                            )}
-                        >
-                            {selectedFk.constraint?.foreignDataset?.name}
-                        </DatasetLink>
-                    </HeaderContent>
-                    <BodyContent>
-                        <EntitySidePanel>
-                            <CompactContext.Provider value>
-                                {entityRegistry.renderProfile(
+                    <ForiegnKeyTd>
+                        <HeaderContent>
+                            Foreign Key to{' '}
+                            <DatasetLink
+                                to={entityRegistry.getEntityUrl(
                                     EntityType.Dataset,
                                     selectedFk.constraint?.foreignDataset?.urn || '',
                                 )}
-                            </CompactContext.Provider>
-                        </EntitySidePanel>
-                        <ConstraintSection>
-                            <div>
-                                <TableTitle>{baseEntity.dataset?.name}</TableTitle>
-                                {selectedFk.constraint?.sourceFields?.map((field) => (
-                                    <div>
-                                        <FieldBadge count={field?.fieldPath} />
-                                    </div>
-                                ))}
-                            </div>
-                            <ArrowContainer>{'--->'}</ArrowContainer>
-                            <div>
-                                <TableTitle>{selectedFk.constraint?.foreignDataset?.name}</TableTitle>
-                                {selectedFk.constraint?.foreignFields?.map((field) => (
-                                    <div>
-                                        <FieldBadge count={field?.fieldPath} />
-                                    </div>
-                                ))}
-                            </div>
-                        </ConstraintSection>
-                    </BodyContent>
+                            >
+                                {selectedFk.constraint?.foreignDataset?.name}
+                            </DatasetLink>
+                        </HeaderContent>
+                        <BodyContent>
+                            <EntitySidePanel>
+                                <CompactContext.Provider value>
+                                    {entityRegistry.renderProfile(
+                                        EntityType.Dataset,
+                                        selectedFk.constraint?.foreignDataset?.urn || '',
+                                    )}
+                                </CompactContext.Provider>
+                            </EntitySidePanel>
+                            <ConstraintSection>
+                                <div>
+                                    <TableTitle>{baseEntity.dataset?.name}</TableTitle>
+                                    {selectedFk.constraint?.sourceFields?.map((field) => (
+                                        <div key={field?.fieldPath}>
+                                            <FieldBadge count={field?.fieldPath} />
+                                        </div>
+                                    ))}
+                                </div>
+                                <ArrowContainer>{'--->'}</ArrowContainer>
+                                <div>
+                                    <TableTitle>{selectedFk.constraint?.foreignDataset?.name}</TableTitle>
+                                    {selectedFk.constraint?.foreignFields?.map((field) => (
+                                        <div key={field?.fieldPath}>
+                                            <FieldBadge count={field?.fieldPath} />
+                                        </div>
+                                    ))}
+                                </div>
+                            </ConstraintSection>
+                        </BodyContent>
+                    </ForiegnKeyTd>
                 </ForeignKeyContent>
             )}
         </>

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 ? (
             <Tooltip placement="top" title={capitalizeFirstLetter(nativeDataType)}>
-                {children}
+                <span>{children}</span>
             </Tooltip>
         ) : (
             <>{children}</>

datahub-web-react/src/app/preview/DefaultPreviewCard.tsx

@@ -141,8 +141,8 @@ export default function DefaultPreviewCard({
     return (
         <PreviewContainer data-testid={dataTestID}>
             <div>
-                <Link to={url}>
-                    <TitleContainer>
+                <TitleContainer>
+                    <Link to={url}>
                         <PlatformInfo>
                             {logoComponent && logoComponent}
                             {!!logoUrl && <PreviewImage preview={false} src={logoUrl} alt={platform} />}
@@ -150,14 +150,12 @@ export default function DefaultPreviewCard({
                             <PlatformDivider />
                             <PlatformText>{type}</PlatformText>
                         </PlatformInfo>
-                        <Link to={url}>
-                            <EntityTitle>{name || ' '}</EntityTitle>
-                        </Link>
-                        <TagContainer>
-                            <TagTermGroup uneditableGlossaryTerms={glossaryTerms} uneditableTags={tags} maxShow={3} />
-                        </TagContainer>
-                    </TitleContainer>
-                </Link>
+                        <EntityTitle>{name || ' '}</EntityTitle>
+                    </Link>
+                    <TagContainer>
+                        <TagTermGroup uneditableGlossaryTerms={glossaryTerms} uneditableTags={tags} maxShow={3} />
+                    </TagContainer>
+                </TitleContainer>
                 {description.length > 0 && (
                     <DescriptionContainer>
                         <NoMarkdownViewer limit={200}>{description}</NoMarkdownViewer>

datahub-web-react/src/app/search/SearchFilters.tsx

@@ -49,6 +49,7 @@ export const SearchFilters = ({ facets, selectedFilters, onFilterSelect, loading
         <>
             {cachedProps.facets.map((facet) => (
                 <SearchFilter
+                    key={`${facet.displayName}-${facet.field}`}
                     facet={facet}
                     selectedFilters={cachedProps.selectedFilters}
                     onFilterSelect={onFilterSelectAndSetCache}

datahub-web-react/src/app/shared/avatar/CustomAvatar.tsx

@@ -7,9 +7,9 @@ import styled from 'styled-components';
 import defaultAvatar from '../../../images/default_avatar.png';
 import getAvatarColor from './getAvatarColor';
 
-const AvatarStyled = styled(Avatar)<{ size?: number; backgroundColor: string }>`
+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 ? (
-        <AvatarStyled style={style} size={size} backgroundColor={getAvatarColor(name)}>
+        <AvatarStyled style={style} size={size} $backgroundColor={getAvatarColor(name)}>
             {name.charAt(0).toUpperCase()}
         </AvatarStyled>
     ) : (
-        <AvatarStyled src={defaultAvatar} style={style} size={size} backgroundColor={getAvatarColor(name)} />
+        <AvatarStyled src={defaultAvatar} style={style} size={size} $backgroundColor={getAvatarColor(name)} />
     );
     const avatarWithDefault = useDefaultAvatar ? (
-        <AvatarStyled src={defaultAvatar} style={style} size={size} backgroundColor={getAvatarColor(name)} />
+        <AvatarStyled src={defaultAvatar} style={style} size={size} $backgroundColor={getAvatarColor(name)} />
     ) : (
         avatarWithInitial
     );
     const avatar =
         photoUrl && photoUrl !== '' ? (
-            <AvatarStyled src={photoUrl} style={style} size={size} backgroundColor={getAvatarColor(name)} />
+            <AvatarStyled src={photoUrl} style={style} size={size} $backgroundColor={getAvatarColor(name)} />
         ) : (
             avatarWithDefault
         );