Switch to React from react-lite

bots/npm-update

@@ -34,8 +34,6 @@ FRAGILE = [
     "patternfly",
     "paternfly-bootstrap-combobox",
     "requirejs",
-    # 1.4.x needs the full React 16, does not work with our react-lite 15
-    "@patternfly/react-console",
     # version 0.32.2 switches to babel 7, which causes build failures with our babel 6 build system
     "react-bootstrap",
 ]

package.json

@@ -3,14 +3,15 @@
   "description": "Cockpit isn't a Node package, these are devel time deps, not needed to build tarball either",
   "private": true,
   "dependencies": {
-    "@patternfly/react-console": "1.3.0",
+    "@patternfly/react-console": "1.4.2",
     "angular": "1.3.20",
     "angular-bootstrap-npm": "0.13.4",
     "angular-gettext": "2.3.11",
     "angular-route": "1.3.20",
     "bootstrap": "3.3.7",
     "bootstrap-datepicker": "1.8.0",
     "c3": "0.4.23",
+    "create-react-class": "15.6.3",
     "d3": "3.5.17",
     "jquery": "3.3.1",
     "jquery-flot": "0.8.3",
@@ -27,10 +28,12 @@
     "patternfly-bootstrap-combobox": "1.1.7",
     "patternfly-react": "1.19.1",
     "promise": "8.0.2",
+    "prop-types": "15.6.1",
     "qunit-tap": "1.5.1",
     "qunitjs": "1.23.1",
     "react-bootstrap": "0.32.4",
-    "react-lite": "0.15.39",
+    "react": "16.4.0",
+    "react-dom": "16.4.0",
     "react-redux": "5.0.7",
     "react-remarkable": "1.1.3",
     "redux": "3.7.2",

pkg/docker/containers-view.jsx

@@ -19,6 +19,9 @@
 
 'use strict';
 
+var React = require('react');
+var createReactClass = require('create-react-class');
+
 var cockpit = require('cockpit');
 var _ = cockpit.gettext;
 
@@ -27,14 +30,14 @@ var docker = require('./docker');
 var atomic = require('./atomic');
 var util = require('./util');
 var searchImage = require("./search");
-var React = require('react');
+
 var Listing = require('cockpit-components-listing.jsx');
 var Select = require('cockpit-components-select.jsx');
 var moment = require('moment');
 
 moment.locale(cockpit.language);
 
-var Dropdown = React.createClass({
+var Dropdown = createReactClass({
     getDefaultProps: function () {
         return {
             actions: [ { label: '' } ]
@@ -75,7 +78,7 @@ var Dropdown = React.createClass({
     }
 });
 
-var ContainerHeader = React.createClass({
+var ContainerHeader = createReactClass({
     getInitialState: function () {
         return {
             filter: 'running',
@@ -114,7 +117,7 @@ var ContainerHeader = React.createClass({
     }
 });
 
-var ContainerDetails = React.createClass({
+var ContainerDetails = createReactClass({
     render: function () {
         var container = this.props.container;
         return (
@@ -132,7 +135,7 @@ var ContainerDetails = React.createClass({
     }
 });
 
-var ContainerProblems = React.createClass({
+var ContainerProblems = createReactClass({
     onItemClick: function (event) {
         cockpit.jump(event.currentTarget.dataset.url, cockpit.transport.host);
     },
@@ -155,7 +158,7 @@ var ContainerProblems = React.createClass({
     }
 });
 
-var ContainerList = React.createClass({
+var ContainerList = createReactClass({
     getDefaultProps: function () {
         return {
             client: {},
@@ -371,7 +374,7 @@ var ContainerList = React.createClass({
     }
 });
 
-var ImageDetails = React.createClass({
+var ImageDetails = createReactClass({
     render: function () {
         var image = this.props.image;
         var created = moment.unix(image.Created);
@@ -403,7 +406,7 @@ var ImageDetails = React.createClass({
     }
 });
 
-var ImageSecurity = React.createClass({
+var ImageSecurity = createReactClass({
     render: function () {
         var info = this.props.info;
         var text, rows;
@@ -445,7 +448,7 @@ var ImageSecurity = React.createClass({
     }
 });
 
-var ImageInline = React.createClass({
+var ImageInline = createReactClass({
     getInitialState: function () {
         return {
             vulnerableInfos: {}
@@ -500,7 +503,7 @@ var ImageInline = React.createClass({
     }
 });
 
-var ImageList = React.createClass({
+var ImageList = createReactClass({
     getDefaultProps: function () {
         return {
             client: {},
@@ -604,7 +607,7 @@ var ImageList = React.createClass({
             element = <div className="spinner" />;
         } else {
             element = <button className="btn btn-default btn-control-ct fa fa-play"
-                onClick={ this.showRunImageDialog.bind(this) }
+                onClick={ this.showRunImageDialog }
                 data-image={image.Id} />;
         }
 
@@ -639,7 +642,7 @@ var ImageList = React.createClass({
         }
 
         var actions = [
-            <button className="btn btn-danger btn-delete pficon pficon-delete"
+            <button key="delete" className="btn btn-danger btn-delete pficon pficon-delete"
                     onClick={ this.deleteImage.bind(this, image) } />
         ];
 
@@ -659,7 +662,7 @@ var ImageList = React.createClass({
 
         var imageRows = filtered.map(this.renderRow, this);
 
-        var getNewImageAction = <a role="link" tabIndex="0" onClick={this.handleSearchImageClick} className="card-pf-link-with-icon pull-right">
+        var getNewImageAction = <a key="new" role="link" tabIndex="0" onClick={this.handleSearchImageClick} className="card-pf-link-with-icon pull-right">
             <span className="pficon pficon-add-circle-o" />{_("Get new image")}
         </a>;
 
@@ -694,7 +697,7 @@ var ImageList = React.createClass({
                 <Listing.Listing title={_("Images")}
                     columnTitles={columnTitles}
                     emptyCaption={emptyCaption}
-                    actions={getNewImageAction}>
+                    actions={[ getNewImageAction ]}>
                     {imageRows}
                 </Listing.Listing>
                 {pendingRows}

pkg/docker/storage.jsx

@@ -25,6 +25,8 @@
 
     var React = require("react");
     var ReactDOM = require("react-dom");
+    var createReactClass = require('create-react-class');
+
     var dialog_view = require("cockpit-components-dialog.jsx");
 
     var python = require("python.jsx");
@@ -101,7 +103,7 @@
      *           the "Add" button is clicked.
      *
      */
-    var DriveBox = React.createClass({
+    var DriveBox = createReactClass({
         getInitialState: function () {
             return {
                 drives: this.props.model.extra_devices,
@@ -170,7 +172,7 @@
                 drive_paths[drive.path] = true;
 
                 drive_rows.push(
-                    <tr onClick={self.toggleDrive.bind(self, drive)}>
+                    <tr key={drive.path} onClick={self.toggleDrive.bind(self, drive)}>
                         <td><input type="checkbox"
                                    checked={self.driveChecked(drive)} />
                         </td>
@@ -189,7 +191,9 @@
                     <div>
                         <h4>{_("Local Disks")}</h4>
                         <table>
-                            { drive_rows }
+                            <tbody>
+                                { drive_rows }
+                            </tbody>
                         </table>
                     </div>);
             } else {
@@ -215,7 +219,7 @@
      *
      * model: The model as returned by get_storage_model.
      */
-    var PoolBox = React.createClass({
+    var PoolBox = createReactClass({
         getInitialState: function () {
             return {
                 drives: [ ]
@@ -238,7 +242,7 @@
             function render_drive_rows() {
                 return self.state.drives.map(function (drive) {
                     return (
-                        <tr>
+                        <tr key={drive.name}>
                             <td>{cockpit.format_bytes(drive.size)}</td>
                             <td><img role="presentation" src="images/drive-harddisk-symbolic.svg" /></td>
                             <td>{drive.name}{drive.shared ? _(" (shared with the OS)") : ""}</td>
@@ -248,7 +252,9 @@
 
             return (
                 <table className="drive-list">
-                    {render_drive_rows()}
+                    <tbody>
+                        {render_drive_rows()}
+                    </tbody>
                 </table>);
         }
     });
@@ -260,7 +266,7 @@
      * small: If true, a small version is rendered
      *        with a link to the setup page.
      */
-    var OverviewBox = React.createClass({
+    var OverviewBox = createReactClass({
         getInitialState: function () {
             return { total: 0, used: 0 };
         },
@@ -311,8 +317,10 @@
                         <div>
                             <div className="used-total">
                                 <table>
-                                    <tr><td>{_("Used")}</td><td>{used_fmt[0]} {used_fmt[1]}</td></tr>
-                                    <tr><td>{_("Total")}</td><td>{total_fmt[0]} {total_fmt[1]}</td></tr>
+                                    <tbody>
+                                        <tr><td>{_("Used")}</td><td>{used_fmt[0]} {used_fmt[1]}</td></tr>
+                                        <tr><td>{_("Total")}</td><td>{total_fmt[0]} {total_fmt[1]}</td></tr>
+                                    </tbody>
                                 </table>
                             </div>
                             <div>

pkg/kdump/kdump-view.jsx

@@ -21,6 +21,7 @@ var cockpit = require("cockpit");
 var _ = cockpit.gettext;
 
 var React = require("react");
+var createReactClass = require('create-react-class');
 
 var OnOffSwitch = require("cockpit-components-onoff.jsx").OnOffSwitch;
 var Select = require("cockpit-components-select.jsx");
@@ -43,7 +44,7 @@ var Tooltip = require("cockpit-components-tooltip.jsx").Tooltip;
  * nfs and ssh are disabled for now
  */
 
-var KdumpTargetBody = React.createClass({
+var KdumpTargetBody = createReactClass({
     getInitialState: function() {
         return {
             storeDest: this.props.initialTarget.target, // dialog mode, depends on location
@@ -218,7 +219,7 @@ var KdumpTargetBody = React.createClass({
  * reservedMemory    memory reserved at boot time for kdump use
  * onCrashKernel     callback to crash the kernel via kdumpClient, expects a promise
  */
-var KdumpPage = React.createClass({
+var KdumpPage = createReactClass({
     getInitialState: function() {
         return {
             dialogSettings: undefined,

pkg/lib/cockpit-components-detail-page.jsx

@@ -20,6 +20,7 @@
 'use strict';
 
 const React = require('react');
+const PropTypes = require("prop-types");
 
 require('./listing.less');
 // TODO remove next line and detail-page.less file as well once React 16 is merged
@@ -48,8 +49,8 @@ const DetailPageRow = ({title, idPrefix, children}) => {
 };
 
 DetailPageRow.propTypes = {
-    title: React.PropTypes.string,
-    idPrefix: React.PropTypes.string, // row will have no elements with id if not specified
+    title: PropTypes.string,
+    idPrefix: PropTypes.string, // row will have no elements with id if not specified
 };
 
 const DetailPageHeader = ({title, iconClass, navigateUpTitle, onNavigateUp, actions, idPrefix}) => {
@@ -75,12 +76,12 @@ const DetailPageHeader = ({title, iconClass, navigateUpTitle, onNavigateUp, acti
 };
 
 DetailPageHeader.propTypes = {
-    title: React.PropTypes.string,
-    iconClass: React.PropTypes.string, // className used for an icon
-    navigateUpTitle: React.PropTypes.string,
-    onNavigateUp: React.PropTypes.func,
-    actions: React.PropTypes.object,
-    idPrefix: React.PropTypes.string, // header will have no elements with id if not specified
+    title: PropTypes.string,
+    iconClass: PropTypes.string, // className used for an icon
+    navigateUpTitle: PropTypes.string,
+    onNavigateUp: PropTypes.func,
+    actions: PropTypes.object,
+    idPrefix: PropTypes.string, // header will have no elements with id if not specified
 };
 
 module.exports = {