guardian · rhystmills · Oct 25, 2023 · Oct 23, 2023 · Oct 23, 2023 · Oct 23, 2023
@@ -21,5 +21,10 @@
     "extends": ["eslint:recommended", "plugin:react/recommended"],
     "globals": {
         "Promise": false
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
     }
 }
@@ -1 +1 @@
-18.18.2
+20.8.1
@@ -34,48 +34,45 @@
     "css-loader": "^6.8.1",
     "enzyme": "^3.10.0",
     "eslint": "^4.12.1",
-    "eslint-plugin-react": "^6.9.0",
+    "eslint-plugin-react": "^7.33.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^22.1.0",
     "mini-css-extract-plugin": "^2.7.6",
-    "react-addons-test-utils": "^15.4.2",
     "react-hot-loader": "^3.1.1",
-    "react-test-renderer": "^15.4.2",
+    "react-test-renderer": "^16.14.0",
+    "react-with-direction": "^1.3.1",
     "sass": "^1.69.4",
     "sass-loader": "^13.3.2",
     "style-loader": "3.3.3",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
+    "@babel/runtime": "^7.0.0",
     "babel-eslint": "^10.1.0",
     "copy-to-clipboard": "^3.0.5",
     "date-fns": "^1.28.0",
-    "enzyme-adapter-react-15": "^1.4.1",
-    "es6-promise": "^4.0.5",
+    "enzyme-adapter-react-16": "^1.15.7",
     "filesize": "^3.5.4",
-    "history": "^4.5.1",
     "lodash": "^4.17.21",
     "moment": "^2.18.0",
     "panda-session": "^0.1.6",
-    "react": "15.7.0",
-    "react-addons-shallow-compare": "^15.4.2",
-    "react-dates": "^8.2.1",
-    "react-dom": "^15.4.2",
+    "prop-types": "^15.8.1",
+    "react": "16.14.0",
+    "react-dates": "^21.8.0",
+    "react-dom": "^16.14.0",
     "react-redux": "^5.0.2",
     "react-router": "^3.0.2",
     "react-router-dom": "^4.0.0",
     "react-router-redux": "^4.0.8",
-    "redux": "^3.6.0",
+    "redux": "^4.2.1",
     "redux-thunk": "^2.2.0",
     "scribe-editor": "3.3.0",
     "scribe-plugin-keyboard-shortcuts": "^0.1.1",
     "scribe-plugin-link-prompt-command": "^1.0.0",
     "scribe-plugin-sanitizer": "^0.1.10",
     "scribe-plugin-toolbar": "^1.0.0",
-    "url-search-params": "^0.7.0",
-    "uuid": "^3.0.1",
-    "whatwg-fetch": "^2.0.3"
+    "uuid": "^3.0.1"
   }
 }
@@ -1,6 +1,9 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {Provider} from 'react-redux';
 import {Route, IndexRedirect, Router} from 'react-router';
+import 'react-dates/initialize';
+import 'react-dates/lib/css/_datepicker.css';
 
 import Page from './components/Page';
 import {AtomCreateTypeSelect} from './components/AtomCreate/AtomCreateTypeSelect';

@@ -4,7 +4,7 @@ import {fetchTargetsForTags} from '../../services/TargetingApi';
 import AtomsApi from '../../services/AtomsApi';
 import {atomPropType} from '../../constants/atomPropType.js';
 import {logError} from '../../util/logger';
-import {PropTypes} from 'react';
+import {PropTypes} from 'prop-types';
 
 function requestSuggestionsForLatestContent() {
   return {

@@ -1,7 +1,7 @@
 import {latestCommonsDivisions} from '../../services/Parliament';
 import AtomsApi from '../../services/AtomsApi';
 import {logError} from '../../util/logger';
-import {PropTypes} from 'react';
+import {PropTypes} from 'prop-types';
 import {atomPropType} from '../../constants/atomPropType';
 
 const MPPropType = PropTypes.shape({

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 
 export default class AppMessage extends React.Component {
 

@@ -21,7 +21,7 @@ class AtomCreateExternalApp extends React.Component {
           Due to the complexity of this atom, it cannot be created from within the Atom Workshop directly.
         </div>
         <div className="center">
-          <a className="atom-editor__external" target="_blank" href={getCreateUrlFromAtomType(this.props.atomType)}>Open Dedicated Editor</a>
+          <a className="atom-editor__external" target="_blank" rel="noreferrer" href={getCreateUrlFromAtomType(this.props.atomType)}>Open Dedicated Editor</a>
         </div>
       </div>
     );

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {Link} from 'react-router';
 import {getAtomByType, isAtomTypeEditable} from '../../constants/atomData';
 import {AtomTypeCard} from '../AtomTypeCard/AtomTypeCard.js';

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {CTAEditor} from './CustomEditors/CTAEditor';
 import {RecipeEditor} from './CustomEditors/RecipeEditor';
 import {QAndAEditor} from './CustomEditors/QAndAEditor';
@@ -40,7 +41,7 @@ class AtomEdit extends React.Component {
     })
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     subscribeToPresence(this.props.routeParams.atomType, this.props.routeParams.id);
   }
 

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {atomPropType} from '../../constants/atomPropType.js';
 import {allAtomTypes} from '../../constants/atomData.js';
 

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {atomPropType} from '../../../constants/atomPropType';
 import AutomaticDataFetch from "./AudioFields/AutomaticDataFetch";
 

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {ManualDataInput} from "./ManualDataInput";
 
 //REDUX CONNECTIONS

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {ManagedForm, ManagedField} from '../../../ManagedEditor';
 import FormFieldTextInput from '../../../FormFields/FormFieldTextInput';
 import FormFieldNumericInput from '../../../FormFields/FormFieldNumericInput';

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 
 import {ManagedForm, ManagedField} from '../../ManagedEditor';
 import FormFieldTextInput from '../../FormFields/FormFieldTextInput';

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import Modal from '../../Utilities/Modal';
 import {atomPropType} from '../../../constants/atomPropType';
 import {logInfo, logError} from '../../../util/logger';

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 
 import {ManagedForm, ManagedField} from '../../ManagedEditor';
 import FormFieldTextInput from '../../FormFields/FormFieldTextInput';

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {ManagedForm, ManagedField} from '../../ManagedEditor';
 import FormFieldTextInput from '../../FormFields/FormFieldTextInput';
 import FormFieldsScribeEditor from '../../FormFields/FormFieldScribeEditor';

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react";
+import React from "react";
+import {PropTypes} from "prop-types";
 import FormFieldImageSelect from "../../FormFields/FormFieldImageSelect";
 import FormFieldArrayWrapper from "../../FormFields/FormFieldArrayWrapper";
 import { GuideItem } from "./GuideFields/GuideItem";

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react";
+import React from "react";
+import {PropTypes} from "prop-types";
 import { ManagedForm, ManagedField } from "../../../ManagedEditor";
 import FormFieldTextInput from "../../../FormFields/FormFieldTextInput";
 import FormFieldsScribeEditor from "../../../FormFields/FormFieldScribeEditor";

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import FormFieldImageSelect from '../../FormFields/FormFieldImageSelect';
 import FormFieldArrayWrapper from '../../FormFields/FormFieldArrayWrapper';
 import { ProfileItem } from './ProfileFields/ProfileItem';

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import { ManagedForm, ManagedField } from '../../../ManagedEditor';
 import FormFieldTextInput from '../../../FormFields/FormFieldTextInput';
 import FormFieldsScribeEditor from '../../../FormFields/FormFieldScribeEditor';

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import FormFieldImageSelect from '../../FormFields/FormFieldImageSelect';
 import {QAItem} from './QAndAFields/QAItem';
 import {ManagedField, ManagedForm} from '../../ManagedEditor';

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react";
+import React from "react";
+import {PropTypes} from "prop-types";
 import { ManagedForm, ManagedField } from "../../../ManagedEditor";
 import FormFieldsScribeEditor from "../../../FormFields/FormFieldScribeEditor";
 import { wordLimits, tooLongMsg } from "../../../../util/wordLimits";

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 
 import {ManagedForm, ManagedField} from '../../ManagedEditor';
 import FormFieldNumericInput from '../../FormFields/FormFieldNumericInput';

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {ManagedForm, ManagedField} from '../../../ManagedEditor';
 import FormFieldTextInput from '../../../FormFields/FormFieldTextInput';
 import FormFieldSelectBox from '../../../FormFields/FormFieldSelectBox';

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {ManagedForm, ManagedField} from '../../../ManagedEditor';
 import {Ingredient} from './Ingredient';
 import FormFieldTextInput from '../../../FormFields/FormFieldTextInput';

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 
 import FormFieldRadioButtons from '../../../FormFields/FormFieldRadioButtons';
 import FormFieldNumericInput from '../../../FormFields/FormFieldNumericInput';

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import FormFieldArrayWrapper from '../../FormFields/FormFieldArrayWrapper';
 import {TimelineItem} from './TimelineFields/TimelineItem';
 import {ManagedField, ManagedForm} from '../../ManagedEditor';

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import { ManagedForm, ManagedField } from '../../../ManagedEditor';
 import FormFieldTextInput from '../../../FormFields/FormFieldTextInput';
 import FormFieldsScribeEditor from '../../../FormFields/FormFieldScribeEditor';

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {atomPropType} from '../../constants/atomPropType.js';
 
 class EmbeddedAtomPick extends React.Component {

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import { atomPropType } from '../../constants/atomPropType.js';
 import copy from 'copy-to-clipboard';
 import { Link } from 'react-router';

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {createTarget} from '../../services/TargetingApi';
 
 import {ManagedForm, ManagedField} from '../ManagedEditor';
@@ -24,7 +25,7 @@ class CreateTargetForm extends React.Component {
   }
 
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
 
     if (!this.state.currentTarget.title) {
       this.setState({

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import { atomPropType } from '../../constants/atomPropType';
 import {
   fetchTargetsForAtomPath,

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import _isEqual from 'lodash/fp/isEqual';
 
 import {allAtomTypes} from '../../constants/atomData';
@@ -44,7 +45,7 @@ class AtomList extends React.Component {
     this.triggerSearch();
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (!_isEqual(newProps.queryParams, this.props.queryParams)) {
       this.triggerSearch(Object.assign({}, searchParams, newProps.queryParams));
     }

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {atomPropType} from '../../constants/atomPropType.js';
 import {getTitleForAtom, isAtomWorkshopEditable} from '../../util/atomDataExtractors';
 import {getAtomByType} from '../../constants/atomData';

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import AtomEmbed from '../AtomEmbed/AtomEmbed';
 import {atomPropType} from '../../constants/atomPropType.js';
 
@@ -31,7 +32,7 @@ class AtomRoot extends React.Component {
   }
 
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.atomActions.getAtom(this.props.routeParams.atomType, this.props.routeParams.id)
     .then(() => {
       this.props.workflowActions.getWorkflowStatus(this.props.atom);

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {atomPropType} from '../../constants/atomPropType';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import {FrontendIcon, ComposerIcon, ViewerIcon} from '../../util/icons.js';
@@ -22,7 +23,7 @@ class AtomStats extends React.Component {
     }).isRequired
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.atomActions.getAtomUsages(this.props.routeParams.atomType, this.props.routeParams.id);
     this.props.atomActions.getSuggestedContent(this.props.routeParams.id, this.props.routeParams.atomType);
   }
@@ -40,13 +41,13 @@ class AtomStats extends React.Component {
           <div className="usages-list__links">
             <p className="usages-list__item__date">
               Created: {distanceInWordsToNow(usage.fields.creationDate, {addSuffix: true})}
-              <a className="usages-list__link" href={websiteLink} title="Open on theguardian.com" target="_blank">
+              <a className="usages-list__link" href={websiteLink} title="Open on theguardian.com" target="_blank" rel="noreferrer">
                 <FrontendIcon />
               </a>
-              <a className="usages-list__link" href={composerLink} title="Open in Composer" target="_blank">
+              <a className="usages-list__link" href={composerLink} title="Open in Composer" target="_blank" rel="noreferrer">
                 <ComposerIcon />
               </a>
-              <a className="usages-list__link" href={viewerLink} title="Open in Viewer" target="_blank">
+              <a className="usages-list__link" href={viewerLink} title="Open in Viewer" target="_blank" rel="noreferrer">
                 <ViewerIcon />
               </a></p>
           </div>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		18.18.2
		20.8.1
Copy link samanthagottlieb Oct 24, 2023 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. Was going to point out that Node was bumped as part of this PR, but I think maybe you forgot to push this, or pushed to this branch instead? Just highlighting in case there were any other associated changes that weren't pushed in that PR, that you may want to bring in here. Might be worth noting this node upgrade in the PR description? Copy link Contributor Author rhystmills Oct 24, 2023 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. Whoops, looks like I pushed that to the wrong branch. I've updated the other PR description and will mention here as you suggest. Good spot!