chore(ExpandableSection): Include OUIAProps for ExpandableSection

Add OUIA attribute support to ExpandableSection for better test automation.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: mshriver

packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx

@@ -6,7 +6,7 @@ import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-mi
 import { PickOptional } from '../../helpers/typeUtils';
 import { debounce } from '../../helpers/util';
 import { getResizeObserver } from '../../helpers/resizeObserver';
-import { GenerateId } from '../../helpers';
+import { GenerateId, getOUIAProps, OUIAProps } from '../../helpers';
 import { Button } from '../Button';
 
 export enum ExpandableSectionVariant {
@@ -16,7 +16,7 @@ export enum ExpandableSectionVariant {
 
 /** The main expandable section component. */
 
-export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
+export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'>, OUIAProps {
   /** Content rendered inside the expandable section. */
   children?: React.ReactNode;
   /** Additional classes added to the expandable section. */
@@ -84,6 +84,10 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
    * This is useful when the toggle text should function as a heading in the document structure.
    */
   toggleWrapper?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 interface ExpandableSectionState {
@@ -134,7 +138,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
     displaySize: 'default',
     isWidthLimited: false,
     isIndented: false,
-    variant: 'default'
+    variant: 'default',
+    ouiaSafe: true
   };
 
   private calculateToggleText(
@@ -232,6 +237,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       truncateMaxLines,
       direction,
       toggleWrapper = 'div',
+      ouiaId,
+      ouiaSafe,
       ...props
     } = this.props;
 
@@ -307,6 +314,7 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
                     className
                   )}
                   {...props}
+                  {...getOUIAProps(ExpandableSection.displayName, ouiaId, ouiaSafe)}
                 >
                   {variant === ExpandableSectionVariant.default && expandableToggle}
                   <div

packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx

@@ -8,7 +8,11 @@ import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-
 const props = { contentId: 'content-id', toggleId: 'toggle-id' };
 
 test('ExpandableSection', () => {
-  const { asFragment } = render(<ExpandableSection {...props}>test </ExpandableSection>);
+  const { asFragment } = render(
+    <ExpandableSection {...props} ouiaId="ouia-id">
+      test{' '}
+    </ExpandableSection>
+  );
   expect(asFragment()).toMatchSnapshot();
 });
 
@@ -306,3 +310,27 @@ test('Renders toggle icon by default when hasToggleIcon is true', () => {
   const button = screen.getByRole('button');
   expect(button.querySelector('.pf-v6-c-expandable-section__toggle-icon')).toBeInTheDocument();
 });
+
+test('Renders with custom ouiaId', () => {
+  const { container } = render(<ExpandableSection ouiaId="test-id">Test content</ExpandableSection>);
+  expect(container.firstChild).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+
+test('Renders with expected ouia component type', () => {
+  const { container } = render(<ExpandableSection ouiaId="test-id">Test content</ExpandableSection>);
+  expect(container.firstChild).toHaveAttribute('data-ouia-component-type', 'PF6/ExpandableSection');
+});
+
+test('Renders with ouiaSafe defaulting to true', () => {
+  const { container } = render(<ExpandableSection ouiaId="test-id">Test content</ExpandableSection>);
+  expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'true');
+});
+
+test('Renders with ouiaSafe=false when specified', () => {
+  const { container } = render(
+    <ExpandableSection ouiaId="test-id" ouiaSafe={false}>
+      Test content
+    </ExpandableSection>
+  );
+  expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'false');
+});

packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap

@@ -4,6 +4,8 @@ exports[`Disclosure ExpandableSection 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-expandable-section pf-m-display-lg pf-m-limit-width"
+    data-ouia-component-type="PF6/ExpandableSection"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-expandable-section__toggle"
@@ -57,6 +59,9 @@ exports[`ExpandableSection 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-expandable-section"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/ExpandableSection"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-expandable-section__toggle"
@@ -110,6 +115,8 @@ exports[`Renders ExpandableSection expanded 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-expandable-section pf-m-expanded"
+    data-ouia-component-type="PF6/ExpandableSection"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-expandable-section__toggle"
@@ -163,6 +170,8 @@ exports[`Renders ExpandableSection indented 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-expandable-section pf-m-expanded pf-m-indented"
+    data-ouia-component-type="PF6/ExpandableSection"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-expandable-section__toggle"
@@ -216,6 +225,8 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-expandable-section"
+    data-ouia-component-type="PF6/ExpandableSection"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-expandable-section__toggle"

packages/react-core/src/helpers/OUIA/OUIA.md

@@ -57,6 +57,7 @@ component.
 * [Content](/components/content)
 * [Dropdown](/components/menus/dropdown)
 * [DropdownItem](/components/menus/dropdown)
+* [ExpandableSection](/components/expandable-section)
 * [Form](/components/forms/form)
 * [FormGroup](/components/forms/form)
 * [FormSelect](/components/forms/form-select)