Merge pull request #3508 from magda-io/v3-test-fixes

re-implement table preview
magda-io · Mar 13, 2024 · 5197e13 · 5197e13
2 parents 290d381 + da3a255
commit 5197e13
Show file tree

Hide file tree

Showing 8 changed files with 215 additions and 646 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -17,6 +17,7 @@
 - Reduced the size of `magda-scss-compiler` docker image
 - Upgraded `http-proxy`, `pg` & other dependencies
 - Make sure generated storage filename contains only alphabets, digits, `-`, `_` & `.`
+- Fixed table preview auto-fit the device screen width in mobile view
 
 ## v2.3.3
 

diff --git a/magda-web-client/package.json b/magda-web-client/package.json
@@ -112,7 +112,6 @@
     "react-select": "^5.8.0",
     "react-simplemde-editor": "^4.0.0",
     "react-syntax-highlighter": "^15.4.5",
-    "react-table": "^7.8.0",
     "react-transition-group": "^2.3.1",
     "redux": "^4.1.2",
     "redux-devtools-extension": "^2.13.2",

diff --git a/magda-web-client/src/Components/Common/DataPreviewTable.tsx b/magda-web-client/src/Components/Common/DataPreviewTable.tsx
@@ -1,6 +1,6 @@
-import React, { Component } from "react";
-import ReactTable from "react-table";
-import "./ReactTable.scss";
+import React from "react";
+import ReactTable from "./ReactTable";
+
 import { Medium, Small } from "./Responsive";
 import Spinner from "Components/Common/Spinner";
 import { DataLoadingResult } from "helpers/CsvDataLoader";
@@ -12,93 +12,68 @@ type PropsType = {
     isLoading: boolean;
 };
 
-export default class DataPreviewTable extends Component<PropsType> {
-    removeEmptyRows(data) {
-        return data.filter((row) =>
-            Object.keys(row).some(
-                (key) =>
-                    typeof row[key] !== "string" || row[key].trim().length > 0
-            )
-        );
-    }
-
+const DataPreviewTable: React.FC<PropsType> = (props: PropsType) => {
     // --- tell user not all data rows is shown
-    renderPartialDataNotice(rows: any[]) {
-        if (!this.props.dataLoadingResult) return null;
-        if (!this.props.dataLoadingResult.failureReason) return null;
+    function renderPartialDataNotice(rows: any[]) {
+        if (!props.dataLoadingResult) return null;
+        if (!props.dataLoadingResult.failureReason) return null;
         return <FileTooBigError />;
     }
 
-    render() {
-        if (this.props.dataLoadError) {
-            return (
-                <div
-                    className={`au-page-alerts au-page-alerts--error notification__inner`}
-                >
-                    <h3>Oops</h3>
-                    <p>
-                        The requested data source might not be available at this
-                        moment.
-                    </p>
-                </div>
-            );
-        }
-        if (this.props.isLoading) {
-            return (
-                <div>
-                    <Medium>
-                        <Spinner width="100%" height="500px" />
-                    </Medium>
-                    <Small>
-                        <Spinner width="100%" height="350px" />
-                    </Small>
-                </div>
-            );
-        }
-        if (
-            !this.props.dataLoadingResult ||
-            !this.props.dataLoadingResult.parseResult ||
-            !this.props.dataLoadingResult.parseResult.meta ||
-            !this.props.dataLoadingResult.parseResult.meta.fields
-        )
-            return <div>Data grid preview is not available</div>;
-        const fields = this.props.dataLoadingResult.parseResult!.meta.fields;
-        const columns = fields
-            .filter((f) => f.length > 0)
-            .map((item) => ({
-                Header: item,
-                accessor: item
-            }));
-
-        const rows = this.props.dataLoadingResult.parseResult!.data;
-
+    if (props.dataLoadError) {
         return (
-            <div className="clearfix">
-                <div className="vis">
-                    <Medium>
-                        <ReactTable
-                            minRows={0}
-                            style={{
-                                height: "500px"
-                            }} /* No vert scroll for 10 rows */
-                            data={rows}
-                            columns={columns}
-                        />
-                        {this.renderPartialDataNotice(rows)}
-                    </Medium>
-                    <Small>
-                        <ReactTable
-                            minRows={3}
-                            style={{
-                                height: "350px"
-                            }} /* No vert scroll for 5 rows */
-                            data={rows}
-                            columns={columns}
-                        />
-                        {this.renderPartialDataNotice(rows)}
-                    </Small>
-                </div>
+            <div
+                className={`au-page-alerts au-page-alerts--error notification__inner`}
+            >
+                <h3>Oops</h3>
+                <p>
+                    The requested data source might not be available at this
+                    moment.
+                </p>
             </div>
         );
     }
-}
+    if (props.isLoading) {
+        return (
+            <div>
+                <Medium>
+                    <Spinner width="100%" height="500px" />
+                </Medium>
+                <Small>
+                    <Spinner width="100%" height="350px" />
+                </Small>
+            </div>
+        );
+    }
+    const fields = props?.dataLoadingResult?.parseResult?.meta?.fields;
+    const columns = fields?.filter((f) => !!f?.length);
+    if (!columns?.length) return <div>Data grid preview is not available</div>;
+
+    const rows = props?.dataLoadingResult?.parseResult?.data;
+    if (!rows?.length) return <div>Data grid preview is not available</div>;
+
+    return (
+        <div className="clearfix">
+            <div className="vis">
+                <Medium>
+                    <ReactTable
+                        data={rows}
+                        columns={columns}
+                        height={420} /* No vert scroll for 5 rows */
+                    />
+                    {renderPartialDataNotice(rows)}
+                </Medium>
+                <Small>
+                    <ReactTable
+                        data={rows}
+                        columns={columns}
+                        height={300} /* No vert scroll for 5 rows */
+                    />
+                    {renderPartialDataNotice(rows)}
+                </Small>
+            </div>
+        </div>
+    );
+};
+
+export default DataPreviewTable;