Fix New widget wizard

ibutsu · Apr 22, 2024 · bf6223e · bf6223e
1 parent 9a98452
commit bf6223e
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 36 deletions.
diff --git a/frontend/src/components/new-widget-wizard.js b/frontend/src/components/new-widget-wizard.js
@@ -5,8 +5,11 @@ import {
 	Checkbox,
 	Form,
 	FormGroup,
+  FormHelperText,
 	Grid,
 	GridItem,
+  HelperText,
+  HelperTextItem,
 	Modal,
 	ModalVariant,
 	Radio,
@@ -16,21 +19,27 @@ import {
 	TextArea,
 	TextContent,
 	TextInput,
-	Title
+	Title,
+  Wizard,
+  WizardHeader,
+  WizardStep,
 } from '@patternfly/react-core';
+
 import {
-	Wizard
-} from '@patternfly/react-core/deprecated';
-import {
-	Table,
-	TableHeader,
-	TableBody
-} from '@patternfly/react-table/deprecated';
-import { ExclamationCircleIcon } from '@patternfly/react-icons';
-import Linkify from 'react-linkify';
+  Tbody,
+  Table,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from '@patternfly/react-table'
+// import {
+// 	Table,
+// 	TableHeader,
+// 	TableBody
+// } from '@patternfly/react-table/deprecated';
 
 import { HttpClient } from '../services/http';
-import { linkifyDecorator } from './decorators';
 import { Settings } from '../settings';
 
 export class NewWidgetWizard extends React.Component {
@@ -165,12 +174,22 @@ export class NewWidgetWizard extends React.Component {
     this.setState({areParamsFilled: areParamsFilled});
   }
 
-  onNext = ({id}) => {
-    if (id === 3) {
+  handleRequiredParam = (param) => {
+    if (param.required) {
+      if (this.state.params[param.name] === "") {
+        return "error"
+      }
+    }
+    // TODO: Handle parameter types
+    return "default"
+  }
+
+  onNext = (_event, currentStep) => {
+    if (currentStep.id === 3) {
       this.onParamChange('', null);
     }
     this.setState({
-      stepIdReached: this.state.stepIdReached < id ? id : this.state.stepIdReached
+      stepIdReached: this.state.stepIdReached < currentStep.id ? currentStep.id : this.state.stepIdReached
     });
   }
 
@@ -210,11 +229,27 @@ export class NewWidgetWizard extends React.Component {
         component: (
           <Form isHorizontal>
             <Title headingLevel="h1" size="xl">Set widget information</Title>
-            <FormGroup label="Title" fieldId="widget-title" helperText="A title for the widget" validated={this.isTitleValid} helperTextInvalid="Please enter a title for this widget" helperTextInvalidIcon={<ExclamationCircleIcon/>} isRequired>
-              <TextInput type="text" id="widget-title" name="widget-title" value={this.state.title} onChange={(_event, value) => this.onTitleChange(value)} validated={this.state.isTitleValid} isRequired />
+            <FormGroup label="Title" fieldId="widget-title" isRequired>
+              <TextInput type="text" id="widget-title" name="widget-title" value={this.state.title} onChange={(_event, value) => this.onTitleChange(value)} validated={this.state.isTitleValid ? 'default' : 'error'} isRequired />
+              {this.state.isTitleValid !== true && (
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem variant="error">
+                    Please enter a title for this widget
+                  </HelperTextItem>
+                </HelperText>
+              </FormHelperText>
+              )}
             </FormGroup>
-            <FormGroup label="Weight" fieldId="widget-weight" helperText="How widgets are ordered on the dashboard">
+            <FormGroup label="Weight" fieldId="widget-weight">
               <TextInput type="number" id="widget-weight" name="widget-weight" value={this.state.weight} onChange={(_event, value) => this.onWeightChange(value)} />
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem variant="default">
+                    How widgets are ordered on the dashboard
+                  </HelperTextItem>
+                </HelperText>
+              </FormHelperText>
             </FormGroup>
           </Form>
         )
@@ -234,7 +269,6 @@ export class NewWidgetWizard extends React.Component {
                   <FormGroup
                     label={param.name}
                     fieldId={param.name}
-                    helperText={<Linkify componentDecorator={linkifyDecorator}>{param.description}</Linkify>}
                     isRequired={param.required}>
                     <TextInput
                       value={this.state.params[param.name]}
@@ -244,7 +278,15 @@ export class NewWidgetWizard extends React.Component {
                       name={param.name}
                       onChange={(event, value) => this.onParamChange(value, event)}
                       isRequired={param.required}
+                      validated={this.handleRequiredParam(param)}
                     />
+                    <FormHelperText>
+                      <HelperText>
+                        <HelperTextItem variant="default">
+                          {param.description}
+                        </HelperTextItem>
+                      </HelperText>
+                    </FormHelperText>
                   </FormGroup>
                 }
                 {param.type === 'boolean' &&
@@ -286,6 +328,7 @@ export class NewWidgetWizard extends React.Component {
         id: 4,
         name: 'Review details',
         canJumpTo: stepIdReached >= 4,
+        enableNext: true,
         nextButtonText: 'Finish',
         component: (
           <Stack hasGutter>
@@ -311,13 +354,23 @@ export class NewWidgetWizard extends React.Component {
                 </GridItem>
                 <GridItem span="10">
                   <Table
-                    cells={["Name", "Value"]}
                     variant="compact"
-                    borders="compactBorderless"
-                    rows={Object.entries(this.state.params).map(param => { return [param[0], param[1].toString()]; })}
+                    borders={true}
                     aria-label="Parameters">
-                    <TableHeader />
-                    <TableBody />
+                    <Thead>
+                      <Tr>
+                        <Th>Name</Th>
+                        <Th>Value</Th>
+                      </Tr>
+                    </Thead>
+                    <Tbody>
+                      {Object.entries(this.state.params).map(param => (
+                        <Tr key={param[0]}>
+                          <Td>{param[0]}</Td>
+                          <Td>{param[1].toString()}</Td>
+                        </Tr>
+                      ))}
+                    </Tbody>
                   </Table>
                 </GridItem>
               </Grid>
@@ -333,20 +386,32 @@ export class NewWidgetWizard extends React.Component {
         showClose={false}
         onClose={this.onClose}
         hasNoBodyWrapper
-        aria-describedby="add-widget-description"
-        aria-labelledby="add-widget-title"
+        aria-label='Add widget modal'
       >
         <Wizard
-          titleId="add-widget-title"
-          descriptionId="add-widget-description"
-          title="Add Widget"
-          description="Add a widget to the current dashboard"
-          steps={steps}
-          onNext={this.onNext}
+          height={400}
+          header={
+            <WizardHeader
+              onClose={this.onClose}
+              title="Add Widget"
+              description="Add a widget to the current dashboard"
+            />
+          }
+          onStepChange={this.onNext}
           onSave={this.onSave}
           onClose={this.onClose}
-          height={400}
-        />
+        >
+          {steps.map(step => (
+            <WizardStep
+              key={step.id}
+              name={step.name}
+              id={step.id}
+              footer={{ isNextDisabled: !step.enableNext, nextButtonText: step.nextButtonText? step.nextButtonText : 'Next' }}
+            >
+              {step.component}
+            </WizardStep>
+          ))}
+        </Wizard>
       </Modal>
     );
   }

diff --git a/frontend/src/widgets/genericarea.js b/frontend/src/widgets/genericarea.js
@@ -157,7 +157,6 @@ export class GenericAreaWidget extends React.Component {
 
   render() {
     const legendData = this.getLegendData();
-    console.log("HERE")
     return (
       <Card>
         <WidgetHeader title={this.title} getDataFunc={this.getData} onEditClick={this.props.onEditClick} onDeleteClick={this.props.onDeleteClick}/>

diff --git a/frontend/src/widgets/importancecomponent.js b/frontend/src/widgets/importancecomponent.js
@@ -84,7 +84,7 @@ export class ImportanceComponentWidget extends React.Component {
         {(!this.state.dataError && !this.state.isLoading) &&
         <CardBody>
           {this.state.data.table_data.map((tdat) => (
-            <>
+            <div key={tdat.component}>
               <Text key={tdat.component} component="h2">{tdat.component}</Text>
               <Table aria-label="importance-component-table" variant="compact">
                 <Thead>
@@ -105,7 +105,7 @@ export class ImportanceComponentWidget extends React.Component {
                   ))}
                 </Tbody>
               </Table>
-            </>
+            </div>
           ))}
         </CardBody>
         }