FI-2540: Make input label sizes consistent (#469)

* remove text area input * compose oauth input text fields * fix labelling bug * add tests * adjust styles * update packages --------- Co-authored-by: Alyssa Wang <[email protected]>
inferno-framework · Apr 24, 2024 · 1828405 · 1828405
1 parent 038d0e2
commit 1828405
Show file tree

Hide file tree

Showing 11 changed files with 258 additions and 126 deletions.
diff --git a/client/src/components/App/__tests__/Page.test.tsx b/client/src/components/App/__tests__/Page.test.tsx
@@ -5,7 +5,7 @@ import { testSuites } from '~/components/App/__mocked_data__/mockData';
 import Page from '../Page';
 
 describe('The Page Component', () => {
-  test('sets page title on render', /* async */ () => {
+  it('sets page title on render', /* async */ () => {
     const pageTitle = 'Inferno Test Suites';
     const routes = [
       {

diff --git a/client/src/components/InputsModal/FieldLabel.tsx b/client/src/components/InputsModal/FieldLabel.tsx
@@ -23,8 +23,7 @@ const FieldLabel: FC<FieldLabelProps> = ({ requirement, isMissingInput = false }
   return (
     <>
       {isMissingInput && <RequiredInputWarning />}
-      {fieldLabelText}
-      {requiredLabel}
+      {`${fieldLabelText}${requiredLabel}`}
       {lockedIcon}
     </>
   );

diff --git a/client/src/components/InputsModal/InputCheckboxGroup.tsx b/client/src/components/InputsModal/InputCheckboxGroup.tsx
@@ -4,9 +4,9 @@ import {
   FormControl,
   FormControlLabel,
   FormGroup,
-  FormHelperText,
   FormLabel,
   ListItem,
+  Typography,
 } from '@mui/material';
 import { CheckboxValues, TestInput } from '~/models/testSuiteModels';
 import FieldLabel from './FieldLabel';
@@ -107,7 +107,9 @@ const InputCheckboxGroup: FC<InputCheckboxGroupProps> = ({
           <FieldLabel requirement={requirement} isMissingInput={isMissingInput} />
         </FormLabel>
         {requirement.description && (
-          <FormHelperText sx={{ mx: 0 }}>{requirement.description}</FormHelperText>
+          <Typography variant="subtitle1" className={classes.inputDescription}>
+            {requirement.description}
+          </Typography>
         )}
         <FormGroup aria-label={`${requirement.name}-checkboxes-group`}>
           {requirement.options?.list_options?.map((option, i) => (

diff --git a/client/src/components/InputsModal/InputOAuthCredentials.tsx b/client/src/components/InputsModal/InputOAuthCredentials.tsx
@@ -3,11 +3,13 @@ import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
 import {
   Card,
   CardContent,
-  FormHelperText,
+  FormControl,
+  FormLabel,
+  Input,
   InputLabel,
   List,
   ListItem,
-  TextField,
+  Typography,
 } from '@mui/material';
 import { OAuthCredentials, TestInput } from '~/models/testSuiteModels';
 import FieldLabel from './FieldLabel';
@@ -24,6 +26,7 @@ export interface InputOAuthCredentialsProps {
 export interface InputOAuthField {
   name: string;
   label?: string | ReactJSXElement;
+  description?: string; // currently empty
   required?: boolean; // default behavior should be false
   hide?: boolean; // default behavior should be false
   locked?: boolean; // default behavior should be false
@@ -112,31 +115,45 @@ const InputOAuthCredentials: FC<InputOAuthCredentialsProps> = ({
 
     return (
       <ListItem disabled={field.locked} key={field.name}>
-        <TextField
+        <FormControl
+          component="fieldset"
+          id={`requirement${index}_input`}
           disabled={requirement.locked}
-          required={field.required}
+          required={!requirement.optional}
           error={getIsMissingInput(field)}
-          id={`requirement${index}_${field.name}`}
-          label={fieldLabel}
-          helperText={requirement.description}
-          value={oAuthCredentials[field.name as keyof OAuthCredentials]}
-          className={classes.inputField}
-          variant="standard"
-          color="secondary"
           fullWidth
-          onBlur={(e) => {
-            if (e.currentTarget === e.target) {
-              setHasBeenModified({ ...hasBeenModified, [field.name]: true });
-            }
-          }}
-          onChange={(event) => {
-            const value = event.target.value;
-            oAuthCredentials[field.name as keyof OAuthCredentials] = value;
-            inputsMap.set(requirement.name, JSON.stringify(oAuthCredentials));
-            setInputsMap(new Map(inputsMap));
-          }}
-          InputLabelProps={{ shrink: true }}
-        />
+          className={classes.inputField}
+        >
+          <FormLabel htmlFor={`requirement${index}_${field.name}`} className={classes.inputLabel}>
+            {fieldLabel}
+          </FormLabel>
+          {field.description && (
+            <Typography variant="subtitle1" className={classes.inputDescription}>
+              {field.description}
+            </Typography>
+          )}
+          <Input
+            disabled={requirement.locked}
+            required={field.required}
+            error={getIsMissingInput(field)}
+            id={`requirement${index}_${field.name}`}
+            value={oAuthCredentials[field.name as keyof OAuthCredentials]}
+            className={classes.inputField}
+            color="secondary"
+            fullWidth
+            onBlur={(e) => {
+              if (e.currentTarget === e.target) {
+                setHasBeenModified({ ...hasBeenModified, [field.name]: true });
+              }
+            }}
+            onChange={(event) => {
+              const value = event.target.value;
+              oAuthCredentials[field.name as keyof OAuthCredentials] = value;
+              inputsMap.set(requirement.name, JSON.stringify(oAuthCredentials));
+              setInputsMap(new Map(inputsMap));
+            }}
+          />
+        </FormControl>
       </ListItem>
     );
   };
@@ -153,7 +170,9 @@ const InputOAuthCredentials: FC<InputOAuthCredentialsProps> = ({
             <FieldLabel requirement={requirement} />
           </InputLabel>
           {requirement.description && (
-            <FormHelperText sx={{ mx: 0 }}>{requirement.description}</FormHelperText>
+            <Typography variant="subtitle1" className={classes.inputDescription}>
+              {requirement.description}
+            </Typography>
           )}
           <List>{oAuthFields.map((field) => !field.hide && oAuthField(field))}</List>
         </CardContent>

diff --git a/client/src/components/InputsModal/InputRadioGroup.tsx b/client/src/components/InputsModal/InputRadioGroup.tsx
@@ -2,11 +2,11 @@ import React, { FC, useEffect } from 'react';
 import {
   FormControl,
   FormControlLabel,
-  FormHelperText,
   FormLabel,
   ListItem,
   Radio,
   RadioGroup,
+  Typography,
 } from '@mui/material';
 import { TestInput } from '~/models/testSuiteModels';
 import FieldLabel from './FieldLabel';
@@ -60,7 +60,9 @@ const InputRadioGroup: FC<InputRadioGroupProps> = ({
           <FieldLabel requirement={requirement} />
         </FormLabel>
         {requirement.description && (
-          <FormHelperText sx={{ mx: 0 }}>{requirement.description}</FormHelperText>
+          <Typography variant="subtitle1" className={classes.inputDescription}>
+            {requirement.description}
+          </Typography>
         )}
         <RadioGroup
           row

diff --git a/client/src/components/InputsModal/InputTextArea.tsx b/client/src/components/InputsModal/InputTextArea.tsx
diff --git a/client/src/components/InputsModal/InputTextField.tsx b/client/src/components/InputsModal/InputTextField.tsx
@@ -1,9 +1,8 @@
 import React, { FC } from 'react';
-import { ListItem, TextField } from '@mui/material';
+import { FormControl, FormLabel, Input, ListItem, Typography } from '@mui/material';
 import { TestInput } from '~/models/testSuiteModels';
 import FieldLabel from './FieldLabel';
 import useStyles from './styles';
-import lightTheme from 'styles/theme';
 
 export interface InputTextFieldProps {
   requirement: TestInput;
@@ -26,33 +25,46 @@ const InputTextField: FC<InputTextFieldProps> = ({
 
   return (
     <ListItem>
-      <TextField
+      <FormControl
+        component="fieldset"
+        id={`requirement${index}_control`}
         disabled={requirement.locked}
         required={!requirement.optional}
         error={isMissingInput}
-        id={`requirement${index}_input`}
-        className={classes.inputField}
-        variant="standard"
-        color="secondary"
         fullWidth
-        label={<FieldLabel requirement={requirement} isMissingInput={isMissingInput} />}
-        helperText={requirement.description}
-        value={inputsMap.get(requirement.name)}
-        onBlur={(e) => {
-          if (e.currentTarget === e.target) {
-            setHasBeenModified(true);
-          }
-        }}
-        onChange={(event) => {
-          const value = event.target.value;
-          inputsMap.set(requirement.name, value);
-          setInputsMap(new Map(inputsMap));
-        }}
-        InputLabelProps={{ shrink: true }}
-        FormHelperTextProps={{
-          sx: { '&.Mui-disabled': { color: lightTheme.palette.common.grayDark } },
-        }}
-      />
+        className={classes.inputField}
+      >
+        <FormLabel htmlFor={`requirement${index}_input`} className={classes.inputLabel}>
+          <FieldLabel requirement={requirement} isMissingInput={isMissingInput} />
+        </FormLabel>
+        {requirement.description && (
+          <Typography variant="subtitle1" className={classes.inputDescription}>
+            {requirement.description}
+          </Typography>
+        )}
+        <Input
+          disabled={requirement.locked}
+          required={!requirement.optional}
+          error={isMissingInput}
+          id={`requirement${index}_input`}
+          className={classes.inputField}
+          color="secondary"
+          fullWidth
+          multiline={requirement.type === 'textarea'}
+          rows={requirement.type === 'textarea' ? 4 : 1}
+          value={inputsMap.get(requirement.name)}
+          onBlur={(e) => {
+            if (e.currentTarget === e.target) {
+              setHasBeenModified(true);
+            }
+          }}
+          onChange={(event) => {
+            const value = event.target.value;
+            inputsMap.set(requirement.name, value);
+            setInputsMap(new Map(inputsMap));
+          }}
+        />
+      </FormControl>
     </ListItem>
   );
 };

diff --git a/client/src/components/InputsModal/InputsModal.tsx b/client/src/components/InputsModal/InputsModal.tsx
@@ -24,7 +24,6 @@ import { OAuthCredentials, RunnableType, TestInput } from '~/models/testSuiteMod
 import InputOAuthCredentials from './InputOAuthCredentials';
 import InputCheckboxGroup from './InputCheckboxGroup';
 import InputRadioGroup from './InputRadioGroup';
-import InputTextArea from './InputTextArea';
 import InputTextField from './InputTextField';
 import CustomTooltip from '../_common/CustomTooltip';
 import useStyles from './styles';
@@ -155,16 +154,6 @@ const InputsModal: FC<InputsModalProps> = ({
             key={`input-${index}`}
           />
         );
-      case 'textarea':
-        return (
-          <InputTextArea
-            requirement={requirement}
-            index={index}
-            inputsMap={inputsMap}
-            setInputsMap={(newInputsMap) => handleSetInputsMap(newInputsMap)}
-            key={`input-${index}`}
-          />
-        );
       default:
         return (
           <InputTextField