Skip to content

Commit ce2cd82

Browse files
committed
Update React to 17.0.2 and adjust other configs
Signed-off-by: Gábor Lipták <gliptak@gmail.com>
1 parent d400c1a commit ce2cd82

File tree

15 files changed

+18573
-41063
lines changed

15 files changed

+18573
-41063
lines changed

client/.babelrc

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@
77
}
88
}
99
],
10-
"@babel/preset-react"
10+
[
11+
"@babel/preset-react",
12+
{
13+
"runtime": "automatic",
14+
"importSource": "react"
15+
}
16+
]
1117
],
1218
"env": {
1319
"coverage": {

client/karma.config.js

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,12 @@ module.exports = function(karma) {
8787
mode: 'none',
8888
module: {
8989
rules: [
90+
{
91+
test: /\.mjs$/,
92+
resolve: {
93+
fullySpecified: false
94+
}
95+
},
9096
{
9197
test: /\.bpmnlintrc$/,
9298
use: [
@@ -105,7 +111,44 @@ module.exports = function(karma) {
105111
use: 'react-svg-loader'
106112
},
107113
{
108-
test: /\.(css|bpmn|cmmn|dmn|less|xml|png|svg|form|rpa)$/,
114+
test: /\.css$/,
115+
use: [
116+
'style-loader',
117+
{
118+
loader: 'css-loader',
119+
options: {
120+
modules: {
121+
localIdentName: '[path][name]__[local]--[hash:base64:5]'
122+
}
123+
}
124+
}
125+
]
126+
},
127+
{
128+
test: /\.less$/,
129+
use: [
130+
'style-loader',
131+
{
132+
loader: 'css-loader',
133+
options: {
134+
modules: {
135+
localIdentName: '[path][name]__[local]--[hash:base64:5]'
136+
}
137+
}
138+
},
139+
'less-loader'
140+
]
141+
},
142+
{
143+
test: /\.(bpmn|cmmn|dmn|form|rpa)$/,
144+
type: 'asset/source'
145+
},
146+
{
147+
test: /\.(woff|woff2|eot|ttf|otf)$/,
148+
type: 'asset/inline'
149+
},
150+
{
151+
test: /\.(xml|png|svg)$/,
109152
type: 'asset/source'
110153
}
111154
]
@@ -132,6 +175,7 @@ module.exports = function(karma) {
132175
absoluteBasePath,
133176
resourcePath
134177
],
178+
fullySpecified: false,
135179
alias: {
136180
'bpmn-js/lib/Modeler': modelers ? 'bpmn-js/lib/Modeler' : 'test/mocks/bpmn-js/Modeler',
137181
'camunda-bpmn-js/lib/camunda-cloud/Modeler': modelers ? 'camunda-bpmn-js/lib/camunda-cloud/Modeler' : 'test/mocks/bpmn-js/Modeler',

client/package.json

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
"drag-tabs": "^2.3.1",
5757
"events": "^3.0.0",
5858
"fast-xml-parser": "^5.2.3",
59-
"formik": "2.0.4",
59+
"formik": "^2.4.5",
6060
"ids": "^1.0.0",
6161
"inherits-browser": "^0.1.0",
6262
"min-dash": "^4.1.1",
@@ -66,8 +66,8 @@
6666
"modeler-moddle": "^0.2.0",
6767
"p-defer": "^4.0.1",
6868
"p-series": "^3.0.0",
69-
"react": "^16.14.0",
70-
"react-dom": "^16.14.0",
69+
"react": "^17.0.2",
70+
"react-dom": "^17.0.2",
7171
"scroll-tabs": "^1.0.1",
7272
"semver-compare": "^1.0.0",
7373
"sourcemapped-stacktrace": "^1.1.11",
@@ -81,18 +81,19 @@
8181
"@babel/preset-env": "^7.25.4",
8282
"@babel/preset-react": "^7.24.7",
8383
"@sentry/webpack-plugin": "^3.0.0",
84-
"@testing-library/react": "^12.0.0",
84+
"@testing-library/react": "^12.1.5",
85+
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
8586
"babel-loader": "^9.2.1",
8687
"babel-plugin-istanbul": "^7.0.0",
8788
"bpmnlint-loader": "^0.1.6",
8889
"case-sensitive-paths-webpack-plugin": "^2.1.2",
8990
"chai": "^4.5.0",
91+
"cheerio": "^0.22.0",
9092
"copy-webpack-plugin": "^12.0.2",
9193
"cross-env": "^7.0.0",
9294
"css-loader": "^7.1.2",
9395
"del-cli": "^6.0.0",
94-
"enzyme": "^3.9.0",
95-
"enzyme-adapter-react-16": "^1.12.1",
96+
"enzyme": "^3.11.0",
9697
"karma": "^6.4.4",
9798
"karma-chrome-launcher": "^3.2.0",
9899
"karma-coverage": "^2.2.1",
@@ -108,7 +109,7 @@
108109
"npm-run-all2": "^7.0.0",
109110
"puppeteer": "^24.0.0",
110111
"react-svg-loader": "^3.0.3",
111-
"react-test-renderer": "^16.14.0",
112+
"react-test-renderer": "^17.0.2",
112113
"sinon": "^17.0.1",
113114
"sinon-chai": "^3.7.0",
114115
"style-loader": "^4.0.0",

client/src/plugins/camunda-plugin/deployment-tool/DeploymentConfigOverlay.js

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,11 @@ export default class DeploymentConfigOverlay extends React.PureComponent {
4242
};
4343

4444
this.valuesCache = { ...props.configuration };
45+
this._isMounted = true;
4546
}
4647

4748
componentDidMount = () => {
49+
this._isMounted = true;
4850
const {
4951
subscribeToFocusChange,
5052
validator
@@ -60,7 +62,11 @@ export default class DeploymentConfigOverlay extends React.PureComponent {
6062
};
6163

6264
componentWillUnmount = () => {
65+
this._isMounted = false;
6366
this.props.unsubscribeFromFocusChange();
67+
if (this._submitTimeoutId) {
68+
clearTimeout(this._submitTimeoutId);
69+
}
6470
};
6571

6672
isConnectionError(code) {
@@ -141,6 +147,10 @@ export default class DeploymentConfigOverlay extends React.PureComponent {
141147

142148
const connectionValidation = await this.props.validator.validateConnection(endpoint);
143149

150+
if (!this._isMounted) {
151+
return;
152+
}
153+
144154
if (!hasKeys(connectionValidation)) {
145155

146156
this.externalErrorCodeCache = null;
@@ -418,8 +428,10 @@ export default class DeploymentConfigOverlay extends React.PureComponent {
418428
// if you come up with a better solution, please
419429
// do a PR.
420430
this.isOnBeforeSubmit = true;
421-
setTimeout(() => {
422-
this.isOnBeforeSubmit = false;
431+
this._submitTimeoutId = setTimeout(() => {
432+
if (this._isMounted) {
433+
this.isOnBeforeSubmit = false;
434+
}
423435
});
424436
} }
425437
>

client/src/plugins/camunda-plugin/start-instance-tool/StartInstanceConfigOverlay.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export default class StartInstanceConfigOverlay extends React.PureComponent {
8181
component={ TextInput }
8282
multiline={ true }
8383
label="Variables (optional)"
84-
description={ <p>Must be a proper <a href="https://www.w3schools.com/js/js_json_intro.asp">JSON string</a> representing <a href="https://docs.fluxnova.finos.org/manual/latest/reference/rest/process-definition/post-start-process-instance/#starting-a-process-instance-at-its-default-initial-activity">process instance variables</a>.</p> }
84+
description={ <>Must be a proper <a href="https://www.w3schools.com/js/js_json_intro.asp">JSON string</a> representing <a href="https://docs.fluxnova.finos.org/manual/latest/reference/rest/process-definition/post-start-process-instance/#starting-a-process-instance-at-its-default-initial-activity">process instance variables</a>.</> }
8585
hint="A JSON string representing the variables the process instance is started with."
8686
validate={ (value) => {
8787
if (value && value.trim().length > 0) {

client/src/plugins/zeebe-plugin/deployment-plugin/DeploymentPluginOverlay.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,15 +95,18 @@ export default class DeploymentPluginOverlay extends React.PureComponent {
9595
};
9696

9797
this.connectionChecker = validator.createConnectionChecker();
98+
this._isMounted = true;
9899
}
99100

100101
async componentDidMount() {
102+
this._isMounted = true;
101103
this.connectionChecker.subscribe({
102104
onComplete: this.handleConnectionCheckResult
103105
});
104106
}
105107

106108
componentWillUnmount() {
109+
this._isMounted = false;
107110
this.connectionChecker.unsubscribe();
108111
}
109112

@@ -176,10 +179,16 @@ export default class DeploymentPluginOverlay extends React.PureComponent {
176179

177180
this.connectionChecker.check(endpoint);
178181

179-
this.setState({ configValues: formValues });
182+
if (this._isMounted) {
183+
this.setState({ configValues: formValues });
184+
}
180185
};
181186

182187
handleConnectionCheckResult = result => {
188+
if (!this._isMounted) {
189+
return;
190+
}
191+
183192
const { connectionResult, endpointErrors } = result;
184193

185194
if (endpointErrors) {
@@ -197,7 +206,9 @@ export default class DeploymentPluginOverlay extends React.PureComponent {
197206
};
198207

199208
setConnectionState(connectionState) {
200-
this.setState({ connectionState });
209+
if (this._isMounted) {
210+
this.setState({ connectionState });
211+
}
201212
}
202213

203214
handleFormSubmit = async (values, { setSubmitting }) => {

client/src/plugins/zeebe-plugin/start-instance-plugin/StartInstanceConfigOverlay.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export default class StartInstanceConfigOverlay extends React.PureComponent {
7474
component={ TextInput }
7575
multiline={ true }
7676
label="Variables (optional)"
77-
description={ <p>Must be a proper <a href="https://www.w3schools.com/js/js_json_intro.asp">JSON string</a> representing <a href="https://docs.camunda.io/docs/components/concepts/variables/?utm_source=modeler&utm_medium=referral">Zeebe variables</a>.</p> }
77+
description={ <>Must be a proper <a href="https://www.w3schools.com/js/js_json_intro.asp">JSON string</a> representing <a href="https://docs.camunda.io/docs/components/concepts/variables/?utm_source=modeler&utm_medium=referral">Zeebe variables</a>.</> }
7878
hint="A JSON string representing the variables the process instance is started with."
7979
validate={ (value) => {
8080
if (value && value.trim().length > 0) {

client/src/plugins/zeebe-plugin/start-instance-plugin/StartInstancePlugin.js

Lines changed: 46 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -37,18 +37,26 @@ export default class StartInstancePlugin extends PureComponent {
3737
};
3838

3939
this._anchorRef = React.createRef();
40+
this._isMounted = true;
4041
}
4142

4243
componentDidMount() {
44+
this._isMounted = true;
4345
this.props.subscribe('app.activeTabChanged', ({ activeTab }) => {
44-
this.setState({
45-
activeTab,
46-
overlayState: null,
47-
activeButton: false
48-
});
46+
if (this._isMounted) {
47+
this.setState({
48+
activeTab,
49+
overlayState: null,
50+
activeButton: false
51+
});
52+
}
4953
});
5054
}
5155

56+
componentWillUnmount() {
57+
this._isMounted = false;
58+
}
59+
5260
async startInstance() {
5361
const {
5462
activeTab,
@@ -59,7 +67,9 @@ export default class StartInstancePlugin extends PureComponent {
5967
return;
6068
}
6169

62-
this.setState({ activeButton: true });
70+
if (this._isMounted) {
71+
this.setState({ activeButton: true });
72+
}
6373

6474
// (2) get deploy configuration
6575

@@ -68,7 +78,9 @@ export default class StartInstancePlugin extends PureComponent {
6878

6979
// (2.1) user cancelled
7080
if (!deploymentConfig) {
71-
this.setState({ activeButton: false });
81+
if (this._isMounted) {
82+
this.setState({ activeButton: false });
83+
}
7284
return;
7385
}
7486

@@ -78,7 +90,9 @@ export default class StartInstancePlugin extends PureComponent {
7890
const startConfiguration = await this.getSavedConfiguration(activeTab, 'start-process-instance');
7991

8092
// (3.2) get configuration from user
81-
this.setState({ activeButton: true });
93+
if (this._isMounted) {
94+
this.setState({ activeButton: true });
95+
}
8296

8397
const {
8498
action,
@@ -87,7 +101,9 @@ export default class StartInstancePlugin extends PureComponent {
87101

88102
// (3.3) handle user cancellation
89103
if (action === 'cancel') {
90-
this.setState({ activeButton: false });
104+
if (this._isMounted) {
105+
this.setState({ activeButton: false });
106+
}
91107
return;
92108
}
93109

@@ -102,23 +118,27 @@ export default class StartInstancePlugin extends PureComponent {
102118

103119
return new Promise(resolve => {
104120
const onClose = (action, configuration) => {
105-
this.setState({
106-
overlayState: null,
107-
activeButton: false
108-
});
121+
if (this._isMounted) {
122+
this.setState({
123+
overlayState: null,
124+
activeButton: false
125+
});
126+
}
109127

110128
// contract: if configuration provided, user closed with O.K.
111129
// otherwise they canceled it
112130
return resolve({ action, configuration });
113131
};
114132

115-
this.setState({
116-
overlayState: {
117-
isStart: true,
118-
configuration,
119-
onClose
120-
}
121-
});
133+
if (this._isMounted) {
134+
this.setState({
135+
overlayState: {
136+
isStart: true,
137+
configuration,
138+
onClose
139+
}
140+
});
141+
}
122142
});
123143
}
124144

@@ -133,10 +153,12 @@ export default class StartInstancePlugin extends PureComponent {
133153
}
134154

135155
// (2) set status-bar button as inactive and close overlay
136-
this.setState({
137-
activeButton: false,
138-
overlayState: null
139-
});
156+
if (this._isMounted) {
157+
this.setState({
158+
activeButton: false,
159+
overlayState: null
160+
});
161+
}
140162

141163
// (3) start process instance
142164
const {

client/src/shared/ui/form/TextInput.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export default function TextInput(props) {
8686
error={ error }
8787
/>
8888
{ description &&
89-
<p className="form-control">{ description }</p>
89+
<small className="form-text text-muted">{ description }</small>
9090
}
9191
</div>
9292
</React.Fragment>

client/test/all.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
*/
1010

1111
import { configure } from 'enzyme';
12-
import Adapter from 'enzyme-adapter-react-16';
12+
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
1313

1414
configure({ adapter: new Adapter() });
1515

0 commit comments

Comments
 (0)