refactor(forms): adopt FieldLabel and FieldError for hand-rolled labels

frontend/documentation/components/CopyField.stories.tsx

@@ -31,6 +31,19 @@ export const Default: Story = {
   ),
 }
 
+// The label lives inside CopyField so htmlFor can reach the inner input.
+export const WithTitle: Story = {
+  render: () => (
+    <Container>
+      <CopyField
+        title='SCIM bearer token'
+        value='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJzY2ltLXRva2VuIn0'
+        className='font-monospace'
+      />
+    </Container>
+  ),
+}
+
 export const Monospace: Story = {
   render: () => (
     <Container>

frontend/documentation/components/Field.stories.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import Field from 'components/base/forms/Field'
+import Input from 'components/base/forms/Input'
+
+const meta: Meta<typeof Field> = {
+  component: Field,
+  decorators: [
+    (Story: React.FC) => (
+      <div style={{ width: 320 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The field skeleton: wrapper, label, control, error. Layout only; pass `htmlFor` (and put the matching `id` on the control) to wire the label, or omit it as a visible statement that the label is decorative.',
+      },
+    },
+    layout: 'centered',
+  },
+  title: 'Components/Forms/Field',
+}
+export default meta
+
+type Story = StoryObj<typeof Field>
+
+// Declaring htmlFor once wires everything: Input adopts it as its id via
+// FieldContext, and picks up aria-invalid/aria-describedby when there is
+// an error.
+export const Default: Story = {
+  render: () => (
+    <Field title='Email' htmlFor='field-email'>
+      <Input placeholder='you@example.com' />
+    </Field>
+  ),
+}
+
+export const WithTooltip: Story = {
+  render: () => (
+    <Field
+      title='Email'
+      tooltip='We never share your email.'
+      htmlFor='field-email-tooltip'
+    >
+      <Input placeholder='you@example.com' />
+    </Field>
+  ),
+}
+
+export const WithError: Story = {
+  render: () => (
+    <Field
+      title='Email'
+      htmlFor='field-email-error'
+      error='Enter a valid email address.'
+    >
+      <Input isValid={false} autoValidate value='not-an-email' />
+    </Field>
+  ),
+}
+
+export const CustomControl: Story = {
+  render: () => (
+    <Field title='Colour' tooltip='No htmlFor: the swatches take no id.'>
+      <div className='d-flex gap-2'>
+        {['#5D6D7E', '#27AB95', '#F7D354'].map((c) => (
+          <div
+            key={c}
+            style={{ background: c, borderRadius: 4, height: 24, width: 24 }}
+          />
+        ))}
+      </div>
+    </Field>
+  ),
+}

frontend/web/components/AdminAPIKeys.js

@@ -1,6 +1,4 @@
 import React, { PureComponent } from 'react'
-import { close as closeIcon } from 'ionicons/icons'
-import { IonIcon } from '@ionic/react'
 import data from 'common/data/base/_data'
 import AppActions from 'common/dispatcher/app-actions'
 import OrganisationStore from 'common/stores/organisation-store'
@@ -226,11 +224,8 @@ export class CreateAPIKey extends PureComponent {
                           className='chip'
                         >
                           <span className='font-weight-bold'>{r.name}</span>
-                          <span className='chip-icon ion'>
-                            <IonIcon
-                              icon={closeIcon}
-                              style={{ fontSize: '13px' }}
-                            />
+                          <span className='chip-icon'>
+                            <Icon name='close' width={18} />
                           </span>
                         </Row>
                       ))}
@@ -265,9 +260,10 @@ export class CreateAPIKey extends PureComponent {
               </>
               <Flex>
                 <div>
-                  <label>Expiry</label>
+                  <label htmlFor='api-key-expiry'>Expiry</label>
                 </div>
                 <DateSelect
+                  id='api-key-expiry'
                   onChange={(e) => {
                     this.setState({
                       expiry_date: e?.toISOString(),

frontend/web/components/CopyField.tsx

@@ -1,5 +1,6 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode, useId } from 'react'
 import Button from './base/forms/Button'
+import FieldLabel from './base/forms/FieldLabel'
 import Flex from './base/grid/Flex'
 import Icon from './icons/Icon'
 import Input from './base/forms/Input'
@@ -13,36 +14,45 @@ import Utils from 'common/utils/utils'
 // fit every existing consumer.
 type CopyFieldProps = {
   value: string
+  // Optional label, wired to the read-only input; the label must live here
+  // because callers cannot reach the inner input's id for htmlFor.
+  title?: ReactNode
   className?: string
   'data-test'?: string
 }
 
 const CopyField: FC<CopyFieldProps> = ({
   className,
   'data-test': dataTest,
+  title,
   value,
 }) => {
+  const id = useId()
   const onCopy = () => Utils.copyToClipboard(value)
 
   return (
-    <Row className='gap-2 align-items-center'>
-      <Flex>
-        <Input
-          value={value}
-          readOnly
-          className={className}
-          data-test={dataTest}
-        />
-      </Flex>
-      <Button
-        theme='secondary'
-        className='btn-with-icon'
-        onClick={onCopy}
-        aria-label='Copy to clipboard'
-      >
-        <Icon name='copy' width={20} />
-      </Button>
-    </Row>
+    <>
+      {!!title && <FieldLabel htmlFor={id}>{title}</FieldLabel>}
+      <Row className='gap-2 align-items-center'>
+        <Flex>
+          <Input
+            id={id}
+            value={value}
+            readOnly
+            className={className}
+            data-test={dataTest}
+          />
+        </Flex>
+        <Button
+          theme='secondary'
+          className='btn-with-icon'
+          onClick={onCopy}
+          aria-label='Copy to clipboard'
+        >
+          <Icon name='copy' width={20} />
+        </Button>
+      </Row>
+    </>
   )
 }
 

frontend/web/components/DateSelect.tsx

@@ -6,6 +6,8 @@ export interface DateSelectProps
   extends Pick<DatePickerProps, 'dateFormat' | 'selected'> {
   value?: DatePickerProps['value']
   className?: string
+  // Forwarded to the underlying input so a label's htmlFor can reach it.
+  id?: string
   isValid?: boolean
   onChange?: (
     date: Date | null,
@@ -16,6 +18,7 @@ export interface DateSelectProps
 const DateSelect: FC<DateSelectProps> = ({
   className,
   dateFormat,
+  id,
   isValid,
   onChange,
   selected,
@@ -29,6 +32,7 @@ const DateSelect: FC<DateSelectProps> = ({
   return (
     <Flex className='position-relative'>
       <DatePicker
+        id={id}
         className={`${className} ${!isValid && touched ? 'invalid' : ''}`}
         dateFormat={dateFormat}
         onFocus={() => setTouched(true)}

frontend/web/components/EditPermissions.tsx

@@ -1,7 +1,7 @@
 import React, { FC, forwardRef, useCallback, useEffect, useState } from 'react'
+import Field from './base/forms/Field'
+import Icon from './icons/Icon'
 import { find } from 'lodash'
-import { close as closeIcon } from 'ionicons/icons'
-import { IonIcon } from '@ionic/react'
 import _data from 'common/data/base/_data'
 import {
   AvailablePermission,
@@ -55,7 +55,6 @@ import {
 
 import MyRoleSelect from './MyRoleSelect'
 import Panel from './base/grid/Panel'
-import InputGroup from './base/forms/InputGroup'
 import classNames from 'classnames'
 import OrganisationProvider from 'common/providers/OrganisationProvider'
 import { useHasPermission } from 'common/providers/Permission'
@@ -934,47 +933,37 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
           </div>
           {roles && level === 'organisation' && (
             <FormGroup className='px-4'>
-              <InputGroup
-                component={
-                  <div>
-                    <Row>
-                      <strong style={{ width: 70 }}>Roles: </strong>
-                      {rolesAdded?.map((r) => (
-                        <Row
-                          key={r.id}
-                          onClick={() => removeOwner(r.id)}
-                          className='chip'
-                          style={{ marginBottom: 4, marginTop: 4 }}
-                        >
-                          <span className='font-weight-bold'>{r.name}</span>
-                          <span className='chip-icon ion'>
-                            <IonIcon
-                              icon={closeIcon}
-                              style={{ fontSize: '13px' }}
-                            />
-                          </span>
-                        </Row>
-                      ))}
-                      <Button
-                        theme='text'
-                        onClick={() => setShowRoles(true)}
-                        style={{ width: 70 }}
-                      >
-                        Add Role
-                      </Button>
-                    </Row>
-                  </div>
-                }
-                type='text'
+              <Field
+                className='full-width'
                 title='Assign roles'
                 tooltip='Assigns what role the user/group will have'
-                inputProps={{
-                  className: 'full-width',
-                  style: { minHeight: 80 },
-                }}
-                className='full-width'
-                placeholder='Add an optional description...'
-              />
+              >
+                <div>
+                  <Row>
+                    <strong style={{ width: 70 }}>Roles: </strong>
+                    {rolesAdded?.map((r) => (
+                      <Row
+                        key={r.id}
+                        onClick={() => removeOwner(r.id)}
+                        className='chip'
+                        style={{ marginBottom: 4, marginTop: 4 }}
+                      >
+                        <span className='font-weight-bold'>{r.name}</span>
+                        <span className='chip-icon'>
+                          <Icon name='close' width={18} />
+                        </span>
+                      </Row>
+                    ))}
+                    <Button
+                      theme='text'
+                      onClick={() => setShowRoles(true)}
+                      style={{ width: 70 }}
+                    >
+                      Add Role
+                    </Button>
+                  </Row>
+                </div>
+              </Field>
             </FormGroup>
           )}
           {level !== 'environment' && level !== 'project' && (

frontend/web/components/base/forms/Field.tsx

@@ -0,0 +1,74 @@
+import React, { FC, ReactNode } from 'react'
+import cn from 'classnames'
+import { TooltipProps } from 'components/Tooltip'
+import FieldContext from './FieldContext'
+import FieldError from './FieldError'
+import FieldLabel from './FieldLabel'
+
+interface FieldProps {
+  title?: ReactNode
+  required?: boolean
+  tooltip?: string
+  tooltipPlace?: TooltipProps['place']
+  // Wires the label to the control. Pass it when the child control accepts
+  // an id; omitting it is a visible statement that the label is decorative.
+  htmlFor?: string
+  // Inline error rendered beneath the control. When htmlFor is set the error
+  // gets `${htmlFor}-error`, so the control can reference it through
+  // aria-describedby.
+  error?: ReactNode
+  className?: string
+  noMargin?: boolean
+  children: ReactNode
+}
+
+// The field skeleton: wrapper, label, control, error. Layout only — unlike
+// the retired InputGroup `component` slot it never pretends to wire a
+// control it cannot reach; wiring happens through the explicit htmlFor.
+// When htmlFor is set, FieldContext carries it to house controls (Input),
+// which adopt it as their default id and pick up the error's
+// aria-describedby automatically, so the id is declared exactly once.
+const Field: FC<FieldProps> = ({
+  children,
+  className,
+  error,
+  htmlFor,
+  noMargin,
+  required,
+  title,
+  tooltip,
+  tooltipPlace,
+}) => {
+  const content = (
+    <div className={cn(className, { 'form-group': !noMargin })}>
+      {(!!title || !!tooltip) && (
+        <FieldLabel
+          htmlFor={htmlFor}
+          required={required}
+          tooltip={tooltip}
+          tooltipPlace={tooltipPlace}
+        >
+          {title}
+        </FieldLabel>
+      )}
+      {children}
+      <FieldError id={htmlFor ? `${htmlFor}-error` : undefined} error={error} />
+    </div>
+  )
+  if (!htmlFor) {
+    return content
+  }
+  return (
+    <FieldContext.Provider
+      value={{
+        controlId: htmlFor,
+        errorId: `${htmlFor}-error`,
+        hasError: !!error,
+      }}
+    >
+      {content}
+    </FieldContext.Provider>
+  )
+}
+
+export default Field