ref(stories): improve param type-safety (#95580)

- Refactors `/stories/*` routes to use `storyType` and `storySlug`
params, rather than generic param names
- Refactors `useStoryRedirect` for clarity
- Fixes an issue where navigating to a story via the address bar would
result in an infinite spinner. React Router's `useParams` hook supports
this use case, but `useLocation` with `location.query` only works for
client-side navigations

Author: natemoo-re

static/app/routes.tsx

@@ -270,7 +270,7 @@ function buildRoutes() {
         <IndexRoute component={make(() => import('sentry/views/onboarding'))} />
       </Route>
       <Route
-        path="/stories/:category?/:topic?"
+        path="/stories/:storyType?/:storySlug?/"
         component={make(() => import('sentry/stories/view/index'))}
         withOrgPath
       />

static/app/stories/view/useStoryRedirect.tsx

@@ -3,25 +3,22 @@ import kebabCase from 'lodash/kebabCase';
 
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
+import {useParams} from 'sentry/utils/useParams';
 
 import {useStoryBookFilesByCategory} from './storySidebar';
-import type {StoryCategory} from './storyTree';
+import type {StoryCategory, StoryTreeNode} from './storyTree';
 
 type LegacyStoryQuery = {
   name: string;
-  category?: never;
-  topic?: never;
 };
-type NewStoryQuery = {
-  category: StoryCategory;
-  topic: string;
-  name?: never;
-};
-
-type StoryQuery = LegacyStoryQuery | NewStoryQuery;
+interface StoryParams {
+  storySlug: string;
+  storyType: StoryCategory;
+}
 
 export function useStoryRedirect() {
-  const location = useLocation<StoryQuery>();
+  const location = useLocation<LegacyStoryQuery>();
+  const params = useParams<StoryParams>();
   const navigate = useNavigate();
   const stories = useStoryBookFilesByCategory();
 
@@ -33,69 +30,60 @@ export function useStoryRedirect() {
     if (!location.pathname.startsWith('/stories')) {
       return;
     }
-    const story = getStoryMeta(location.query, stories);
+    const story = getStory(stories, {query: location.query, params});
     if (!story) {
       return;
     }
-    if (story.category === 'shared') {
-      navigate(
-        {pathname: `/stories/`, search: `?name=${encodeURIComponent(story.path)}`},
-        {replace: true, state: {storyPath: story.path}}
-      );
-    } else {
-      navigate(
-        {pathname: `/stories/${story.category}/${kebabCase(story.label)}`},
-        {replace: true, state: {storyPath: story.path}}
-      );
-    }
-  }, [location, navigate, stories]);
+    const {state, ...to} = story.location;
+    navigate(to, {replace: true, state});
+  }, [location, params, navigate, stories]);
 }
 
-interface StoryMeta {
-  category: StoryCategory;
-  label: string;
-  path: string;
+interface StoryRouteContext {
+  params: StoryParams;
+  query: LegacyStoryQuery;
 }
 
-function getStoryMeta(
-  query: StoryQuery,
-  stories: ReturnType<typeof useStoryBookFilesByCategory>
+function getStory(
+  stories: ReturnType<typeof useStoryBookFilesByCategory>,
+  context: StoryRouteContext
 ) {
-  if (query.name) {
-    return legacyGetStoryMetaFromQuery(query, stories);
+  if (context.params.storyType && context.params.storySlug) {
+    return getStoryFromParams(stories, context);
   }
-  if (query.category && query.topic) {
-    return getStoryMetaFromQuery(query, stories);
+  if (context.query.name) {
+    return legacyGetStoryFromQuery(stories, context);
   }
   return undefined;
 }
 
-function legacyGetStoryMetaFromQuery(
-  query: LegacyStoryQuery,
-  stories: ReturnType<typeof useStoryBookFilesByCategory>
-): StoryMeta | undefined {
+function legacyGetStoryFromQuery(
+  stories: ReturnType<typeof useStoryBookFilesByCategory>,
+  context: StoryRouteContext
+): StoryTreeNode | undefined {
   for (const category of Object.keys(stories) as StoryCategory[]) {
     const nodes = stories[category];
     for (const node of nodes) {
-      const match = node.find(n => n.filesystemPath === query.name);
+      const match = node.find(n => n.filesystemPath === context.query.name);
       if (match) {
-        return {category, label: match.label, path: match.filesystemPath};
+        return match;
       }
     }
   }
   return undefined;
 }
 
-function getStoryMetaFromQuery(
-  query: NewStoryQuery,
-  stories: ReturnType<typeof useStoryBookFilesByCategory>
-): StoryMeta | undefined {
-  const {category, topic} = query;
-  const nodes = category in stories ? stories[category] : [];
+function getStoryFromParams(
+  stories: ReturnType<typeof useStoryBookFilesByCategory>,
+  context: StoryRouteContext
+): StoryTreeNode | undefined {
+  const {storyType: category, storySlug} = context.params;
+  const nodes =
+    category && category in stories ? stories[category as keyof typeof stories] : [];
   for (const node of nodes) {
-    const match = node.find(n => kebabCase(n.label) === topic);
+    const match = node.find(n => kebabCase(n.label) === storySlug);
     if (match) {
-      return {category, label: match.label, path: match.filesystemPath};
+      return match;
     }
   }
   return undefined;

static/app/utils/useParams.tsx

@@ -17,16 +17,16 @@ type ParamKeys =
   | 'authId'
   | 'automationId'
   | 'codeId'
-  | 'dataExportId'
   | 'dashboardId'
+  | 'dataExportId'
+  | 'detectorId'
   | 'detectorId'
   | 'docIntegrationSlug'
   | 'eventId'
   | 'fineTuneType'
   | 'groupId'
   | 'id'
   | 'installationId'
-  | 'detectorId'
   | 'integrationSlug'
   | 'issueId'
   | 'memberId'
@@ -40,6 +40,8 @@ type ParamKeys =
   | 'sentryAppSlug'
   | 'shareId'
   | 'spanSlug'
+  | 'storySlug'
+  | 'storyType'
   | 'tagKey'
   | 'teamId'
   | 'traceSlug'