Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Collapse all broken (api.collapseAll is not a function) #28457

Closed
ghengeveld opened this issue Jul 4, 2024 · 1 comment · Fixed by #28582
Closed

[Bug]: Collapse all broken (api.collapseAll is not a function) #28457

ghengeveld opened this issue Jul 4, 2024 · 1 comment · Fixed by #28582

Comments

@ghengeveld
Copy link
Member

Describe the bug

The "collapse all" action is broken. It logs an error in the console:

Uncaught TypeError: api.collapseAll is not a function
Screenshot 2024-07-04 at 16 42 42

Reproduction link

https://635781f3500dd2c49e189caf-hyyihpyiuz.chromatic.com

Reproduction steps

  1. Visit a Storybook
  2. Open the main menu (cog icon)
  3. Click "collapse all"
  4. Check the browser console

System

Storybook 8.1.11

Additional context

No response

Copy link
Contributor

greptile-apps bot commented Jul 4, 2024

To resolve the api.collapseAll is not a function error, implement the collapseAll function in the API and ensure it is correctly referenced in the Menu.tsx file.

  1. Implement collapseAll in the API:

    • Locate the API file where other functions like toggleNav, toggleToolbar, etc., are defined.
    • Add the collapseAll function.
    // Example API implementation
    export const collapseAll = () => {
      // Logic to collapse all items
    };
  2. Update Menu.tsx:

    • Ensure collapseAll is correctly imported and used in the useMenu hook.
    import { collapseAll } from 'path-to-api';
    
    const collapse = useMemo(
      () => ({
        id: 'collapse',
        title: 'Collapse all',
        onClick: () => api.collapseAll(),
        right: enableShortcuts ? <Shortcut keys={shortcutKeys.collapseAll} /> : null,
      }),
      [api, enableShortcuts, shortcutKeys]
    );
  3. Ensure useExpanded.ts handles collapse events:

    • Verify that useExpanded correctly listens for STORIES_COLLAPSE_ALL events and calls the collapseAll function.
    useEffect(() => {
      if (!api) return noop;
    
      api.on(STORIES_COLLAPSE_ALL, collapseAll);
    
      return () => {
        api.off(STORIES_COLLAPSE_ALL, collapseAll);
      };
    }, [api, collapseAll]);

References

/code/core/src/manager/container/Menu.tsx
/code/core/src/manager/components/sidebar/useExpanded.ts

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants