Convert NewDashboardModal to functional

ibutsu · Feb 10, 2025 · cfcf054 · cfcf054
1 parent acbc040
commit cfcf054
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 72 deletions.
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
@@ -5,7 +5,6 @@ export { EmptyObject } from './empty-object';
 export { FilterTable, MetaFilter } from './filtertable';
 export { IbutsuPage } from './ibutsu-page';
 export { MultiValueInput } from './multivalueinput';
-export { NewDashboardModal } from './new-dashboard-modal';
 export { NewWidgetWizard } from './new-widget-wizard';
 export { ParamDropdown } from './widget-components';
 export { ResultView } from './result';

diff --git a/frontend/src/components/new-dashboard-modal.js b/frontend/src/components/new-dashboard-modal.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -11,83 +11,86 @@ import {
 } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
 
+const NewDashboardModal = (
+  project,
+  onSave,
+  onClose,
+  isOpen
+) => {
 
-export class NewDashboardModal extends React.Component {
-  static propTypes = {
-    project: PropTypes.object,
-    onSave: PropTypes.func,
-    onClose: PropTypes.func,
-    isOpen: PropTypes.bool
-  };
+  const [title, setTitle] = useState();
+  const [description, setDescription ] = useState();
+  const [isTitleValid, setIsTitleValid ] = useState(false);
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      widgetTypes: [],
-      title: '',
-      description: '',
-      isTitleValid: false
-    };
-  }
-
-  onTitleChange = (title) => {
-    this.setState({title});
-  }
-
-  onDescriptionChange = (description) => {
-    this.setState({description});
-  }
-
-  onSave = () => {
-    if (this.state.title === '') {
-      this.setState({isTitleValid: false});
+  const modalOnSave = () => {
+    if (title === '') {
+      setIsTitleValid(false);
       return;
     }
     let newDashboard = {
-      title: this.state.title,
-      description: this.state.description
+      title: title,
+      description: description,
+      project_id: project?.id
     };
-    if (this.props.project) {
-      newDashboard.project_id = this.props.project.id;
-    }
-    this.props.onSave(newDashboard);
-    this.setState({
-      title: '',
-      description: '',
-      isTitleValid: false
-    });
+    onSave(newDashboard);
+    setTitle();
+    setDescription();
+    setIsTitleValid(false);
   }
 
-  onClose = () => {
-    this.setState({
-      title: '',
-      description: '',
-      isTitleValid: false
-    });
-    this.props.onClose();
+  const modalOnClose = () => {
+    onClose();
+    setTitle();
+    setDescription();
+    setIsTitleValid(false);
   }
 
-  render () {
-    return (
-      <Modal
-        variant={ModalVariant.small}
-        title="New Dashboard"
-        isOpen={this.props.isOpen}
-        onClose={this.onClose}
-        actions={[
-          <Button key="save" variant="primary" onClick={this.onSave}>Save</Button>,
-          <Button key="cancel" variant="link" onClick={this.onClose}>Cancel</Button>
-        ]}
-      >
-        <Form>
-          <FormGroup label="Title" fieldId="dashboard-title" helpertextinvalid="A dashboard title is required" helpertextinvalidicon={<ExclamationCircleIcon />} validated={this.state.isTitleValid.toString()} isRequired>
-            <TextInput type="text" id="dashboard-title" name="dashboard-title" value={this.state.title} onChange={(_event, title) => this.onTitleChange(title)} validated={this.state.isTitleValid} isRequired />
-          </FormGroup>
-          <FormGroup label="Description" fieldId="dashboard-description">
-            <TextInput type="text" id="dashboard-description" name="dashboard-description" value={this.state.description} onChange={(_event, description) => this.onDescriptionChange(description)} />
-          </FormGroup>
-        </Form>
-      </Modal>
-    );
-  }
+  return(
+    <Modal
+      variant={ModalVariant.small}
+      title="New Dashboard"
+      isOpen={isOpen}
+      onClose={onClose}
+      actions={[
+        <Button key="save" variant="primary" onClick={modalOnSave}>Save</Button>,
+        <Button key="cancel" variant="link" onClick={modalOnClose}>Cancel</Button>
+      ]}
+    >
+      <Form>
+        <FormGroup
+          label="Title"
+          fieldId="dashboard-title"
+          helpertextinvalid="A dashboard title is required"
+          helpertextinvalidicon={<ExclamationCircleIcon />}
+          validated={isTitleValid.toString()}
+          isRequired>
+            <TextInput
+              type="text"
+              id="dashboard-title"
+              name="dashboard-title"
+              value={title}
+              onChange={(_event, title) => setTitle(title)}
+              validated={isTitleValid}
+              isRequired />
+        </FormGroup>
+        <FormGroup label="Description" fieldId="dashboard-description">
+          <TextInput
+            type="text"
+            id="dashboard-description"
+            name="dashboard-description"
+            value={description}
+            onChange={(_event, value) => setDescription(value)} />
+        </FormGroup>
+      </Form>
+    </Modal>
+  )
 }
+
+NewDashboardModal.propTypes = {
+  project: PropTypes.object,
+  onSave: PropTypes.func,
+  onClose: PropTypes.func,
+  isOpen: PropTypes.bool
+}
+
+export default NewDashboardModal
diff --git a/frontend/src/dashboard.js b/frontend/src/dashboard.js
@@ -32,7 +32,8 @@ import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle
 import { HttpClient } from './services/http';
 import { KNOWN_WIDGETS } from './constants';
 import { Settings } from './settings';
-import { NewDashboardModal, NewWidgetWizard, EditWidgetModal } from './components';
+import { NewWidgetWizard, EditWidgetModal } from './components';
+import NewDashboardModal from './components/new-dashboard-modal.js';
 import DeleteModal from './components/delete-modal.js';
 import {
   GenericAreaWidget,