Skip to content

Playbooks support for React 18 #2105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jgheithcock wants to merge 6 commits into from
Closed

Playbooks support for React 18 #2105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
748a3bd
Upgrade Playbooks to React 18 to match mattermost (#2097)
jgheithcock Oct 9, 2025
8ee8356
Lint fixes
jgheithcock Oct 9, 2025
9edc337
Use mattermost react-bootstrap
jgheithcock Oct 10, 2025
3cff6a5
More work to ensure we use the Mattermost react-bootstrap plugin
jgheithcock Oct 10, 2025
fc4916a
Lint fixes
jgheithcock Oct 10, 2025
ab7159e
Fix tests
jgheithcock Oct 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
408 changes: 87 additions & 321 deletions webapp/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

21 changes: 11 additions & 10 deletions webapp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@
"mattermost-redux": "10.9.0",
"parse-duration": "2.1.4",
"qs": "6.10.5",
"react": "^17.0.2",
"react": "^18.0.0",
"react-chartjs-2": "4.3.1",
"react-custom-scrollbars": "4.2.1",
"react-dom": "^17.0.2",
"react-dom": "^18.0.0",
"react-infinite-scroll-component": "^6.1.0",
"react-infinite-scroller": "1.2.6",
"react-intl": "7.1.11",
Expand Down Expand Up @@ -60,17 +60,16 @@
"@types/lodash": "4.14.178",
"@types/luxon": "3.6.2",
"@types/qs": "6.9.7",
"@types/react": "^17.0.2",
"@types/react": "^18.0.0",
"@types/react-beautiful-dnd": "13.1.2",
"@types/react-bootstrap": "1.0.1",
"@types/react-custom-scrollbars": "4.0.10",
"@types/react-dom": "^17.0.2",
"@types/react-dom": "^18.0.0",
"@types/react-infinite-scroller": "1.2.3",
"@types/react-redux": "7.1.21",
"@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/react-test-renderer": "18.0.0",
"@types/redux-mock-store": "1.0.3",
"@types/shallow-equals": "1.0.0",
"@types/styled-components": "5.1.26",
Expand Down Expand Up @@ -105,9 +104,8 @@
"postcss-styled-syntax": "0.7.1",
"process": "0.11.10",
"react-beautiful-dnd": "13.1.0",
"react-bootstrap": "1.6.1",
Copy link
Copy Markdown
Member

@hmhealey hmhealey Oct 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that this means that we'll be losing the ability to use React Bootstrap in unit tests (not that I think Playbooks has any), and we're similarly losing the type checking for it since we've removed @types/react-boostrap above as well. I would've expected that we'd leave the React Bootstrap dependency here but switch it to the 0.34 branch of our fork (https://github.com/mattermost/react-bootstrap/tree/0.34) which the web app uses. Calls also similarly relies on the 0.34 branch, although it's a slightly older version.

Doing that would let us revert the changes to how React Bootstrap is imported, and it should give us back the type definitions since I don't think there's any type checking for RB components' props at the moment.

If you did want to make those match the web app, the web app uses react-bootstrap@github:mattermost/react-bootstrap#05559f4c61c5a314783c390d2d82906ee8c7e558 (which uses our fork instead of the package from NPM) and @types/react-bootstrap@0.32.35

Copy link
Copy Markdown
Contributor Author

@jgheithcock jgheithcock Oct 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue was that this caused that version of react-bootstrap to be bundled in. And so, we ran into all the React 18 issues from that. I tried to get the Jest tests working without mocking them but in the end, I either needed to bundle them (which, we could do, and just stay in sync) or mock the components for the tests.

Copy link
Copy Markdown
Member

@hmhealey hmhealey Oct 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's odd that it was bundled in. Webpack shouldn't bundle React Bootstrap as long as it's imported from a module with the name react-bootstrap or whatever is listed here in the Webpack config. The same goes for dependencies like React, React Redux, and everything else listed in the externals field in the Webpack config.

I'm fine accepting this PR as-is since it should still work for Playbooks even if we're having to jump through some hoops to make this work. I'd still like to figure out what the heck is going on here still since other plugins are sure to run into those same issues as well when they upgrade, but that doesn't need to block this PR. I'll also add this to the long list of reasons why our plugin dependency management needs an overhaul

Copy link
Copy Markdown
Member

@calebroseland calebroseland Oct 16, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would be good to keep the dependency import natural/as-is (relying on webpack externals to pull in react-bootstrap from webapp), but also change it to point to the same mattermost/react-bootstrap dependency that mattermost webapp points to. This would keep both environments using the same version—"runtime" pulling from window.ReactBootstrap and jest/testing pulling from node_modules.

I think the thing that will suppress the warnings is when we either remove playbooks usage of OverlayTrigger/Tooltip, or possibly a fix in mattermost/react-bootstrap.

"react-bootstrap": "react-bootstrap@github:mattermost/react-bootstrap#05559f4c61c5a314783c390d2d82906ee8c7e558" ,

"react-refresh": "0.11.0",
"react-test-renderer": "17.0.2",
"react-test-renderer": "18.0.0",
"redux-mock-store": "1.5.4",
"redux-thunk": "2.4.1",
"sass": "1.46.0",
Expand All @@ -123,8 +121,8 @@
},
"overrides": {
"react-custom-scrollbars": {
"react": "17.0.2",
"react-dom": "17.0.2"
"react": "18.0.0",
"react-dom": "18.0.0"
}
},
"scripts": {
Expand Down Expand Up @@ -190,6 +188,9 @@
"setupFiles": [
"jest-canvas-mock"
],
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.ts"
],
"testEnvironmentOptions": {
"url": "http://localhost:8065"
}
Expand Down
3 changes: 2 additions & 1 deletion webapp/src/components/actions_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@

import React from 'react';
import {useIntl} from 'react-intl';
import {Modal} from 'react-bootstrap';

import styled from 'styled-components';

import {LightningBoltOutlineIcon} from '@mattermost/compass-icons/components';

import {Modal} from 'src/externals/react-bootstrap';

import GenericModal, {DefaultFooterContainer, ModalSubheading} from 'src/components/widgets/generic_modal';

interface Props {
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/components/backstage/playbook_edit/automation/menu_list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: any) => {
const thumbPropsWithoutStyle = {...thumbProps};
Reflect.deleteProperty(thumbPropsWithoutStyle, 'style');
return <ThumbVertical {...thumbPropsWithoutStyle}/>;
Expand Down
4 changes: 2 additions & 2 deletions webapp/src/components/backstage/playbook_editor/controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@ import {
StarOutlineIcon,
} from '@mattermost/compass-icons/components';

import {OverlayTrigger, Tooltip} from 'react-bootstrap';

import {getTeam} from 'mattermost-redux/selectors/entities/teams';
import {Team} from '@mattermost/types/teams';
import {GlobalState} from '@mattermost/types/store';
import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
import {FormattedMessage, FormattedNumber, useIntl} from 'react-intl';
import {createGlobalState} from 'react-use';

import {OverlayTrigger, Tooltip} from 'src/externals/react-bootstrap';

import {navigateToPluginUrl, pluginUrl} from 'src/browser_routing';
import {
PlaybookPermissionsMember,
Expand Down
4 changes: 3 additions & 1 deletion webapp/src/components/backstage/playbook_runs/playbook_run/add_participant_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

import React, {useState} from 'react';
import {useIntl} from 'react-intl';
import {Modal} from 'react-bootstrap';

import styled from 'styled-components';
import {useDispatch, useSelector} from 'react-redux';
import {searchProfiles} from 'mattermost-redux/actions/users';
Expand All @@ -12,6 +12,8 @@ import {LightningBoltOutlineIcon} from '@mattermost/compass-icons/components';
import {OptionTypeBase, StylesConfig} from 'react-select';
import {General} from 'mattermost-redux/constants';

import {Modal} from 'src/externals/react-bootstrap';

import GenericModal from 'src/components/widgets/generic_modal';
import {PlaybookRun} from 'src/types/playbook_run';
import {useManageRunMembership} from 'src/graphql/hooks';
Expand Down
6 changes: 1 addition & 5 deletions webapp/src/components/backstage/playbook_runs/playbook_run/header_button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,7 @@ 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;
}
}
// OverlayTrigger props are now handled by the external react-bootstrap

interface HeaderButtonProps {
tooltipId: string;
Expand Down
3 changes: 2 additions & 1 deletion webapp/src/components/checklist_item/duedate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@ import {
Duration,
DurationLikeObject,
} from 'luxon';
import {OverlayTrigger, Tooltip} from 'react-bootstrap';

import {Placement} from '@floating-ui/react';

import {OverlayTrigger, Tooltip} from 'src/externals/react-bootstrap';

import DateTimeSelector, {DateTimeOption, optionFromMillis} from 'src/components/datetime_selector';
import {
Mode,
Expand Down
4 changes: 3 additions & 1 deletion webapp/src/components/give_feedback_button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@

import React from 'react';
import {useSelector} from 'react-redux';
import {OverlayTrigger, Tooltip} from 'react-bootstrap';

import {useIntl} from 'react-intl';
import {Placement} from '@floating-ui/react';
import {GlobalState} from '@mattermost/types/store';

import {OverlayTrigger, Tooltip} from 'src/externals/react-bootstrap';

import {OVERLAY_DELAY} from 'src/constants';
import {InvertedTertiaryButton} from 'src/components/assets/buttons';

Expand Down
4 changes: 3 additions & 1 deletion webapp/src/components/global_header_right.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@
// See LICENSE.txt for license information.

import React from 'react';
import {OverlayTrigger, Tooltip} from 'react-bootstrap';

import {useIntl} from 'react-intl';
import {useDispatch, useSelector} from 'react-redux';
import styled, {css} from 'styled-components';
import {CheckboxMultipleMarkedOutlineIcon} from '@mattermost/compass-icons/components';

import {OverlayTrigger, Tooltip} from 'src/externals/react-bootstrap';

import GiveFeedbackButton from 'src/components/give_feedback_button';
import {closeBackstageRHS, openBackstageRHS} from 'src/actions';
import {BackstageRHSSection, BackstageRHSViewMode} from 'src/types/backstage_rhs';
Expand Down
9 changes: 4 additions & 5 deletions webapp/src/components/modals/update_run_status_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`)}
Expand All @@ -229,15 +229,15 @@ const UpdateRunStatusModal = ({
defaultMessage: 'This update for the run <i>{runName}</i> will be broadcasted to {hasChannels, select, true {<OverviewLink><ChannelsTooltip>{broadcastChannelCount, plural, =1 {one channel} other {{broadcastChannelCount, number} channels}}</ChannelsTooltip></OverviewLink>} other {}}{hasFollowersAndChannels, select, true { and } other {}}{hasFollowers, select, true {<FollowersTooltip>{followersChannelCount, plural, =1 {one direct message} other {{followersChannelCount, number} direct messages}}</FollowersTooltip>} other {}}.',
}, {
OverviewLink,
ChannelsTooltip: (...chunks) => (
ChannelsTooltip: (chunks: ReactNode) => (
<Tooltip
id={`${ID}_broadcast_channels_tooltip`}
content={generateTooltipText(broadcastChannelNames, broadcastChannelCount)}
>
<TooltipContent tabIndex={0}>{chunks}</TooltipContent>
</Tooltip>
),
FollowersTooltip: (...chunks) => (
FollowersTooltip: (chunks: ReactNode) => (
<Tooltip
id={`${ID}_broadcast_followers_tooltip`}
content={generateTooltipText(followerNames, followersChannelCount)}
Expand Down Expand Up @@ -402,7 +402,6 @@ const useReminderTimerOption = (
disabled?: boolean,
preselectedValue?: number,
) => {
const {locale} = useIntl();
const makeOption = useMakeOption(Mode.DurationValue);

const defaults = useMemo(() => {
Expand Down Expand Up @@ -447,7 +446,7 @@ const useReminderTimerOption = (
options.sort((a, b) => ms(a.value) - ms(b.value));

return {options, value};
}, [run, preselectedValue, locale]);
}, [run, preselectedValue, makeOption]);

const {input, value} = useDateTimeInput({
mode: Mode.DateTimeValue,
Expand Down
3 changes: 2 additions & 1 deletion webapp/src/components/rhs/rhs_participant.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@

import React from 'react';
import styled, {css} from 'styled-components';
import {OverlayTrigger, Tooltip} from 'react-bootstrap';

import {OverlayTrigger, Tooltip} from 'src/externals/react-bootstrap';

import Profile from 'src/components/profile/profile';

Expand Down
4 changes: 3 additions & 1 deletion webapp/src/components/rhs/rhs_run_details_title.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@

import React from 'react';
import styled from 'styled-components';
import {OverlayTrigger, Tooltip} from 'react-bootstrap';

import {useIntl} from 'react-intl';

import {OverlayTrigger, Tooltip} from 'src/externals/react-bootstrap';

import {useRunFollowers, useRunMetadata} from 'src/hooks';
import LeftChevron from 'src/components/assets/icons/left_chevron';
import FollowButton from 'src/components/backstage/follow_button';
Expand Down
4 changes: 3 additions & 1 deletion webapp/src/components/rhs/rhs_run_participants_title.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@
// See LICENSE.txt for license information.

import React from 'react';
import {OverlayTrigger, Tooltip} from 'react-bootstrap';

import {useIntl} from 'react-intl';

import {OverlayTrigger, Tooltip} from 'src/externals/react-bootstrap';

import LeftChevron from 'src/components/assets/icons/left_chevron';
import {OVERLAY_DELAY} from 'src/constants';
import {HeaderSubtitle, HeaderVerticalDivider} from 'src/components/backstage/playbook_runs/playbook_run/rhs';
Expand Down
4 changes: 3 additions & 1 deletion webapp/src/components/sidebar/create_playbook_dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import React from 'react';
import styled from 'styled-components';
import {useDispatch, useSelector} from 'react-redux';
import {OverlayTrigger, Tooltip} from 'react-bootstrap';

import {useIntl} from 'react-intl';
import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
import {
Expand All @@ -14,6 +14,8 @@ import {
PlusIcon,
} from '@mattermost/compass-icons/components';

import {OverlayTrigger, Tooltip} from 'src/externals/react-bootstrap';

import {displayPlaybookCreateModal} from 'src/actions';
import {useImportPlaybook} from 'src/components/backstage/import_playbook';
import {navigateToPluginUrl} from 'src/browser_routing';
Expand Down
6 changes: 5 additions & 1 deletion webapp/src/components/widgets/confirmation_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@
// See LICENSE.txt for license information.

import React, {useState} from 'react';
import {Modal} from 'react-bootstrap';

import {FormattedMessage} from 'react-intl';

import {Modal} from 'src/externals/react-bootstrap';

import {PrimaryButton, TertiaryButton} from 'src/components/assets/buttons';

import {
Expand Down Expand Up @@ -235,6 +237,8 @@ export default class ConfirmModal extends React.Component<Props, State> {
<Modal.Header
className='GenericModal__header'
closeButton={false}
onPointerEnterCapture={undefined}
onPointerLeaveCapture={undefined}
>
<ModalHeading id={'confirmModalLabel'}>
{this.props.title}
Expand Down
3 changes: 2 additions & 1 deletion webapp/src/components/widgets/confirmation_modal_light.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@

import React from 'react';
import styled from 'styled-components';
import {Modal} from 'react-bootstrap';

import {Modal} from 'src/externals/react-bootstrap';

import GenericModal, {DefaultFooterContainer} from 'src/components/widgets/generic_modal';

Expand Down
6 changes: 5 additions & 1 deletion webapp/src/components/widgets/generic_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@
import styled from 'styled-components';
import classNames from 'classnames';
import React, {ComponentType} from 'react';
import {Modal} from 'react-bootstrap';

import {FormattedMessage} from 'react-intl';

import {Modal} from 'src/externals/react-bootstrap';

import {DestructiveButton, PrimaryButton, TertiaryButton} from 'src/components/assets/buttons';

type Props = {
Expand Down Expand Up @@ -139,6 +141,8 @@ export default class GenericModal extends React.PureComponent<Props, State> {
<Header
className='GenericModal__header'
closeButton={true}
onPointerEnterCapture={undefined}
onPointerLeaveCapture={undefined}
>
{Boolean(this.props.modalHeaderText) && (
<ModalHeading id={`${this.props.id}_heading`}>{this.props.modalHeaderText}</ModalHeading>
Expand Down
6 changes: 3 additions & 3 deletions webapp/src/components/widgets/text_with_tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,16 +40,16 @@ const TextWithTooltip = (props: Props) => {
return () => {
window.removeEventListener('resize', resizeListener);
};
}, []);
}, [resizeListener]);

useEffect(() => {
resizeListener();
});

const setRef = useCallback((node) => {
const setRef = useCallback((node: HTMLAnchorElement | null) => {
ref.current = node;
resizeListener();
}, []);
}, [resizeListener]);

const text = (
<span
Expand Down
4 changes: 3 additions & 1 deletion webapp/src/components/widgets/text_with_tooltip_when_ellipsis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@ import React, {
useRef,
useState,
} from 'react';
import {OverlayTrigger, Tooltip} from 'react-bootstrap';

import {debounce} from 'debounce';

import {OverlayTrigger, Tooltip} from 'src/externals/react-bootstrap';

import {OVERLAY_DELAY} from 'src/constants';

interface Props {
Expand Down
3 changes: 2 additions & 1 deletion webapp/src/components/widgets/tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
// See LICENSE.txt for license information.

import React, {CSSProperties, ComponentProps, ReactNode} from 'react';
import {Tooltip as InnerTooltip, OverlayTrigger} from 'react-bootstrap';

import {Tooltip as InnerTooltip, OverlayTrigger} from 'src/externals/react-bootstrap';

import {OVERLAY_DELAY} from 'src/constants';

Expand Down
Loading
Loading