Merge pull request 'ui: display overlay when no machines available' (#533) from DavHau-dave into main

pkgs/ui/.envrc

@@ -2,7 +2,7 @@
 
 source_up
 
-files=(flake-module.nix package.json package-lock.json)
+files=(../../flake.nix ../theme default.nix flake-module.nix package.json package-lock.json)
 if type nix_direnv_watch_file &>/dev/null; then
   nix_direnv_watch_file "${files[@]}"
 else

pkgs/ui/src/components/noDataOverlay/index.tsx

@@ -75,7 +75,7 @@ export function NoDataOverlay(props: NoDataOverlayProps) {
           </g>
         </g>
       </svg>
-      <Box sx={{ mt: 1 }}>{label}</Box>
+      <Box sx={{ mt: 1, textAlign: "center" }}>{label}</Box>
     </StyledGridOverlay>
   );
 }

pkgs/ui/src/components/table/nodeTableContainer.tsx

@@ -13,6 +13,7 @@ import { visuallyHidden } from "@mui/utils";
 import { NodeRow } from "./nodeRow";
 
 import { Machine } from "@/api/model/machine";
+import { NoDataOverlay } from "../noDataOverlay";
 
 interface HeadCell {
   disablePadding: boolean;
@@ -163,35 +164,41 @@ export function NodeTableContainer(props: NodeTableContainerProps) {
   );
   return (
     <TableContainer>
-      <Table aria-labelledby="tableTitle" size={dense ? "small" : "medium"}>
-        <EnhancedTableHead
-          order={order}
-          orderBy={orderBy}
-          onRequestSort={handleRequestSort}
-          rowCount={tableData.length}
-        />
-        <TableBody>
-          {visibleRows.map((row, index) => {
-            return (
-              <NodeRow
-                key={index}
-                row={row}
-                selected={selected}
-                setSelected={setSelected}
-              />
-            );
-          })}
-          {emptyRows > 0 && (
-            <TableRow
-              style={{
-                height: (dense ? 33 : 53) * emptyRows,
-              }}
-            >
-              <TableCell colSpan={6} />
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
+      {tableData.length === 0 ? (
+        <div className="my-8 flex w-full items-center justify-center">
+          <NoDataOverlay label={"No Machines"} />
+        </div>
+      ) : (
+        <Table aria-labelledby="tableTitle" size={dense ? "small" : "medium"}>
+          <EnhancedTableHead
+            order={order}
+            orderBy={orderBy}
+            onRequestSort={handleRequestSort}
+            rowCount={tableData.length}
+          />
+          <TableBody>
+            {visibleRows.map((row, index) => {
+              return (
+                <NodeRow
+                  key={index}
+                  row={row}
+                  selected={selected}
+                  setSelected={setSelected}
+                />
+              );
+            })}
+            {emptyRows > 0 && (
+              <TableRow
+                style={{
+                  height: (dense ? 33 : 53) * emptyRows,
+                }}
+              >
+                <TableCell colSpan={6} />
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      )}
     </TableContainer>
   );
 }