Simplify editable cell signature

Signed-off-by: Jonathan <contact@grafikart.fr>

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

@@ -9,6 +9,7 @@ import {
   Button,
   Cell,
   CellHead,
+  EditableRow,
   IconCheckmark1,
   Row,
   RowButton,
@@ -19,8 +20,8 @@ import { useMutateField } from "/hooks/useMutateField.tsx";
 import { type ReactNode } from "react";
 import { useToggle } from "@probo/hooks";
 import { useStateWithSchema } from "/hooks/useStateWithSchema.ts";
-import { useMutation } from "react-relay";
 import clsx from "clsx";
+import { useMutationWithToasts } from "/hooks/useMutationWithToasts.ts";
 
 type ColumnDefinition = { label: string; field: string } | string;
 
@@ -65,7 +66,7 @@ export function EditableTable<
 
   return (
     <SortableDataTable
-      columns={[...props.columns.map(() => "1fr"), "56px"]}
+      columns={[...props.columns.map(() => "minmax(min-content, 1fr)"), "56px"]}
       refetch={props.pagination.refetch}
       hasNext={props.pagination.hasNext}
       isLoadingNext={props.pagination.isLoadingNext}
@@ -78,14 +79,14 @@ export function EditableTable<
         <CellHead />
       </Row>
       {props.items.map((item) => (
-        <Row key={item.id}>
+        <EditableRow onUpdate={(k, v) => update(item.id, k, v)} key={item.id}>
           {props.row({
             item,
             onUpdate: (key, value) => update(item.id, key as string, value),
             errors: {},
           })}
           <Cell>{props.action({ item })}</Cell>
-        </Row>
+        </EditableRow>
       ))}
       {showAdd ? (
         <NewItemRow
@@ -94,6 +95,7 @@ export function EditableTable<
           connectionId={props.connectionId}
           row={props.row}
           mutation={props.createMutation}
+          onSuccess={toggleAdd}
         />
       ) : (
         <RowButton onClick={toggleAdd}>{props.addLabel}</RowButton>
@@ -107,13 +109,14 @@ function NewItemRow<S extends z.ZodSchema>(props: {
   defaultValue: z.infer<S>;
   connectionId: string;
   mutation: GraphQLTaggedNode;
+  onSuccess: () => void;
   row: (props: EditableTableRowProps<any, S>) => ReactNode;
 }) {
   const { update, errors, value } = useStateWithSchema(
     props.schema,
     props.defaultValue,
   );
-  const [mutate, isMutating] = useMutation(props.mutation);
+  const [mutate, isMutating] = useMutationWithToasts(props.mutation);
   const isOk = Object.keys(errors ?? {}).length === 0;
 
   const onSubmit = async () => {
@@ -122,15 +125,16 @@ function NewItemRow<S extends z.ZodSchema>(props: {
       alert("Please fix the errors before submitting.");
       return;
     }
-    mutate({
+    await mutate({
       variables: {
         input: value,
         connections: [props.connectionId],
       },
+      onSuccess: props.onSuccess,
     });
   };
   return (
-    <Row>
+    <EditableRow onUpdate={update} errors={errors}>
       {props.row({ errors, onUpdate: update })}
       <Cell>
         <Button
@@ -142,7 +146,7 @@ function NewItemRow<S extends z.ZodSchema>(props: {
           {isMutating ? <Spinner size={16} /> : <IconCheckmark1 size={16} />}
         </Button>
       </Cell>
-    </Row>
+    </EditableRow>
   );
 }
 

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

@@ -0,0 +1,137 @@
+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 { useEditableRowContext } from "@probo/ui/src/Molecules/Table/EditableRow.tsx";
+import { EditableCell, selectCell, SelectValue, Spinner } from "@probo/ui";
+import { Command } from "cmdk";
+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;
+  query: GraphQLTaggedNode;
+  variables: VariablesOf<Q>;
+  items: (v: ReturnType<typeof useLazyLoadQuery<Q>>) => T[];
+  itemRenderer: (v: { item: T; onRemove?: (item: T) => void }) => ReactNode;
+} & (
+  | { defaultValue?: T; multiple?: undefined }
+  | { defaultValue: T[]; multiple: true }
+);
+
+export function GraphQLCell<Q extends OperationType, T>(props: Props<Q, T>) {
+  const [value, setValue, valueRef] = useStateWithRef<T | T[] | undefined>(
+    props.defaultValue,
+  );
+  const cellRef = useEditableCellRef();
+  const { __ } = useTranslate();
+  const usedKeys = new Set<string>(
+    Array.isArray(value) ? value.map(getKey) : [getKey(value)],
+  );
+  const { onUpdate } = useEditableRowContext();
+
+  const onSelect = (item: T) => {
+    if (props.multiple) {
+      setValue([...((valueRef.current as T[]) ?? []), item]);
+      return;
+    }
+    setValue(item);
+    cellRef.current?.close();
+  };
+
+  const onClose = () => {
+    if (valueRef.current === props.defaultValue) {
+      return;
+    }
+    // Only send ids when updating the value
+    onUpdate(
+      props.name,
+      Array.isArray(valueRef.current)
+        ? valueRef.current.map(getKey)
+        : getKey(valueRef.current),
+    );
+  };
+
+  const classNames = selectCell();
+
+  return (
+    <EditableCell
+      name={props.name}
+      label={<SelectValue value={value} itemRenderer={props.itemRenderer} />}
+      onClose={onClose}
+      ref={cellRef}
+    >
+      <Command className={classNames.command()}>
+        <div
+          className={classNames.value()}
+          style={{
+            paddingLeft: "var(--padding)",
+            minHeight: "var(--height)",
+          }}
+        >
+          {" "}
+          <SelectValue
+            onValueChange={setValue}
+            value={value}
+            itemRenderer={props.itemRenderer}
+          />
+        </div>{" "}
+        {props.multiple && (
+          <Command.Input
+            className={classNames.input()}
+            placeholder={__("Search")}
+          />
+        )}
+        <Command.List>
+          <Suspense
+            fallback={
+              <div className="py-2 px-3 flex items-center justify-center">
+                <Spinner />
+              </div>
+            }
+          >
+            <ItemList
+              {...props}
+              usedKeys={usedKeys}
+              className={classNames.item()}
+              onSelect={onSelect}
+            />
+          </Suspense>
+        </Command.List>
+      </Command>
+    </EditableCell>
+  );
+}
+
+function ItemList<Q extends OperationType, T>(
+  props: Props<Q, T> & {
+    className: string;
+    onSelect: (item: T) => void;
+    usedKeys: Set<string>;
+  },
+) {
+  const data = useLazyLoadQuery<Q>(props.query, props.variables, {
+    fetchPolicy: "network-only",
+  });
+  const items = props.items(data);
+  return (
+    <>
+      {items
+        .filter((item) => !props.usedKeys.has(getKey(item)))
+        .map((item) => (
+          <Command.Item
+            key={getKey(item)}
+            className={props.className}
+            onSelect={() => props.onSelect(item)}
+          >
+            {props.itemRenderer({ item })}
+          </Command.Item>
+        ))}
+    </>
+  );
+}

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

@@ -0,0 +1,33 @@
+import { GraphQLCell } from "/components/table/GraphQLCell.tsx";
+import type { PeopleGraphQuery } from "/hooks/graph/__generated__/PeopleGraphQuery.graphql.ts";
+import { peopleQuery } from "/hooks/graph/PeopleGraph.ts";
+import { Avatar } from "@probo/ui";
+
+type Props = {
+  name: string;
+  defaultValue?: { fullName: string; id: string };
+  organizationId: string;
+};
+
+export function PeopleCell(props: Props) {
+  return (
+    <GraphQLCell<PeopleGraphQuery, { fullName: string }>
+      name={props.name}
+      query={peopleQuery}
+      variables={{
+        organizationId: props.organizationId,
+        filter: { excludeContractEnded: true },
+      }}
+      items={(data) =>
+        data.organization?.peoples?.edges.map((edge) => edge.node) ?? []
+      }
+      itemRenderer={({ item }) => (
+        <div className="flex gap-2 whitespace-nowrap items-center text-xs">
+          <Avatar name={item.fullName} />
+          {item.fullName}
+        </div>
+      )}
+      defaultValue={props.defaultValue}
+    />
+  );
+}

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

@@ -0,0 +1,63 @@
+import { GraphQLCell } from "/components/table/GraphQLCell.tsx";
+import { vendorsSelectQuery } from "/hooks/graph/VendorGraph";
+import { Avatar, Badge, IconCrossLargeX } from "@probo/ui";
+import { faviconUrl } from "@probo/helpers";
+type Vendor = {
+  id: string;
+  name: string;
+  websiteUrl: string | null | undefined;
+};
+import type { VendorGraphSelectQuery } from "/hooks/graph/__generated__/VendorGraphSelectQuery.graphql.ts";
+
+type Props = {
+  name: string;
+  defaultValue?: Vendor[];
+  organizationId: string;
+};
+
+const empty = [] as Vendor[];
+
+export function VendorsCell(props: Props) {
+  return (
+    <GraphQLCell<VendorGraphSelectQuery, Vendor>
+      multiple
+      name={props.name}
+      query={vendorsSelectQuery}
+      variables={{
+        organizationId: props.organizationId,
+      }}
+      items={(data) =>
+        data.organization?.vendors?.edges.map((edge) => edge.node) ?? []
+      }
+      itemRenderer={({ item, onRemove }) => (
+        <VendorBadge vendor={item} onRemove={onRemove} />
+      )}
+      defaultValue={props.defaultValue ?? empty}
+    />
+  );
+}
+
+function VendorBadge({
+  vendor,
+  onRemove,
+}: {
+  vendor: Vendor;
+  onRemove?: (v: Vendor) => void;
+}) {
+  return (
+    <Badge variant="neutral" className="flex items-center gap-1">
+      <Avatar name={vendor.name} src={faviconUrl(vendor.websiteUrl)} size="s" />
+      <span className="max-w-[100px] text-ellipsis overflow-hidden min-w-0 block">
+        {vendor.name}
+      </span>
+      {onRemove && (
+        <button
+          onClick={() => onRemove(vendor)}
+          className="size-4 hover:text-txt-primary cursor-pointer"
+        >
+          <IconCrossLargeX size={14} />
+        </button>
+      )}
+    </Badge>
+  );
+}