Fix some any in editable table

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

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

@@ -53,6 +53,7 @@ export function AssetsTable(props: Props) {
 
   return (
     <EditableTable
+      pageSize={10}
       connectionId={connectionId}
       pagination={pagination}
       items={assets}

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

@@ -22,6 +22,7 @@ import { useToggle } from "@probo/hooks";
 import { useStateWithSchema } from "/hooks/useStateWithSchema.ts";
 import clsx from "clsx";
 import { useMutationWithToasts } from "/hooks/useMutationWithToasts.ts";
+import { defaultPageSize } from "/components/table/SortableDataTable.tsx";
 
 type ColumnDefinition = { label: string; field: string } | string;
 
@@ -60,6 +61,7 @@ export function EditableTable<
   addLabel: string;
   // Default value used when creating a new item
   defaultValue: z.infer<S>;
+  pageSize?: number;
 }) {
   const { update } = useMutateField(props.updateMutation);
   const [showAdd, toggleAdd] = useToggle(false);
@@ -71,6 +73,7 @@ export function EditableTable<
       hasNext={props.pagination.hasNext}
       isLoadingNext={props.pagination.isLoadingNext}
       loadNext={props.pagination.loadNext}
+      pageSize={props.pageSize ?? defaultPageSize}
     >
       <Row>
         {props.columns.map((column, index) => (
@@ -104,13 +107,13 @@ export function EditableTable<
   );
 }
 
-function NewItemRow<S extends z.ZodSchema>(props: {
+function NewItemRow<T extends { id: string }, S extends z.ZodSchema>(props: {
   schema: S;
   defaultValue: z.infer<S>;
   connectionId: string;
   mutation: GraphQLTaggedNode;
   onSuccess: () => void;
-  row: (props: EditableTableRowProps<any, S>) => ReactNode;
+  row: (props: EditableTableRowProps<T, S>) => ReactNode;
 }) {
   const { update, errors, value } = useStateWithSchema(
     props.schema,

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

@@ -15,12 +15,16 @@ import {
   useContext,
   useState,
 } from "react";
+import type { LoadMoreFn } from "react-relay";
+import type { OperationType } from "relay-runtime";
 
 type Order = {
   direction: string;
   field: string;
 };
 
+export const defaultPageSize = 50;
+
 export const SortableContext = createContext({
   order: {
     direction: "DESC",
@@ -39,12 +43,14 @@ export function SortableDataTable({
   hasNext,
   loadNext,
   isLoadingNext,
+  pageSize = defaultPageSize,
   ...props
 }: ComponentProps<typeof DataTable> & {
   refetch: (o: { order: Order }) => void;
   hasNext?: boolean;
-  loadNext?: (...args: any[]) => void;
+  loadNext?: LoadMoreFn<OperationType>;
   isLoadingNext?: boolean;
+  pageSize?: number;
 }) {
   const { __ } = useTranslate();
   const [order, setOrder] = useState(defaultOrder);
@@ -61,7 +67,7 @@ export function SortableDataTable({
         {hasNext && loadNext && (
           <Button
             variant="tertiary"
-            onClick={() => loadNext()}
+            onClick={() => loadNext(pageSize)}
             className="mt-3 mx-auto"
             disabled={isLoadingNext}
             icon={isLoadingNext ? Spinner : IconChevronDown}