Skip to content
Snippets Groups Projects
Verified Commit cdc62c2e authored by Andreas Ellewsen's avatar Andreas Ellewsen
Browse files

Use FormHelperText for error messages

parent 4cd02e73
No related branches found
No related tags found
1 merge request!293Make type and ou choices required in new role form
Pipeline #119281 passed
Stage: venv update
    Stage: tests and linting
      Hide whitespace changes
      Inline Side-by-side
      frontend/src/routes/sponsor/guest/newGuestRole/index.tsx
      + 13
      − 9
      View file @ cdc62c2e
      ...@@ -18,6 +18,7 @@ import { ...@@ -18,6 +18,7 @@ import {
      FormControlLabel, FormControlLabel,
      Box, Box,
      Typography, Typography,
      FormHelperText,
      } from '@mui/material' } from '@mui/material'
      import Page from 'components/page' import Page from 'components/page'
      import { Guest } from 'interfaces' import { Guest } from 'interfaces'
      ...@@ -175,7 +176,10 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { ...@@ -175,7 +176,10 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
      </MenuItem> </MenuItem>
      ) )
      } }
      const hasRoleTypeError =
      errors && errors.type && errors.type.type === 'required'
      const hasOuChoiceError =
      errors && errors.orgunit && errors.orgunit.type === 'required'
      return ( return (
      <Page> <Page>
      <SponsorInfoButtons <SponsorInfoButtons
      ...@@ -195,7 +199,7 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { ...@@ -195,7 +199,7 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
      control={control} control={control}
      rules={{ required: true }} rules={{ required: true }}
      render={() => ( render={() => (
      <FormControl> <FormControl error={hasRoleTypeError}>
      <InputLabel id="roletype-select-label"> <InputLabel id="roletype-select-label">
      {t('input.roleType')} {t('input.roleType')}
      </InputLabel> </InputLabel>
      ...@@ -214,10 +218,10 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { ...@@ -214,10 +218,10 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
      </FormControl> </FormControl>
      )} )}
      /> />
      {errors.type && errors.type.type === 'required' && ( {hasRoleTypeError && (
      <Box sx={{ typography: 'caption', color: 'error.main' }}> <FormHelperText error>
      {t('validation.typeMustBeChosen')} {t('validation.typeMustBeChosen')}
      </Box> </FormHelperText>
      )} )}
      <Controller <Controller
      ...@@ -225,7 +229,7 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { ...@@ -225,7 +229,7 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
      control={control} control={control}
      rules={{ required: true }} rules={{ required: true }}
      render={() => ( render={() => (
      <FormControl> <FormControl error={hasOuChoiceError}>
      <InputLabel id="ou-select-label-id"> <InputLabel id="ou-select-label-id">
      {t('common:ou')} {t('common:ou')}
      </InputLabel> </InputLabel>
      ...@@ -246,10 +250,10 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { ...@@ -246,10 +250,10 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
      </FormControl> </FormControl>
      )} )}
      /> />
      {errors.orgunit && errors.orgunit.type === 'required' && ( {hasOuChoiceError && (
      <Box sx={{ typography: 'caption', color: 'error.main' }}> <FormHelperText error>
      {t('validation.ouMustBeChosen')} {t('validation.ouMustBeChosen')}
      </Box> </FormHelperText>
      )} )}
      <Controller <Controller
      ......
      0% or .
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment