Skip to content

MM-67120 - Upgrade to React 19 and other outdated libraries #219

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

Merged
5 commits merged into from
Jan 20, 2026
Merged

MM-67120 - Upgrade to React 19 and other outdated libraries #219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a5f45d7
Upgrade to React 19 and other outdated libraries
Jan 14, 2026
22de2b9
linter
Jan 14, 2026
7a4d846
PR comments
Jan 15, 2026
e82232d
Merge master: resolve conflict and add testId support to confluence_f…
Jan 15, 2026
6c57680
Revert react-bootstrap to a compatible version from mattermost fork
Jan 19, 2026
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
12 changes: 11 additions & 1 deletion webapp/.eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,10 @@
"beforeEach": true
},
"settings": {
"import/resolver": "webpack"
"import/resolver": "webpack",
"react": {
"version": "detect"
}
},
"rules": {
"array-bracket-spacing": [
Expand Down Expand Up @@ -631,6 +634,13 @@
]
},
"overrides": [
{
"files": ["**/tests/**", "**/*.test.*"],
"rules": {
"import/no-unresolved": 0,
"max-nested-callbacks": ["error", 4]
}
},
{
"files": ["**/*.tsx", "**/*.ts"],
"extends": "plugin:@typescript-eslint/recommended",
Expand Down
4,740 changes: 2,031 additions & 2,709 deletions webapp/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

37 changes: 15 additions & 22 deletions webapp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,18 @@
"@babel/preset-env": "7.24.7",
"@babel/preset-react": "7.24.1",
"@babel/preset-typescript": "7.24.7",
"@babel/runtime": "7.24.7",
"@babel/runtime": "7.28.6",
"@emotion/babel-preset-css-prop": "10.0.27",
"@emotion/core": "10.0.28",
"@mattermost/client": "10.9.0",
"@mattermost/types": "10.9.0",
"@types/cheerio": "0.22.30",
"@types/enzyme": "3.10.5",
"@testing-library/jest-dom": "6.4.0",
"@testing-library/react": "14.2.1",
"@testing-library/user-event": "14.5.2",
"@types/jest": "29.5.11",
"@types/node": "14.0.20",
"@types/react": "16.9.41",
"@types/react-dom": "16.9.8",
"@types/react": "18.2.79",
"@types/react-dom": "18.2.25",
"@types/react-intl": "3.0.0",
"@types/react-redux": "7.1.9",
"@types/react-router-dom": "5.1.5",
Expand All @@ -42,13 +43,9 @@
"babel-eslint": "10.1.0",
"babel-jest": "29.7.0",
"babel-loader": "9.1.3",
"cheerio": "0.22.0",
"css-loader": "7.1.2",
"enzyme": "3.10.0",
"enzyme-adapter-react-16": "1.15.1",
"enzyme-to-json": "3.6.2",
"eslint": "7.4.0",
"eslint-import-resolver-webpack": "0.12.2",
"eslint-import-resolver-webpack": "0.13.10",
"eslint-plugin-import": "2.22.0",
"eslint-plugin-react": "7.20.3",
"eslint-plugin-react-hooks": "4.0.6",
Expand All @@ -58,29 +55,25 @@
"jest-canvas-mock": "2.2.0",
"jest-environment-jsdom": "29.7.0",
"jest-junit": "11.0.1",
"react-test-renderer": "16.13.1",
"sass-loader": "9.0.2",
"style-loader": "1.2.1",
"webpack": "5.91.0",
"webpack": "5.104.1",
"webpack-cli": "5.1.4"
},
"dependencies": {
"core-js": "3.6.5",
"js-cookie": "2.2.1",
"mattermost-redux": "10.9.0",
"react": "16.13.1",
"react-bootstrap": "1.3.0",
Copy link
Copy Markdown
Member

@marianunez marianunez Jan 15, 2026

Choose a reason for hiding this comment

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

This was a major update - what version are we using in the webapp? Will this cause issues?

Copy link
Copy Markdown
Author

@ghost ghost Jan 16, 2026 •
edited by ghost
Loading

Choose a reason for hiding this comment

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

webapp is mostly on "react": "18.2.0", from my test it's backwards compatible. The changes affect only bootstrap props and unit tests in this case.

Copy link
Copy Markdown
Member

@marianunez marianunez Jan 16, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

Sorry, was referring to react-bootstrap, I know the webapp loads it's own version of react-bootstrap so just want to make sure we don't have any conflicts by upgrading from 1.3 -> 2.10

Copy link
Copy Markdown
Author

@ghost ghost Jan 19, 2026

Choose a reason for hiding this comment

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

Yeah, it seems for older versions of MM we must use react-bootstrap@0.33 because the Mattermost webapp exposes a custom fork of react-bootstrap v0.32.4. At runtime the plugin uses Mattermost's ReactBootstrap not our bundled version.But this is a bit strange for me? For unit tests and local development we the local node_modules versions but at runtime inside Mattermost the webpack externals config the bundled main.js doesn't include React and ReactBootstrap. Can we just use whatever versions we specify and decouple from being dependent on MM bundles?

"react-dom": "16.13.1",
"react-redux": "7.2.0",
"react-select": "3.1.0",
Copy link
Copy Markdown
Member

@marianunez marianunez Jan 15, 2026

Choose a reason for hiding this comment

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

Same as above as this is also a major update, any conflicts with the webapp?

Copy link
Copy Markdown
Author

@ghost ghost Jan 16, 2026

Choose a reason for hiding this comment

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

webapp is mostly on "react": "18.2.0", for me it's backwards compatible. The changes affect only bootstrap props and unit tests in this case.

Copy link
Copy Markdown
Member

@marianunez marianunez Jan 16, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

Here I was mostly concerned about react-select going from 3.1 to 5.10 - just double checking that it doesn't conflict with webapp as it's a 2 major version bumps

"redux": "4.0.5",
"react": "18.2.0",
"react-bootstrap": "0.33.1",
"react-dom": "18.2.0",
"react-redux": "9.2.0",
"react-select": "5.10.2",
"redux": "5.0.0",
"superagent": "10.3.0",
"typescript": "5.6.3"
},
"jest": {
"snapshotSerializers": [
"<rootDir>/node_modules/enzyme-to-json/serializer"
],
"testPathIgnorePatterns": [
"/node_modules/",
"/non_npm_dependencies/"
Expand Down Expand Up @@ -111,7 +104,7 @@
"^.+\\.[jt]sx?$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!react-native|react-router|mattermost-webapp|enzyme|cheerio)"
"node_modules/(?!react-native|react-router|mattermost-webapp)"
],
"setupFiles": [
"jest-canvas-mock"
Expand Down
23 changes: 20 additions & 3 deletions webapp/src/components/confluence_field.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {getStyleForReactSelect} from '../utils/react_select_styles';
export default class ConfluenceField extends React.PureComponent {
static propTypes = {
required: PropTypes.bool.isRequired,
value: PropTypes.PropTypes.oneOfType([
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.object,
Expand All @@ -23,6 +23,13 @@ export default class ConfluenceField extends React.PureComponent {
readOnly: PropTypes.bool,
formGroupStyle: PropTypes.object,
formControlStyle: PropTypes.object,
type: PropTypes.string,
placeholder: PropTypes.string,
name: PropTypes.string,
options: PropTypes.array,
isMulti: PropTypes.bool,
isSearchable: PropTypes.bool,
testId: PropTypes.string,
};

static defaultProps = {
Expand Down Expand Up @@ -78,6 +85,7 @@ export default class ConfluenceField extends React.PureComponent {
render() {
const {
required, fieldType, theme, label, formGroupStyle, formControlStyle,
value, type, placeholder, name, readOnly, options, isMulti, isSearchable, testId,
} = this.props;
const requiredErrorMsg = 'This field is required.';
let requiredError = null;
Expand All @@ -93,18 +101,27 @@ export default class ConfluenceField extends React.PureComponent {
field = (
<FormControl
style={formControlStyle}
{...this.props}
type={type}
placeholder={placeholder}
value={value}
readOnly={readOnly}
onChange={this.handleChange}
data-testid={testId}
/>
);
} else if (fieldType === 'dropDown') {
field = (
<Select
{...this.props}
name={name}
value={value}
options={options}
isMulti={isMulti}
isSearchable={isSearchable}
menuPortalTarget={document.body}
menuPlacement='auto'
styles={getStyleForReactSelect(theme)}
onChange={this.handleChange}
inputId={testId}
/>
);
}
Expand Down
Loading