From 8829e6d9764e3b9bd4be8f9c0898f68bc1b168c8 Mon Sep 17 00:00:00 2001
From: Aniket Katkar <aniketkatkar97@gmail.com>
Date: Tue, 24 Jan 2023 15:39:34 +0530
Subject: [PATCH] Fixed issue with topic entity summary panel not showing
 schema fields (#9877)

---
 .../TopicSummary/TopicSummary.component.tsx   | 12 +++++-----
 .../TopicSummary/TopicSummary.test.tsx        | 23 ++++++++-----------
 .../mocks/TopicSummary.mock.ts                | 18 +++++++++------
 3 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TopicSummary/TopicSummary.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TopicSummary/TopicSummary.component.tsx
index 3034cad42e6..6d94ba0289d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TopicSummary/TopicSummary.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TopicSummary/TopicSummary.component.tsx
@@ -12,7 +12,7 @@
  */
 
 import { Col, Divider, Row, Typography } from 'antd';
-import { isArray } from 'lodash';
+import { isArray, isEmpty } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getTopicByFqn } from 'rest/topicsAPI';
@@ -62,9 +62,9 @@ function TopicSummary({ entityDetails }: TopicSummaryProps) {
         ''
       );
 
-      const { partitions } = res;
+      const { partitions, messageSchema } = res;
 
-      setTopicDetails({ ...entityDetails, partitions });
+      setTopicDetails({ ...entityDetails, partitions, messageSchema });
     } catch {
       showErrorToast(
         t('server.entity-details-fetch-error', {
@@ -126,9 +126,7 @@ function TopicSummary({ entityDetails }: TopicSummaryProps) {
           </Typography.Text>
         </Col>
         <Col span={24}>
-          {entityDetails.messageSchema?.schemaFields ? (
-            <SummaryList formattedEntityData={formattedSchemaFieldsData} />
-          ) : (
+          {isEmpty(topicDetails.messageSchema?.schemaFields) ? (
             <div className="m-y-md">
               <Typography.Text
                 className="text-gray"
@@ -136,6 +134,8 @@ function TopicSummary({ entityDetails }: TopicSummaryProps) {
                 {t('message.no-data-available')}
               </Typography.Text>
             </div>
+          ) : (
+            <SummaryList formattedEntityData={formattedSchemaFieldsData} />
           )}
         </Col>
       </Row>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TopicSummary/TopicSummary.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TopicSummary/TopicSummary.test.tsx
index 76ec108c031..fce8bd827c3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TopicSummary/TopicSummary.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TopicSummary/TopicSummary.test.tsx
@@ -14,7 +14,10 @@
 import { act, render, screen } from '@testing-library/react';
 import React from 'react';
 import { getTopicByFqn } from 'rest/topicsAPI';
-import { mockTopicEntityDetails } from '../mocks/TopicSummary.mock';
+import {
+  mockTopicByFqnResponse,
+  mockTopicEntityDetails,
+} from '../mocks/TopicSummary.mock';
 import TopicSummary from './TopicSummary.component';
 
 jest.mock(
@@ -34,7 +37,7 @@ jest.mock('../SummaryList/SummaryList.component', () =>
 );
 
 jest.mock('rest/topicsAPI', () => ({
-  getTopicByFqn: jest.fn().mockImplementation(() => ({ partitions: 128 })),
+  getTopicByFqn: jest.fn().mockImplementation(() => mockTopicByFqnResponse),
 }));
 
 describe('TopicSummary component tests', () => {
@@ -76,19 +79,11 @@ describe('TopicSummary component tests', () => {
     expect(summaryList).toBeInTheDocument();
   });
 
-  it('No data message should be shown in case not schemaFields are available in topic details', async () => {
+  it('No data message should be shown in case no schemaFields are available in topic details', async () => {
+    (getTopicByFqn as jest.Mock).mockImplementation(() => Promise.resolve({}));
+
     await act(async () => {
-      render(
-        <TopicSummary
-          entityDetails={{
-            ...mockTopicEntityDetails,
-            messageSchema: {
-              ...mockTopicEntityDetails.messageSchema,
-              schemaFields: undefined,
-            },
-          }}
-        />
-      );
+      render(<TopicSummary entityDetails={mockTopicEntityDetails} />);
     });
 
     const summaryList = screen.queryByTestId('SummaryList');
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/mocks/TopicSummary.mock.ts b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/mocks/TopicSummary.mock.ts
index a2acb9c223b..e6fb6f214a0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/mocks/TopicSummary.mock.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/mocks/TopicSummary.mock.ts
@@ -38,6 +38,17 @@ export const mockTopicEntityDetails: Topic = {
     deleted: false,
     href: 'http://openmetadata-server:8585/api/v1/services/messagingServices/5d6f73f0-1811-49c8-8d1d-7a478ffd8177',
   },
+  partitions: 0,
+  cleanupPolicies: [CleanupPolicy.Delete],
+  replicationFactor: 4,
+  maximumMessageSize: 208,
+  retentionSize: 1068320655,
+  tags: [],
+  followers: [],
+};
+
+export const mockTopicByFqnResponse = {
+  partitions: 128,
   messageSchema: {
     schemaText:
       '{"namespace":"openmetadata.kafka","type":"record","name":"Product","fields":[{"name":"product_id","type":"int"}]}',
@@ -90,11 +101,4 @@ export const mockTopicEntityDetails: Topic = {
       },
     ],
   },
-  partitions: 0,
-  cleanupPolicies: [CleanupPolicy.Delete],
-  replicationFactor: 4,
-  maximumMessageSize: 208,
-  retentionSize: 1068320655,
-  tags: [],
-  followers: [],
 };