feat(frontend): top-label form fields via FormField/FormGroup

frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.styles.tsx

@@ -1,6 +1,4 @@
 import { Box, Button, styled } from '@mui/material';
-import Input from '../../../common/Input/Input.tsx';
-import GeneralSelect from '../../../common/GeneralSelect/GeneralSelect.tsx';
 
 export const StyledContainer = styled('div')(() => ({
     maxWidth: '400px',
@@ -12,27 +10,6 @@ export const StyledForm = styled('form')(() => ({
     height: '100%',
 }));
 
-export const StyledInput = styled(Input)(({ theme }) => ({
-    width: '100%',
-    marginBottom: theme.spacing(2),
-}));
-
-export const StyledSelectInput = styled(GeneralSelect)(({ theme }) => ({
-    marginBottom: theme.spacing(2),
-    minWidth: '400px',
-    [theme.breakpoints.down('sm')]: {
-        minWidth: '379px',
-    },
-}));
-
-export const StyledInputDescription = styled('p')(({ theme }) => ({
-    marginBottom: theme.spacing(1),
-}));
-
-export const StyledInputLabel = styled('label')(({ theme }) => ({
-    marginBottom: theme.spacing(1),
-}));
-
 export const CancelButton = styled(Button)(({ theme }) => ({
     marginLeft: theme.spacing(3),
 }));

frontend/src/component/admin/apiToken/ApiTokenForm/EnvironmentSelector/EnvironmentSelector.tsx

@@ -1,10 +1,8 @@
 import { TokenType } from '../../../../../interfaces/token.ts';
 import KeyboardArrowDownOutlined from '@mui/icons-material/KeyboardArrowDownOutlined';
 import type React from 'react';
-import {
-    StyledInputDescription,
-    StyledSelectInput,
-} from '../ApiTokenForm.styles';
+import { FormField } from 'component/common/FormField/FormField';
+import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
 import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
 
 interface IEnvironmentSelectorProps {
@@ -31,21 +29,19 @@ export const EnvironmentSelector = ({
               }));
 
     return (
-        <>
-            <StyledInputDescription>
-                Which environment should the token have access to?
-            </StyledInputDescription>
-            <StyledSelectInput
+        <FormField
+            label='Environment'
+            description='Which environment should the token have access to?'
+        >
+            <GeneralSelect
                 disabled={type === TokenType.ADMIN}
                 options={selectableEnvs}
                 value={environment}
                 onChange={setEnvironment}
-                label='Environment'
-                id='api_key_environment'
                 name='environment'
                 IconComponent={KeyboardArrowDownOutlined}
                 fullWidth
             />
-        </>
+        </FormField>
     );
 };

frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/ProjectSelector.tsx

@@ -1,7 +1,7 @@
 import { SelectProjectInput } from './SelectProjectInput/SelectProjectInput.tsx';
 import { TokenType } from '../../../../../interfaces/token.ts';
 import type React from 'react';
-import { StyledInputDescription } from '../ApiTokenForm.styles';
+import { FormField } from 'component/common/FormField/FormField';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import type { ApiTokenFormErrorType } from '../useApiTokenForm.ts';
 import { useOptionalPathParam } from 'hooks/useOptionalPathParam';
@@ -33,10 +33,10 @@ export const ProjectSelector = ({
     }
 
     return (
-        <>
-            <StyledInputDescription>
-                Which project do you want to give access to?
-            </StyledInputDescription>
+        <FormField
+            label='Projects'
+            description='Which projects do you want to give access to?'
+        >
             <SelectProjectInput
                 disabled={type === TokenType.ADMIN}
                 options={selectableProjects}
@@ -45,6 +45,6 @@ export const ProjectSelector = ({
                 error={errors?.projects}
                 onFocus={() => clearErrors('projects')}
             />
-        </>
+        </FormField>
     );
 };

frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/SelectProjectInput/SelectProjectInput.test.tsx

@@ -54,15 +54,15 @@ describe('SelectProjectInput', () => {
             screen.getByLabelText(/all current and future projects/i),
         ).not.toBeChecked();
 
-        expect(screen.getByLabelText('Projects')).toBeEnabled();
+        expect(screen.getByRole('combobox')).toBeEnabled();
 
         await user.click(screen.getByTestId('select-all-projects'));
 
         expect(
             screen.getByLabelText(/all current and future projects/i),
         ).toBeChecked();
 
-        expect(screen.getByLabelText('Projects')).toBeDisabled();
+        expect(screen.getByRole('combobox')).toBeDisabled();
     });
 
     it('renders with autocomplete enabled if default value is not a wildcard', () => {
@@ -84,7 +84,7 @@ describe('SelectProjectInput', () => {
         it('selects and deselects all options', async () => {
             const user = userEvent.setup();
             render(<SelectProjectInput {...mockProps} defaultValue={[]} />);
-            await user.click(screen.getByLabelText('Projects'));
+            await user.click(screen.getByRole('combobox'));
 
             let button = screen.getByRole('button', {
                 name: /select all/i,
@@ -118,7 +118,7 @@ describe('SelectProjectInput', () => {
                     ]}
                 />,
             );
-            await user.click(screen.getByLabelText('Projects'));
+            await user.click(screen.getByRole('combobox'));
 
             const button = screen.queryByRole('button', {
                 name: /select all/i,
@@ -141,7 +141,7 @@ describe('SelectProjectInput', () => {
                 ]}
             />,
         );
-        const input = await screen.findByLabelText('Projects');
+        const input = await screen.findByRole('combobox');
         await user.type(input, 'alp');
 
         await waitFor(() => {

frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/SelectProjectInput/SelectProjectInput.tsx

@@ -45,6 +45,8 @@ export interface ISelectProjectInputProps {
     onChange: (value: string[]) => void;
     onFocus?: () => void;
     error?: string;
+    id?: string;
+    'aria-describedby'?: string;
 }
 
 export const SelectProjectInput: FC<ISelectProjectInputProps> = ({
@@ -54,6 +56,8 @@ export const SelectProjectInput: FC<ISelectProjectInputProps> = ({
     disabled,
     error,
     onFocus,
+    id,
+    'aria-describedby': ariaDescribedby,
 }) => {
     const [projects, setProjects] = useState<string[]>(
         typeof defaultValue === 'string' ? [defaultValue] : defaultValue,
@@ -123,19 +127,25 @@ export const SelectProjectInput: FC<ISelectProjectInputProps> = ({
     const renderInput = (params: AutocompleteRenderInputParams) => (
         <TextField
             {...params}
+            slotProps={{
+                ...params.slotProps,
+                htmlInput: {
+                    ...params.slotProps.htmlInput,
+                    'aria-describedby': ariaDescribedby,
+                },
+            }}
             error={Boolean(error)}
             helperText={error}
             variant='outlined'
-            label='Projects'
             placeholder='Select one or more projects'
             onFocus={onFocus}
             data-testid='select-input'
         />
     );
 
     return (
-        <Box sx={{ mt: -1, mb: 3 }}>
-            <Box sx={{ mt: 1, mb: 0.25, ml: 1.5 }}>
+        <Box>
+            <Box sx={{ mb: 0.25, ml: 1.5 }}>
                 <FormControlLabel
                     disabled={disabled}
                     data-testid='select-all-projects'
@@ -149,6 +159,7 @@ export const SelectProjectInput: FC<ISelectProjectInputProps> = ({
                 />
             </Box>
             <Autocomplete
+                id={id}
                 disabled={disabled || isWildcardSelected}
                 multiple
                 limitTags={2}

frontend/src/component/admin/apiToken/ApiTokenForm/TokenInfo/TokenInfo.tsx

@@ -1,5 +1,6 @@
 import type React from 'react';
-import { StyledInput, StyledInputDescription } from '../ApiTokenForm.styles';
+import { TextField } from '@mui/material';
+import { FormField } from 'component/common/FormField/FormField';
 import type { ApiTokenFormErrorType } from '../useApiTokenForm.ts';
 
 interface ITokenInfoProps {
@@ -16,20 +17,20 @@ export const TokenInfo = ({
     clearErrors,
 }: ITokenInfoProps) => {
     return (
-        <>
-            <StyledInputDescription>
-                What would you like to call this token?
-            </StyledInputDescription>
-            <StyledInput
+        <FormField
+            label='Token name'
+            description='What would you like to call this token?'
+        >
+            <TextField
+                fullWidth
                 value={tokenName}
                 name='tokenName'
                 onChange={(e) => setTokenName(e.target.value)}
-                label='Token name'
                 error={errors.tokenName !== undefined}
-                errorText={errors.tokenName}
+                helperText={errors.tokenName}
                 onFocus={() => clearErrors('tokenName')}
                 autoFocus
             />
-        </>
+        </FormField>
     );
 };

frontend/src/component/admin/apiToken/ApiTokenForm/TokenTypeSelector/TokenTypeSelector.tsx

@@ -1,12 +1,11 @@
-import { StyledContainer, StyledInputLabel } from '../ApiTokenForm.styles';
 import {
     Box,
-    FormControl,
     FormControlLabel,
     Radio,
     RadioGroup,
     Typography,
 } from '@mui/material';
+import { FormField } from 'component/common/FormField/FormField';
 import type { TokenType } from 'interfaces/token';
 
 export type SelectOption = {
@@ -27,53 +26,51 @@ export const TokenTypeSelector = ({
     apiTokenTypes,
 }: ITokenTypeSelectorProps) => {
     return (
-        <StyledContainer>
-            <FormControl sx={{ mb: 2, width: '100%' }}>
-                <StyledInputLabel id='token-type'>
-                    What do you want to connect?
-                </StyledInputLabel>
-                <RadioGroup
-                    aria-labelledby='token-type'
-                    defaultValue='CLIENT'
-                    name='radio-buttons-group'
-                    value={type}
-                    onChange={(_, value) => setType(value as TokenType)}
-                >
-                    {apiTokenTypes.map(
-                        ({ key, label, title, enabled: hasAccess }) => (
-                            <FormControlLabel
-                                key={key}
-                                value={key}
-                                sx={{ mb: 1 }}
-                                disabled={!hasAccess}
-                                control={
-                                    <Radio
-                                        sx={{
-                                            ml: 0.75,
-                                            alignSelf: 'flex-start',
-                                        }}
-                                    />
-                                }
-                                label={
+        <FormField
+            label='Token type'
+            description='What do you want to connect?'
+        >
+            <RadioGroup
+                aria-label='Token type'
+                defaultValue='CLIENT'
+                name='radio-buttons-group'
+                value={type}
+                onChange={(_, value) => setType(value as TokenType)}
+            >
+                {apiTokenTypes.map(
+                    ({ key, label, title, enabled: hasAccess }) => (
+                        <FormControlLabel
+                            key={key}
+                            value={key}
+                            sx={{ mb: 1 }}
+                            disabled={!hasAccess}
+                            control={
+                                <Radio
+                                    sx={{
+                                        ml: 0.75,
+                                        alignSelf: 'flex-start',
+                                    }}
+                                />
+                            }
+                            label={
+                                <Box>
                                     <Box>
-                                        <Box>
-                                            <Typography>{label}</Typography>
-                                            <Typography
-                                                variant='body2'
-                                                sx={{
-                                                    color: 'text.secondary',
-                                                }}
-                                            >
-                                                {title}
-                                            </Typography>
-                                        </Box>
+                                        <Typography>{label}</Typography>
+                                        <Typography
+                                            variant='body2'
+                                            sx={{
+                                                color: 'text.secondary',
+                                            }}
+                                        >
+                                            {title}
+                                        </Typography>
                                     </Box>
-                                }
-                            />
-                        ),
-                    )}
-                </RadioGroup>
-            </FormControl>
-        </StyledContainer>
+                                </Box>
+                            }
+                        />
+                    ),
+                )}
+            </RadioGroup>
+        </FormField>
     );
 };

frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx

@@ -121,7 +121,7 @@ export const AutoCreateForm = ({
                         style={{ width: '400px' }}
                         rows={2}
                         variant='outlined'
-                        size='small'
+                        size='large'
                     />
                 </Grid>
             </Grid>