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 ( -
= { name: string; @@ -30,9 +30,8 @@ export function GraphQLCell(props: Props) { ); const cellRef = useEditableCellRef(); const { __ } = useTranslate(); - const usedKeys = new Set( - Array.isArray(value) ? value.map(getKey) : [getKey(value)], - ); + const filteredValue = Array.isArray(value) ? value.filter(Boolean) : value ? [value] : []; + const usedKeys = new Set (filteredValue.map(getKey).filter(Boolean) as string[]); const { onUpdate } = useEditableRowContext(); const onSelect = (item: T) => { @@ -122,7 +121,7 @@ function ItemList ( return ( <> {items - .filter((item) => !props.usedKeys.has(getKey(item))) + .filter((item) => !props.usedKeys.has(getKey(item) ?? "")) .map((item) => ({children} { onUpdate(key, value); - setState({ - ...state, + setState(prevState => ({ + ...prevState, [key]: value, - }); + })); }; return ( 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 (props: Props ) { ); const cellRef = useEditableCellRef(); const { __ } = useTranslate(); - const usedKeys = new Set ( - Array.isArray(value) ? value.map(getKey) : [getKey(value)], - ); + const filteredValue = Array.isArray(value) ? value.filter(Boolean) : value ? [value] : []; + const usedKeys = new Set (filteredValue.map(getKey).filter(Boolean) as string[]); const { onUpdate } = useEditableRowContext(); const onSelect = (item: T) => { @@ -88,7 +87,7 @@ export function SelectCell (props: Props ) { )} {props.items - .filter((item) => !usedKeys.has(getKey(item))) + .filter((item) => !usedKeys.has(getKey(item) ?? "")) .map((item) => ( (item: T): string { +export function getKey (item: T): string | undefined { if ( item && typeof item === "object" && @@ -11,7 +11,7 @@ export function getKey (item: T): string { return item.toString(); } if (item === undefined) { - return ""; + return undefined; } console.error("Cannot compute a key from item", item); return "";