EPMRPP-78274 || Upgrade react version to 17th

app/jestsetup.js

@@ -17,7 +17,7 @@
 import 'raf/polyfill';
 import React from 'react';
 import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import * as Utils from './src/common/utils';
 
 configure({ adapter: new Adapter() });

app/package.json

@@ -37,7 +37,7 @@
     "d3-selection": "1.4.0",
     "dompurify": "2.0.17",
     "dotenv": "5.0.1",
-    "downshift": "3.4.8",
+    "downshift": "6.1.7",
     "fast-deep-equal": "2.0.1",
     "fetch-jsonp": "1.1.3",
     "history": "4.7.2",
@@ -47,35 +47,35 @@
     "marked": "0.7.0",
     "moment": "2.29.4",
     "perf-cascade": "2.5.4",
-    "prop-types": "15.7.2",
-    "pure-react-carousel": "1.19.0",
+    "prop-types": "15.8.1",
+    "pure-react-carousel": "1.28.1",
     "qhistory": "1.0.0",
     "qs": "6.5.2",
     "rc-slider": "8.6.3",
-    "react": "16.13.1",
-    "react-color": "2.17.0",
+    "react": "17.0.2",
+    "react-color": "2.19.3",
     "react-colorful": "5.6.0",
-    "react-copy-to-clipboard": "5.0.1",
+    "react-copy-to-clipboard": "5.1.0",
     "react-custom-scrollbars": "4.2.1",
-    "react-datepicker": "1.4.1",
-    "react-dom": "16.13.1",
-    "react-dropzone": "4.2.9",
+    "react-datepicker": "4.8.0",
+    "react-dom": "17.0.2",
+    "react-dropzone": "7.0.1",
     "react-event-observer": "0.5.11",
-    "react-ga": "2.5.3",
+    "react-ga": "3.3.1",
     "react-ga4": "1.4.1",
     "react-grid-layout": "0.17.1",
-    "react-hot-loader": "3.1.1",
-    "react-intl": "3.9.1",
-    "react-lazyload": "2.5.0",
+    "react-hot-loader": "4.13.0",
+    "react-intl": "4.7.6",
+    "react-lazyload": "3.2.0",
     "react-popper": "1.3.11",
-    "react-redux": "7.1.3",
-    "react-reflex": "3.0.16",
-    "react-syntax-highlighter": "11.0.1",
-    "react-tracking": "7.2.1",
-    "react-transition-group": "4.3.0",
+    "react-redux": "7.2.8",
+    "react-reflex": "4.0.9",
+    "react-syntax-highlighter": "15.5.0",
+    "react-tracking": "9.2.0",
+    "react-transition-group": "4.4.2",
     "rebound": "0.1.0",
-    "redux": "4.0.4",
-    "redux-devtools-extension": "2.13.2",
+    "redux": "4.2.0",
+    "redux-devtools-extension": "2.13.9",
     "redux-first-router": "0.0.20-next",
     "redux-first-router-link": "2.1.1",
     "redux-form": "8.2.6",
@@ -84,7 +84,7 @@
     "reset-css": "2.2.1",
     "semver-diff": "2.1.0",
     "simplemde": "1.11.2",
-    "swagger-ui-react": "3.52.5",
+    "swagger-ui-react": "4.13.0",
     "video.js": "7.17.0"
   },
   "devDependencies": {
@@ -96,6 +96,7 @@
     "@babel/polyfill": "7.12.1",
     "@babel/preset-env": "7.16.8",
     "@babel/preset-react": "7.16.7",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "axios-mock-adapter": "1.17.0",
     "babel-eslint": "10.0.3",
     "babel-loader": "8.2.3",
@@ -107,7 +108,6 @@
     "css-loader": "6.5.1",
     "css-minimizer-webpack-plugin": "3.4.1",
     "enzyme": "3.10.0",
-    "enzyme-adapter-react-16": "1.15.0",
     "enzyme-to-json": "3.4.2",
     "eslint": "6.5.1",
     "eslint-config-airbnb": "18.0.1",
@@ -146,13 +146,13 @@
     "svg-inline-loader": "0.8.2",
     "terser-webpack-plugin": "5.3.0",
     "webpack": "5.66.0",
-    "webpack-cli": "4.9.1",
+    "webpack-cli": "4.10.0",
     "webpack-dev-server": "4.7.3",
     "webpack-hot-middleware": "2.25.1",
     "webpack-merge": "5.8.0",
     "webpack-notifier": "^1.15.0",
     "webpack-subresource-integrity": "5.1.0",
-    "why-did-you-update": "1.0.6"
+    "why-did-you-update": "1.0.8"
   },
   "lint-staged": {
     "*.{js,jsx}": [

app/src/common/constants/timeDateFormat.js

@@ -15,8 +15,8 @@
  */
 
 export const TIME_INTERVAL = 15;
-export const DATE_FORMAT = 'MM-DD-YYYY';
+export const DATE_FORMAT = 'MM-dd-yyyy';
 export const TIME_FORMAT = 'HH:mm';
-export const TIME_DATE_FORMAT = 'HH:mm MM/DD/YYYY';
-export const DATE_FORMAT_TOOLTIP = 'YYYY-MM-DD';
-export const DATETIME_FORMAT_TOOLTIP = 'YYYY-MM-DD hh:mm:ss';
+export const TIME_DATE_FORMAT = 'HH:mm MM/dd/yyyy';
+export const DATE_FORMAT_TOOLTIP = 'yyyy-MM-dd';
+export const DATETIME_FORMAT_TOOLTIP = 'yyyy-MM-dd hh:mm:ss';

app/src/components/inputs/inputTimeDateRange/inputTimeDateRange.scss

@@ -179,6 +179,13 @@
             color: inherit !important;
           }
         }
+        .react-datepicker__time-container, .react-datepicker__time-box,  {
+          width: 70px;
+
+          .react-datepicker__time-list-item {
+            height: auto !important;
+          }
+        }
       }
     }
 

app/src/components/inputs/inputTimeDateRange/inputTimeDateRangeMenu.jsx

@@ -105,8 +105,8 @@ export class InputTimeDateRangeMenu extends Component {
       defaultDisplayEndDate,
       component,
     } = this.props;
-    const displayStartDate = moment((value && value.start) || defaultDisplayStartDate);
-    const displayEndDate = moment((value && value.end) || defaultDisplayEndDate);
+    const displayStartDate = moment((value && value.start) || defaultDisplayStartDate).toDate();
+    const displayEndDate = moment((value && value.end) || defaultDisplayEndDate).toDate();
 
     return (
       <div className={cx('menu', { visible: opened })}>

app/src/init.js

@@ -1 +1,2 @@
+// eslint-disable-next-line no-unused-expressions
 import('./index.jsx');

app/src/pages/admin/allUsersPage/allUsersGrid/projectsAndRolesColumn/projectsAndRolesColumn.jsx

@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
 import { connect } from 'react-redux';
 import { Manager, Reference, Popper } from 'react-popper';
+import DOMPurify from 'dompurify';
 import track from 'react-tracking';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { showNotification, NOTIFICATION_TYPES } from 'controllers/notification';
@@ -55,7 +56,7 @@ const messages = defineMessages({
   unassignModalText: {
     id: 'UnassignModal.modalText',
     defaultMessage:
-      "Are you sure you want to unassign user '<b>{user}</b>' from the project '<b>{project}</b>'?",
+      "Are you sure you want to unassign user ''<b>{user}</b>'' from the project ''<b>{project}</b>''?",
   },
   addProject: {
     id: 'projectsAndRolesColumn.addProject',
@@ -206,6 +207,7 @@ export class ProjectsAndRolesColumn extends Component {
       id: 'confirmationModal',
       data: {
         message: intl.formatMessage(messages.unassignModalText, {
+          b: (data) => DOMPurify.sanitize(`<b>${data}</b>`),
           user,
           project,
         }),

app/src/pages/common/membersPage/membersGrid/projectRole/projectRole.jsx

@@ -18,6 +18,7 @@ import { Fragment, Component } from 'react';
 import track from 'react-tracking';
 import { connect } from 'react-redux';
 import classNames from 'classnames/bind';
+import DOMPurify from 'dompurify';
 import { injectIntl, defineMessages } from 'react-intl';
 import PropTypes from 'prop-types';
 import { fetch } from 'common/utils';
@@ -47,7 +48,7 @@ const messages = defineMessages({
   },
   updateMember: {
     id: 'ProjectRole.updateMember',
-    defaultMessage: "Member '<b>{name}</b>' has been updated",
+    defaultMessage: "Member ''<b>{name}</b>'' has been updated",
   },
 });
 
@@ -109,7 +110,10 @@ export class ProjectRole extends Component {
     })
       .then(() => {
         this.props.showNotification({
-          message: intl.formatMessage(messages.updateMember, { name: userId }),
+          message: intl.formatMessage(messages.updateMember, {
+            b: (data) => DOMPurify.sanitize(`<b>${data}</b>`),
+            name: userId,
+          }),
           type: NOTIFICATION_TYPES.SUCCESS,
         });
       })

app/src/pages/common/membersPage/membersGrid/unassignButton/unassignButton.jsx

@@ -19,6 +19,7 @@ import track from 'react-tracking';
 import { connect } from 'react-redux';
 import { injectIntl, defineMessages } from 'react-intl';
 import PropTypes from 'prop-types';
+import DOMPurify from 'dompurify';
 import { GhostButton } from 'components/buttons/ghostButton';
 import { showModalAction } from 'controllers/modal';
 import { fetch } from 'common/utils';
@@ -76,7 +77,7 @@ const messages = defineMessages({
   modalText: {
     id: 'UnassignModal.modalText',
     defaultMessage:
-      "Are you sure you want to unassign user '<b>{user}</b>' from the project '<b>{project}</b>'?",
+      "Are you sure you want to unassign user ''<b>{user}</b>'' from the project ''<b>{project}</b>''?",
   },
 });
 
@@ -141,6 +142,7 @@ export class UnassignButton extends Component {
       id: 'confirmationModal',
       data: {
         message: intl.formatMessage(messages.modalText, {
+          b: (data) => DOMPurify.sanitize(`<b>${data}</b>`),
           user: userId,
           project: projectId,
         }),

app/src/pages/common/membersPage/modals/inviteUserModal/inviteUserModal.jsx

@@ -20,6 +20,7 @@ import classNames from 'classnames/bind';
 import { connect } from 'react-redux';
 import { defineMessages, injectIntl } from 'react-intl';
 import { reduxForm, formValueSelector } from 'redux-form';
+import DOMPurify from 'dompurify';
 import { COMMON_LOCALE_KEYS } from 'common/constants/localization';
 import { DEFAULT_PROJECT_ROLE, ROLES_MAP } from 'common/constants/projectRoles';
 import { URLS } from 'common/urls';
@@ -68,7 +69,7 @@ const messages = defineMessages({
   },
   memberWasInvited: {
     id: 'InviteUserModal.memberWasInvited',
-    defaultMessage: "Member '<b>{name}</b>' was assigned to the project",
+    defaultMessage: "Member ''<b>{name}</b>'' was assigned to the project",
   },
   inviteExternalMember: {
     id: 'InviteUserModal.inviteExternalMember',
@@ -194,6 +195,7 @@ export class InviteUserModal extends Component {
       .then(() => {
         this.props.showNotification({
           message: formatMessage(messages.memberWasInvited, {
+            b: (innerData) => DOMPurify.sanitize(`<b>${innerData}</b>`),
             name: userData.user.userLogin,
           }),
           type: NOTIFICATION_TYPES.SUCCESS,

app/src/pages/common/settingsPage/notificationsTab/modals/deleteNotificationCaseModal/deleteNotificationCaseModal.jsx

@@ -18,6 +18,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import className from 'classnames/bind';
 import { injectIntl, defineMessages } from 'react-intl';
+import DOMPurify from 'dompurify';
 import Parser from 'html-react-parser';
 import { COMMON_LOCALE_KEYS } from 'common/constants/localization';
 import { ModalLayout, withModal } from 'components/main/modal';
@@ -71,7 +72,12 @@ export class DeleteNotificationCaseModal extends Component {
         closeIconEventInfo={eventsInfo.closeIcon}
       >
         <div className={cx('message')}>
-          {Parser(intl.formatMessage(messages.message, { name }))}
+          {Parser(
+            intl.formatMessage(messages.message, {
+              b: (data) => DOMPurify.sanitize(`<b>${data}</b>`),
+              name,
+            }),
+          )}
         </div>
       </ModalLayout>
     );

app/src/pages/inside/dashboardItemPage/dashboardItemPage.jsx

@@ -18,6 +18,7 @@ import React, { Component, Fragment } from 'react';
 import track from 'react-tracking';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import DOMPurify from 'dompurify';
 import { Fullscreen } from 'components/containers/fullscreen';
 import Parser from 'html-react-parser';
 import classNames from 'classnames/bind';
@@ -116,7 +117,7 @@ const messages = defineMessages({
   deleteModalConfirmationText: {
     id: 'DashboardPage.modal.deleteModalConfirmationText',
     defaultMessage:
-      "Are you sure you want to delete dashboard '<b>{name}</b>'? It will no longer exist.",
+      "Are you sure you want to delete dashboard ''<b>{name}</b>''? It will no longer exist.",
   },
   print: {
     id: 'DashboardPage.print',
@@ -192,6 +193,7 @@ export class DashboardItemPage extends Component {
         onConfirm: () => deleteDashboard(dashboard),
         header: formatMessage(messages.deleteModalTitle),
         mainContent: formatMessage(messages.deleteModalConfirmationText, {
+          b: (data) => DOMPurify.sanitize(`<b>${data}</b>`),
           name: `'<b>${dashboard.name}</b>'`,
         }),
         warning,

app/src/pages/inside/dashboardItemPage/modals/common/widgets.jsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { FormattedMessage, FormattedHTMLMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import Parser from 'html-react-parser';
 import {
   LAUNCH_STATISTICS,
@@ -99,11 +99,14 @@ export const getWidgets = (formatMessage) => [
     id: LAUNCH_STATISTICS,
     title: formatMessage(widgetTypesMessages[LAUNCH_STATISTICS]),
     description: (
-      <FormattedHTMLMessage
+      <FormattedMessage
         id={'Widgets.Description.statisticTrend'}
         defaultMessage={
-          '- in "Launch mode" shows the growth trend in the number of test cases with each selected statuses from run to run,<br> - in "Timeline mode" shows sum, distributed by dates.'
+          '- in "Launch mode" shows the growth trend in the number of test cases with each selected statuses from run to run,{linebreak} - in "Timeline mode" shows sum, distributed by dates.'
         }
+        values={{
+          linebreak: <br />,
+        }}
       />
     ),
     preview: Parser(LAUNCH_STATISTICS_PREVIEW),
@@ -137,11 +140,14 @@ export const getWidgets = (formatMessage) => [
     id: LAUNCH_EXECUTION_AND_ISSUE_STATISTICS,
     title: formatMessage(widgetTypesMessages[LAUNCH_EXECUTION_AND_ISSUE_STATISTICS]),
     description: (
-      <FormattedHTMLMessage
+      <FormattedMessage
         id={'Widgets.Description.launchStatistics'}
         defaultMessage={
-          'Shows statistics of the last launch divided into 2 sections:</br> - Skipped, Passed, Failed </br> - Product Bug, System Issue, To Investigate, Automation Bugs.'
+          'Shows statistics of the last launch divided into 2 sections:{linebreak} - Skipped, Passed, Failed {linebreak} - Product Bug, System Issue, To Investigate, Automation Bugs.'
         }
+        values={{
+          linebreak: <br />,
+        }}
       />
     ),
     preview: Parser(LAUNCH_EXECUTION_AND_ISSUE_STATISTICS_PREVIEW),
@@ -163,11 +169,14 @@ export const getWidgets = (formatMessage) => [
     id: TEST_CASES_GROWTH_TREND,
     title: formatMessage(widgetTypesMessages[TEST_CASES_GROWTH_TREND]),
     description: (
-      <FormattedHTMLMessage
+      <FormattedMessage
         id={'Widgets.Description.casesTrend'}
         defaultMessage={
-          '- in "Launch Mode" shows the increment of test-cases from run to run,<br> - in "Timeline Mode" shows the increment of test-cases distributed by dates (in launches with the largest number of test-cases per day).'
+          '- in "Launch Mode" shows the increment of test-cases from run to run,{linebreak} - in "Timeline Mode" shows the increment of test-cases distributed by dates (in launches with the largest number of test-cases per day).'
         }
+        values={{
+          linebreak: <br />,
+        }}
       />
     ),
     preview: Parser(TEST_CASES_GROWTH_TREND_PREVIEW),
@@ -177,11 +186,14 @@ export const getWidgets = (formatMessage) => [
     id: INVESTIGATED_PERCENTAGE_OF_LAUNCHES,
     title: formatMessage(widgetTypesMessages[INVESTIGATED_PERCENTAGE_OF_LAUNCHES]),
     description: (
-      <FormattedHTMLMessage
+      <FormattedMessage
         id={'Widgets.Description.investigatedTrend'}
         defaultMessage={
-          '- in "Launch Mode" shows whether the launches are analyzed or not (the percentage of "Investigated"/"To Investigate") from run to run,<br> - in "Timeline Mode" shows percentage of "Investigated"/"To Investigate" tests in all runs per day distributed by dates.'
+          '- in "Launch Mode" shows whether the launches are analyzed or not (the percentage of "Investigated"/"To Investigate") from run to run,{linebreak} - in "Timeline Mode" shows percentage of "Investigated"/"To Investigate" tests in all runs per day distributed by dates.'
         }
+        values={{
+          linebreak: <br />,
+        }}
       />
     ),
     preview: Parser(INVESTIGATED_PERCENTAGE_OF_LAUNCHES_PREVIEW),