From 57e267afe034bf1bb62c2cec3bdbd469474a3a8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <nemile.re@gmail.com>
Date: Mon, 1 Dec 2025 20:00:11 +0400
Subject: [PATCH] Fix review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Émile Ré <nemile.re@gmail.com>
---
 .../components/assets/ReadOnlyAssetsTable.tsx |  7 ++++++-
 .../src/components/table/EditableTable.tsx    |  2 +-
 .../src/components/table/GraphQLCell.tsx      | 19 +++++++++----------
 .../components/table/SortableDataTable.tsx    |  1 +
 packages/ui/src/Atoms/DataTable/DataTable.tsx |  1 -
 .../src/Molecules/Table/DataTable.stories.tsx |  6 +++---
 .../ui/src/Molecules/Table/SelectCell.tsx     |  7 +++----
 packages/ui/src/Molecules/Table/utils.ts      |  4 ++--
 8 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/apps/console/src/components/assets/ReadOnlyAssetsTable.tsx b/apps/console/src/components/assets/ReadOnlyAssetsTable.tsx
index 34b8ead0f..21693e45d 100644
--- a/apps/console/src/components/assets/ReadOnlyAssetsTable.tsx
+++ b/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)}>
diff --git a/apps/console/src/components/table/EditableTable.tsx b/apps/console/src/components/table/EditableTable.tsx
index 4ebf80e66..34d7ae15d 100644
--- a/apps/console/src/components/table/EditableTable.tsx
+++ b/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>
   );
diff --git a/apps/console/src/components/table/GraphQLCell.tsx b/apps/console/src/components/table/GraphQLCell.tsx
index fb0be4d47..2384ec8cc 100644
--- a/apps/console/src/components/table/GraphQLCell.tsx
+++ b/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)}
diff --git a/apps/console/src/components/table/SortableDataTable.tsx b/apps/console/src/components/table/SortableDataTable.tsx
index 6bfb03bde..0d1ab647e 100644
--- a/apps/console/src/components/table/SortableDataTable.tsx
+++ b/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
diff --git a/packages/ui/src/Atoms/DataTable/DataTable.tsx b/packages/ui/src/Atoms/DataTable/DataTable.tsx
index 2fda1869d..f57fe9647 100644
--- a/packages/ui/src/Atoms/DataTable/DataTable.tsx
+++ b/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,
diff --git a/packages/ui/src/Molecules/Table/DataTable.stories.tsx b/packages/ui/src/Molecules/Table/DataTable.stories.tsx
index d767358e1..bda2401b4 100644
--- a/packages/ui/src/Molecules/Table/DataTable.stories.tsx
+++ b/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"]}>
diff --git a/packages/ui/src/Molecules/Table/SelectCell.tsx b/packages/ui/src/Molecules/Table/SelectCell.tsx
index c7a77d67b..583ce2b55 100644
--- a/packages/ui/src/Molecules/Table/SelectCell.tsx
+++ b/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)}
diff --git a/packages/ui/src/Molecules/Table/utils.ts b/packages/ui/src/Molecules/Table/utils.ts
index cad20d4be..901a91450 100644
--- a/packages/ui/src/Molecules/Table/utils.ts
+++ b/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 "";