fix: incorrect types in `ActionNavigate` (#7462)

packages/excalidraw/actions/actionNavigate.tsx

@@ -39,15 +39,15 @@ export const actionGoToCollaborator = register({
     };
   },
   PanelComponent: ({ updateData, data, appState }) => {
-    const [socketId, collaborator, withName, isBeingFollowed] =
+    const { clientId, collaborator, withName, isBeingFollowed } =
       data as GoToCollaboratorComponentProps;
 
-    const background = getClientColor(socketId);
+    const background = getClientColor(clientId);
 
     return withName ? (
       <div
         className="dropdown-menu-item dropdown-menu-item-base UserList__collaborator"
-        onClick={() => updateData({ ...collaborator, socketId })}
+        onClick={() => updateData<Collaborator>(collaborator)}
       >
         <Avatar
           color={background}
@@ -71,7 +71,7 @@ export const actionGoToCollaborator = register({
       <Avatar
         color={background}
         onClick={() => {
-          updateData({ ...collaborator, socketId });
+          updateData(collaborator);
         }}
         name={collaborator.username || ""}
         src={collaborator.avatarUrl}

packages/excalidraw/actions/types.ts

@@ -129,7 +129,7 @@ export type ActionName =
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];
   appState: AppState;
-  updateData: (formData?: any) => void;
+  updateData: <T = any>(formData?: T) => void;
   appProps: ExcalidrawProps;
   data?: Record<string, any>;
   app: AppClassProperties;

packages/excalidraw/components/UserList.tsx

@@ -13,12 +13,12 @@ import { searchIcon } from "./icons";
 import { t } from "../i18n";
 import { isShallowEqual } from "../utils";
 
-export type GoToCollaboratorComponentProps = [
-  ClientId,
-  Collaborator,
-  boolean,
-  boolean,
-];
+export type GoToCollaboratorComponentProps = {
+  clientId: ClientId;
+  collaborator: Collaborator;
+  withName: boolean;
+  isBeingFollowed: boolean;
+};
 
 /** collaborator user id or socket id (fallback) */
 type ClientId = string & { _brand: "UserId" };
@@ -60,12 +60,12 @@ const renderCollaborator = ({
   shouldWrapWithTooltip?: boolean;
   isBeingFollowed: boolean;
 }) => {
-  const data: GoToCollaboratorComponentProps = [
+  const data: GoToCollaboratorComponentProps = {
     clientId,
     collaborator,
     withName,
     isBeingFollowed,
-  ];
+  };
   const avatarJSX = actionManager.renderAction("goToCollaborator", data);
 
   return (