feat(frontend): upgrade frontend dependencies DTD-11 (#6244)

* upgrade webpack, eslint, storybook and other dependencies

app/portainer/components/BoxSelector/BoxSelector.stories.tsx

@@ -14,7 +14,9 @@ const meta: Meta = {
 
 export default meta;
 
-export function Example() {
+export { Example, LimitedFeature };
+
+function Example() {
   const [value, setValue] = useState(3);
   const options: BoxSelectorOption<number>[] = [
     {
@@ -45,7 +47,7 @@ export function Example() {
   );
 }
 
-export function LimitedFeature() {
+function LimitedFeature() {
   initFeatureService(Edition.CE);
   const [value, setValue] = useState(3);
   const options: BoxSelectorOption<number>[] = [

app/portainer/components/Header/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -12,7 +12,9 @@ const meta: Meta = {
 
 export default meta;
 
-export function Example() {
+export { Example };
+
+function Example() {
   return (
     <UIRouter plugins={[pushStateLocationPlugin]}>
       <Breadcrumbs>

app/portainer/components/Header/Header.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, Story } from '@storybook/react';
+import { useMemo } from 'react';
 
 import { Link } from '@/portainer/components/Link';
 import { UserContext } from '@/portainer/hooks/useUser';
@@ -19,10 +20,13 @@ interface StoryProps {
 }
 
 function Template({ title }: StoryProps) {
+  const state = useMemo(
+    () => ({ user: new UserViewModel({ Username: 'test' }) }),
+    []
+  );
+
   return (
-    <UserContext.Provider
-      value={{ user: new UserViewModel({ Username: 'test' }) }}
-    >
+    <UserContext.Provider value={state}>
       <Header>
         <HeaderTitle title={title} />
         <HeaderContent>

app/portainer/components/ReactExample.stories.tsx

@@ -9,12 +9,13 @@ const meta: Meta = {
 };
 
 export default meta;
+export { Example };
 
 interface Props {
   text: string;
 }
 
-export function Example({ text }: Props) {
+function Example({ text }: Props) {
   return (
     <UIRouter plugins={[pushStateLocationPlugin]}>
       <ReactExample text={text} />

app/portainer/components/form-components/ButtonSelector/ButtonSelector.stories.tsx

@@ -8,7 +8,9 @@ export default {
   title: 'Components/ButtonSelector',
 } as Meta;
 
-export function TwoOptionsSelector() {
+export { TwoOptionsSelector };
+
+function TwoOptionsSelector() {
   const options: Option<string>[] = [
     { value: 'sAMAccountName', label: 'username' },
     { value: 'userPrincipalName', label: 'user@domainname' },

app/portainer/components/form-components/FormControl/FormControl.stories.tsx

@@ -14,7 +14,9 @@ interface TextFieldProps {
   tooltip?: string;
 }
 
-export function TextField({ label, tooltip = '' }: TextFieldProps) {
+export { TextField, SelectField };
+
+function TextField({ label, tooltip = '' }: TextFieldProps) {
   const [value, setValue] = useState('');
   const inputId = 'input';
   return (
@@ -29,7 +31,7 @@ TextField.args = {
   tooltip: '',
 };
 
-export function SelectField({ label, tooltip = '' }: TextFieldProps) {
+function SelectField({ label, tooltip = '' }: TextFieldProps) {
   const options = [
     { value: 1, label: 'one' },
     { value: 2, label: 'two' },

app/portainer/components/form-components/InputGroup/InputGroup.stories.tsx

@@ -8,7 +8,9 @@ export default {
   title: 'Components/Form/InputGroup',
 } as Meta;
 
-export function BasicExample() {
+export { BasicExample, Addons, Sizing };
+
+function BasicExample() {
   const [value1, setValue1] = useState('');
   const [valueNumber, setValueNumber] = useState(0);
 
@@ -58,7 +60,7 @@ export function BasicExample() {
   );
 }
 
-export function Addons() {
+function Addons() {
   const [value1, setValue1] = useState('');
   const [value2, setValue2] = useState('');
   return (
@@ -85,7 +87,7 @@ export function Addons() {
   );
 }
 
-export function Sizing() {
+function Sizing() {
   const [value, setValue] = useState('');
   return (
     <div className="space-y-8">

app/portainer/components/form-components/InputList/InputList.stories.tsx

@@ -12,7 +12,9 @@ const meta: Meta = {
 
 export default meta;
 
-export function Defaults() {
+export { Defaults, ListWithInputAndSelect };
+
+function Defaults() {
   const [values, setValues] = useState<DefaultType[]>([{ value: '' }]);
 
   return (
@@ -35,7 +37,7 @@ interface ListWithInputAndSelectArgs {
   movable: boolean;
   tooltip: string;
 }
-export function ListWithInputAndSelect({
+function ListWithInputAndSelect({
   label,
   movable,
   tooltip,

app/portainer/components/widget/Widget.stories.tsx

@@ -28,13 +28,9 @@ const meta: Meta<WidgetProps> = {
 
 export default meta;
 
-export function Default({
-  loading,
-  bodyText,
-  footerText,
-  icon,
-  title,
-}: WidgetProps) {
+export { Default, WidgetWithCustomImage, WidgetWithTaskBar };
+
+function Default({ loading, bodyText, footerText, icon, title }: WidgetProps) {
   return (
     <Widget>
       <WidgetTitle title={title} icon={icon} />
@@ -44,7 +40,7 @@ export function Default({
   );
 }
 
-export function WidgetWithCustomImage({
+function WidgetWithCustomImage({
   loading,
   bodyText,
   footerText,
@@ -73,7 +69,7 @@ WidgetWithCustomImage.args = {
   icon: 'https://via.placeholder.com/150',
 };
 
-export function WidgetWithTaskBar({
+function WidgetWithTaskBar({
   loading,
   bodyText,
   footerText,

app/portainer/hooks/useUser.tsx

@@ -6,6 +6,7 @@ import {
   useContext,
   useEffect,
   useState,
+  useMemo,
 } from 'react';
 
 import { getUser } from '@/portainer/services/api/userService';
@@ -15,7 +16,7 @@ import { UserViewModel } from '../models/user';
 import { useLocalStorage } from './useLocalStorage';
 
 interface State {
-  user?: UserViewModel;
+  user?: UserViewModel | null;
 }
 
 const state: State = {};
@@ -70,10 +71,13 @@ interface AuthorizedProps {
   children: ReactNode;
 }
 
-export function Authorized({ authorizations, children }: AuthorizedProps) {
+export function Authorized({
+  authorizations,
+  children,
+}: AuthorizedProps): ReactNode {
   const isAllowed = useAuthorizations(authorizations);
 
-  return isAllowed ? <>{children}</> : null;
+  return isAllowed ? children : null;
 }
 
 interface UserProviderProps {
@@ -94,16 +98,20 @@ export function UserProvider({ children }: UserProviderProps) {
     }
   }, [jwt]);
 
+  const providerState = useMemo(() => ({ user }), [user]);
+
   if (jwt === '') {
     return null;
   }
 
-  if (user === null) {
+  if (providerState.user === null) {
     return null;
   }
 
   return (
-    <UserContext.Provider value={{ user }}>{children}</UserContext.Provider>
+    <UserContext.Provider value={providerState}>
+      {children}
+    </UserContext.Provider>
   );
 
   async function loadUser(id: number) {