clan-cli: Fixed CORS issue. UI: Readded id as tableData property

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

@@ -69,21 +69,6 @@ export function NodeRow(props: {
     }
   };
 
-  const debug = true;
-  const debugSx = debug
-    ? {
-        "--Grid-borderWidth": "1px",
-        borderTop: "var(--Grid-borderWidth) solid",
-        borderLeft: "var(--Grid-borderWidth) solid",
-        borderColor: "divider",
-        "& > div": {
-          borderRight: "var(--Grid-borderWidth) solid",
-          borderBottom: "var(--Grid-borderWidth) solid",
-          borderColor: "divider",
-        },
-      }
-    : {};
-
   return (
     <React.Fragment>
       {/* Rendered Row */}
@@ -120,7 +105,7 @@ export function NodeRow(props: {
               align="left"
               variant="body2"
             >
-              {row.name}
+              {row.id}
             </Typography>
           </Stack>
         </TableCell>
@@ -151,14 +136,13 @@ export function NodeRow(props: {
               <Grid2 container spacing={2} paddingLeft={0}>
                 <Grid2
                   xs={6}
-                  style={{ ...debugSx }}
                   justifyContent="left"
                   display="flex"
                   paddingRight={3}
                 >
                   <Box>Hello1</Box>
                 </Grid2>
-                <Grid2 xs={6} style={{ ...debugSx }} paddingLeft={6}>
+                <Grid2 xs={6} paddingLeft={6}>
                   <Box>Hello2</Box>
                 </Grid2>
               </Grid2>

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

@@ -14,28 +14,7 @@ import { TableData } from "@/data/nodeData";
 import { EnhancedTableToolbar } from "./enhancedTableToolbar";
 import { StickySpeedDial } from "./stickySpeedDial";
 import { NodeTableContainer } from "./nodeTableContainer";
-export interface SearchBarProps {
-  search: string;
-  setSearch: Dispatch<SetStateAction<string>>;
-}
-
-function SearchBar(props: SearchBarProps) {
-  const { search, setSearch } = props;
-  const handleSearch = (event: ChangeEvent<HTMLInputElement>) => {
-    setSearch(event.target.value);
-  };
-
-  return (
-    <label htmlFor="search">
-      <Tooltip title="Filter list">
-        <IconButton>
-          <SearchIcon />
-        </IconButton>
-      </Tooltip>
-      <input id="search" type="text" value={search} onChange={handleSearch} />
-    </label>
-  );
-}
+import { SearchBar } from "./searchBar";
 
 export interface NodeTableProps {
   tableData: TableData[];

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

@@ -184,7 +184,7 @@ export function NodeTableContainer(props: NodeTableContainerProps) {
           {visibleRows.map((row, index) => {
             return (
               <NodeRow
-                key={row.name}
+                key={row.id}
                 row={row}
                 selected={selected}
                 setSelected={setSelected}

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

@@ -0,0 +1,29 @@
+"use client";
+
+import { ChangeEvent, SetStateAction, Dispatch } from "react";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import SearchIcon from "@mui/icons-material/Search";
+
+export interface SearchBarProps {
+  search: string;
+  setSearch: Dispatch<SetStateAction<string>>;
+}
+
+export function SearchBar(props: SearchBarProps) {
+  const { search, setSearch } = props;
+  const handleSearch = (event: ChangeEvent<HTMLInputElement>) => {
+    setSearch(event.target.value);
+  };
+
+  return (
+    <label htmlFor="search">
+      <Tooltip title="Filter list">
+        <IconButton>
+          <SearchIcon />
+        </IconButton>
+      </Tooltip>
+      <input id="search" type="text" value={search} onChange={handleSearch} />
+    </label>
+  );
+}