Fix React's createClass reference

The `React.createClass` has been removed from React.

For legacy code, there's `create-react-class` npm package.

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: {},

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,
@@ -215,7 +217,7 @@
      *
      * model: The model as returned by get_storage_model.
      */
-    var PoolBox = React.createClass({
+    var PoolBox = createReactClass({
         getInitialState: function () {
             return {
                 drives: [ ]
@@ -260,7 +262,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 };
         },

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-dialog.jsx

@@ -21,6 +21,8 @@ var cockpit = require("cockpit");
 var React = require("react");
 var ReactDOM = require("react-dom");
 var PropTypes = require("prop-types");
+var createReactClass = require('create-react-class');
+
 var _ = cockpit.gettext;
 
 require("page.css");
@@ -47,7 +49,7 @@ require("cockpit-components-dialog.css");
  *  - idle_message optional, always show this message on the last row when idle
  *  - dialog_done optional, callback when dialog is finished (param true if success, false on cancel)
  */
-var DialogFooter = React.createClass({
+var DialogFooter = createReactClass({
     propTypes: {
         cancel_clicked: PropTypes.func,
         cancel_caption: PropTypes.string,
@@ -247,7 +249,7 @@ var DialogFooter = React.createClass({
  *  - footer (react element, top element should be of class modal-footer)
  *  - id optional, id that is assigned to the top level dialog node, but not the backdrop
  */
-var Dialog = React.createClass({
+var Dialog = createReactClass({
     propTypes: {
         // TODO: fix following by refactoring the logic showing modal dialog (recently show_modal_dialog())
         title: PropTypes.string, // is effectively required, but show_modal_dialog() provides initially no props and resets them later.

pkg/lib/cockpit-components-file-autocomplete.jsx

@@ -22,10 +22,12 @@
 var cockpit = require("cockpit");
 var React = require("react");
 var PropTypes = require("prop-types");
+var createReactClass = require('create-react-class');
+
 var _ = cockpit.gettext;
 require("./cockpit-components-file-autocomplete.css");
 
-var FileAutoComplete = React.createClass({
+var FileAutoComplete = createReactClass({
     propTypes: {
         id: PropTypes.string,
         placeholder: PropTypes.string,

pkg/lib/cockpit-components-onoff.jsx

@@ -21,6 +21,8 @@
 
 var cockpit = require("cockpit");
 var React = require("react");
+var createReactClass = require('create-react-class');
+
 var _ = cockpit.gettext;
 
 require("./cockpit-components-onoff.css");
@@ -32,7 +34,7 @@ require("./cockpit-components-onoff.css");
  * onChange   triggered when the switch is flipped, parameter: new state
  * enabled    whether the component is enabled or not, defaults to true
  */
-var OnOffSwitch = React.createClass({
+var OnOffSwitch = createReactClass({
     getDefaultProps: function() {
         return {
             captionOff: _("Off"),

pkg/lib/cockpit-components-terminal.jsx

@@ -23,6 +23,8 @@
     var React = require("react");
     var ReactDOM = require("react-dom");
     var PropTypes = require("prop-types");
+    var createReactClass = require('create-react-class');
+
     var Term = require("term");
 
     require("console.css");
@@ -42,7 +44,7 @@
      *
      * Call focus() to set the input focus on the terminal.
      */
-    var Terminal = React.createClass({
+    var Terminal = createReactClass({
         propTypes: {
             cols: PropTypes.number,
             rows: PropTypes.number,

pkg/lib/cockpit-components-tooltip.jsx

@@ -20,6 +20,7 @@
 "use strict";
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 
 require('./tooltip.css');
 
@@ -38,7 +39,7 @@ require('./tooltip.css');
  * outermost element of the tooltip.
  */
 
-var Tooltip = React.createClass({
+var Tooltip = createReactClass({
     getInitialState: function () {
         return { open: false, pos: "top" };
     },

pkg/playground/react-demo-dialog.jsx

@@ -21,11 +21,13 @@
     "use strict";
 
     var React = require("react");
+    var createReactClass = require('create-react-class');
+
     var Select = require("cockpit-components-select.jsx");
 
     /* Sample dialog body
      */
-    var PatternDialogBody = React.createClass({
+    var PatternDialogBody = createReactClass({
         selectChanged: function(value) {
             console.log("new value: " + value);
         },

pkg/playground/react-demo-listing.jsx

@@ -23,13 +23,14 @@
     var React = require("react");
     var ReactDOM = require("react-dom");
     var PropTypes = require("prop-types");
+    var createReactClass = require('create-react-class');
 
     var cockpitListing = require("cockpit-components-listing.jsx");
 
     /* Sample tab renderer for listing pattern
      * Shows a caption and the time it was instantiated
      */
-    var DemoListingTab = React.createClass({
+    var DemoListingTab = createReactClass({
         propTypes: {
             description: PropTypes.string.isRequired,
         },

pkg/playground/react-demo-onoff.jsx

@@ -19,10 +19,11 @@
 
 var React = require("react");
 var ReactDOM = require("react-dom");
+var createReactClass = require('create-react-class');
 
 var OnOffSwitch = require("cockpit-components-onoff.jsx").OnOffSwitch;
 
-var OnOffDemo = React.createClass({
+var OnOffDemo = createReactClass({
     getInitialState: function() {
         return {
             onOffA: true,

pkg/selinux/setroubleshoot-view.jsx

@@ -21,14 +21,15 @@ var cockpit = require("cockpit");
 var _ = cockpit.gettext;
 
 var React = require("react");
+var createReactClass = require('create-react-class');
 
 var cockpitListing = require("cockpit-components-listing.jsx");
 var OnOffSwitch = require("cockpit-components-onoff.jsx").OnOffSwitch;
 
 /* Show details for an alert, including possible solutions
  * Props correspond to an item in the setroubleshoot dataStore
  */
-var SELinuxEventDetails = React.createClass({
+var SELinuxEventDetails = createReactClass({
     getInitialState: function() {
         var expanded;
         // all details are collapsed by default
@@ -154,7 +155,7 @@ var SELinuxEventDetails = React.createClass({
 });
 
 /* Show the audit log events for an alert */
-var SELinuxEventLog = React.createClass({
+var SELinuxEventLog = createReactClass({
     render: function() {
         if (!this.props.details) {
             // details should be requested by default, so we just need to wait for them
@@ -185,7 +186,7 @@ var SELinuxEventLog = React.createClass({
  *   - 'waiting' - display spinner
  *   - 'error'   - display error icon
  */
-var EmptyState = React.createClass({
+var EmptyState = createReactClass({
     render: function() {
         var description = null;
         if (this.props.description)
@@ -220,7 +221,7 @@ var EmptyState = React.createClass({
 /* Component to show a dismissable error, message as child text
  * dismissError callback function triggered when the close button is pressed
  */
-var DismissableError = React.createClass({
+var DismissableError = createReactClass({
     handleDismissError: function(e) {
         // only consider primary mouse button
         if (!e || e.button !== 0)
@@ -248,7 +249,7 @@ var DismissableError = React.createClass({
  * changeSelinuxMode  function to use for changing the selinux enforcing mode
  * dismissError       function to dismiss the error message
  */
-var SELinuxStatus = React.createClass({
+var SELinuxStatus = createReactClass({
     render: function() {
         var errorMessage;
         if (this.props.selinuxStatusError) {
@@ -311,7 +312,7 @@ var SELinuxStatus = React.createClass({
  * changeSelinuxMode  function to use for changing the selinux enforcing mode
  * dismissStatusError function that is triggered to dismiss the selinux status error
  */
-var SETroubleshootPage = React.createClass({
+var SETroubleshootPage = createReactClass({
     handleDeleteAlert: function(alertId, e) {
         // only consider primary mouse button
         if (!e || e.button !== 0)

pkg/shell/active-pages-dialog.jsx

@@ -18,6 +18,7 @@
  */
 
 var React = require("react");
+var createReactClass = require('create-react-class');
 
 var cockpit = require("cockpit");
 var _ = cockpit.gettext;
@@ -31,7 +32,7 @@ var ListingRow = listingPattern.ListingRow;
  *  - iframes          iframe elements on page to list
  *  - selectionChanged callback when the select state changed, parameters: frame object, new value
  */
-var ActivePagesDialogBody = React.createClass({
+var ActivePagesDialogBody = createReactClass({
     render: function() {
         var self = this;
         var frames = self.props.iframes.map(function(frame) {

pkg/storaged/content-views.jsx

@@ -25,6 +25,7 @@ import {
 import utils from "./utils.js";
 
 import React from "react";
+import createReactClass from 'create-react-class';
 
 import { Listing, ListingRow } from "cockpit-components-listing.jsx";
 import { StorageButton, StorageLink } from "./storage-controls.jsx";
@@ -609,7 +610,7 @@ function vgroup_rows(client, vgroup) {
     return rows;
 }
 
-var VGroup = React.createClass({
+var VGroup = createReactClass({
     render: function () {
         var self = this;
         var vgroup = this.props.vgroup;