Merge branch 'master' into refactor/remove-react-find-dom-node

graylog2-web-interface/packages/graylog-web-plugin/package.json

@@ -31,11 +31,9 @@
   "dependencies": {
     "@graylog/sawmill": "2.0.23",
     "@tanstack/react-query": "4.36.1",
-    "@types/create-react-class": "15.6.8",
     "@types/jquery": "3.5.32",
     "@types/react": "18.3.12",
     "babel-preset-graylog": "file:../babel-preset-graylog",
-    "create-react-class": "15.7.0",
     "eslint-config-graylog": "file:../eslint-config-graylog",
     "formik": "2.4.6",
     "history": "^5.3.0",

graylog2-web-interface/src/components/bootstrap/BootstrapModalConfirm.md

@@ -1,27 +1,27 @@
 ```js
-import createReactClass from 'create-react-class';
 import { Button } from 'components/bootstrap';
 
-const BootstrapModalConfirmExample = createReactClass({
-  getInitialState() {
-    return {
+class BootstrapModalConfirmExample extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       showModal: false,
       confirmed: undefined,
     };
-  },
+  }
 
   openConfirmation() {
     this.setState({ showModal: true });
-  },
+  };
 
   onCancel() {
     this.setState({ confirmed: false, showModal: false });
-  },
+  };
 
   onConfirm(callback) {
     this.setState({ confirmed: true, showModal: false });
     callback();
-  },
+  };
 
   render() {
     const { confirmed, showModal } = this.state;
@@ -40,7 +40,7 @@ const BootstrapModalConfirmExample = createReactClass({
       </div>
     );
   }
-});
+}
 
 <BootstrapModalConfirmExample />
 ```

graylog2-web-interface/src/components/common/ColorPicker.md

@@ -1,16 +1,16 @@
 ```js
-import createReactClass from 'create-react-class';
-
-const ColorPickerExample = createReactClass({
-  getInitialState() {
-    return {
+class ColorPickerExample extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       color: undefined,
     };
-  },
+    this.handleColorChange = this.handleColorChange.bind(this);
+  };
 
   handleColorChange(color) {
     this.setState({ color: color });
-  },
+  };
 
   render() {
     const { color } = this.state;
@@ -20,8 +20,8 @@ const ColorPickerExample = createReactClass({
         <ColorPicker color={color} onChange={this.handleColorChange} />
       </div>
     );
-  },
-});
+  };
+}
 
 <ColorPickerExample />
 ```

graylog2-web-interface/src/components/common/ColorPickerPopover.md

@@ -1,18 +1,18 @@
 ```js
-import createReactClass from 'create-react-class';
 import { Button } from 'components/bootstrap';
 
-const ColorPickerOverlayExample = createReactClass({
-  getInitialState() {
-    return {
+class ColorPickerOverlayExample extends React.Component {
+  constructor(props) {
+    this.state = {
       color: undefined,
     };
-  },
+    this.handleColorChange = this.handleColorChange.bind(this);
+  }
 
   handleColorChange(color, _, hidePopover) {
     hidePopover();
     this.setState({ color: color });
-  },
+  };
 
   render() {
     const { color } = this.state;
@@ -27,8 +27,8 @@ const ColorPickerOverlayExample = createReactClass({
                             onChange={this.handleColorChange} />
       </div>
     );
-  },
-});
+  };
+}
 
 <ColorPickerOverlayExample />
 ```

graylog2-web-interface/src/components/common/ControlledTableList.md

@@ -1,11 +1,11 @@
 ```js
-import createReactClass from 'create-react-class';
 import Immutable from 'immutable';
 import { Col, Row } from 'components/bootstrap';
 
-const ControlledTableListExample = createReactClass({
-  getInitialState() {
-    return {
+class ControlledTableListExample extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       items: Immutable.List([
         { id: '1', title: 'One', secret_key: 'uno', description: 'First number' },
         { id: '2', title: 'Two', secret_key: 'dos', description: 'Second number' },
@@ -14,7 +14,8 @@ const ControlledTableListExample = createReactClass({
         { id: '5', title: 'Five', secret_key: 'cinco', description: 'Fifth number' },
       ]),
     };
-  },
+    this.formatItems = this.formatItems.bind(this);
+  };
 
   formatItems(items) {
     return items.map(item => {
@@ -33,7 +34,7 @@ const ControlledTableListExample = createReactClass({
         </ControlledTableList.Item>
       )
     });
-  },
+  };
 
   render() {
     const { items } = this.state;
@@ -46,8 +47,8 @@ const ControlledTableListExample = createReactClass({
         {this.formatItems(items)}
       </ControlledTableList>
     );
-  },
-});
+  };
+}
 
 <ControlledTableListExample />
 ```

graylog2-web-interface/src/components/common/ExpandableList.md

@@ -1,35 +1,29 @@
 ```js
-import createReactClass from 'create-react-class';
 import { ExpandableListItem } from 'components/common';
 
-const ExpandableListExample = createReactClass({
-
-  render() {
-    return (
+const ExpandableListExample = () => (
+  <ExpandableList>
+    <ExpandableListItem selectable expanded header="Wheel of Time Character">
       <ExpandableList>
-        <ExpandableListItem selectable expanded header="Wheel of Time Character">
+        <ExpandableListItem selectable header="Andor">
+          <ExpandableList>
+            <ExpandableListItem selectable expandable={false} header="Elayne" />
+            <ExpandableListItem selectable expandable={false} header="Morgase" />
+          </ExpandableList>
+        </ExpandableListItem>
+        <ExpandableListItem selectable header="Edmonds Field">
           <ExpandableList>
-            <ExpandableListItem selectable header="Andor">
-              <ExpandableList>
-                <ExpandableListItem selectable expandable={false} header="Elayne" />
-                <ExpandableListItem selectable expandable={false} header="Morgase" />
-              </ExpandableList>
-            </ExpandableListItem>
-            <ExpandableListItem selectable header="Edmonds Field">
-              <ExpandableList>
-                <ExpandableListItem selectable expandable={false} header="Rand" />
-                <ExpandableListItem selectable expandable={false} header="Perrin" />
-                <ExpandableListItem selectable expandable={false} header="Egwene" />
-                <ExpandableListItem checked expandable={false} header="Mat" />
-                <ExpandableListItem expandable={false} selectable header="Nynaeve" />
-              </ExpandableList>
-            </ExpandableListItem>
+            <ExpandableListItem selectable expandable={false} header="Rand" />
+            <ExpandableListItem selectable expandable={false} header="Perrin" />
+            <ExpandableListItem selectable expandable={false} header="Egwene" />
+            <ExpandableListItem checked expandable={false} header="Mat" />
+            <ExpandableListItem expandable={false} selectable header="Nynaeve" />
           </ExpandableList>
         </ExpandableListItem>
       </ExpandableList>
-    );
-  },
-});
+    </ExpandableListItem>
+  </ExpandableList>
+);
 
 <ExpandableListExample />
 

graylog2-web-interface/src/components/common/PaginatedList.md

@@ -1,25 +1,25 @@
 ```js
-import createReactClass from 'create-react-class';
-
-const PaginatedListExample = createReactClass({
-  getInitialState() {
+class PaginatedListExample extends React.Component {
+  constructor(props) {
+    super(props);
     const items = [];
     for(let i = 1; i <= 12; i++)
       items.push(i);
 
-    return {
+    this.state = {
       currentPage: 0,
       items: items,
       pageSize: 5,
     };
-  },
+    this.onPageChange = this.onPageChange.bind(this);
+  };
 
   onPageChange(currentPage, pageSize) {
     this.setState({
       currentPage: currentPage - 1,
       pageSize: pageSize,
     });
-  },
+  };
 
   render() {
     const { currentPage, items, pageSize } = this.state;
@@ -43,8 +43,8 @@ const PaginatedListExample = createReactClass({
         </table>
       </PaginatedList>
     );
-  },
-});
+  };
+}
 
 <PaginatedListExample />
 ```

graylog2-web-interface/src/components/common/ReactGridContainer.md

@@ -1,30 +1,30 @@
 Regular `ReactGridContainer`:
 ```js
-import createReactClass from 'create-react-class';
-
-const ReactGridContainerExample = createReactClass({
-  getInitialState() {
-    return {
+class ReactGridContainerExample extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       positions: {
         '1': { col: 0, row: 0, height: 1, width: 2 },
         '2': { col: 2, row: 0, height: 1, width: 4 },
         '3': { col: 6, row: 0, height: 1, width: 2 },
         '4': { col: 8, row: 0, height: 1, width: 4 },
       },
     };
-  },
+    this.onPositionsChange = this.onPositionsChange.bind(this);
+  }
 
   onPositionsChange(nextPositions) {
     console.log('positions changed to ', nextPositions);
-  },
+  };
 
   widgetDiv(id) {
     return (
       <div key={id} style={{ backgroundColor: '#f9f9f9', fontSize: '6em', textAlign: 'center' }}>
         {id}
       </div>
     );
-  },
+  }
 
   render() {
     const { positions } = this.state;
@@ -47,21 +47,21 @@ const ReactGridContainerExample = createReactClass({
         {this.widgetDiv(4)}
       </ReactGridContainer>
     );
-  },
-});
+  }
+}
 
 <ReactGridContainerExample />
 ```
 
 
 Lock or block resizing in `ReactGridContainer`:
 ```js
-import createReactClass from 'create-react-class';
 import { Button, ButtonToolbar } from 'components/bootstrap';
 
-const ReactGridContainerExampleLocked = createReactClass({
-  getInitialState() {
-    return {
+class ReactGridContainerExampleLocked extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       positions: {
         '1': { col: 0, row: 0, height: 1, width: 2 },
         '2': { col: 2, row: 0, height: 1, width: 4 },
@@ -71,27 +71,29 @@ const ReactGridContainerExampleLocked = createReactClass({
       locked: false,
       isResizable: false,
     };
-  },
+    this.toggleLocked = this.toggleLocked.bind(this);
+    this.toggleIsResizable = this.toggleIsResizable.bind(this);
+  }
 
   onPositionsChange(nextPositions) {
     console.log('positions changed to ', nextPositions);
-  },
+  }
 
   toggleLocked() {
     this.setState({ locked: !this.state.locked });
-  },
+  };
 
   toggleIsResizable() {
     this.setState({ isResizable: !this.state.isResizable });
-  },
+  };
 
   widgetDiv(id) {
     return (
       <div key={id} style={{ backgroundColor: '#f9f9f9', fontSize: '6em', textAlign: 'center' }}>
         {id}
       </div>
     );
-  },
+  }
 
   render() {
     const { positions, locked, isResizable } = this.state;
@@ -128,8 +130,8 @@ const ReactGridContainerExampleLocked = createReactClass({
         </ReactGridContainer>
       </div>
     );
-  },
-});
+  }
+}
 
 <ReactGridContainerExampleLocked />
 ```