Merge pull request #21621 from storybookjs/norbert/bug-composition-ve…

…rsion-switcher Bug: version switcher of compositions
storybookjs · Mar 20, 2023 · 8814ac3 · 8814ac3
2 parents 2fb6e93 + cd840c7
commit 8814ac3
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 18 deletions.
diff --git a/code/lib/manager-api/src/lib/stories.ts b/code/lib/manager-api/src/lib/stories.ts
@@ -137,7 +137,7 @@ export const transformStoryIndexV3toV4 = (index: StoryIndexV3): API_PreparedStor
 };
 
 export const transformStoryIndexToStoriesHash = (
-  index: API_PreparedStoryIndex,
+  input: API_PreparedStoryIndex | StoryIndexV2 | StoryIndexV3,
   {
     provider,
     docsOptions,
@@ -146,13 +146,16 @@ export const transformStoryIndexToStoriesHash = (
     docsOptions: DocsOptions;
   }
 ): API_IndexHash => {
-  if (!index.v) throw new Error('Composition: Missing stories.json version');
-  let v4Index;
+  if (!input.v) {
+    throw new Error('Composition: Missing stories.json version');
+  }
 
-  v4Index = index.v === 2 ? transformStoryIndexV2toV3(index as any) : index;
-  v4Index = index.v === 3 ? transformStoryIndexV3toV4(index as any) : index;
+  let index = input;
+  index = index.v === 2 ? transformStoryIndexV2toV3(index as any) : index;
+  index = index.v === 3 ? transformStoryIndexV3toV4(index as any) : index;
+  index = index as API_PreparedStoryIndex;
 
-  const entryValues = Object.values(v4Index.entries);
+  const entryValues = Object.values(index.entries);
   const { sidebar = {} } = provider.getConfig();
   const { showRoots, collapsedRoots = [], renderLabel } = sidebar;
 

diff --git a/code/lib/manager-api/src/modules/refs.ts b/code/lib/manager-api/src/modules/refs.ts
@@ -135,8 +135,9 @@ export const init: ModuleFn<SubAPI, SubState, void> = (
     },
     changeRefVersion: (id, url) => {
       const { versions, title } = api.getRefs()[id];
-      const ref = { id, url, versions, title, stories: {} } as API_SetRefData;
+      const ref: API_SetRefData = { id, url, versions, title, index: {}, expanded: true };
 
+      api.setRef(id, { ...ref, type: 'unknown' }, false);
       api.checkRef(ref);
     },
     changeRefState: (id, previewInitialized) => {

diff --git a/code/ui/manager/src/components/sidebar/RefIndicator.tsx b/code/ui/manager/src/components/sidebar/RefIndicator.tsx
@@ -178,18 +178,12 @@ export const RefIndicator = React.memo(
         [list]
       );
 
-      const changeVersion = useCallback(
-        ((event, item) => {
-          event.preventDefault();
-          api.changeRefVersion(ref.id, item.href);
-        }) as ClickHandler,
-        []
-      );
-
       return (
         <IndicatorPlacement ref={forwardedRef}>
           <WithTooltip
             placement="bottom-start"
+            trigger="click"
+            closeOnOutsideClick
             tooltip={
               <MessageWrapper>
                 <Spaced row={0}>
@@ -217,17 +211,23 @@ export const RefIndicator = React.memo(
           {ref.versions && Object.keys(ref.versions).length ? (
             <WithTooltip
               placement="bottom-start"
-              tooltip={
+              trigger="click"
+              closeOnOutsideClick
+              tooltip={(tooltip) => (
                 <TooltipLinkList
                   links={Object.entries(ref.versions).map(([id, href]) => ({
                     icon: href === ref.url ? 'check' : undefined,
                     id,
                     title: id,
                     href,
-                    onClick: changeVersion,
+                    onClick: (event, item) => {
+                      event.preventDefault();
+                      api.changeRefVersion(ref.id, item.href);
+                      tooltip.onHide();
+                    },
                   }))}
                 />
-              }
+              )}
             >
               <CurrentVersion url={ref.url} versions={ref.versions} />
             </WithTooltip>

diff --git a/code/ui/manager/src/components/sidebar/Refs.tsx b/code/ui/manager/src/components/sidebar/Refs.tsx
@@ -136,6 +136,7 @@ export const Ref: FC<RefType & RefProps> = React.memo(function Ref(props) {
     (storyId: string) => api && api.selectStory(storyId, undefined, { ref: !isMain && refId }),
     [api, isMain, refId]
   );
+
   return (
     <>
       {isMain || (