ui: separate the api call for test suite (#13277)

* ui: separate the api call for test suite

* updated lampchage icon

* addressing comments

openmetadata-ui/src/main/resources/ui/src/assets/svg/lampcharge.svg

@@ -1,5 +1,6 @@
-<svg viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path opacity="0.4" d="M15.4845 10.1479L14.147 12.4729C13.847 12.9854 14.097 13.4104 14.6845 13.4104H16.272C16.872 13.4104 17.1095 13.8354 16.8095 14.3479L15.4845 16.6729" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10.8596 22.8359V21.3859C7.98457 19.6484 5.62207 16.2609 5.62207 12.6609C5.62207 6.47336 11.3096 1.62336 17.7346 3.02336C20.5596 3.64836 23.0346 5.52336 24.3221 8.11086C26.9346 13.3609 24.1846 18.9359 20.1471 21.3734V22.8234C20.1471 23.1859 20.2846 24.0234 18.9471 24.0234H12.0596C10.6846 24.0359 10.8596 23.4984 10.8596 22.8359Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path opacity="0.4" d="M11.1094 27.7856C13.9719 26.9731 16.9969 26.9731 19.8594 27.7856" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.7" d="M15.625 7.5L11.875 13.125H14.375V16.875L18.125 11.25H15.625V7.5Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.6934 12.0453C23.5062 13.6497 22.8601 15.1698 21.8296 16.4303C21.228 17.1642 19.6998 19.2621 19.375 20.625H10.625C10.3002 19.261 8.77024 17.1632 8.16868 16.4282C7.13855 15.1674 6.49299 13.6471 6.3063 12.0426C6.11959 10.438 6.39943 8.81444 7.11349 7.35888C7.82749 5.90332 8.9468 4.67497 10.3423 3.81533C11.7379 2.95569 13.3529 2.49974 15.0014 2.5C16.6499 2.50026 18.2648 2.95672 19.6601 3.81679C21.0553 4.67687 22.1742 5.90557 22.8877 7.36138C23.6013 8.81713 23.8806 10.4408 23.6934 12.0453ZM18.4898 19.375H11.5102C11.2438 18.7603 10.8879 18.145 10.5566 17.6219C10.0296 16.7897 9.46699 16.041 9.13668 15.6373C8.25636 14.5598 7.70674 13.2635 7.54793 11.8981C7.38905 10.5328 7.62686 9.15044 8.23568 7.90944C8.84461 6.66819 9.80099 5.61692 10.9979 4.87961C12.1951 4.14217 13.5829 3.74978 15.0012 3.75C16.4196 3.75023 17.8072 4.14305 19.0041 4.88087C20.2008 5.61855 21.1568 6.67006 21.7653 7.9115C22.3737 9.15269 22.6111 10.5352 22.4518 11.9004C22.2925 13.2656 21.7426 14.5617 20.8621 15.6388C20.5311 16.0428 19.9688 16.7914 19.4423 17.6233C19.1114 18.1461 18.756 18.7609 18.4898 19.375Z" fill="currentColor"/>
+<path opacity="0.7" d="M10.625 22.5C10.625 22.1548 10.9048 21.875 11.25 21.875H18.75C19.0952 21.875 19.375 22.1548 19.375 22.5C19.375 22.8452 19.0952 23.125 18.75 23.125H11.25C10.9048 23.125 10.625 22.8452 10.625 22.5Z" fill="currentColor"/>
+<path opacity="0.7" fill-rule="evenodd" clip-rule="evenodd" d="M10.625 24.375H19.375V26.25C19.375 26.9404 18.8154 27.5 18.125 27.5H11.875C11.1846 27.5 10.625 26.9404 10.625 26.25V24.375ZM11.875 25.625H18.125V26.25H11.875V25.625Z" fill="currentColor"/>
+</svg>

openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfiler.interface.ts

@@ -18,7 +18,6 @@ import {
   ColumnProfilerConfig,
   PartitionProfilerConfig,
   ProfileSampleType,
-  Table,
   TableProfile,
   TableProfilerConfig,
 } from '../../generated/entity/data/table';
@@ -28,7 +27,6 @@ import { OperationPermission } from '../PermissionProvider/PermissionProvider.in
 export interface TableProfilerProps {
   isTableDeleted?: boolean;
   permissions: OperationPermission;
-  testSuite?: Table['testSuite'];
 }
 
 export type TableTestsType = {

openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.test.tsx

@@ -24,17 +24,21 @@ import { TEST_CASE } from '../../mocks/TableData.mock';
 import { OperationPermission } from '../PermissionProvider/PermissionProvider.interface';
 import { TableProfilerProps } from './TableProfiler.interface';
 // internal imports
+import { TableProfilerTab } from 'components/ProfilerDashboard/profilerDashboard.interface';
+import { getTableDetailsByFQN } from 'rest/tableAPI';
 import TableProfilerV1 from './TableProfilerV1';
 
+const mockLocation = {
+  search: '?activeTab=Table Profile',
+  pathname: '/table',
+};
+
 // mock library imports
 jest.mock('react-router-dom', () => ({
   useHistory: jest.fn().mockImplementation(() => ({
     push: jest.fn(),
   })),
-  useLocation: jest.fn().mockImplementation(() => ({
-    search: '?activeTab=Table Profile',
-    pathname: '/table',
-  })),
+  useLocation: jest.fn().mockImplementation(() => mockLocation),
   Link: jest
     .fn()
     .mockImplementation(({ children }) => <a href="#">{children}</a>),
@@ -66,6 +70,14 @@ jest.mock('rest/testAPI', () => ({
     .fn()
     .mockImplementation(() => Promise.resolve(TEST_CASE)),
 }));
+jest.mock('rest/tableAPI', () => ({
+  getTableDetailsByFQN: jest.fn().mockImplementation(() => Promise.resolve()),
+}));
+jest.mock('./QualityTab/QualityTab.component', () => ({
+  QualityTab: jest
+    .fn()
+    .mockImplementation(() => <div>QualityTab.component</div>),
+}));
 
 const mockProps: TableProfilerProps = {
   permissions: {
@@ -138,4 +150,26 @@ describe('Test TableProfiler component', () => {
       await screen.findByText('ProfilerSettingsModal.component')
     ).toBeInTheDocument();
   });
+
+  it('should fetch testSuite details when data quality tab is active', async () => {
+    mockLocation.search = `?activeTab=${TableProfilerTab.DATA_QUALITY}`;
+
+    (getTableDetailsByFQN as jest.Mock).mockImplementationOnce(() =>
+      Promise.resolve({
+        name: 'test',
+        id: '123',
+        tableFqn: 'fqn',
+        testSuite: { name: 'testSuite1' },
+      })
+    );
+
+    await act(async () => {
+      render(<TableProfilerV1 {...mockProps} />);
+    });
+
+    expect(getTableDetailsByFQN).toHaveBeenCalledWith(
+      'sample_data.ecommerce_db.shopify.dim_address',
+      'testSuite'
+    );
+  });
 });

openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx

@@ -35,6 +35,7 @@ import { DateRangeObject } from 'components/ProfilerDashboard/component/TestSumm
 import TabsLabel from 'components/TabsLabel/TabsLabel.component';
 import { useTourProvider } from 'components/TourProvider/TourProvider';
 import { mockDatasetData } from 'constants/mockTourData.constants';
+import { TabSpecificField } from 'enums/entity.enum';
 import { Column } from 'generated/entity/data/container';
 import {
   filter,
@@ -58,7 +59,10 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useHistory, useLocation, useParams } from 'react-router-dom';
-import { getLatestTableProfileByFqn } from 'rest/tableAPI';
+import {
+  getLatestTableProfileByFqn,
+  getTableDetailsByFQN,
+} from 'rest/tableAPI';
 import { getListTestCase, ListTestCaseParams } from 'rest/testAPI';
 import { bytesToSize, getDecodedFqn } from 'utils/StringsUtils';
 import { ReactComponent as ColumnProfileIcon } from '../../assets/svg/column-profile.svg';
@@ -96,7 +100,6 @@ import {
 import './tableProfiler.less';
 
 const TableProfilerV1: FC<TableProfilerProps> = ({
-  testSuite,
   isTableDeleted,
   permissions,
 }: TableProfilerProps) => {
@@ -138,6 +141,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
   const [isLoading, setIsLoading] = useState(true);
   const [dateRangeObject, setDateRangeObject] =
     useState<DateRangeObject>(DEFAULT_RANGE_DATA);
+  const [testSuite, setTestSuite] = useState<Table['testSuite']>();
 
   const isColumnProfile = activeTab === TableProfilerTab.COLUMN_PROFILE;
   const isDataQuality = activeTab === TableProfilerTab.DATA_QUALITY;
@@ -472,6 +476,26 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
     return { statusDict, totalTests: temp.length };
   }, [activeColumnFqn, columnTests]);
 
+  const fetchTestSuiteDetails = async () => {
+    setIsLoading(true);
+    try {
+      const details = await getTableDetailsByFQN(
+        datasetFQN,
+        TabSpecificField.TESTSUITE
+      );
+      setTestSuite(details.testSuite);
+    } catch (error) {
+      showErrorToast(error as AxiosError);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (isDataQuality && isUndefined(testSuite)) {
+      fetchTestSuiteDetails();
+    }
+  }, [isDataQuality, testSuite]);
+
   useEffect(() => {
     const fetchTest =
       viewTest && !isTourOpen && !isTableProfile && isEmpty(allTests.current);

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

@@ -212,7 +212,7 @@ describe('TestDetailsPageV1 component', () => {
 
     expect(getTableDetailsByFQN).toHaveBeenCalledWith(
       'fqn',
-      `${COMMON_API_FIELDS},usageSummary,testSuite`
+      `${COMMON_API_FIELDS},usageSummary`
     );
   });
 

openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx

@@ -116,10 +116,7 @@ const TableDetailsPageV1 = () => {
     () => tablePermissions.ViewAll || tablePermissions.ViewUsage,
     [tablePermissions]
   );
-  const viewTestSuitePermission = useMemo(
-    () => tablePermissions.ViewAll || tablePermissions.ViewTests,
-    [tablePermissions]
-  );
+
   const tableFqn = useMemo(
     () =>
       encodeURIComponent(
@@ -139,9 +136,7 @@ const TableDetailsPageV1 = () => {
       if (viewUsagePermission) {
         fields += `,${TabSpecificField.USAGE_SUMMARY}`;
       }
-      if (viewTestSuitePermission) {
-        fields += `,${TabSpecificField.TESTSUITE}`;
-      }
+
       const details = await getTableDetailsByFQN(tableFqn, fields);
 
       setTableDetails(details);
@@ -635,7 +630,6 @@ const TableDetailsPageV1 = () => {
             <TableProfilerV1
               isTableDeleted={tableDetails?.deleted}
               permissions={tablePermissions}
-              testSuite={tableDetails?.testSuite}
             />
           ),
       },