Merge pull request #2266 from headlamp-k8s/story-fixes

frontend: Fix deprecated Story import with StoryFn

frontend/src/components/App/PluginSettings/PluginSettingsDetails.stories.tsx

@@ -1,5 +1,5 @@
 import { TextField } from '@mui/material';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import { PluginInfo, PluginSettingsDetailsProps } from '../../../plugin/pluginsSlice';
 import { PluginSettingsDetailsPure, PluginSettingsDetailsPureProps } from './PluginSettingsDetails';
@@ -64,9 +64,9 @@ const mockConfig = {
   name: 'mockPlugin',
 };
 
-const Template: Story<PluginSettingsDetailsPureProps> = (args: PluginSettingsDetailsPureProps) => (
-  <PluginSettingsDetailsPure {...args} />
-);
+const Template: StoryFn<PluginSettingsDetailsPureProps> = (
+  args: PluginSettingsDetailsPureProps
+) => <PluginSettingsDetailsPure {...args} />;
 
 export const WithAutoSave = Template.bind({});
 WithAutoSave.args = {

frontend/src/components/DetailsViewSection/DetailsViewSection.stories.tsx

@@ -1,5 +1,5 @@
 import { configureStore } from '@reduxjs/toolkit';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import { Provider } from 'react-redux';
 import { useDispatch } from 'react-redux';
@@ -35,7 +35,7 @@ export default {
   ],
 } as Meta;
 
-const Template: Story<DetailsViewSectionProps> = args => {
+const Template: StoryFn<DetailsViewSectionProps> = args => {
   const dispatch = useDispatch();
   React.useEffect(() => {
     dispatch(

frontend/src/components/Sidebar/Sidebar.stories.tsx

@@ -1,5 +1,5 @@
 import { configureStore } from '@reduxjs/toolkit';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { SnackbarProvider } from 'notistack';
 import { initialState as CONFIG_INITIAL_STATE } from '../../redux/configSlice';
 import { initialState as FILTER_INITIAL_STATE } from '../../redux/filterSlice';
@@ -18,7 +18,7 @@ export default {
 
 type StoryProps = Partial<SidebarState>;
 
-const Template: Story<StoryProps> = args => {
+const Template: StoryFn<StoryProps> = args => {
   const sidebarStore = configureStore({
     reducer: (
       state = {

frontend/src/components/Sidebar/Sidebaritem.stories.tsx

@@ -1,6 +1,6 @@
 import Grid from '@mui/material/Grid';
 import List from '@mui/material/List';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
@@ -20,7 +20,7 @@ export default {
   ],
 } as Meta;
 
-const Template: Story<SidebarItemProps> = args => {
+const Template: StoryFn<SidebarItemProps> = args => {
   return (
     <Provider store={store}>
       <Grid item style={{ backgroundColor: 'rgba(0, 0, 0, 0.87)' }}>

frontend/src/components/common/ErrorBoundary/ErrorBoundary.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import ErrorBoundary, { ErrorBoundaryProps } from './ErrorBoundary';
 
@@ -14,7 +14,7 @@ const storyData = {
 } as Meta;
 export default storyData;
 
-const Template: Story<ErrorBoundaryProps> = args => (
+const Template: StoryFn<ErrorBoundaryProps> = args => (
   <ErrorBoundary {...args}>
     <i>This is not failing.</i>
   </ErrorBoundary>
@@ -24,22 +24,22 @@ NoProblem.args = {};
 
 // Do not run these under test, because they emit lots of console.error logs.
 // It's still useful to run them in the storybook, to see and test them manually.
-type StoryOrNull = Story<ErrorBoundaryProps> | (() => void);
+type StoryOrNull = StoryFn<ErrorBoundaryProps> | (() => void);
 let BrokenNoFallback: StoryOrNull = () => 'disabled under test to avoid console spam';
 let BrokenFallback: StoryOrNull = () => 'disabled under test to avoid console spam';
 let BrokenFallbackElement: StoryOrNull = () => 'disabled under test to avoid console spam';
 
 if (import.meta.env.UNDER_TEST !== 'true') {
   // These are only seen in the storybook, not under test.
-  const BrokenTemplate: Story<ErrorBoundaryProps> = args => (
+  const BrokenTemplate: StoryFn<ErrorBoundaryProps> = args => (
     <ErrorBoundary {...args}>
       <BrokenComponent />
     </ErrorBoundary>
   );
   BrokenNoFallback = BrokenTemplate.bind({});
   BrokenNoFallback.args = {};
 
-  const BrokenFallbackTemplate: Story<ErrorBoundaryProps> = args => (
+  const BrokenFallbackTemplate: StoryFn<ErrorBoundaryProps> = args => (
     <ErrorBoundary {...args}>
       <BrokenComponent />
     </ErrorBoundary>

frontend/src/components/common/ErrorPage/ErrorPage.stories.tsx

@@ -1,6 +1,6 @@
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import NotFoundImage from '../../../assets/headlamp-404.svg';
 import ErrorComponent, { ErrorComponentProps } from '.';
@@ -9,7 +9,7 @@ export default {
   title: 'common/GenericError',
   component: ErrorComponent,
 } as Meta;
-const Template: Story<ErrorComponentProps> = args => <ErrorComponent {...args} />;
+const Template: StoryFn<ErrorComponentProps> = args => <ErrorComponent {...args} />;
 
 export const Default = Template.bind({});
 

frontend/src/components/common/Label.stories/HeaderLabel.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import { HeaderLabel as HeaderLabelComponent, HeaderLabelProps } from '../Label';
 
@@ -8,7 +8,7 @@ export default {
   argTypes: {},
 } as Meta;
 
-const Template: Story<HeaderLabelProps> = args => <HeaderLabelComponent {...args} />;
+const Template: StoryFn<HeaderLabelProps> = args => <HeaderLabelComponent {...args} />;
 
 export const HeaderLabel = Template.bind({});
 HeaderLabel.args = {

frontend/src/components/common/Label.stories/HoverInfoLabel.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { HoverInfoLabel as HoverInfoLabelComponent, HoverInfoLabelProps } from '../Label';
 
 export default {
@@ -7,7 +7,7 @@ export default {
   argTypes: {},
 } as Meta;
 
-const Template: Story<HoverInfoLabelProps> = args => <HoverInfoLabelComponent {...args} />;
+const Template: StoryFn<HoverInfoLabelProps> = args => <HoverInfoLabelComponent {...args} />;
 
 export const HoverInfoLabel = Template.bind({});
 HoverInfoLabel.args = {

frontend/src/components/common/Label.stories/InfoLabel.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import { InfoLabel as InfoLabelComponent, InfoLabelProps } from '../Label';
 
@@ -8,7 +8,7 @@ export default {
   argTypes: {},
 } as Meta;
 
-const Template: Story<InfoLabelProps> = args => <InfoLabelComponent {...args} />;
+const Template: StoryFn<InfoLabelProps> = args => <InfoLabelComponent {...args} />;
 
 export const InfoLabel = Template.bind({});
 InfoLabel.args = {

frontend/src/components/common/Label.stories/NameLabel.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import { NameLabel as NameLabelComponent } from '../Label';
 
@@ -8,7 +8,9 @@ export default {
   argTypes: {},
 } as Meta;
 
-const Template: Story<{}> = args => <NameLabelComponent {...args}>A name label</NameLabelComponent>;
+const Template: StoryFn<{}> = args => (
+  <NameLabelComponent {...args}>A name label</NameLabelComponent>
+);
 
 export const NameLabel = Template.bind({
   component: NameLabelComponent,

frontend/src/components/common/Label.stories/StatusLabel.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import { StatusLabel as StatusLabelComponent, StatusLabelProps } from '../Label';
 
@@ -8,7 +8,7 @@ export default {
   argTypes: {},
 } as Meta;
 
-const Template: Story<StatusLabelProps> = args => (
+const Template: StoryFn<StatusLabelProps> = args => (
   <StatusLabelComponent {...args}>{args.status}</StatusLabelComponent>
 );
 

frontend/src/components/common/Label.stories/ValueLabel.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import { ValueLabel as ValueLabelComponent } from '../Label';
 
@@ -8,7 +8,7 @@ export default {
   argTypes: {},
 } as Meta;
 
-const ValueLabelTemplate: Story<{}> = args => (
+const ValueLabelTemplate: StoryFn<{}> = args => (
   <ValueLabelComponent {...args}>A ValueLabel is here</ValueLabelComponent>
 );
 

frontend/src/components/common/NameValueTable/NameValueTable.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import NameValueTable, { NameValueTableProps } from './NameValueTable';
 
 export default {
@@ -7,7 +7,7 @@ export default {
   argTypes: { onTabChanged: { action: 'tab changed' } },
 } as Meta;
 
-const Template: Story<NameValueTableProps> = args => <NameValueTable {...args} />;
+const Template: StoryFn<NameValueTableProps> = args => <NameValueTable {...args} />;
 
 export const WithChildren = Template.bind({});
 WithChildren.args = {

frontend/src/components/common/Resource/EditorDialog.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { EditorDialog, EditorDialogProps } from '..';
 
 export default {
@@ -7,7 +7,7 @@ export default {
   argTypes: {},
 } as Meta;
 
-const Template: Story<EditorDialogProps> = args => {
+const Template: StoryFn<EditorDialogProps> = args => {
   return (
     <EditorDialog
       {...args}

frontend/src/components/common/Resource/MainInfoSection/MainInfoSection.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import Pod from '../../../../lib/k8s/pod';
 import { TestContext } from '../../../../test';
 import { podList } from '../../../pod/storyHelper';
@@ -12,7 +12,7 @@ export default {
   argTypes: {},
 } as Meta;
 
-const Template: Story<MainInfoSectionProps> = (args: MainInfoSectionProps) => (
+const Template: StoryFn<MainInfoSectionProps> = (args: MainInfoSectionProps) => (
   <TestContext>
     <MainInfoSection {...args} />
   </TestContext>

frontend/src/components/common/Resource/MetadataDisplay.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { KubeObjectInterface } from '../../../lib/k8s/cluster';
 import { TestContext } from '../../../test';
 import {
@@ -18,7 +18,7 @@ export default {
   ],
 } as Meta;
 
-const Template: Story<MetadataDisplayProps> = args => <MetadataDisplayComponent {...args} />;
+const Template: StoryFn<MetadataDisplayProps> = args => <MetadataDisplayComponent {...args} />;
 
 const mockResource: KubeObjectInterface = {
   kind: 'MyKind',

frontend/src/components/common/Resource/ResourceListView.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import Pod from '../../../lib/k8s/pod';
 import { TestContext } from '../../../test';
 import { generateK8sResourceList } from '../../../test/mocker';
@@ -22,7 +22,7 @@ export default {
   ],
 } as Meta;
 
-const Template: Story = () => {
+const Template: StoryFn = () => {
   return (
     <ResourceListView
       title="My Pod List"

frontend/src/components/common/Resource/ResourceTable.stories.tsx

@@ -1,5 +1,5 @@
 import { configureStore } from '@reduxjs/toolkit';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import Pod, { KubePod } from '../../../lib/k8s/pod';
 import { INITIAL_STATE as UI_INITIAL_STATE } from '../../../redux/reducers/ui';
 import { TestContext } from '../../../test';
@@ -11,7 +11,7 @@ export default {
   argTypes: {},
 } as Meta;
 
-const TemplateWithFilter: Story<{
+const TemplateWithFilter: StoryFn<{
   resourceTableArgs: ResourceTableFromResourceClassProps<MyPod>;
   namespaces: string[];
   search: string;

frontend/src/components/common/Resource/SimpleEditor.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import SimpleEditor from './SimpleEditor';
 import { SimpleEditorProps } from './SimpleEditor';
@@ -9,7 +9,7 @@ export default {
   argTypes: {},
 } as Meta;
 
-const Template: Story<SimpleEditorProps> = args => {
+const Template: StoryFn<SimpleEditorProps> = args => {
   const [value, setValue] = React.useState<string | undefined>('');
   return (
     <SimpleEditor {...args} value={value} onChange={value => setValue(value)} language="yaml" />

frontend/src/components/common/Resource/ViewButton.stories.tsx

@@ -1,5 +1,5 @@
 import '../../../i18n/config';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import ViewButton from './ViewButton';
 import { ViewButtonProps } from './ViewButton';
@@ -10,7 +10,7 @@ export default {
   argTypes: {},
 } as Meta;
 
-const Template: Story<ViewButtonProps> = args => <ViewButton {...args} />;
+const Template: StoryFn<ViewButtonProps> = args => <ViewButton {...args} />;
 
 export const View = Template.bind({});
 View.args = {

frontend/src/components/common/ShowHideLabel/ShowHideLabel.stories.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import ShowHideLabel, { ShowHideLabelProps } from './ShowHideLabel';
 
 export default {
@@ -8,7 +8,7 @@ export default {
   argTypes: {},
 } as Meta;
 
-const Template: Story<ShowHideLabelProps> = args => (
+const Template: StoryFn<ShowHideLabelProps> = args => (
   <Box width={300}>
     <ShowHideLabel {...args} />
   </Box>

frontend/src/components/common/Tabs.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import Tabs, { TabsProps } from './Tabs';
 
@@ -8,7 +8,7 @@ export default {
   argTypes: { onTabChanged: { action: 'tab changed' } },
 } as Meta;
 
-const Template: Story<TabsProps> = args => <Tabs {...args} />;
+const Template: StoryFn<TabsProps> = args => <Tabs {...args} />;
 
 export const BasicTabs = Template.bind({});
 BasicTabs.args = {

frontend/src/components/common/TileChart/TileChart.stories.tsx

@@ -1,5 +1,5 @@
 import '../../../i18n/config';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import TileChart, { TileChartProps } from './TileChart';
 
 export default {
@@ -8,7 +8,7 @@ export default {
   argTypes: {},
 } as Meta;
 
-const Template: Story<TileChartProps> = args => <TileChart {...args} />;
+const Template: StoryFn<TileChartProps> = args => <TileChart {...args} />;
 
 export const WithProgress = Template.bind({});
 WithProgress.args = {