Manager: Enable refs filtered via experimental_setFilter

code/lib/manager-api/src/lib/stories.ts

@@ -49,7 +49,7 @@ export const transformSetStoriesStoryDataToStoriesHash = (
 ) =>
   transformStoryIndexToStoriesHash(transformSetStoriesStoryDataToPreparedStoryIndex(data), options);
 
-const transformSetStoriesStoryDataToPreparedStoryIndex = (
+export const transformSetStoriesStoryDataToPreparedStoryIndex = (
   stories: SetStoriesStoryData
 ): API_PreparedStoryIndex => {
   const entries: API_PreparedStoryIndex['entries'] = Object.entries(stories).reduce(

code/lib/manager-api/src/modules/refs.ts

@@ -8,10 +8,11 @@ import type {
   SetStoriesStoryData,
   API_IndexHash,
   API_StoryMapper,
+  StoryIndex,
 } from '@storybook/types';
 // eslint-disable-next-line import/no-cycle
 import {
-  transformSetStoriesStoryDataToStoriesHash,
+  transformSetStoriesStoryDataToPreparedStoryIndex,
   transformStoryIndexToStoriesHash,
 } from '../lib/stories';
 
@@ -104,8 +105,12 @@ async function handleRequest(
 
   try {
     const response = await request;
-    if (response === false || response === true) throw new Error('Unexpected boolean response');
-    if (!response.ok) throw new Error(`Unexpected response not OK: ${response.statusText}`);
+    if (response === false || response === true) {
+      throw new Error('Unexpected boolean response');
+    }
+    if (!response.ok) {
+      throw new Error(`Unexpected response not OK: ${response.statusText}`);
+    }
 
     const json = await response.json();
 
@@ -276,26 +281,33 @@ export const init: ModuleFn<SubAPI, SubState> = (
       if (singleStory) {
         return;
       }
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      let internal_index: StoryIndex | undefined;
+      let index: API_IndexHash | undefined;
+      const { filters } = store.getState();
       const { storyMapper = defaultStoryMapper } = provider.getConfig();
       const ref = api.getRefs()[id];
 
-      let index: API_IndexHash;
-      if (setStoriesData) {
-        index = transformSetStoriesStoryDataToStoriesHash(
-          map(setStoriesData, ref, { storyMapper }),
-          { provider, docsOptions, filters: {}, status: {} }
-        );
-      } else if (storyIndex) {
+      if (storyIndex || setStoriesData) {
+        internal_index = setStoriesData
+          ? transformSetStoriesStoryDataToPreparedStoryIndex(
+              map(setStoriesData, ref, { storyMapper })
+            )
+          : storyIndex;
+
         index = transformStoryIndexToStoriesHash(storyIndex, {
           provider,
           docsOptions,
-          filters: {},
+          filters,
           status: {},
         });
       }
-      if (index) index = addRefIds(index, ref);
 
-      api.updateRef(id, { index, ...rest });
+      if (index) {
+        index = addRefIds(index, ref);
+      }
+
+      api.updateRef(id, { ...rest, index, internal_index });
     },
 
     updateRef: (id, data) => {

code/lib/manager-api/src/modules/stories.ts

@@ -608,12 +608,24 @@ export const init: ModuleFn<SubAPI, SubState> = ({
       });
 
       await store.setState({ status: newStatus }, { persistence: 'session' });
+
+      // We need to re-prepare the index
       await api.setIndex(index);
+
+      const refs = await fullAPI.getRefs();
+      Object.entries(refs).forEach(([refId, { internal_index, ...ref }]) => {
+        fullAPI.setRef(refId, { ...ref, index: internal_index }, true);
+      });
     },
     experimental_setFilter: async (id, filterFunction) => {
       const { internal_index: index } = store.getState();
       await store.setState({ filters: { ...store.getState().filters, [id]: filterFunction } });
       await api.setIndex(index);
+
+      const refs = await fullAPI.getRefs();
+      Object.entries(refs).forEach(([refId, { internal_index, ...ref }]) => {
+        fullAPI.setRef(refId, { ...ref, index: internal_index }, true);
+      });
     },
   };
 

code/lib/manager-api/src/tests/refs.test.ts

@@ -40,6 +40,7 @@ const provider = {
 
 const store = {
   getState: jest.fn().mockReturnValue({
+    filters: {},
     refs: {
       fake: {
         id: 'fake',
@@ -279,6 +280,7 @@ describe('Refs API', () => {
 
         Please check your dev-tools network tab.",
               },
+              "internal_index": undefined,
               "title": "Fake",
               "type": "auto-inject",
               "url": "https://example.com",
@@ -347,6 +349,7 @@ describe('Refs API', () => {
 
         Please check your dev-tools network tab.",
               },
+              "internal_index": undefined,
               "title": "Fake",
               "type": "auto-inject",
               "url": "https://example.com",
@@ -479,6 +482,10 @@ describe('Refs API', () => {
             "fake": Object {
               "id": "fake",
               "index": Object {},
+              "internal_index": Object {
+                "entries": Object {},
+                "v": 4,
+              },
               "title": "Fake",
               "type": "lazy",
               "url": "https://example.com",
@@ -493,6 +500,10 @@ describe('Refs API', () => {
             "fake": Object {
               "id": "fake",
               "index": Object {},
+              "internal_index": Object {
+                "entries": Object {},
+                "v": 4,
+              },
               "title": "Fake",
               "type": "lazy",
               "url": "https://example.com",
@@ -568,6 +579,10 @@ describe('Refs API', () => {
             "fake": Object {
               "id": "fake",
               "index": Object {},
+              "internal_index": Object {
+                "entries": Object {},
+                "v": 4,
+              },
               "title": "Fake",
               "type": "lazy",
               "url": "https://example.com",
@@ -645,6 +660,10 @@ describe('Refs API', () => {
             "fake": Object {
               "id": "fake",
               "index": Object {},
+              "internal_index": Object {
+                "entries": Object {},
+                "v": 4,
+              },
               "title": "Fake",
               "type": "lazy",
               "url": "https://example.com",
@@ -722,6 +741,7 @@ describe('Refs API', () => {
             "fake": Object {
               "id": "fake",
               "index": undefined,
+              "internal_index": undefined,
               "loginUrl": "https://example.com/login",
               "title": "Fake",
               "type": "auto-inject",
@@ -863,6 +883,7 @@ describe('Refs API', () => {
             "fake": Object {
               "id": "fake",
               "index": undefined,
+              "internal_index": undefined,
               "loginUrl": "https://example.com/login",
               "title": "Fake",
               "type": "auto-inject",
@@ -944,6 +965,10 @@ describe('Refs API', () => {
             "fake": Object {
               "id": "fake",
               "index": Object {},
+              "internal_index": Object {
+                "entries": Object {},
+                "v": 4,
+              },
               "title": "Fake",
               "type": "lazy",
               "url": "https://example.com",
@@ -1021,6 +1046,10 @@ describe('Refs API', () => {
             "fake": Object {
               "id": "fake",
               "index": Object {},
+              "internal_index": Object {
+                "entries": Object {},
+                "v": 4,
+              },
               "title": "Fake",
               "type": "lazy",
               "url": "https://example.com",

code/lib/manager-api/src/tests/stories.test.ts

@@ -72,7 +72,7 @@ function createMockModuleArgs({
   const store = createMockStore({ filters: {}, status: {}, ...initialState });
   const provider = createMockProvider();
 
-  return { navigate, store, provider, fullAPI };
+  return { navigate, store, provider, fullAPI: { ...fullAPI, getRefs: () => ({}) } };
 }
 
 describe('stories API', () => {

code/lib/types/src/modules/api.ts

@@ -165,6 +165,8 @@ export interface API_ComposedRef extends API_LoadedRefData {
   versions?: API_Versions;
   loginUrl?: string;
   version?: string;
+  /** DO NOT USE THIS */
+  internal_index?: any;
 }
 
 export type API_ComposedRefUpdate = Partial<
@@ -179,6 +181,7 @@ export type API_ComposedRefUpdate = Partial<
     | 'version'
     | 'indexError'
     | 'previewInitialized'
+    | 'internal_index'
   >
 >;
 

code/ui/manager/src/components/sidebar/RefBlocks.tsx

@@ -149,7 +149,10 @@ export const EmptyBlock: FC<any> = ({ isMain }) => (
               </ul>{' '}
             </>
           ) : (
-            <>Yikes! Something went wrong loading these stories.</>
+            <>
+              This composed storybook is empty, maybe you're using filter-functions, and all stories
+              are filtered away.
+            </>
           )}
         </Text>
       </WideSpaced>