Addons: Remove deprecated addPanel use and misc improvements

code/addons/a11y/src/manager.test.tsx

@@ -19,10 +19,10 @@ describe('A11yManager', () => {
 
     const panel = mockedAddons.add.mock.calls
       .map(([_, def]) => def)
-      .find(({ type }) => type === 'panel');
+      .find(({ type }) => type === api.types.PANEL);
     const tool = mockedAddons.add.mock.calls
       .map(([_, def]) => def)
-      .find(({ type }) => type === 'tool');
+      .find(({ type }) => type === api.types.TOOL);
     expect(panel).toBeDefined();
     expect(tool).toBeDefined();
   });
@@ -33,7 +33,7 @@ describe('A11yManager', () => {
     registrationImpl(api as unknown as api.API);
     const title = mockedAddons.add.mock.calls
       .map(([_, def]) => def)
-      .find(({ type }) => type === 'panel')?.title as Function;
+      .find(({ type }) => type === api.types.PANEL)?.title as Function;
 
     // when / then
     expect(title()).toBe('Accessibility');
@@ -45,7 +45,7 @@ describe('A11yManager', () => {
     registrationImpl(mockedApi);
     const title = mockedAddons.add.mock.calls
       .map(([_, def]) => def)
-      .find(({ type }) => type === 'panel')?.title as Function;
+      .find(({ type }) => type === api.types.PANEL)?.title as Function;
 
     // when / then
     expect(title()).toBe('Accessibility (3)');

code/addons/actions/src/manager.tsx

@@ -40,7 +40,7 @@ addons.register(ADDON_ID, (api) => {
     countRef.current = 0;
   });
 
-  addons.addPanel(PANEL_ID, {
+  addons.add(PANEL_ID, {
     title: <Title count={countRef} />,
     id: 'actions',
     type: types.PANEL,

code/addons/controls/src/manager.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { addons, types, type API, useArgTypes } from '@storybook/manager-api';
+import { addons, types, useArgTypes } from '@storybook/manager-api';
 import { AddonPanel } from '@storybook/components';
 import { ControlsPanel } from './ControlsPanel';
 import { ADDON_ID, PARAM_KEY } from './constants';
@@ -14,8 +14,8 @@ function Title() {
   return <>Controls{suffix}</>;
 }
 
-addons.register(ADDON_ID, (api: API) => {
-  addons.addPanel(ADDON_ID, {
+addons.register(ADDON_ID, (api) => {
+  addons.add(ADDON_ID, {
     title: <Title />,
     id: 'controls',
     type: types.PANEL,

code/addons/jest/src/manager.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { addons } from '@storybook/manager-api';
+import { addons, types } from '@storybook/manager-api';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
 
 import Panel from './components/Panel';
 
 addons.register(ADDON_ID, (api) => {
-  addons.addPanel(PANEL_ID, {
+  addons.add(PANEL_ID, {
     title: 'Tests',
+    type: types.PANEL,
     id: 'tests',
     render: ({ active, key }) => <Panel key={key} api={api} active={active} />,
     paramKey: PARAM_KEY,

code/addons/storysource/src/manager.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { addons } from '@storybook/manager-api';
+import { addons, types } from '@storybook/manager-api';
 
 import { StoryPanel } from './StoryPanel';
 import { ADDON_ID, PANEL_ID } from './index';
 
 addons.register(ADDON_ID, (api) => {
-  addons.addPanel(PANEL_ID, {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
     title: 'Code',
     id: 'code',
     render: ({ active, key }) => (active ? <StoryPanel key={key} api={api} /> : null),

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

@@ -157,7 +157,7 @@ export const init: ModuleFn = ({ store, navigate, state, provider, fullAPI, ...r
       }
     },
     navigateUrl(url, options) {
-      navigate(url, { ...options, plain: true });
+      navigate(url, { plain: true, ...options });
     },
   };
 

scripts/utils/options.ts

@@ -134,7 +134,9 @@ export function getOptions<TOptions extends OptionSpecifier>(
     .reduce((acc, [key, option]) => {
       const flags = optionFlags(key, option);
 
-      if (option.type === 'boolean') return acc.option(flags, option.description, !!option.inverse);
+      if (option.type === 'boolean') {
+        return acc.option(flags, option.description, !!option.inverse);
+      }
 
       const checkStringValue = (raw: string) => {
         if (option.values && !option.values.includes(raw)) {
@@ -148,8 +150,11 @@ export function getOptions<TOptions extends OptionSpecifier>(
         return raw;
       };
 
-      if (option.type === 'string')
-        return acc.option(flags, option.description, (raw) => checkStringValue(raw));
+      if (option.type === 'string') {
+        return acc.option(flags, option.description, (raw) => {
+          return checkStringValue(raw);
+        });
+      }
 
       if (option.type === 'string[]') {
         return acc.option(
@@ -164,9 +169,15 @@ export function getOptions<TOptions extends OptionSpecifier>(
     }, command)
     .parse(argv);
 
+  const intermediate = command.opts();
+  if (intermediate.task === undefined && argv[2]) {
+    // eslint-disable-next-line prefer-destructuring
+    intermediate.task = argv[2];
+  }
+
   // Note the code above guarantees the types as they come in, so we cast here.
   // Not sure there is an easier way to do this
-  return command.opts() as MaybeOptionValues<TOptions>;
+  return intermediate as MaybeOptionValues<TOptions>;
 }
 
 // Boolean values will have a default, usually `false`, `true` if they are "inverse".