Fix for the run inspector now opening when linked from another run/replay

Author: samejr

apps/webapp/app/hooks/useReplaceLocation.ts

@@ -0,0 +1,22 @@
+import { useSearchParams } from "@remix-run/react";
+import { useCallback } from "react";
+
+export function useReplaceSearchParams() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const replaceSearchParam = useCallback(
+    (key: string, value?: string) => {
+      setSearchParams((s) => {
+        if (value) {
+          s.set(key, value);
+        } else {
+          s.delete(key);
+        }
+        return s;
+      });
+    },
+    [searchParams]
+  );
+
+  return { searchParams, setSearchParams, replaceSearchParam };
+}

apps/webapp/app/hooks/useReplaceSearchParams.ts

@@ -62,7 +62,7 @@ import { useEventSource } from "~/hooks/useEventSource";
 import { useInitialDimensions } from "~/hooks/useInitialDimensions";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { useReplaceLocation } from "~/hooks/useReplaceLocation";
+import { useReplaceSearchParams } from "~/hooks/useReplaceSearchParams";
 import { Shortcut, useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { useUser } from "~/hooks/useUser";
 import { Run, RunPresenter } from "~/presenters/v3/RunPresenter.server";
@@ -142,11 +142,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
 type LoaderData = SerializeFrom<typeof loader>;
 
-function getSpanId(location: Location<any>): string | undefined {
-  const search = new URLSearchParams(location.search);
-  return search.get("span") ?? undefined;
-}
-
 export default function Page() {
   const { run, trace, resizable, maximumLiveReloadingSetting } = useLoaderData<typeof loader>();
   const user = useUser();
@@ -259,8 +254,8 @@ export default function Page() {
 function TraceView({ run, trace, maximumLiveReloadingSetting, resizable }: LoaderData) {
   const organization = useOrganization();
   const project = useProject();
-  const { location, replaceSearchParam } = useReplaceLocation();
-  const selectedSpanId = getSpanId(location);
+  const { searchParams, replaceSearchParam } = useReplaceSearchParams();
+  const selectedSpanId = searchParams.get("span") ?? undefined;
 
   if (!trace) {
     return <></>;

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx

@@ -64,7 +64,7 @@ import { useDebounce } from "~/hooks/useDebounce";
 import { useInitialDimensions } from "~/hooks/useInitialDimensions";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { useReplaceLocation } from "~/hooks/useReplaceLocation";
+import { useReplaceSearchParams } from "~/hooks/useReplaceSearchParams";
 import { Shortcut, useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { useSyncRunPage } from "~/hooks/useSyncRunPage";
 import { Trace, TraceEvent } from "~/hooks/useSyncTrace";
@@ -147,11 +147,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
 type LoaderData = UseDataFunctionReturn<typeof loader>;
 
-function getSpanId(location: Location<any>): string | undefined {
-  const search = new URLSearchParams(location.search);
-  return search.get("span") ?? undefined;
-}
-
 export default function Page() {
   const { run, resizable } = useTypedLoaderData<typeof loader>();
 
@@ -265,8 +260,8 @@ type InspectorState =
   | undefined;
 
 function Panels({ resizable, run: originalRun }: LoaderData) {
-  const { location, replaceSearchParam } = useReplaceLocation();
-  const selectedSpanId = getSpanId(location);
+  const { searchParams, replaceSearchParam } = useReplaceSearchParams();
+  const selectedSpanId = searchParams.get("span") ?? undefined;
 
   const appOrigin = useAppOrigin();
   const { isUpToDate, events, runs } = useSyncRunPage({