fix(ui): feedbacks

No data placeholder visible before showing actial data
open-metadata · Oct 20, 2023 · 42a1717 · 42a1717
1 parent c9c6c94
commit 42a1717
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 29 deletions.
diff --git a/...ta-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/DataQualityTab.tsx b/...ta-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/DataQualityTab.tsx
@@ -55,10 +55,7 @@ import {
 import { getEntityName } from '../../../utils/EntityUtils';
 import { checkPermission } from '../../../utils/PermissionsUtils';
 import { getEncodedFqn, replacePlus } from '../../../utils/StringsUtils';
-import {
-  getEntityFqnFromEntityLink,
-  getTableExpandableConfig,
-} from '../../../utils/TableUtils';
+import { getEntityFqnFromEntityLink } from '../../../utils/TableUtils';
 import { showErrorToast } from '../../../utils/ToastUtils';
 import DeleteWidgetModal from '../../common/DeleteWidget/DeleteWidgetModal';
 import {
@@ -407,7 +404,6 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
           data-testid="test-case-table"
           dataSource={sortedData}
           expandable={{
-            ...getTableExpandableConfig<TestCase>(),
             expandRowByClick: true,
             rowExpandable: () => true,
             expandedRowRender: (recode) => <TestSummary data={recode} />,

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx
@@ -142,6 +142,8 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
   const [dateRangeObject, setDateRangeObject] =
     useState<DateRangeObject>(DEFAULT_RANGE_DATA);
   const [testSuite, setTestSuite] = useState<Table['testSuite']>();
+  const [isTestsLoading, setIsTestsLoading] = useState(false);
+  const [isProfilerDataLoading, setIsProfilerDataLoading] = useState(false);
 
   const isColumnProfile = activeTab === TableProfilerTab.COLUMN_PROFILE;
   const isDataQuality = activeTab === TableProfilerTab.DATA_QUALITY;
@@ -377,7 +379,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
   };
 
   const fetchAllTests = async (params?: ListTestCaseParams) => {
-    setIsLoading(true);
+    setIsTestsLoading(true);
     try {
       const { data } = await getListTestCase({
         ...params,
@@ -391,23 +393,21 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {
-      setIsLoading(false);
+      setIsTestsLoading(false);
     }
   };
 
-  const handleTestUpdate = useCallback(
-    (testCase?: TestCase) => {
-      if (isUndefined(testCase)) {
-        return;
-      }
-      const updatedTests = allTests.current.map((test) => {
-        return testCase.id === test.id ? { ...test, ...testCase } : test;
-      });
-      splitTableAndColumnTest(updatedTests);
-      allTests.current = updatedTests;
-    },
-    [allTests.current]
-  );
+  const handleTestUpdate = useCallback((testCase?: TestCase) => {
+    if (isUndefined(testCase)) {
+      return;
+    }
+    const updatedTests = allTests.current.map((test) => {
+      return testCase.id === test.id ? { ...test, ...testCase } : test;
+    });
+    splitTableAndColumnTest(updatedTests);
+    allTests.current = updatedTests;
+  }, []);
+
   const handleTestCaseStatusChange = (value: string) => {
     if (value !== selectedTestCaseStatus) {
       setSelectedTestCaseStatus(value);
@@ -420,7 +420,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
     }
   };
 
-  const getFilterTestCase = () => {
+  const filteredTestCase = useMemo(() => {
     let tests: TestCase[] = [];
     if (selectedTestType === TestType.Table) {
       tests = tableTests.tests;
@@ -435,21 +435,21 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
         selectedTestCaseStatus === '' ||
         data.testCaseResult?.testCaseStatus === selectedTestCaseStatus
     );
-  };
+  }, [tableTests, columnTests, selectedTestCaseStatus]);
 
   const fetchLatestProfilerData = async () => {
     // As we are encoding the fqn in API function to apply all over the application
     // and the datasetFQN comes form url parameter which is already encoded,
     // we are decoding FQN below to avoid double encoding in the API function
     const decodedDatasetFQN = decodeURIComponent(datasetFQN);
-    setIsLoading(true);
+    setIsProfilerDataLoading(true);
     try {
       const response = await getLatestTableProfileByFqn(decodedDatasetFQN);
       setTable(response);
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {
-      setIsLoading(false);
+      setIsProfilerDataLoading(false);
     }
   };
 
@@ -493,6 +493,8 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
   useEffect(() => {
     if (isDataQuality && isUndefined(testSuite)) {
       fetchTestSuiteDetails();
+    } else {
+      setIsLoading(false);
     }
   }, [isDataQuality, testSuite]);
 
@@ -503,7 +505,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
     if (fetchTest) {
       fetchAllTests();
     }
-  }, [viewTest, isTourOpen, isTableProfile, allTests]);
+  }, [viewTest, isTourOpen, isTableProfile]);
 
   useEffect(() => {
     const fetchProfiler =
@@ -689,16 +691,16 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
               }))}
               dateRangeObject={dateRangeObject}
               hasEditAccess={editTest}
-              isLoading={isLoading}
+              isLoading={isProfilerDataLoading || isLoading}
             />
           )}
 
           {isDataQuality && (
             <QualityTab
               afterDeleteAction={fetchAllTests}
-              isLoading={isLoading}
+              isLoading={isTestsLoading || isLoading}
               showTableColumn={false}
-              testCases={getFilterTestCase()}
+              testCases={filteredTestCase}
               testSuite={testSuite}
               onTestCaseResultUpdate={handleResultUpdate}
               onTestUpdate={handleTestUpdate}

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx
@@ -58,7 +58,7 @@ const Table = <T extends object = any>({ loading, ...rest }: TableProps<T>) => {
   return (
     <AntdTable
       {...rest}
-      expandable={{ ...getTableExpandableConfig, ...rest.expandable }}
+      expandable={{ ...getTableExpandableConfig<T>(), ...rest.expandable }}
     />
   );
 };