Merge pull request #25467 from storybookjs/yann/remove-deprecated-nav…

…igate-to-settings-api

Manager API: Remove deprecated navigateToSettingsPage method

MIGRATION.md

@@ -35,6 +35,7 @@
     - [LinkTo direct import from addon-links](#linkto-direct-import-from-addon-links)
     - [DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types](#decoratorfn-story-componentstory-componentstoryobj-componentstoryfn-and-componentmeta-typescript-types)
     - ["Framework" TypeScript types](#framework-typescript-types)
+    - [`navigateToSettingsPage` method from Storybook's manager-api](#navigatetosettingspage-method-from-storybooks-manager-api)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
@@ -633,6 +634,23 @@ For React, the `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `Co
 
 The Framework types such as `ReactFramework` are now removed in favor of Renderer types such as `ReactRenderer`. This affects all frameworks. [More info](#renamed-xframework-to-xrenderer).
 
+#### `navigateToSettingsPage` method from Storybook's manager-api
+
+The `navigateToSettingsPage` method from manager-api is now removed in favor of `changeSettingsTab`.
+
+```ts
+export const Component = () => {
+  const api = useStorybookApi();
+
+  const someHandler = () => {
+    // Old method: api.navigateToSettingsPage('/settings/about');
+    api.changeSettingsTab('about'); // the /settings path is not necessary anymore
+  };
+
+  // ...
+}
+```
+
 ## From version 7.5.0 to 7.6.0
 
 #### CommonJS with Vite is deprecated

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

@@ -19,13 +19,6 @@ export interface SubAPI {
    * @returns A boolean indicating whether the settings screen is active.
    */
   isSettingsScreenActive: () => boolean;
-  /**
-   * Navigates to the specified settings page.
-   * @param path - The path of the settings page to navigate to. The path should include the `/settings` prefix.
-   * @example  navigateToSettingsPage(`/settings/about`).
-   * @deprecated Use `changeSettingsTab` instead.
-   */
-  navigateToSettingsPage: (path: string) => Promise<void>;
 }
 
 export interface SubState {
@@ -53,17 +46,6 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, navigate, fullAPI }):
       navigate(`/settings/${path}`);
     },
     isSettingsScreenActive,
-    navigateToSettingsPage: async (path) => {
-      if (!isSettingsScreenActive()) {
-        const { settings, storyId } = store.getState();
-
-        await store.setState({
-          settings: { ...settings, lastTrackedStoryId: storyId },
-        });
-      }
-
-      navigate(path);
-    },
     retrieveSelection() {
       const { settings } = store.getState();
 

code/ui/manager/src/container/Menu.tsx

@@ -64,7 +64,7 @@ export const useMenu = (
     () => ({
       id: 'about',
       title: 'About your Storybook',
-      onClick: () => api.navigateToSettingsPage('/settings/about'),
+      onClick: () => api.changeSettingsTab('about'),
     }),
     [api]
   );
@@ -76,7 +76,7 @@ export const useMenu = (
     () => ({
       id: 'whats-new',
       title: "What's new?",
-      onClick: () => api.navigateToSettingsPage('/settings/whats-new'),
+      onClick: () => api.changeSettingsTab('whats-new'),
       right: whatsNewNotificationsEnabled && isWhatsNewUnread && (
         <Badge status="positive">Check it out</Badge>
       ),
@@ -88,7 +88,7 @@ export const useMenu = (
     () => ({
       id: 'shortcuts',
       title: 'Keyboard shortcuts',
-      onClick: () => api.navigateToSettingsPage('/settings/shortcuts'),
+      onClick: () => api.changeSettingsTab('shortcuts'),
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.shortcutsPage} /> : null,
       style: {
         borderBottom: `4px solid ${theme.appBorderColor}`,