cosmian/kms/react-ant-patterns

React + Ant Design Patterns for the KMS UI

For authoritative UI coding conventions, see [`.github/instructions/typescript-ui.instructions.md`](../../instructions/typescript-ui.instructions.md) — stack, FIPS guards, TypeScript strictness, WASM integration, testing attributes, and actions structure.

This page documents KMS-specific UI patterns not covered in the instruction file.

Ant Design Select Portal Rendering (Playwright Note)

Ant Design <Select> renders its dropdown in a portal attached to `document.body`, not as a child of the <Select> element. When writing Playwright E2E tests, do not try to select options directly on the <Select> element:

<Form.Item name="algorithm" label="Algorithm">
  <div data-testid="algorithm-select-wrapper">
    <Select data-testid="algorithm-select" placeholder="Select algorithm">
      <Select.Option value="AES">AES</Select.Option>
      <Select.Option value="ChaCha20" disabled={fipsMode}>
        ChaCha20 (non-FIPS)
      </Select.Option>
    </Select>
  </div>
</Form.Item>

Use the helpers in ui/tests/e2e/helpers.ts to interact with portal-rendered dropdowns from Playwright tests.

Error Handling and User Feedback

import { message, Alert } from 'antd'
import { useTranslation } from 'react-i18next'
// For transient feedback (toast)
const { t } = useTranslation('actions')
const [messageApi, contextHolder] = message.useMessage()
const handleSubmit = async () => {
  try {
    const result = await callKmsOperation(/* ... */)
    messageApi.success(t('<feature>.success'))
    // Store the UID for display
    setCreatedKeyUid(result.uniqueIdentifier)
  } catch (error) {
    // Show user-friendly error — never expose internal server details
    const userMessage = parseKmsError(error) ?? t('<feature>.error')
    messageApi.error(userMessage)
  }
}
// For persistent error display
{error && (
  <Alert
    data-testid="operation-error-alert"
    type="error"
    message={error}
    showIcon
  />
)}
// For success result display
{createdKeyUid && (
  <Alert
    data-testid="created-key-uid"
    type="success"
    message={`Key created: ${createdKeyUid}`}
    showIcon
  />
)}

All user-facing strings come from t() — see i18n.instructions.md.

AI-Assisted Development Resources

• Ant Design LLM context: Fetch https://ant.design/llms.txt for up-to-date component API reference when coding AntD components.
• Ant Design MCP server: <https://ant-design.antgroup.com/docs/react/mcp> — provides structured component documentation to AI agents.
• Context7 MCP (io.github.upstash/context7): Generic library documentation fetcher — use when AntD or other JS library APIs seem outdated in the agent's training data. See <https://context7.com/>.