Merge pull request #15689 from jeclrsg/hpcc-27026-remove-material-ui-in-recent-filters

HPCC-27026 Remove MaterialUI from FilterDropdownWidget

Reviewed-By: Gordon Smith <gordon.smith@lexisnexis.com>
Reviewed-By: Richard Chapman <rchapman@hpccsystems.com>

esp/src/src/react/recentFilters.tsx

@@ -1,59 +1,80 @@
 import * as React from "react";
-import Skeleton from "@material-ui/lab/Skeleton";
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Button, Typography, Paper } from "@material-ui/core";
-import { ThemeProvider } from "@material-ui/core/styles";
-import Tooltip from "@material-ui/core/Tooltip";
+import { PrimaryButton, Shimmer, ShimmerElementType, TooltipHost } from "@fluentui/react";
+import { mergeStyleSets } from "@fluentui/style-utilities";
 import nlsHPCC from "../nlsHPCC";
-import { theme } from "./theme";
 import { useGet } from "./hooks/useWsStore";
 
 interface RecentFilterProps {
     ws_key: string;
-    widget: {NewPage};
+    widget: { NewPage };
     filter: object;
 }
 
+const recentFilterStyles = mergeStyleSets({
+    root: {
+        width: "100%",
+        margin: "0 0 10px 0",
+        "thead": {
+            fontWeight: "bold"
+        },
+        "td": {
+            padding: "8px 24px 8px 16px",
+            borderBottom: "1px solid #e0e0e0"
+        }
+    },
+    placeholder: {
+        margin: "0 0 10px 0",
+        ".ms-Shimmer-shimmerWrapper": {
+            marginBottom: "6px"
+        }
+    }
+});
+
 export const RecentFilters: React.FunctionComponent<RecentFilterProps> = ({
     ws_key, widget, filter
 }) => {
-    const {data, loading} = useGet(ws_key, filter);
+    const { data, loading } = useGet(ws_key, filter);
 
     const handleClick = (e) => {
-        const tempObj = JSON.parse(e.currentTarget.value);
+        const tempObj = JSON.parse(decodeURIComponent(e.currentTarget.value));
         widget.NewPage.onClick(tempObj);
     };
 
-    const cleanUpFilter = (value:string) => {
+    const shimmerElements = React.useMemo(() => [
+        { type: ShimmerElementType.line, height: 48 }
+    ], []);
+
+    const cleanUpFilter = (value: string) => {
         const result = value.replace(/[{}'"]+/g, "");
         return result;
     };
 
     return (
         <>
-            <Typography variant="h4" noWrap>
-                {nlsHPCC.RecentFilters}
-            </Typography>
-            { loading ? (<div><Skeleton /><Skeleton animation={false} /><Skeleton animation="wave" /></div>) : ( data ?
-                <ThemeProvider theme={theme}>
-                <TableContainer component={Paper}>
-                    <Table aria-label={nlsHPCC.RecentFiltersTable} size="small">
-                        <TableHead>
-                            <TableRow>
-                                <TableCell align="left">{nlsHPCC.FilterDetails}</TableCell>
-                                <TableCell align="center">{nlsHPCC.OpenInNewPage}</TableCell>
-                            </TableRow>
-                        </TableHead>
-                        <TableBody>
-                            {data.map((row, idx) => (
-                                <TableRow key={idx}>
-                                    <Tooltip arrow title={cleanUpFilter(JSON.stringify(row))} placement="bottom"><TableCell align="left">{cleanUpFilter(JSON.stringify(row))}</TableCell></Tooltip>
-                                    <TableCell align="center"><Button size="small" variant="contained" value={JSON.stringify(row)} color="primary" onClick={handleClick}>Open</Button></TableCell>
-                                </TableRow>
-                            ))}
-                        </TableBody>
-                    </Table>
-                </TableContainer>
-            </ThemeProvider> : <Typography variant="subtitle1">{nlsHPCC.NoRecentFiltersFound}</Typography> ) }
+            <h4>{nlsHPCC.RecentFilters}</h4>
+            {loading ? (
+                <div className={recentFilterStyles.placeholder}><Shimmer shimmerElements={shimmerElements} /></div>
+            ) : (data ?
+                <table aria-label={nlsHPCC.RecentFiltersTable} className={recentFilterStyles.root}>
+                    <thead>
+                        <tr>
+                            <td align="left">{nlsHPCC.FilterDetails}</td>
+                            <td align="center">{nlsHPCC.OpenInNewPage}</td>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {data.map((row, idx) => (
+                            <tr key={idx}>
+                                <td align="left">
+                                    <TooltipHost content={cleanUpFilter(JSON.stringify(row))}>
+                                        <span>{cleanUpFilter(JSON.stringify(row))}</span>
+                                    </TooltipHost>
+                                </td>
+                                <td align="center"><PrimaryButton value={encodeURIComponent(JSON.stringify(row))} onClick={handleClick}>Open</PrimaryButton></td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table> : <h6>{nlsHPCC.NoRecentFiltersFound}</h6>)}
         </>
     );
 };