fix(ui): Fixing unreleased search preview bugs (datahub-project#5432)

Santhin · Jul 26, 2022 · 255a5db · 255a5db
1 parent aa9ec87
commit 255a5db
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 22 deletions.
diff --git a/datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/GmsGraphQLEngine.java b/datahub-graphql-core/src/main/java/com/linkedin/datahub/graphql/GmsGraphQLEngine.java
@@ -885,9 +885,14 @@ private void configureDatasetResolvers(final RuntimeWiring.Builder builder) {
             )
             .type("DatasetStatsSummary", typeWiring -> typeWiring
                 .dataFetcher("topUsersLast30Days", new LoadableTypeBatchResolver<>(corpUserType,
-                    (env) -> ((DatasetStatsSummary) env.getSource()).getTopUsersLast30Days().stream()
-                        .map(CorpUser::getUrn)
-                        .collect(Collectors.toList())))
+                    (env) -> {
+                        DatasetStatsSummary summary = ((DatasetStatsSummary) env.getSource());
+                        return summary.getTopUsersLast30Days() != null
+                            ? summary.getTopUsersLast30Days().stream()
+                            .map(CorpUser::getUrn)
+                            .collect(Collectors.toList())
+                            : null;
+                    }))
             );
     }
 
@@ -1039,9 +1044,14 @@ private void configureDashboardResolvers(final RuntimeWiring.Builder builder) {
         );
         builder.type("DashboardStatsSummary", typeWiring -> typeWiring
             .dataFetcher("topUsersLast30Days", new LoadableTypeBatchResolver<>(corpUserType,
-                (env) -> ((DashboardStatsSummary) env.getSource()).getTopUsersLast30Days().stream()
-                    .map(CorpUser::getUrn)
-                    .collect(Collectors.toList())))
+                (env) -> {
+                DashboardStatsSummary summary = ((DashboardStatsSummary) env.getSource());
+                return summary.getTopUsersLast30Days() != null
+                    ? summary.getTopUsersLast30Days().stream()
+                        .map(CorpUser::getUrn)
+                        .collect(Collectors.toList())
+                    : null;
+                }))
         );
     }
 

diff --git a/datahub-graphql-core/src/main/resources/entity.graphql b/datahub-graphql-core/src/main/resources/entity.graphql
@@ -5279,7 +5279,7 @@ type DatasetStatsSummary {
     """
     The top users in the past 30 days
     """
-    topUsersLast30Days: [CorpUser!]!
+    topUsersLast30Days: [CorpUser!]
 }
 
 """
@@ -5456,7 +5456,7 @@ type DashboardStatsSummary {
     """
     The top users in the past 30 days
     """
-    topUsersLast30Days: [CorpUser!]!
+    topUsersLast30Days: [CorpUser!]
 }
 
 

diff --git a/datahub-web-react/src/app/entity/shared/components/styled/ExpandedActorGroup.tsx b/datahub-web-react/src/app/entity/shared/components/styled/ExpandedActorGroup.tsx
@@ -1,18 +1,53 @@
+import { Popover, Typography } from 'antd';
 import React from 'react';
+import styled from 'styled-components';
 import { CorpGroup, CorpUser } from '../../../../../types.generated';
 import { ExpandedActor } from './ExpandedActor';
 
+const PopoverActors = styled.div``;
+
+const ActorsContainer = styled.div`
+    display: flex;
+    justify-content: right;
+    flex-wrap: wrap;
+    align-items: center;
+`;
+
+const RemainderText = styled(Typography.Text)`
+    display: flex;
+    justify-content: right;
+    margin-right: 8px;
+`;
+
 type Props = {
     actors: Array<CorpUser | CorpGroup>;
+    max: number;
     onClose?: (actor: CorpUser | CorpGroup) => void;
 };
 
-export const ExpandedActorGroup = ({ actors, onClose }: Props) => {
+const DEFAULT_MAX = 10;
+
+export const ExpandedActorGroup = ({ actors, max = DEFAULT_MAX, onClose }: Props) => {
+    const finalActors = actors.length > max ? actors.slice(0, max) : actors;
+    const remainder = actors.length > max ? actors.length - max : undefined;
+
     return (
-        <>
-            {actors.map((actor) => (
-                <ExpandedActor key={actor.urn} actor={actor} onClose={() => onClose?.(actor)} />
-            ))}
-        </>
+        <Popover
+            placement="left"
+            content={
+                <PopoverActors>
+                    {actors.map((actor) => (
+                        <ExpandedActor key={actor.urn} actor={actor} onClose={() => onClose?.(actor)} />
+                    ))}
+                </PopoverActors>
+            }
+        >
+            <ActorsContainer>
+                {finalActors.map((actor) => (
+                    <ExpandedActor key={actor.urn} actor={actor} onClose={() => onClose?.(actor)} />
+                ))}
+            </ActorsContainer>
+            {remainder && <RemainderText type="secondary">+ {remainder} more</RemainderText>}
+        </Popover>
     );
 };
diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHeader.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHeader.tsx
@@ -113,7 +113,7 @@ export const EntityHeader = ({ refreshBrowser, headerDropdownItems, isNameEditab
                 <PlatformContent />
                 <TitleWrapper>
                     <EntityName isNameEditable={canEditName} />
-                    {entityData?.deprecation && (
+                    {entityData?.deprecation?.deprecated && (
                         <DeprecationPill deprecation={entityData?.deprecation} preview={isCompact} />
                     )}
                     {entityData?.health?.map((health) => (

diff --git a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx
@@ -148,7 +148,7 @@ const UserListContainer = styled.div`
 
 const UserListDivider = styled(Divider)`
     padding: 4px;
-    height: 60px;
+    height: auto;
 `;
 
 const UserListTitle = styled(Typography.Text)`
@@ -266,7 +266,7 @@ export default function DefaultPreviewCard({
                                 {name || ' '}
                             </EntityTitle>
                         </Link>
-                        {deprecation && <DeprecationPill deprecation={deprecation} preview />}
+                        {deprecation?.deprecated && <DeprecationPill deprecation={deprecation} preview />}
                         {externalUrl && (
                             <ExternalUrlContainer>
                                 <ExternalUrlButton type="link" href={externalUrl} target="_blank">
@@ -324,22 +324,22 @@ export default function DefaultPreviewCard({
                 )}
             </LeftColumn>
             <RightColumn>
-                {topUsers && topUsers.length > 0 && (
+                {topUsers && topUsers?.length > 0 && (
                     <>
                         <UserListContainer>
                             <UserListTitle strong>Top Users</UserListTitle>
                             <div>
-                                <ExpandedActorGroup actors={topUsers} />
+                                <ExpandedActorGroup actors={topUsers} max={2} />
                             </div>
                         </UserListContainer>
-                        <UserListDivider type="vertical" />
                     </>
                 )}
-                {owners && owners.length > 0 && (
+                {(topUsers?.length || 0) > 0 && (owners?.length || 0) > 0 && <UserListDivider type="vertical" />}
+                {owners && owners?.length > 0 && (
                     <UserListContainer>
                         <UserListTitle strong>Owners</UserListTitle>
                         <div>
-                            <ExpandedActorGroup actors={owners.map((owner) => owner.owner)} />
+                            <ExpandedActorGroup actors={owners.map((owner) => owner.owner)} max={2} />
                         </div>
                     </UserListContainer>
                 )}