Fix review

Signed-off-by: Émile Ré <nemile.re@gmail.com>

apps/console/src/components/assets/ReadOnlyAssetsTable.tsx

@@ -58,7 +58,12 @@ function AssetRow({
   const vendors = entry.vendors?.edges.map((edge) => edge.node) ?? [];
 
   return (
-    <Tr to={`/organizations/${organizationId}/snapshots/${snapshotId}/assets/${entry.id}`}>
+    <Tr
+      to={
+        snapshotId ?
+          `/organizations/${organizationId}/snapshots/${snapshotId}/assets/${entry.id}` : `/organizations/${organizationId}/assets/${entry.id}`
+      }
+    >
       <Td>{entry.name}</Td>
       <Td>
         <Badge variant={getAssetTypeVariant(entry.assetType)}>

apps/console/src/components/table/EditableTable.tsx

@@ -98,7 +98,7 @@ export function EditableTable<
           onSuccess={toggleAdd}
         />
       ) : (
-        <RowButton onClick={toggleAdd}>{props.addLabel}</RowButton>
+        <RowButton onClick={toggleAdd} type="button">{props.addLabel}</RowButton>
       )}
     </SortableDataTable>
   );

apps/console/src/components/table/GraphQLCell.tsx

@@ -1,17 +1,17 @@
-import { type ReactNode, Suspense } from "react";
-import { useEditableCellRef } from "@probo/ui/src/Molecules/Table/EditableCell.tsx";
-import { getKey } from "@probo/ui/src/Molecules/Table/utils.ts";
 import { useStateWithRef } from "@probo/hooks";
+import { useTranslate } from "@probo/i18n";
+import { EditableCell, SelectValue, Spinner, selectCell } from "@probo/ui";
+import { useEditableCellRef } from "@probo/ui/src/Molecules/Table/EditableCell.tsx";
 import { useEditableRowContext } from "@probo/ui/src/Molecules/Table/EditableRow.tsx";
-import { EditableCell, selectCell, SelectValue, Spinner } from "@probo/ui";
+import { getKey } from "@probo/ui/src/Molecules/Table/utils.ts";
 import { Command } from "cmdk";
+import { Suspense, type ReactNode } from "react";
+import { useLazyLoadQuery } from "react-relay";
 import type {
   GraphQLTaggedNode,
   OperationType,
   VariablesOf,
 } from "relay-runtime";
-import { useLazyLoadQuery } from "react-relay";
-import { useTranslate } from "@probo/i18n";
 
 type Props<Q extends OperationType, T> = {
   name: string;
@@ -30,9 +30,8 @@ export function GraphQLCell<Q extends OperationType, T>(props: Props<Q, T>) {
   );
   const cellRef = useEditableCellRef();
   const { __ } = useTranslate();
-  const usedKeys = new Set<string>(
-    Array.isArray(value) ? value.map(getKey) : [getKey(value)],
-  );
+  const filteredValue = Array.isArray(value) ? value.filter(Boolean) : value ? [value] : [];
+  const usedKeys = new Set<string>(filteredValue.map(getKey).filter(Boolean) as string[]);
   const { onUpdate } = useEditableRowContext();
 
   const onSelect = (item: T) => {
@@ -122,7 +121,7 @@ function ItemList<Q extends OperationType, T>(
   return (
     <>
       {items
-        .filter((item) => !props.usedKeys.has(getKey(item)))
+        .filter((item) => !props.usedKeys.has(getKey(item) ?? ""))
         .map((item) => (
           <Command.Item
             key={getKey(item)}

apps/console/src/components/table/SortableDataTable.tsx

@@ -93,6 +93,7 @@ export function SortableCellHead({
       <button
         className="flex items-center cursor-pointer hover:text-txt-primary"
         onClick={changeOrder}
+        type="button"
       >
         {children}
         <IconChevronTriangleDownSmall

packages/ui/src/Atoms/DataTable/DataTable.tsx

@@ -92,7 +92,6 @@ export function RowButton({
     return (
         <button
             {...props}
-            type="button"
             className={clsx(
                 "py-2 bg-highlight hover:bg-highlight-hover active:bg-highlight-pressed cursor-pointer w-full flex gap-2 items-center justify-center text-sm text-txt-secondary",
                 props.className,

packages/ui/src/Molecules/Table/DataTable.stories.tsx

@@ -27,10 +27,10 @@ export const Default: Story = {
         });
         const updateField = (key: string, value: unknown) => {
             onUpdate(key, value);
-            setState({
-                ...state,
+            setState(prevState => ({
+                ...prevState,
                 [key]: value,
-            });
+            }));
         };
         return (
             <DataTable columns={["1fr", "1fr", "1fr"]}>

packages/ui/src/Molecules/Table/SelectCell.tsx

@@ -33,9 +33,8 @@ export function SelectCell<T>(props: Props<T>) {
     );
     const cellRef = useEditableCellRef();
     const { __ } = useTranslate();
-    const usedKeys = new Set<string>(
-        Array.isArray(value) ? value.map(getKey) : [getKey(value)],
-    );
+    const filteredValue = Array.isArray(value) ? value.filter(Boolean) : value ? [value] : [];
+    const usedKeys = new Set<string>(filteredValue.map(getKey).filter(Boolean) as string[]);
     const { onUpdate } = useEditableRowContext();
 
     const onSelect = (item: T) => {
@@ -88,7 +87,7 @@ export function SelectCell<T>(props: Props<T>) {
                 )}
                 <Command.List>
                     {props.items
-                        .filter((item) => !usedKeys.has(getKey(item)))
+                        .filter((item) => !usedKeys.has(getKey(item) ?? ""))
                         .map((item) => (
                             <Command.Item
                                 key={getKey(item)}

packages/ui/src/Molecules/Table/utils.ts

@@ -1,4 +1,4 @@
-export function getKey<T>(item: T): string {
+export function getKey<T>(item: T): string | undefined {
     if (
         item &&
         typeof item === "object" &&
@@ -11,7 +11,7 @@ export function getKey<T>(item: T): string {
         return item.toString();
     }
     if (item === undefined) {
-        return "";
+        return undefined;
     }
     console.error("Cannot compute a key from item", item);
     return "";