feat(stories): Add RouteAnalyticsContextProvider to stories so we can see what is viewed (#81108)

I realized recently that we could have analytics about which story files
are most commonly referenced. It would help to know what's used often
because it might indicate something that needs more attention, similarly
something not referenced might be because it's either intuitive, or
unused in new code.

This is a half step though. This `RouteAnalyticsContextProvider` used
relies on the `react-hook:route-activated` hook provided to the
HookStore, in dev that won't be implemented. So the data we collect will
only be from people using sentry.io/stories which might not cover
everyone.

static/app/views/stories/index.tsx

@@ -6,6 +6,7 @@ import {space} from 'sentry/styles/space';
 import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
 import {useHotkeys} from 'sentry/utils/useHotkeys';
 import OrganizationContainer from 'sentry/views/organizationContainer';
+import RouteAnalyticsContextProvider from 'sentry/views/routeAnalyticsContextProvider';
 import EmptyStory from 'sentry/views/stories/emptyStory';
 import ErrorStory from 'sentry/views/stories/errorStory';
 import storiesContext from 'sentry/views/stories/storiesContext';
@@ -25,40 +26,42 @@ export default function Stories({location}: Props) {
   useHotkeys([{match: '/', callback: () => searchInput.current?.focus()}], []);
 
   return (
-    <OrganizationContainer>
-      <Layout>
-        <StoryHeader style={{gridArea: 'head'}} />
-
-        <Sidebar style={{gridArea: 'aside'}}>
-          <Input
-            ref={searchInput}
-            placeholder="Search files by name"
-            onChange={e => setSearchTerm(e.target.value.toLowerCase())}
-          />
-          <TreeContainer>
-            <StoryTree
-              files={storiesContext()
-                .files()
-                .filter(s => s.toLowerCase().includes(searchTerm))}
+    <RouteAnalyticsContextProvider>
+      <OrganizationContainer>
+        <Layout>
+          <StoryHeader style={{gridArea: 'head'}} />
+
+          <Sidebar style={{gridArea: 'aside'}}>
+            <Input
+              ref={searchInput}
+              placeholder="Search files by name"
+              onChange={e => setSearchTerm(e.target.value.toLowerCase())}
             />
-          </TreeContainer>
-        </Sidebar>
-
-        {story.error ? (
-          <VerticalScroll style={{gridArea: 'body'}}>
-            <ErrorStory error={story.error} />
-          </VerticalScroll>
-        ) : story.resolved ? (
-          <Main style={{gridArea: 'body'}}>
-            <StoryFile filename={story.filename} resolved={story.resolved} />
-          </Main>
-        ) : (
-          <VerticalScroll style={{gridArea: 'body'}}>
-            <EmptyStory />
-          </VerticalScroll>
-        )}
-      </Layout>
-    </OrganizationContainer>
+            <TreeContainer>
+              <StoryTree
+                files={storiesContext()
+                  .files()
+                  .filter(s => s.toLowerCase().includes(searchTerm))}
+              />
+            </TreeContainer>
+          </Sidebar>
+
+          {story.error ? (
+            <VerticalScroll style={{gridArea: 'body'}}>
+              <ErrorStory error={story.error} />
+            </VerticalScroll>
+          ) : story.resolved ? (
+            <Main style={{gridArea: 'body'}}>
+              <StoryFile filename={story.filename} resolved={story.resolved} />
+            </Main>
+          ) : (
+            <VerticalScroll style={{gridArea: 'body'}}>
+              <EmptyStory />
+            </VerticalScroll>
+          )}
+        </Layout>
+      </OrganizationContainer>
+    </RouteAnalyticsContextProvider>
   );
 }