ref the replay stories to use the extracted picked, nuqs, and consistent types that align with nuqs

Author: ryan953

static/app/components/replays/list/__stories__/replayList.stories.tsx

@@ -1,22 +1,22 @@
 import {useState} from 'react';
 import {ClassNames} from '@emotion/react';
 import {useInfiniteQuery} from '@tanstack/react-query';
+import {parseAsString, useQueryState} from 'nuqs';
 
 import {Flex} from '@sentry/scraps/layout';
 
 import {Hovercard} from 'sentry/components/hovercard';
 import {ReplayList} from 'sentry/components/replays/list/__stories__/replayList';
 import {EnvironmentPicker} from 'sentry/components/replays/player/__stories__/environmentPicker';
-import {ProjectPicker} from 'sentry/components/replays/player/__stories__/projectPicker';
 import * as Storybook from 'sentry/stories';
 import {replayListInfiniteApiOptions} from 'sentry/utils/replays/replayListApiOptions';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
 export default Storybook.story('ReplayList', story => {
   story('Rendered', () => {
     const organization = useOrganization();
-    const [project, setProject] = useState<string | undefined>();
-    const [environment, setEnvironment] = useState<string | undefined>();
+    const [project, setProject] = useQueryState('project', parseAsString);
+    const [environment, setEnvironment] = useQueryState('environment', parseAsString);
     const [replayId, setReplayId] = useState<string | undefined>();
 
     const query = {
@@ -38,7 +38,8 @@ export default Storybook.story('ReplayList', story => {
       <Flex direction="column" gap="md">
         Selected Replay: {replayId}
         <Flex gap="sm">
-          <ProjectPicker project={project} onChange={setProject} />
+          <Storybook.SelectProject projectSlug={project} setProjectSlug={setProject} />
+
           <EnvironmentPicker
             project={project}
             environment={environment}
@@ -56,10 +57,8 @@ export default Storybook.story('ReplayList', story => {
 
   story('Hovercard', () => {
     const organization = useOrganization();
-
-    const [project, setProject] = useState<string | undefined>();
-    const [environment, setEnvironment] = useState<string | undefined>();
-
+    const [project, setProject] = useQueryState('project', parseAsString);
+    const [environment, setEnvironment] = useQueryState('environment', parseAsString);
     const [replayId, setReplayId] = useState<string | undefined>();
 
     const query = {
@@ -84,7 +83,10 @@ export default Storybook.story('ReplayList', story => {
             body={
               <Flex direction="column" gap="md">
                 <Flex gap="sm">
-                  <ProjectPicker project={project} onChange={setProject} />
+                  <Storybook.SelectProject
+                    projectSlug={project}
+                    setProjectSlug={setProject}
+                  />
                   <EnvironmentPicker
                     project={project}
                     environment={environment}

static/app/components/replays/player/__stories__/environmentPicker.tsx

@@ -11,9 +11,9 @@ export function EnvironmentPicker({
   onChange,
   project,
 }: {
-  environment: string | undefined;
-  onChange: (environment: string) => void;
-  project: string | undefined;
+  environment: string | null | undefined;
+  onChange: (environment: string | null) => void;
+  project: string | null;
 }) {
   const {projects} = useProjects();
   const environments = uniq(
@@ -29,14 +29,14 @@ export function EnvironmentPicker({
 
   return (
     <CompactSelect
-      onChange={selected => onChange(selected.value)}
+      onChange={selected => onChange(selected?.value ?? null)}
       options={options}
       search
       size="xs"
       trigger={triggerProps => (
         <OverlayTrigger.Button {...triggerProps} prefix="Environment" />
       )}
-      value={environment}
+      value={environment ?? undefined}
     />
   );
 }

static/app/components/replays/player/__stories__/projectPicker.tsx

@@ -1,6 +1,7 @@
-import {Fragment, useState, type ReactNode} from 'react';
+import {Fragment, type ReactNode} from 'react';
 import {ClassNames} from '@emotion/react';
 import {useInfiniteQuery} from '@tanstack/react-query';
+import {parseAsString, useQueryState} from 'nuqs';
 
 import {InputGroup} from '@sentry/scraps/input';
 import {Flex} from '@sentry/scraps/layout';
@@ -9,9 +10,9 @@ import {Text} from '@sentry/scraps/text';
 import {Hovercard} from 'sentry/components/hovercard';
 import {ReplayList} from 'sentry/components/replays/list/__stories__/replayList';
 import {EnvironmentPicker} from 'sentry/components/replays/player/__stories__/environmentPicker';
-import {ProjectPicker} from 'sentry/components/replays/player/__stories__/projectPicker';
 import {Providers} from 'sentry/components/replays/player/__stories__/providers';
 import {ReplayLoadingState} from 'sentry/components/replays/player/replayLoadingState';
+import * as Storybook from 'sentry/stories';
 import {useLoadReplayReader} from 'sentry/utils/replays/hooks/useLoadReplayReader';
 import {replayListInfiniteApiOptions} from 'sentry/utils/replays/replayListApiOptions';
 import {useOrganization} from 'sentry/utils/useOrganization';
@@ -23,8 +24,8 @@ interface Props {
 
 export function ReplaySlugChooser({children}: Props) {
   const organization = useOrganization();
-  const [project, setProject] = useState<string | undefined>();
-  const [environment, setEnvironment] = useState<string | undefined>();
+  const [project, setProject] = useQueryState('project', parseAsString);
+  const [environment, setEnvironment] = useQueryState('environment', parseAsString);
   const [replaySlug, setReplaySlug] = useSessionStorage('stories:replaySlug', '');
 
   const query = {
@@ -44,7 +45,7 @@ export function ReplaySlugChooser({children}: Props) {
 
   const input = (
     <Flex direction="row" gap="sm">
-      <ProjectPicker project={project} onChange={setProject} />
+      <Storybook.SelectProject projectSlug={project} setProjectSlug={setProject} />
       <EnvironmentPicker
         project={project}
         environment={environment}

static/app/components/replays/player/__stories__/replaySlugChooser.tsx

@@ -2,7 +2,7 @@ export {ColorReference} from './colorReference';
 export {Demo} from './demo';
 export {JSXNode, JSXProperty} from './jsx';
 export {ModuleExports} from './moduleExports';
-export {PickProject} from './pickProject';
+export {SelectProject, SelectProjects} from './projectPicker';
 export {PropMatrix} from './props';
 export {Section} from './layout';
 export {SideBySide} from './layout';

static/app/stories/index.tsx

@@ -0,0 +1,65 @@
+import {useMemo} from 'react';
+
+import {CompactSelect} from '@sentry/scraps/compactSelect';
+import {OverlayTrigger} from '@sentry/scraps/overlayTrigger';
+
+import {useProjects} from 'sentry/utils/useProjects';
+
+export function SelectProject({
+  setProjectSlug,
+  projectSlug,
+}: {
+  projectSlug: string | null | undefined;
+  setProjectSlug: (projectSlug: string | null) => void;
+}) {
+  const {projects} = useProjects();
+
+  const projectOptions = useMemo(
+    () => projects.map(p => ({value: p.slug, label: p.slug})),
+    [projects]
+  );
+
+  return (
+    <CompactSelect
+      clearable
+      onChange={selected => setProjectSlug(selected?.value ?? null)}
+      options={projectOptions}
+      search
+      size="xs"
+      trigger={triggerProps => (
+        <OverlayTrigger.Button {...triggerProps} prefix="Project" />
+      )}
+      value={projectSlug ?? undefined}
+    />
+  );
+}
+
+export function SelectProjects({
+  setProjectSlugs,
+  projectSlugs,
+}: {
+  projectSlugs: string[];
+  setProjectSlugs: (projectSlugs: string[]) => void;
+}) {
+  const {projects} = useProjects();
+
+  const projectOptions = useMemo(
+    () => projects.map(p => ({value: p.slug, label: p.slug})),
+    [projects]
+  );
+
+  return (
+    <CompactSelect
+      clearable
+      onChange={selected => setProjectSlugs(selected?.map(opt => opt.value) ?? [])}
+      options={projectOptions}
+      search
+      size="xs"
+      trigger={triggerProps => (
+        <OverlayTrigger.Button {...triggerProps} prefix="Projects" />
+      )}
+      value={projectSlugs ?? undefined}
+      multiple
+    />
+  );
+}