test(storybook): fix component stories (#29245)

superset-frontend/src/components/Alert/Alert.stories.tsx

@@ -87,6 +87,7 @@ InteractiveAlert.args = {
 InteractiveAlert.argTypes = {
   onClose: { action: 'onClose' },
   type: {
-    control: { type: 'select', options: types },
+    control: { type: 'select' },
+    options: types,
   },
 };

superset-frontend/src/components/AsyncAceEditor/AsyncAceEditor.stories.tsx

@@ -87,11 +87,13 @@ AsyncAceEditor.args = {
 AsyncAceEditor.argTypes = {
   editorType: {
     defaultValue: 'json',
-    control: { type: 'select', options: editorTypes },
+    control: { type: 'select' },
+    options: editorTypes,
   },
   defaultTheme: {
     defaultValue: 'github',
-    control: { type: 'radio', options: ['textmate', 'github'] },
+    control: { type: 'radio' },
+    options: ['textmate', 'github'],
   },
 };
 

superset-frontend/src/components/Badge/Badge.stories.tsx

@@ -73,32 +73,32 @@ InteractiveBadge.argTypes = {
   status: {
     control: {
       type: 'select',
-      options: [undefined, ...STATUSES],
     },
+    options: [undefined, ...STATUSES],
   },
   size: {
     control: {
       type: 'select',
-      options: SIZES.options,
     },
+    options: SIZES.options,
   },
   color: {
     control: {
       type: 'select',
-      options: [undefined, ...COLORS.options],
     },
+    options: [undefined, ...COLORS.options],
   },
   textColor: {
     control: {
       type: 'select',
-      options: [undefined, ...COLORS.options],
     },
+    options: [undefined, ...COLORS.options],
   },
   count: {
     control: {
       type: 'select',
-      options: [undefined, ...Array(100).keys()],
     },
+    options: [undefined, ...Array(100).keys()],
   },
 };
 

superset-frontend/src/components/Button/Button.stories.tsx

@@ -117,11 +117,13 @@ InteractiveButton.args = {
 InteractiveButton.argTypes = {
   target: {
     name: TARGETS.label,
-    control: { type: 'select', options: Object.values(TARGETS.options) },
+    control: { type: 'select' },
+    options: Object.values(TARGETS.options),
   },
   href: {
     name: HREFS.label,
-    control: { type: 'select', options: Object.values(HREFS.options) },
+    control: { type: 'select' },
+    options: Object.values(HREFS.options),
   },
   onClick: { action: 'clicked' },
 };

superset-frontend/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -49,11 +49,13 @@ InteractiveButtonGroup.args = {
 InteractiveButtonGroup.argTypes = {
   buttonStyle: {
     name: STYLES.label,
-    control: { type: 'select', options: STYLES.options },
+    control: { type: 'select' },
+    options: STYLES.options,
   },
   buttonSize: {
     name: SIZES.label,
-    control: { type: 'select', options: SIZES.options },
+    control: { type: 'select' },
+    options: SIZES.options,
   },
 };
 

superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx

@@ -55,6 +55,7 @@ InteractiveCopyToClipboard.argTypes = {
   onCopyEnd: { action: 'onCopyEnd' },
   copyNode: {
     defaultValue: 'Button',
-    control: { type: 'radio', options: ['Button', 'Icon', 'Text'] },
+    control: { type: 'radio' },
+    options: ['Button', 'Icon', 'Text'],
   },
 };

superset-frontend/src/components/DatePicker/DatePicker.stories.tsx

@@ -40,14 +40,14 @@ const interactiveTypes = {
   picker: {
     control: {
       type: 'select',
-      options: ['', 'date', 'week', 'month', 'quarter', 'year'],
     },
+    options: ['', 'date', 'week', 'month', 'quarter', 'year'],
   },
   size: {
     control: {
       type: 'select',
-      options: ['large', 'middle', 'small'],
     },
+    options: ['large', 'middle', 'small'],
   },
 };
 

superset-frontend/src/components/Dropdown/Dropdown.stories.tsx

@@ -60,6 +60,7 @@ export const InteractiveDropdown = ({
 InteractiveDropdown.argTypes = {
   overlayType: {
     defaultValue: 'menu',
-    control: { type: 'radio', options: ['menu', 'custom'] },
+    control: { type: 'radio' },
+    options: ['menu', 'custom'],
   },
 };

superset-frontend/src/components/DropdownButton/DropdownButton.stories.tsx

@@ -59,7 +59,8 @@ InteractiveDropdownButton.args = {
 InteractiveDropdownButton.argTypes = {
   placement: {
     defaultValue: 'top',
-    control: { type: 'select', options: PLACEMENTS },
+    control: { type: 'select' },
+    options: PLACEMENTS,
   },
   overlay: {
     defaultValue: menu,

superset-frontend/src/components/IconButton/IconButton.stories.tsx

@@ -46,12 +46,12 @@ InteractiveIconButton.argTypes = {
     defaultValue: '/images/icons/sql.svg',
     control: {
       type: 'select',
-      options: [
-        '/images/icons/sql.svg',
-        '/images/icons/server.svg',
-        '/images/icons/image.svg',
-        'Click to see example alt text',
-      ],
     },
+    options: [
+      '/images/icons/sql.svg',
+      '/images/icons/server.svg',
+      '/images/icons/image.svg',
+      'Click to see example alt text',
+    ],
   },
 };

superset-frontend/src/components/IconTooltip/IconTooltip.stories.tsx

@@ -53,6 +53,7 @@ InteractiveIconTooltip.args = {
 InteractiveIconTooltip.argTypes = {
   placement: {
     defaultValue: 'top',
-    control: { type: 'select', options: PLACEMENTS },
+    control: { type: 'select' },
+    options: PLACEMENTS,
   },
 };

superset-frontend/src/components/Icons/Icons.stories.tsx

@@ -71,11 +71,13 @@ InteractiveIcons.argTypes = {
   },
   iconSize: {
     defaultValue: 'xl',
-    control: { type: 'inline-radio', options: ['s', 'l', 'm', 'xl', 'xxl'] },
+    control: { type: 'inline-radio' },
+    options: ['s', 'l', 'm', 'xl', 'xxl'],
   },
   iconColor: {
     defaultValue: null,
-    control: { type: 'select', options: palette },
+    control: { type: 'select' },
+    options: palette,
   },
   theme: {
     table: {

superset-frontend/src/components/InfoTooltip/InfoTooltip.stories.tsx

@@ -44,27 +44,27 @@ InteractiveInfoTooltip.argTypes = {
     defaultValue: 'top',
     control: {
       type: 'select',
-      options: [
-        'bottom',
-        'left',
-        'right',
-        'top',
-        'topLeft',
-        'topRight',
-        'bottomLeft',
-        'bottomRight',
-        'leftTop',
-        'leftBottom',
-        'rightTop',
-        'rightBottom',
-      ],
     },
+    options: [
+      'bottom',
+      'left',
+      'right',
+      'top',
+      'topLeft',
+      'topRight',
+      'bottomLeft',
+      'bottomRight',
+      'leftTop',
+      'leftBottom',
+      'rightTop',
+      'rightBottom',
+    ],
   },
   trigger: {
     defaultValue: 'hover',
     control: {
       type: 'select',
-      options: ['hover', 'click'],
     },
+    options: ['hover', 'click'],
   },
 };

superset-frontend/src/components/Loading/Loading.stories.tsx

@@ -64,6 +64,7 @@ InteractiveLoading.args = {
 InteractiveLoading.argTypes = {
   position: {
     name: 'position',
-    control: { type: 'select', options: POSITIONS },
+    control: { type: 'select' },
+    options: POSITIONS,
   },
 };

superset-frontend/src/components/Popover/Popover.stories.tsx

@@ -71,10 +71,12 @@ InteractivePopover.args = {
 InteractivePopover.argTypes = {
   placement: {
     name: PLACEMENTS.label,
-    control: { type: 'select', options: PLACEMENTS.options },
+    control: { type: 'select' },
+    options: PLACEMENTS.options,
   },
   trigger: {
     name: TRIGGERS.label,
-    control: { type: 'select', options: TRIGGERS.options },
+    control: { type: 'select' },
+    options: TRIGGERS.options,
   },
 };

superset-frontend/src/components/PopoverDropdown/PopoverDropdown.stories.tsx

@@ -68,11 +68,13 @@ export const InteractivePopoverDropdown = (props: Props) => {
 InteractivePopoverDropdown.argTypes = {
   buttonType: {
     defaultValue: 'default',
-    control: { type: 'radio', options: ['default', 'button'] },
+    control: { type: 'radio' },
+    options: ['default', 'button'],
   },
   optionType: {
     defaultValue: 'default',
-    control: { type: 'radio', options: ['default', 'button'] },
+    control: { type: 'radio' },
+    options: ['default', 'button'],
   },
   value: {
     defaultValue: OPTIONS[0].value,

superset-frontend/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -42,19 +42,19 @@ InteractiveProgressBar.argTypes = {
   status: {
     control: {
       type: 'select',
-      options: ['normal', 'success', 'exception', 'active'],
     },
+    options: ['normal', 'success', 'exception', 'active'],
   },
   strokeLinecap: {
     control: {
       type: 'select',
-      options: ['round', 'square'],
     },
+    options: ['round', 'square'],
   },
   type: {
     control: {
       type: 'select',
-      options: ['line', 'circle', 'dashboard'],
     },
+    options: ['line', 'circle', 'dashboard'],
   },
 };

superset-frontend/src/components/Switch/Switch.stories.tsx

@@ -44,6 +44,7 @@ InteractiveSwitch.args = {
 InteractiveSwitch.argTypes = {
   size: {
     defaultValue: 'default',
-    control: { type: 'radio', options: ['small', 'default'] },
+    control: { type: 'radio' },
+    options: ['small', 'default'],
   },
 };

superset-frontend/src/components/TableView/TableView.stories.tsx

@@ -83,8 +83,8 @@ InteractiveTableView.argTypes = {
   emptyWrapperType: {
     control: {
       type: 'select',
-      options: [EmptyWrapperType.Default, EmptyWrapperType.Small],
     },
+    options: [EmptyWrapperType.Default, EmptyWrapperType.Small],
   },
   pageSize: {
     control: {

superset-frontend/src/components/Tabs/Tabs.stories.tsx

@@ -53,7 +53,7 @@ InteractiveTabs.argTypes = {
     defaultValue: 'line',
     control: {
       type: 'inline-radio',
-      options: ['line', 'card', 'editable-card'],
     },
+    options: ['line', 'card', 'editable-card'],
   },
 };

superset-frontend/src/components/Timer/Timer.stories.tsx

@@ -45,16 +45,16 @@ InteractiveTimer.argTypes = {
   status: {
     control: {
       type: 'select',
-      options: [
-        'success',
-        'warning',
-        'danger',
-        'info',
-        'default',
-        'primary',
-        'secondary',
-      ],
     },
+    options: [
+      'success',
+      'warning',
+      'danger',
+      'info',
+      'default',
+      'primary',
+      'secondary',
+    ],
   },
 };
 

superset-frontend/src/components/Tooltip/Tooltip.stories.tsx

@@ -57,11 +57,13 @@ InteractiveTooltip.args = {
 InteractiveTooltip.argTypes = {
   placement: {
     defaultValue: 'top',
-    control: { type: 'select', options: PLACEMENTS },
+    control: { type: 'select' },
+    options: PLACEMENTS,
   },
   trigger: {
     defaultValue: 'hover',
-    control: { type: 'select', options: TRIGGERS },
+    control: { type: 'select' },
+    options: TRIGGERS,
   },
   color: { control: { type: 'color' } },
   onVisibleChange: { action: 'onVisibleChange' },