From c1ca2977f42039c965711e6ea2b8eb2cc11a1fff Mon Sep 17 00:00:00 2001
From: Gabe Lyons <itsgabelyons@gmail.com>
Date: Thu, 28 Oct 2021 17:38:16 -0700
Subject: [PATCH] fix(datajobs): fetch dataflow properties from a relationship
 (#3487)

---
 datahub-web-react/src/Mocks.tsx               | 14 +++++++
 .../Entity/__tests__/DataJobFlowTab.test.tsx  | 40 +++++++++++++++++++
 .../src/app/preview/DefaultPreviewCard.tsx    | 16 ++++----
 .../src/graphql/relationships.graphql         | 22 ++++++++++
 4 files changed, 84 insertions(+), 8 deletions(-)
 create mode 100644 datahub-web-react/src/app/entity/shared/tabs/Entity/__tests__/DataJobFlowTab.test.tsx

diff --git a/datahub-web-react/src/Mocks.tsx b/datahub-web-react/src/Mocks.tsx
index 08ee44921f..4643395796 100644
--- a/datahub-web-react/src/Mocks.tsx
+++ b/datahub-web-react/src/Mocks.tsx
@@ -895,6 +895,20 @@ export const dataJob1 = {
             },
         ],
     },
+    incoming: null,
+    outgoing: null,
+    parentFlow: {
+        start: 0,
+        count: 1,
+        total: 1,
+        relationships: [
+            {
+                type: 'IsPartOf',
+                direction: RelationshipDirection.Outgoing,
+                entity: dataFlow1,
+            },
+        ],
+    },
 } as DataJob;
 
 export const dataJob2 = {
diff --git a/datahub-web-react/src/app/entity/shared/tabs/Entity/__tests__/DataJobFlowTab.test.tsx b/datahub-web-react/src/app/entity/shared/tabs/Entity/__tests__/DataJobFlowTab.test.tsx
new file mode 100644
index 0000000000..64cf5d1295
--- /dev/null
+++ b/datahub-web-react/src/app/entity/shared/tabs/Entity/__tests__/DataJobFlowTab.test.tsx
@@ -0,0 +1,40 @@
+import { MockedProvider } from '@apollo/client/testing';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { dataJob1, mocks } from '../../../../../../Mocks';
+import { EntityType } from '../../../../../../types.generated';
+import TestPageContainer from '../../../../../../utils/test-utils/TestPageContainer';
+import { getDataForEntityType } from '../../../containers/profile/utils';
+import EntityContext from '../../../EntityContext';
+import { DataJobFlowTab } from '../DataJobFlowTab';
+
+describe('DataJobFlowTab', () => {
+    it('renders fields', async () => {
+        const { getByText } = render(
+            <MockedProvider mocks={mocks} addTypename={false}>
+                <TestPageContainer initialEntries={['/dataset/urn:li:dataset:3']}>
+                    <EntityContext.Provider
+                        value={{
+                            urn: 'urn:li:dataJob:1',
+                            entityType: EntityType.DataJob,
+                            entityData: getDataForEntityType({
+                                data: dataJob1,
+                                entityType: EntityType.DataJob,
+                                getOverrideProperties: () => ({}),
+                            }),
+                            baseEntity: { dataJob: dataJob1 },
+                            updateEntity: jest.fn(),
+                            routeToTab: jest.fn(),
+                            refetch: jest.fn(),
+                            lineage: undefined,
+                        }}
+                    >
+                        <DataJobFlowTab />
+                    </EntityContext.Provider>
+                </TestPageContainer>
+            </MockedProvider>,
+        );
+        expect(getByText('DataFlowInfoName')).toBeInTheDocument();
+        expect(getByText('DataFlowInfo1 Description')).toBeInTheDocument();
+    });
+});
diff --git a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx
index b1ff5190d0..f3ac0dd91e 100644
--- a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx
+++ b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx
@@ -54,10 +54,10 @@ const PreviewImage = styled(Image)`
     background-color: transparent;
 `;
 
-const EntityTitle = styled(Typography.Text)<{ titleSizePx?: number }>`
+const EntityTitle = styled(Typography.Text)<{ $titleSizePx?: number }>`
     &&& {
         margin-bottom: 0;
-        font-size: ${(props) => props.titleSizePx || 16}px;
+        font-size: ${(props) => props.$titleSizePx || 16}px;
         font-weight: 600;
         vertical-align: middle;
     }
@@ -154,13 +154,13 @@ export default function DefaultPreviewCard({
                             <PlatformDivider />
                             <PlatformText>{type}</PlatformText>
                         </PlatformInfo>
-                        <Link to={url} onClick={onClick}>
-                            <EntityTitle titleSizePx={titleSizePx}>{name || ' '}</EntityTitle>
-                        </Link>
-                        <TagContainer>
-                            <TagTermGroup uneditableGlossaryTerms={glossaryTerms} uneditableTags={tags} maxShow={3} />
-                        </TagContainer>
+                        <EntityTitle onClick={onClick} $titleSizePx={titleSizePx}>
+                            {name || ' '}
+                        </EntityTitle>
                     </Link>
+                    <TagContainer>
+                        <TagTermGroup uneditableGlossaryTerms={glossaryTerms} uneditableTags={tags} maxShow={3} />
+                    </TagContainer>
                 </TitleContainer>
                 {description && description.length > 0 && (
                     <DescriptionContainer>
diff --git a/datahub-web-react/src/graphql/relationships.graphql b/datahub-web-react/src/graphql/relationships.graphql
index 3b90b77e09..17b3655368 100644
--- a/datahub-web-react/src/graphql/relationships.graphql
+++ b/datahub-web-react/src/graphql/relationships.graphql
@@ -8,6 +8,28 @@ fragment relationshipFields on Entity {
             description
         }
     }
+    ... on DataFlow {
+        orchestrator
+        flowId
+        cluster
+        info {
+            name
+            description
+            project
+        }
+        ownership {
+            ...ownershipFields
+        }
+        globalTags {
+            ...globalTagsFields
+        }
+        glossaryTerms {
+            ...glossaryTerms
+        }
+        editableProperties {
+            description
+        }
+    }
     ... on Dashboard {
         ...dashboardRelationshipsLeaf
         ...dashboardFields