UI : Clean up data insights summary and KPIs (#9335)

openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightSummary.test.tsx

@@ -13,15 +13,13 @@
 
 import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 import { act } from 'react-test-renderer';
 import { DataInsightChartType } from '../../generated/dataInsight/dataInsightChartResult';
+import { DataInsightTabs } from '../../interface/data-insight.interface';
 import DataInsightSummary from './DataInsightSummary';
 
-jest.mock('react-i18next', () => ({
+let activeTab = DataInsightTabs.DATA_ASSETS;
-  useTranslation: jest.fn().mockReturnValue({
-    t: (label: string) => label,
-  }),
-}));
 
 const mockFilter = {
   startTs: 1667952000000,
@@ -30,6 +28,15 @@ const mockFilter = {
 
 const mockScrollFunction = jest.fn();
 
+jest.mock('react-router-dom', () => ({
+  Link: jest
+    .fn()
+    .mockImplementation(({ children, ...rest }) => <a {...rest}>{children}</a>),
+  useParams: jest.fn().mockImplementation(() => ({
+    tab: activeTab,
+  })),
+}));
+
 jest.mock('../../axiosAPIs/DataInsightAPI', () => ({
   getAggregateChartData: jest.fn().mockImplementation(() => Promise.resolve()),
 }));
@@ -41,7 +48,8 @@ describe('Test DataInsightSummary Component', () => {
         <DataInsightSummary
           chartFilter={mockFilter}
           onScrollToChart={mockScrollFunction}
-        />
+        />,
+        { wrapper: MemoryRouter }
       );
     });
 
@@ -54,4 +62,46 @@ describe('Test DataInsightSummary Component', () => {
     expect(summaryCard).toBeInTheDocument();
     expect(totalEntitiesByType).toBeInTheDocument();
   });
+
+  it('Should render only the data assets summary', async () => {
+    await act(async () => {
+      render(
+        <DataInsightSummary
+          chartFilter={mockFilter}
+          onScrollToChart={mockScrollFunction}
+        />,
+        { wrapper: MemoryRouter }
+      );
+    });
+
+    const dataAssetSummary = await screen.findByTestId('data-assets-summary');
+
+    expect(dataAssetSummary).toBeInTheDocument();
+
+    // should not render the app analytics summary
+    expect(screen.queryByTestId('app-analytics-summary')).toBeNull();
+  });
+
+  it('Should render only the app analytics summary', async () => {
+    activeTab = DataInsightTabs.APP_ANALYTICS;
+
+    await act(async () => {
+      render(
+        <DataInsightSummary
+          chartFilter={mockFilter}
+          onScrollToChart={mockScrollFunction}
+        />,
+        { wrapper: MemoryRouter }
+      );
+    });
+
+    const appAnalyticsSummary = await screen.findByTestId(
+      'app-analytics-summary'
+    );
+
+    expect(appAnalyticsSummary).toBeInTheDocument();
+
+    // should not render the data assets summary
+    expect(screen.queryByTestId('data-assets-summary')).toBeNull();
+  });
 });

openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightSummary.tsx

@@ -15,7 +15,7 @@ import { Card, Col, Row, Space, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import React, { FC, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import { getAggregateChartData } from '../../axiosAPIs/DataInsightAPI';
 import { getUserPath } from '../../constants/constants';
 import {
@@ -28,7 +28,10 @@ import {
   DataInsightChartType,
 } from '../../generated/dataInsight/dataInsightChartResult';
 import { MostActiveUsers } from '../../generated/dataInsight/type/mostActiveUsers';
-import { ChartFilter } from '../../interface/data-insight.interface';
+import {
+  ChartFilter,
+  DataInsightTabs,
+} from '../../interface/data-insight.interface';
 import {
   getEntitiesChartSummary,
   getWebChartSummary,
@@ -44,6 +47,9 @@ interface Props {
 }
 
 const DataInsightSummary: FC<Props> = ({ chartFilter, onScrollToChart }) => {
+  const { tab = DataInsightTabs.DATA_ASSETS } =
+    useParams<{ tab: DataInsightTabs }>();
+
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [entitiesCharts, setEntitiesChart] = useState<
     (DataInsightChartResult | undefined)[]
@@ -167,64 +173,71 @@ const DataInsightSummary: FC<Props> = ({ chartFilter, onScrollToChart }) => {
         </Typography.Title>
       }>
       <Row data-testid="summary-card-content" gutter={[16, 16]}>
-        {/* summary of entity charts */}
+        {tab === DataInsightTabs.DATA_ASSETS && (
-        {entitiesSummaryList.map((summary) => (
+          <div data-testid="data-assets-summary">
-          <Col
+            {/* summary of entity charts */}
-            className="summary-card-item"
+            {entitiesSummaryList.map((summary) => (
-            data-testid={`summary-item-${summary.id}`}
+              <Col
-            key={summary.id}
+                className="summary-card-item"
-            span={6}
+                data-testid={`summary-item-${summary.id}`}
-            onClick={() => onScrollToChart(summary.id)}>
+                key={summary.id}
-            <Typography.Text className="data-insight-label-text">
+                span={6}
-              {summary.label}
+                onClick={() => onScrollToChart(summary.id)}>
-            </Typography.Text>
+                <Typography.Text className="data-insight-label-text">
-            <Typography className="font-semibold text-2xl m--ml-0.5">
+                  {summary.label}
-              {summary.latest}
+                </Typography.Text>
-              {summary.id.startsWith('Percentage') ? '%' : ''}
+                <Typography className="font-semibold text-2xl m--ml-0.5">
-            </Typography>
+                  {summary.latest}
-          </Col>
+                  {summary.id.startsWith('Percentage') ? '%' : ''}
-        ))}
+                </Typography>
+              </Col>
+            ))}
+          </div>
+        )}
+        {tab === DataInsightTabs.APP_ANALYTICS && (
+          <div data-testid="app-analytics-summary">
+            {/* summary for web charts */}
+            {webSummaryList.map((summary) => (
+              <Col
+                className="summary-card-item"
+                data-testid={`summary-item-${summary.id}`}
+                key={summary.id}
+                span={6}
+                onClick={() => onScrollToChart(summary.id)}>
+                <Typography.Text className="data-insight-label-text">
+                  {summary.label}
+                </Typography.Text>
+                <Typography className="font-semibold text-2xl m--ml-0.5">
+                  {summary.latest}
+                  {summary.id.startsWith('Percentage') ? '%' : ''}
+                </Typography>
+              </Col>
+            ))}
 
-        {/* summary for web charts */}
+            {/* summary of most active user */}
-        {webSummaryList.map((summary) => (
+            {mostActiveUser && mostActiveUser.userName && (
-          <Col
+              <Col
-            className="summary-card-item"
+                data-testid={`summary-item-${DataInsightChartType.MostActiveUsers}`}
-            data-testid={`summary-item-${summary.id}`}
+                key={DataInsightChartType.MostActiveUsers}
-            key={summary.id}
+                span={6}>
-            span={6}
+                <Typography.Text className="data-insight-label-text d-block">
-            onClick={() => onScrollToChart(summary.id)}>
+                  {t('label.most-active-user')}
-            <Typography.Text className="data-insight-label-text">
+                </Typography.Text>
-              {summary.label}
+                <UserPopOverCard userName={mostActiveUser.userName}>
-            </Typography.Text>
+                  <Space>
-            <Typography className="font-semibold text-2xl m--ml-0.5">
+                    <ProfilePicture
-              {summary.latest}
+                      id=""
-              {summary.id.startsWith('Percentage') ? '%' : ''}
+                      name={mostActiveUser.userName}
-            </Typography>
+                      type="circle"
-          </Col>
+                    />
-        ))}
+                    <Link to={getUserPath(mostActiveUser.userName)}>
-
+                      {mostActiveUser.userName}
-        {/* summary of most active user */}
+                    </Link>
-        {mostActiveUser && mostActiveUser.userName && (
+                  </Space>
-          <Col
+                </UserPopOverCard>
-            data-testid={`summary-item-${DataInsightChartType.MostActiveUsers}`}
+              </Col>
-            key={DataInsightChartType.MostActiveUsers}
+            )}
-            span={6}>
+          </div>
-            <Typography.Text className="data-insight-label-text d-block">
-              {t('label.most-active-user')}
-            </Typography.Text>
-            <UserPopOverCard userName={mostActiveUser.userName}>
-              <Space>
-                <ProfilePicture
-                  id=""
-                  name={mostActiveUser.userName}
-                  type="circle"
-                />
-                <Link to={getUserPath(mostActiveUser.userName)}>
-                  {mostActiveUser.userName}
-                </Link>
-              </Space>
-            </UserPopOverCard>
-          </Col>
         )}
       </Row>
     </Card>

openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.component.tsx

@@ -246,15 +246,23 @@ const DataInsightPage = () => {
             </Space>
           </Card>
         </Col>
-        <Col span={24}>
+
-          <DataInsightSummary
+        {/* Do not show summary for KPIs */}
-            chartFilter={chartFilter}
+        {tab !== DataInsightTabs.KPIS && (
-            onScrollToChart={handleScrollToChart}
+          <Col span={24}>
-          />
+            <DataInsightSummary
-        </Col>
+              chartFilter={chartFilter}
-        <Col span={24}>
+              onScrollToChart={handleScrollToChart}
-          <KPIChart chartFilter={chartFilter} />
+            />
-        </Col>
+          </Col>
+        )}
+
+        {/* Do not show KPIChart for app analytics */}
+        {tab !== DataInsightTabs.APP_ANALYTICS && (
+          <Col span={24}>
+            <KPIChart chartFilter={chartFilter} />
+          </Col>
+        )}
         {activeTab === DataInsightTabs.DATA_ASSETS && (
           <>
             <Col span={24}>

openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.test.tsx

@@ -11,13 +11,17 @@
  *  limitations under the License.
  */
 
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { DataInsightTabs } from '../../interface/data-insight.interface';
 import DataInsightPage from './DataInsightPage.component';
 
+let activeTab = DataInsightTabs.DATA_ASSETS;
+
 jest.mock('react-router-dom', () => ({
   useHistory: jest.fn().mockReturnValue({ push: jest.fn() }),
-  useParams: jest.fn().mockReturnValue({ tab: 'data-assets' }),
+  useParams: jest.fn().mockImplementation(() => ({ tab: activeTab })),
 }));
 
 jest.mock('../../components/containers/PageLayoutV1', () =>
@@ -121,4 +125,28 @@ describe('Test DataInsightPage Component', () => {
 
     expect(totalEntityInsight).toBeInTheDocument();
   });
+
+  it('Should not render the KPI chart for app analytics', async () => {
+    activeTab = DataInsightTabs.APP_ANALYTICS;
+
+    await act(async () => {
+      render(<DataInsightPage />, { wrapper: MemoryRouter });
+    });
+
+    const kpiChart = screen.queryByTestId('kpi-chart');
+
+    expect(kpiChart).toBeNull();
+  });
+
+  it('Should not render the insights summary for KPIs', async () => {
+    activeTab = DataInsightTabs.KPIS;
+
+    await act(async () => {
+      render(<DataInsightPage />, { wrapper: MemoryRouter });
+    });
+
+    const dataInsightsSummary = screen.queryByTestId('data-insight-summary');
+
+    expect(dataInsightsSummary).toBeNull();
+  });
 });