FIX typings by changing getType to getStateType

lib/ui/src/components/sidebar/RefHelpers.tsx

@@ -7,7 +7,7 @@ export type Item = StoriesHash[keyof StoriesHash];
 export type DataSet = Record<string, Item>;
 export type FilteredType = 'filtered' | 'unfiltered';
 
-export const getType = (
+export const getStateType = (
   isLoading: boolean,
   isAuthRequired: boolean,
   isError: boolean,

lib/ui/src/components/sidebar/RefIndicator.tsx

@@ -11,12 +11,12 @@ import { Icons, WithTooltip, Spaced, TooltipLinkList } from '@storybook/componen
 import { styled } from '@storybook/theming';
 import { useStorybookApi } from '@storybook/api';
 
-import { getType, RefType } from './RefHelpers';
+import { getStateType, RefType } from './RefHelpers';
 import { MenuItemIcon } from './Menu';
 
 export type ClickHandler = ComponentProps<typeof TooltipLinkList>['links'][number]['onClick'];
 export interface IndicatorIconProps {
-  type: ReturnType<typeof getType>;
+  type: ReturnType<typeof getStateType>;
 }
 export interface CurrentVersionProps {
   url: string;
@@ -132,9 +132,9 @@ const CurrentVersion: FunctionComponent<CurrentVersionProps> = ({ url, versions
 export const RefIndicator = forwardRef<
   HTMLElement,
   RefType & {
-    type: ReturnType<typeof getType>;
+    state: ReturnType<typeof getStateType>;
   }
->(({ type, ...ref }, forwardedRef) => {
+>(({ state, ...ref }, forwardedRef) => {
   const api = useStorybookApi();
   const list = useMemo(() => Object.values(ref.stories || {}), [ref.stories]);
   const componentCount = useMemo(() => list.filter((v) => v.isComponent).length, [list]);
@@ -156,7 +156,7 @@ export const RefIndicator = forwardRef<
         tooltip={
           <MessageWrapper>
             <Spaced row={0}>
-              {type === 'loading' ? (
+              {state === 'loading' ? (
                 <LoadingMessage url={ref.url} />
               ) : (
                 <ReadyMessage {...{ url: ref.url, componentCount, leafCount }} />
@@ -169,7 +169,7 @@ export const RefIndicator = forwardRef<
                 </Fragment>
               ) : null}
 
-              {type === 'error' ? (
+              {state === 'error' ? (
                 <Fragment>
                   <Hr />
                   <ErrorOccurredMessage />
@@ -179,7 +179,7 @@ export const RefIndicator = forwardRef<
           </MessageWrapper>
         }
       >
-        <IndicatorIcon type={type} />
+        <IndicatorIcon type={state} />
       </WithTooltip>
 
       {ref.versions ? (

lib/ui/src/components/sidebar/Refs.tsx

@@ -5,7 +5,7 @@ import { ExpanderContext, useDataset } from './Tree/State';
 import { Expander } from './Tree/ListItem';
 import { RefIndicator } from './RefIndicator';
 import { AuthBlock, ErrorBlock, LoaderBlock, ContentBlock, EmptyBlock } from './RefBlocks';
-import { getType, RefType } from './RefHelpers';
+import { getStateType, RefType } from './RefHelpers';
 
 export interface RefProps {
   storyId: string;
@@ -79,7 +79,7 @@ export const Ref: FunctionComponent<RefType & RefProps> = (ref) => {
   const isEmpty = !isLoading && length === 0;
   const isAuthRequired = !!authUrl;
 
-  const type = getType(isLoading, isAuthRequired, isError, isEmpty);
+  const state = getStateType(isLoading, isAuthRequired, isError, isEmpty);
 
   return isHidden ? null : (
     <ExpanderContext.Provider value={combo}>
@@ -92,16 +92,16 @@ export const Ref: FunctionComponent<RefType & RefProps> = (ref) => {
         >
           <Expander className="sidebar-ref-expander" depth={0} isExpanded={isExpanded} />
           <RefTitle title={title}>{title}</RefTitle>
-          <RefIndicator {...ref} type={type} ref={indicatorRef} />
+          <RefIndicator {...ref} state={state} ref={indicatorRef} />
         </RefHead>
       )}
       {isExpanded && (
         <Wrapper data-title={title} isMain={isMain}>
-          {type === 'auth' && <AuthBlock id={ref.id} authUrl={authUrl} />}
-          {type === 'error' && <ErrorBlock error={error} />}
-          {type === 'loading' && <LoaderBlock isMain={isMain} />}
-          {type === 'empty' && <EmptyBlock isMain={isMain} />}
-          {type === 'ready' && (
+          {state === 'auth' && <AuthBlock id={ref.id} authUrl={authUrl} />}
+          {state === 'error' && <ErrorBlock error={error} />}
+          {state === 'loading' && <LoaderBlock isMain={isMain} />}
+          {state === 'empty' && <EmptyBlock isMain={isMain} />}
+          {state === 'ready' && (
             <ContentBlock {...{ others, dataSet, selectedSet, expandedSet, roots }} />
           )}
         </Wrapper>

lib/ui/src/components/sidebar/Sidebar.stories.tsx

@@ -25,7 +25,7 @@ const refs: Record<string, RefType> = {
     title: 'It is optimized',
     url: 'https://example.com',
     ready: false,
-    startInjected: false,
+    type: 'lazy',
     stories,
   },
   empty: {
@@ -33,14 +33,22 @@ const refs: Record<string, RefType> = {
     title: 'It is empty',
     url: 'https://example.com',
     ready: false,
-    startInjected: false,
+    type: 'lazy',
     stories: {},
   },
+  startInjected_unknown: {
+    id: 'startInjected_unknown',
+    title: 'It started injected and is ready',
+    url: 'https://example.com',
+    type: 'unknown',
+    ready: false,
+    stories,
+  },
   startInjected_loading: {
     id: 'startInjected_loading',
     title: 'It started injected and is loading',
     url: 'https://example.com',
-    startInjected: true,
+    type: 'auto-inject',
     ready: false,
     stories,
   },
@@ -48,7 +56,7 @@ const refs: Record<string, RefType> = {
     id: 'startInjected_ready',
     title: 'It started injected and is ready',
     url: 'https://example.com',
-    startInjected: true,
+    type: 'auto-inject',
     ready: true,
     stories,
   },
@@ -56,7 +64,7 @@ const refs: Record<string, RefType> = {
     id: 'versions',
     title: 'It has versions',
     url: 'https://example.com',
-    startInjected: false,
+    type: 'lazy',
     stories,
     versions: { '1.0.0': 'https://example.com/v1', '2.0.0': 'https://example.com' },
   },
@@ -64,7 +72,7 @@ const refs: Record<string, RefType> = {
     id: 'error',
     title: 'This has problems',
     url: 'https://example.com',
-    startInjected: false,
+    type: 'lazy',
     stories: {},
     error: (() => {
       try {
@@ -78,7 +86,7 @@ const refs: Record<string, RefType> = {
     id: 'Authentication',
     title: 'This requires a login',
     url: 'https://example.com',
-    startInjected: false,
+    type: 'lazy',
     stories: {},
     authUrl: 'https://example.com',
   },
@@ -87,7 +95,7 @@ const refs: Record<string, RefType> = {
     title: 'This storybook has a very very long name for some reason',
     url: 'https://example.com',
     stories,
-    startInjected: false,
+    type: 'lazy',
     versions: {
       '111.111.888-new': 'https://example.com/new',
       '111.111.888': 'https://example.com',