Merge pull request #29 from input-output-hk/PLT-7614

PLT-7614: Fixed Testing History Table
input-output-hk · Oct 2, 2023 · e622676 · e622676
2 parents 321be65 + 86f45de
commit e622676
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 23 deletions.
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -13,6 +13,7 @@ import Paper from "@mui/material/Paper";
 import IconButton from "@mui/material/IconButton";
 import GridViewIcon from '@mui/icons-material/GridView';
 import Typography from "@mui/material/Typography";
+import CircularProgress from "@mui/material/CircularProgress";
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
@@ -63,7 +64,8 @@ const TableComponent: FC<any> = ({
   skipPageReset,
   showAllRows = false,
   collapsibleRows = false,
-  rowProps = () => ({})
+  rowProps = () => ({}),
+  loading = false
 }) => {
   const data = useMemo(() => dataSet, [dataSet]);
   const [pageNo, setPageNo] = useState(0);
@@ -90,7 +92,7 @@ const TableComponent: FC<any> = ({
       // That way we can call this function from our
       // cell renderer!
       updateMyData,
-      initialState: { pageIndex: 0, pageSize: 5 } as any,
+      initialState: showAllRows ? undefined : { pageIndex: 0, pageSize: 5 } as any,
     },
     useSortBy,
     usePagination
@@ -184,30 +186,28 @@ const TableComponent: FC<any> = ({
               </>
             </TableBody>
           </Table>
-          {data.length === 0 && (
-            <Typography className="text-center pt-4">
+          {!loading && data.length === 0 && (
+            <Typography className="text-center p-4">
               No data found
             </Typography>
           )}
+          {loading && (
+            <Box className="flex items-center justify-center p-8">
+              <CircularProgress color="secondary" />
+            </Box>
+          )}
         </TableContainer>
-        <TablePagination
-          rowsPerPageOptions={showAllRows ? [{label:"All", value: -1}] : [5, 10, 20]}
-          component="div"
-          count={data.length}
-          rowsPerPage={showAllRows ? -1 : rowsPerPage}
-          page={pageNo}
-          onPageChange={handleChangePage}
-          onRowsPerPageChange={handleChangeRowsPerPage}
-          sx={{
-            '.MuiTablePagination-root':{
-              display: 'none !important'
-            },
-            '.MuiTablePagination-toolbar': {
-              display: 'none !important'
-            }
-
-          }}
-        />
+        {!showAllRows && (
+          <TablePagination
+            rowsPerPageOptions={showAllRows ? [{label:"All", value: -1}] : [5, 10, 20]}
+            component="div"
+            count={data.length}
+            rowsPerPage={showAllRows ? -1 : rowsPerPage}
+            page={pageNo}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+          />
+        )}
       </Paper>
     </Box>
   );

diff --git a/src/pages/certification/certification-result/fullReportTable.helper.tsx b/src/pages/certification/certification-result/fullReportTable.helper.tsx
@@ -68,7 +68,7 @@ export const renderCharts = (data?: any) => {
 
 
 const FailedTaskDetails = (dataObj: any) => {
-    return (<div className="task-details bg-red-background border-red-background">
+    return (<div className="">
         <span className="font-neutral-900 text-red-title block mb-10"><i>{dataObj.reason}</i></span>
         <div className="whitespace-pre">
             <span>Failing TestCase(s):</span>

diff --git a/src/pages/testingHistory/index.tsx b/src/pages/testingHistory/index.tsx
@@ -46,6 +46,7 @@ dayjs.extend(tz)
 
 const TestHistory = () => {
   const [data, setData] = useState<Array<Run>>([]);
+  const [loading, setLoading] = useState<boolean>(true);
   const [runningSpinner, setRunningSpinner] = useState("");
   const [highlightLabelFor, setHighlightLabelFor] = useState("");
   const [skipPageReset, setSkipPageReset] = useState(false);
@@ -363,6 +364,7 @@ const TestHistory = () => {
 
   const fetchTableData = async () => {
     const result = await fetchData.get("/run")
+    setLoading(false);
     /** For mock */
     // const result = await fetchData.get("static/data/history.json");
     if (result.data.length) {
@@ -392,6 +394,7 @@ const TestHistory = () => {
           showColViz={true} 
           updateMyData={updateMyData}
           skipPageReset={skipPageReset}
+          loading={loading}
         />
       </Box>