Update dependencies for React 18

webapp/package.json

@@ -7,9 +7,9 @@
   "dependencies": {
     "@apollo/client": "3.7.3",
     "@floating-ui/react": "0.26.28",
-    "@mattermost/client": "10.9.0",
+    "@mattermost/client": "11.1.0-2",
     "@mattermost/compass-icons": "0.1.32",
-    "@mattermost/types": "10.9.0",
+    "@mattermost/types": "11.1.0-2",
     "@mdi/js": "^6.5.95",
     "@mdi/react": "1.5.0",
     "@tanstack/react-table": "8.10.7",
@@ -24,22 +24,23 @@
     "js-trim-multiline-string": "^1.0.8",
     "lodash": "4.17.21",
     "luxon": "3.6.1",
-    "mattermost-redux": "10.9.0",
+    "mattermost-redux": "11.1.0-2",
     "parse-duration": "2.1.4",
     "qs": "6.10.5",
-    "react": "^17.0.2",
+    "react": "18.2.0",
+    "react-beautiful-dnd": "13.1.1",
     "react-chartjs-2": "4.3.1",
     "react-custom-scrollbars": "4.2.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "18.2.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-infinite-scroller": "1.2.6",
     "react-intl": "7.1.11",
-    "react-redux": "7.2.6",
+    "react-redux": "9.2.0",
     "react-router-dom": "5.3.4",
     "react-router-hash-link": "2.4.3",
     "react-select": "4.3.1",
-    "react-use": "17.3.2",
-    "redux": "4.1.2",
+    "react-use": "17.3.3",
+    "redux": "5.0.1",
     "styled-components": "5.3.7",
     "typescript": "5.6.3"
   },
@@ -60,18 +61,17 @@
     "@types/lodash": "4.14.178",
     "@types/luxon": "3.6.2",
     "@types/qs": "6.9.7",
-    "@types/react": "^17.0.2",
+    "@types/react": "18.2.64",
     "@types/react-beautiful-dnd": "13.1.2",
-    "@types/react-bootstrap": "1.0.1",
+    "@types/react-bootstrap": "0.32.35",
     "@types/react-custom-scrollbars": "4.0.10",
-    "@types/react-dom": "^17.0.2",
+    "@types/react-dom": "18.2.25",
     "@types/react-infinite-scroller": "1.2.3",
-    "@types/react-redux": "7.1.21",
+    "@types/redux-mock-store": "1.5.0",
     "@types/react-router-dom": "5.3.3",
     "@types/react-router-hash-link": "2.4.5",
     "@types/react-select": "3.1.2",
     "@types/react-test-renderer": "17.0.1",
-    "@types/redux-mock-store": "1.0.3",
     "@types/shallow-equals": "1.0.0",
     "@types/styled-components": "5.1.26",
     "@typescript-eslint/eslint-plugin": "8.32.0",
@@ -102,14 +102,14 @@
     "jest-canvas-mock": "2.3.1",
     "jest-environment-jsdom": "29.7.0",
     "jest-junit": "13.0.0",
+    "patch-package": "8.0.1",
     "postcss-styled-syntax": "0.7.1",
     "process": "0.11.10",
-    "react-beautiful-dnd": "13.1.0",
-    "react-bootstrap": "1.6.1",
+    "react-bootstrap": "github:mattermost/react-bootstrap#05559f4c61c5a314783c390d2d82906ee8c7e558",
     "react-refresh": "0.11.0",
-    "react-test-renderer": "17.0.2",
     "redux-mock-store": "1.5.4",
-    "redux-thunk": "2.4.1",
+    "react-test-renderer": "18.2.0",
+    "redux-thunk": "3.1.0",
     "sass": "1.46.0",
     "sass-loader": "12.4.0",
     "style-loader": "3.3.1",
@@ -122,9 +122,25 @@
     "webpack-dev-server": "4.15.1"
   },
   "overrides": {
+    "@testing-library/react-hooks": {
+      "@types/react": "$@types/react",
+      "react": "$react",
+      "react-dom": "$react-dom",
+      "react-test-renderer": "$react-test-renderer"
+    },
+    "@types/redux-mock-store": {
+      "redux": "$redux"
+    },
     "react-custom-scrollbars": {
-      "react": "17.0.2",
-      "react-dom": "17.0.2"
+      "react": "$react",
+      "react-dom": "$react-dom"
+    },
+    "react-input-autosize": {
+      "react": "$react"
+    },
+    "react-select": {
+      "react": "$react",
+      "react-dom": "$react-dom"
     }
   },
   "scripts": {
@@ -190,6 +206,9 @@
     "setupFiles": [
       "jest-canvas-mock"
     ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.ts"
+    ],
     "testEnvironmentOptions": {
       "url": "http://localhost:8065"
     }

webapp/src/actions.ts

@@ -232,7 +232,7 @@ export function setToggleRHSAction(toggleRHSPluginAction: () => void): ReceivedT
 
 export function toggleRHS() {
     return (dispatch: Dispatch<AnyAction>, getState: GetStateFunc) => {
-        selectToggleRHS(getState())();
+        selectToggleRHS(getState())?.();
     };
 }
 

webapp/src/components/backstage/playbook_edit/automation/assign_owner_selector.tsx

@@ -7,7 +7,7 @@ import {useSelector} from 'react-redux';
 import ReactSelect, {ControlProps} from 'react-select';
 
 import styled from 'styled-components';
-import {ActionFuncAsync} from 'mattermost-redux/types/actions';
+import {ActionResult} from 'mattermost-redux/types/actions';
 import {GlobalState} from '@mattermost/types/store';
 import {UserProfile} from '@mattermost/types/users';
 import {getUser} from 'mattermost-redux/selectors/entities/users';
@@ -21,8 +21,8 @@ import MenuList from 'src/components/backstage/playbook_edit/automation/menu_lis
 interface Props {
     ownerID: string;
     onAddUser: (userid: string) => void;
-    searchProfiles: (term: string) => ActionFuncAsync;
-    getProfiles: () => ActionFuncAsync;
+    searchProfiles: (term: string) => Promise<ActionResult<UserProfile[]>>;
+    getProfiles: () => Promise<ActionResult<UserProfile[]>>;
     isDisabled: boolean;
 }
 

webapp/src/components/backstage/playbook_edit/automation/auto_assign_owner.tsx

@@ -3,10 +3,12 @@
 
 import React from 'react';
 
-import {ActionFuncAsync} from 'mattermost-redux/types/actions';
+import {ActionResult} from 'mattermost-redux/types/actions';
 
 import {FormattedMessage} from 'react-intl';
 
+import {UserProfile} from '@mattermost/types/users';
+
 import {AutomationHeader, AutomationTitle, SelectorWrapper} from 'src/components/backstage/playbook_edit/automation/styles';
 import AssignOwnerSelector from 'src/components/backstage/playbook_edit/automation/assign_owner_selector';
 import {Toggle} from 'src/components/backstage/playbook_edit/automation/toggle';
@@ -15,8 +17,8 @@ interface Props {
     enabled: boolean;
     disabled?: boolean;
     onToggle: () => void;
-    searchProfiles: (term: string) => ActionFuncAsync;
-    getProfiles: () => ActionFuncAsync;
+    searchProfiles: (term: string) => Promise<ActionResult<UserProfile[]>>;
+    getProfiles: () => Promise<ActionResult<UserProfile[]>>;
     ownerID: string;
     onAssignOwner: (userId: string | undefined) => void;
 }

webapp/src/components/backstage/playbook_edit/automation/invite_users.tsx

@@ -3,10 +3,12 @@
 
 import React, {useState} from 'react';
 
-import {ActionFuncAsync} from 'mattermost-redux/types/actions';
+import {ActionResult} from 'mattermost-redux/types/actions';
 
 import {FormattedMessage, useIntl} from 'react-intl';
 
+import {UserProfile} from '@mattermost/types/users';
+
 import {AutomationHeader, AutomationTitle, SelectorWrapper} from 'src/components/backstage/playbook_edit/automation/styles';
 import {Toggle} from 'src/components/backstage/playbook_edit/automation/toggle';
 import InviteUsersSelector from 'src/components/backstage/playbook_edit/automation/invite_users_selector';
@@ -16,8 +18,8 @@ interface Props {
     enabled: boolean;
     disabled?: boolean;
     onToggle: () => void;
-    searchProfiles: (term: string) => ActionFuncAsync;
-    getProfiles: () => ActionFuncAsync;
+    searchProfiles: (term: string) => Promise<ActionResult<UserProfile[]>>;
+    getProfiles: () => Promise<ActionResult<UserProfile[]>>;
     userIds: string[];
     preAssignedUserIds: string[];
     onAddUser: (userId: string) => void;

webapp/src/components/backstage/playbook_edit/automation/invite_users_selector.tsx

@@ -6,7 +6,7 @@ import {useSelector} from 'react-redux';
 import ReactSelect, {ControlProps, GroupType, OptionsType} from 'react-select';
 
 import styled from 'styled-components';
-import {ActionFuncAsync} from 'mattermost-redux/types/actions';
+import {ActionResult} from 'mattermost-redux/types/actions';
 import {UserProfile} from '@mattermost/types/users';
 import {GlobalState} from '@mattermost/types/store';
 import {getUser} from 'mattermost-redux/selectors/entities/users';
@@ -22,8 +22,8 @@ interface Props {
     userIds: string[];
     onAddUser: (userid: string) => void;
     onRemoveUser: (userid: string, username: string) => void;
-    searchProfiles: (term: string) => ActionFuncAsync;
-    getProfiles: () => ActionFuncAsync;
+    searchProfiles: (term: string) => Promise<ActionResult<UserProfile[]>>;
+    getProfiles: () => Promise<ActionResult<UserProfile[]>>;
     isDisabled: boolean;
 }
 

webapp/src/components/backstage/playbook_edit/automation/menu_list.tsx

@@ -28,7 +28,7 @@ const ThumbVertical = styled.div`
 `;
 
 const MenuList = <T extends OptionTypeBase>(props: MenuListComponentProps<T, false>) => {
-    const renderThumbVertical = useCallback((thumbProps) => {
+    const renderThumbVertical = useCallback((thumbProps: Record<string, unknown>) => {
         const thumbPropsWithoutStyle = {...thumbProps};
         Reflect.deleteProperty(thumbPropsWithoutStyle, 'style');
         return <ThumbVertical {...thumbPropsWithoutStyle}/>;

webapp/src/components/backstage/playbook_editor/playbook_editor.tsx

@@ -89,7 +89,8 @@ const PlaybookEditor = () => {
 
     const archivedTooltip = archived && (
         <Tooltip
-            delay={{show: 0, hide: 1000}}
+            delayShow={0}
+            delayHide={1000}
             id={`archive-${playbook.id}`}
             content={formatMessage({defaultMessage: 'This playbook is archived.'})}
         >
@@ -99,7 +100,8 @@ const PlaybookEditor = () => {
 
     const privateTooltip = !playbook.public && (
         <Tooltip
-            delay={{show: 0, hide: 1000}}
+            delayShow={0}
+            delayHide={1000}
             id={`private-${playbook.id}`}
             content={formatMessage({defaultMessage: 'This playbook is private.'})}
         >

webapp/src/components/backstage/playbook_list_row.tsx

@@ -161,7 +161,8 @@ const PlaybookListRow = (props: Props) => {
     if (props.playbook.delete_at > 0) {
         infos.push((
             <Tooltip
-                delay={{show: 0, hide: 1000}}
+                delayShow={0}
+                delayHide={1000}
                 id={`archive-${props.playbook.id}`}
                 content={formatMessage({defaultMessage: 'This playbook is archived.'})}
             >

webapp/src/components/backstage/playbook_runs/playbook_run/header_button.tsx

@@ -7,9 +7,12 @@ import React from 'react';
 import Tooltip from 'src/components/widgets/tooltip';
 import {CompassIcon} from 'src/types/compass';
 
-declare module 'react-bootstrap/esm/OverlayTrigger' {
-    interface OverlayTriggerProps {
-        shouldUpdatePosition?: boolean;
+declare module 'react-bootstrap' {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace OverlayTrigger {
+        interface OverlayTriggerProps {
+            shouldUpdatePosition?: boolean;
+        }
     }
 }
 

webapp/src/components/backstage/profile_autocomplete.tsx

@@ -7,7 +7,7 @@ import {debounce} from 'debounce';
 import AsyncSelect from 'react-select/async';
 
 import styled from 'styled-components';
-import {ActionFuncAsync} from 'mattermost-redux/types/actions';
+import {ActionResult} from 'mattermost-redux/types/actions';
 import {UserProfile} from '@mattermost/types/users';
 import {
     ControlProps,
@@ -76,8 +76,8 @@ interface Props {
     userIds: string[];
     onAddUser?: (userid: string) => void; // for single select
     setValues?: (values: UserProfile[]) => void; // for multi select
-    searchProfiles: (term: string) => ActionFuncAsync;
-    getProfiles?: () => ActionFuncAsync;
+    searchProfiles: (term: string) => Promise<ActionResult<UserProfile[]>>;
+    getProfiles?: () => Promise<ActionResult<UserProfile[]>>;
     isDisabled?: boolean;
     isMultiMode?: boolean;
     customSelectStyles?: StylesConfig<OptionTypeBase, boolean>;
@@ -132,7 +132,7 @@ const ProfileAutocomplete = (props: Props) => {
 
         //@ts-ignore
         profiles.then(({data}) => {
-            callback(data);
+            callback(data || []);
         }).catch(() => {
             // eslint-disable-next-line no-console
             console.error('Error searching user profiles in custom attribute settings dropdown.');

webapp/src/components/backstage/select_users_below.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {ActionFuncAsync} from 'mattermost-redux/types/actions';
+import {ActionResult} from 'mattermost-redux/types/actions';
 import {FormattedMessage} from 'react-intl';
 import styled from 'styled-components';
 
@@ -16,6 +16,8 @@ import {getTeammateNameDisplaySetting} from 'mattermost-redux/selectors/entities
 
 import {displayUsername} from 'mattermost-redux/utils/user_utils';
 
+import {UserProfile} from '@mattermost/types/users';
+
 import Profile from 'src/components/profile/profile';
 
 import {Playbook, PlaybookMember} from 'src/types/playbook';
@@ -66,8 +68,8 @@ export interface SelectUsersBelowProps {
     onRemoveUser: (userid: string) => void;
     onMakeAdmin: (userid: string) => void;
     onMakeMember: (userid: string) => void;
-    searchProfiles: (term: string) => ActionFuncAsync;
-    getProfiles: () => ActionFuncAsync;
+    searchProfiles: (term: string) => Promise<ActionResult<UserProfile[]>>;
+    getProfiles: () => Promise<ActionResult<UserProfile[]>>;
 }
 
 function roleDisplayText(roles: string[]) {

webapp/src/components/modals/update_run_status_modal.tsx

@@ -210,7 +210,7 @@ const UpdateRunStatusModal = ({
         }
         const followersChannelCount = run?.followers?.length ?? 0;
 
-        const OverviewLink = (...chunks: string[]): ReactNode => (
+        const OverviewLink = (...chunks: ReactNode[]): ReactNode => (
             <Link
                 data-testid='run-overview-link'
                 to={pluginUrl(`/runs/${playbookRunId}?from=status_modal`)}

webapp/src/components/profile/profile_selector.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) 2020-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useEffect, useState} from 'react';
-import {useSelector, useStore} from 'react-redux';
+import React, {useEffect, useMemo, useState} from 'react';
+import {useSelector} from 'react-redux';
 import {useIntl} from 'react-intl';
 import ReactSelect, {ActionTypes, ControlProps, StylesConfig} from 'react-select';
 
@@ -88,9 +88,8 @@ export default function ProfileSelector(props: Props) {
 
     // props.userGroups?.subsetUserIds are not guaranteed to be in the page returned by props.getAllUsers
     // but they're expected to be at redux
-    const getProfiles = makeGetProfilesByIdsAndUsernames();
-    const store = useStore();
-    const usersInSubset = getProfiles(store.getState(), {allUserIds: props.userGroups?.subsetUserIds || [], allUsernames: []});
+    const getProfiles = useMemo(() => makeGetProfilesByIdsAndUsernames(), []);
+    const usersInSubset = useSelector((state: GlobalState) => getProfiles(state, {allUserIds: props.userGroups?.subsetUserIds || [], allUsernames: []}));
 
     useUpdateEffect(() => {
         props.onOpenChange?.(isOpen);

webapp/src/components/widgets/confirmation_modal.tsx

@@ -231,7 +231,7 @@ export default class ConfirmModal extends React.Component<Props, State> {
             <StyledModal
                 dialogClassName={'a11y__modal GenericModal'}
                 show={this.props.show}
-                onHide={this.props.onCancel}
+                onHide={this.handleCancel}
                 onExited={this.props.onExited}
                 id='confirmModal'
                 role='dialog'

webapp/src/components/widgets/generic_modal.tsx

@@ -31,7 +31,7 @@ type Props = {
     enforceFocus?: boolean;
     footer?: React.ReactNode;
     components?: Partial<{
-        Header: typeof Modal.Header;
+        Header: ComponentType;
         FooterContainer: ComponentType<{children: React.ReactNode}>;
     }>;
     adjustTop?: number;