react-components

React Component Patterns (Supplement)

For core React conventions (functional components, FC type, imports, hooks rules), see AGENTS.md. This rule adds PatternFly and Console SDK patterns.

---

1. PatternFly Component Usage

Use Enums for Variants

import { Button, ButtonVariant } from '@patternfly/react-core';

// Always use enum, not string literal
<Button variant={ButtonVariant.primary}>Save</Button>
<Button variant={ButtonVariant.link}>Cancel</Button>

Custom Select Component

Always use the project's custom Select wrapper for consistency:

import Select from '@components/common/Select';
// NOT: import { Select } from '@patternfly/react-core';

Use PF_LABEL_STATUS for Status Props

Use the shared constants instead of string literals for PatternFly status props:

import { PF_LABEL_STATUS, type PfLabelStatus } from '@utils/constants';

// ✅ Good
<Label status={PF_LABEL_STATUS.DANGER}>Error</Label>
<Icon status={PF_LABEL_STATUS.WARNING}>...</Icon>

// ❌ Bad
<Label status="danger">Error</Label>

Use STATUS_ICONS for Status Icons

Use the shared status icon map instead of manually wrapping icons with hardcoded colors:

import { STATUS_ICONS } from '@components/status/statusIcons';

// ✅ Good - uses PF6 Icon status prop, respects theming
{STATUS_ICONS.danger}
{STATUS_ICONS.warning}

// ❌ Bad - hardcoded hex colors break in dark mode
<ExclamationCircleIcon color="#C9190B" />

Common PatternFly Patterns

import {
  Alert,
  AlertVariant,
  EmptyState,
  EmptyStateVariant,
  Spinner,
  Title,
} from '@patternfly/react-core';

---

2. Console SDK Integration

Watching Resources

import { useK8sWatchResource } from '@utils/hooks/useK8sWatchResource';

const [providers, loaded, error] = useK8sWatchResource<V1beta1Provider[]>({
  groupVersionKind: ProviderModelGroupVersionKind,
  isList: true,
  namespaced: true,
  namespace,
});

Resource Operations

import { k8sCreate, k8sUpdate, k8sDelete, k8sPatch } from '@openshift-console/dynamic-plugin-sdk';