feat(ui): Add story-ui command to run internal storybook

package.json

@@ -220,6 +220,7 @@
     "lint:css": "yarn stylelint 'static/app/**/*.[jt]sx'",
     "dev": "(yarn check --verify-tree || yarn install --check-files) && sentry devserver",
     "dev-ui": "SENTRY_UI_DEV_ONLY=1 SENTRY_WEBPACK_PROXY_PORT=7999 yarn webpack serve",
+    "story-ui": "SENTRY_UI_STORIES_ONLY=1 SENTRY_UI_DEV_ONLY=1 SENTRY_WEBPACK_PROXY_PORT=9001 yarn webpack serve",
     "dev-acceptance": "NO_DEV_SERVER=1 NODE_ENV=development yarn webpack --watch",
     "webpack-profile": "NO_TS_FORK=1 yarn -s webpack --profile --json > stats.json",
     "install-api-docs": "cd api-docs && yarn install",

static/app/constants/index.tsx

@@ -336,6 +336,7 @@ export const NODE_ENV = process.env.NODE_ENV;
 export const SPA_DSN = process.env.SPA_DSN;
 export const SENTRY_RELEASE_VERSION = process.env.SENTRY_RELEASE_VERSION;
 export const UI_DEV_ENABLE_PROFILING = process.env.UI_DEV_ENABLE_PROFILING;
+export const UI_STORIES_ONLY = !!process.env.UI_STORIES_ONLY;
 
 export const DEFAULT_ERROR_JSON = {
   detail: t('Unknown error. Please try again.'),

static/app/routes.spec.tsx

@@ -1,7 +1,7 @@
 import {createRoutes, RouteComponent} from 'react-router';
 
 import * as constants from 'sentry/constants';
-import {buildRoutes} from 'sentry/routes';
+import {buildAppRoutes} from 'sentry/routes';
 
 import {normalizeUrl} from './utils/withDomainRequired';
 
@@ -73,7 +73,7 @@ function extractRoutes(rootRoute: any): Record<string, RouteComponent> {
   return routeMap;
 }
 
-describe('buildRoutes()', function () {
+describe('buildAppRoutes()', function () {
   // Until customer-domains is mainlined and path
   // based slug routes are removed we need to ensure
   // that each orgId route also has slugless path.
@@ -82,11 +82,11 @@ describe('buildRoutes()', function () {
 
     // Get routes for with customer domains off.
     spy.mockReturnValue(false);
-    const routeMap = extractRoutes(buildRoutes());
+    const routeMap = extractRoutes(buildAppRoutes());
 
     // Get routes with customer domains on.
     spy.mockReturnValue(true);
-    const domainRoutes = extractRoutes(buildRoutes());
+    const domainRoutes = extractRoutes(buildAppRoutes());
 
     // All routes that exist under orgId path slugs should
     // have a sibling under customer-domains.

static/app/routes.tsx

@@ -10,7 +10,7 @@ import {
 import memoize from 'lodash/memoize';
 
 import LazyLoad from 'sentry/components/lazyLoad';
-import {EXPERIMENTAL_SPA, usingCustomerDomain} from 'sentry/constants';
+import {EXPERIMENTAL_SPA, UI_STORIES_ONLY, usingCustomerDomain} from 'sentry/constants';
 import {t} from 'sentry/locale';
 import HookStore from 'sentry/stores/hookStore';
 import {HookName} from 'sentry/types/hooks';
@@ -71,7 +71,7 @@ export function makeLazyloadComponent<C extends React.ComponentType<any>>(
 // Shorthand to avoid extra line wrapping
 const make = makeLazyloadComponent;
 
-function buildRoutes() {
+function buildAppRoutes() {
   // Read this to understand where to add new routes, how / why the routing
   // tree is structured the way it is, and how the lazy-loading /
   // code-splitting works for pages.
@@ -270,18 +270,6 @@ function buildRoutes() {
         <IndexRedirect to="welcome/" />
         <Route path=":step/" component={make(() => import('sentry/views/onboarding'))} />
       </Route>
-      {usingCustomerDomain && (
-        <Route
-          path="/stories/"
-          component={make(() => import('sentry/views/stories/index'))}
-          key="orgless-stories"
-        />
-      )}
-      <Route
-        path="/organizations/:orgId/stories/"
-        component={withDomainRedirect(make(() => import('sentry/views/stories/index')))}
-        key="org-stories"
-      />
     </Fragment>
   );
 
@@ -2421,12 +2409,21 @@ function buildRoutes() {
   return appRoutes;
 }
 
+/**
+ * Sentry storybook routes
+ */
+function buildStoryRoutes() {
+  return <Route path="/" component={make(() => import('sentry/views/stories/index'))} />;
+}
+
 // We load routes both when initializing the SDK (for routing integrations) and
 // when the app renders Main. Memoize to avoid rebuilding the route tree.
-export const routes = memoize(buildRoutes);
+export const routes = UI_STORIES_ONLY
+  ? memoize(buildStoryRoutes)
+  : memoize(buildAppRoutes);
 
 // Exported for use in tests.
-export {buildRoutes};
+export {buildAppRoutes};
 
 function NoOp(props: {children: React.ReactNode}) {
   return <Fragment>{props.children}</Fragment>;

static/app/views/stories/storyList.tsx

@@ -34,10 +34,11 @@ function FolderContent({path, content}: {content: DirContent; path: string}) {
 
         if (Object.keys(childContent).length === 0) {
           const isCurrent = childPath === currentFile ? true : undefined;
-          const to = `/stories/?name=${childPath}`;
           return (
             <ListItem key={name} aria-current={isCurrent}>
-              <FolderLink to={to}>{name}</FolderLink>
+              <FolderLink to={`${location.pathname}?name=${childPath}`}>
+                {name}
+              </FolderLink>
             </ListItem>
           );
         }

webpack.config.ts

@@ -93,6 +93,9 @@ const DEPLOY_PREVIEW_CONFIG = IS_DEPLOY_PREVIEW && {
 const SENTRY_EXPERIMENTAL_SPA =
   !DEPLOY_PREVIEW_CONFIG && !IS_UI_DEV_ONLY ? !!env.SENTRY_EXPERIMENTAL_SPA : true;
 
+// Only build Sentry Stories
+const SENTRY_UI_STORIES_ONLY = !!env.SENTRY_UI_STORIES_ONLY;
+
 // We should only read from the SENTRY_SPA_DSN env variable if SENTRY_EXPERIMENTAL_SPA
 // is true. This is to make sure we can validate that the experimental SPA mode is
 // working properly.
@@ -342,6 +345,7 @@ const appConfig: Configuration = {
         DEPLOY_PREVIEW_CONFIG: JSON.stringify(DEPLOY_PREVIEW_CONFIG),
         EXPERIMENTAL_SPA: JSON.stringify(SENTRY_EXPERIMENTAL_SPA),
         SPA_DSN: JSON.stringify(SENTRY_SPA_DSN),
+        UI_STORIES_ONLY: JSON.stringify(SENTRY_UI_STORIES_ONLY),
         SENTRY_RELEASE_VERSION: JSON.stringify(SENTRY_RELEASE_VERSION),
       },
     }),
@@ -681,7 +685,7 @@ if (IS_UI_DEV_ONLY) {
   };
 }
 
-if (IS_UI_DEV_ONLY || SENTRY_EXPERIMENTAL_SPA) {
+if (IS_UI_DEV_ONLY || SENTRY_EXPERIMENTAL_SPA || SENTRY_UI_STORIES_ONLY) {
   appConfig.output!.publicPath = '/_assets/';
 
   /**