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

2025-11-01 19:25:56 +00:00 · 2021-10-26 12:13:53 -07:00 · 2021-10-26 12:13:53 -07:00 · 37394207a4
commit 37394207a4
parent a52711472e
12 changed files with 114 additions and 121 deletions
--- 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,
+        },
+    },
 ];
--- 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 && (
                        <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>
--- 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) => (
                            <ForeignKeyLabel
+                                key={constraint?.name}
                                fieldPath={fieldPath}
                                constraint={constraint}
                                highlight={constraint?.name === highlightedConstraint}
--- a/datahub-web-react/src/app/entity/dataset/profile/stats/snapshot/SnapshotStatsView.tsx
+++ b/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>
        </>
--- 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 = <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>
    );
--- 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 ? (
                <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>
--- 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<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>
        </>
    );
--- 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 = ({
            <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>
            )}
        </>
--- 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 ? (
            <Tooltip placement="top" title={capitalizeFirstLetter(nativeDataType)}>
-                {children}
+                <span>{children}</span>
            </Tooltip>
        ) : (
            <>{children}</>
--- 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 (
        <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>
--- 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) => (
                <SearchFilter
+                    key={`${facet.displayName}-${facet.field}`}
                    facet={facet}
                    selectedFilters={cachedProps.selectedFilters}
                    onFilterSelect={onFilterSelectAndSetCache}
--- a/datahub-web-react/src/app/shared/avatar/CustomAvatar.tsx
+++ b/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
        );