chore(Drawer): Include OUIAProps for Drawer

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

@@ -1,6 +1,7 @@
 import { createContext, useRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
+import { useOUIAProps, OUIAProps } from '../../helpers';
 
 export enum DrawerColorVariant {
   default = 'default',
@@ -11,7 +12,7 @@ export enum DrawerColorVariant {
   noBackground = 'no-background'
 }
 
-export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
+export interface DrawerProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Additional classes added to the Drawer. */
   className?: string;
   /** Content rendered in the drawer panel */
@@ -28,6 +29,10 @@ export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
   position?: 'start' | 'end' | 'bottom' | 'left' | 'right';
   /** Callback when drawer panel is expanded after waiting 250ms for animation to complete. */
   onExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
+  /** 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;
 }
 
 export interface DrawerContextProps {
@@ -59,8 +64,11 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
   isStatic = false,
   position = 'end',
   onExpand = () => {},
+  ouiaId,
+  ouiaSafe = true,
   ...props
 }: DrawerProps) => {
+  const ouiaProps = useOUIAProps(Drawer.displayName, ouiaId, ouiaSafe);
   const drawerRef = useRef<HTMLDivElement>(undefined);
   const drawerContentRef = useRef<HTMLDivElement>(undefined);
 
@@ -79,6 +87,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
         )}
         ref={drawerRef}
         {...props}
+        {...ouiaProps}
       >
         {children}
       </div>

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

@@ -39,7 +39,7 @@ Object.values([
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
   test(`Drawer isExpanded = ${isExpanded} and isInline = ${isInline} and isStatic = ${isStatic}`, () => {
     const { asFragment } = render(
-      <Drawer isExpanded={isExpanded}>
+      <Drawer isExpanded={isExpanded} ouiaId="ouia-id">
         <DrawerContent panelContent={panelContent}>
           <DrawerContentBody>{drawerContent}</DrawerContentBody>
         </DrawerContent>
@@ -187,3 +187,47 @@ test(`Renders with ${styles.modifiers.pill} class when specified`, () => {
 
   expect(screen.getByTestId('drawer')).toHaveClass(styles.modifiers.pill);
 });
+
+test('Renders with custom ouiaId', () => {
+  render(
+    <Drawer data-testid="drawer" ouiaId="test-id">
+      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
+        <DrawerContentBody>content</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+  expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+
+test('Renders with expected ouia component type', () => {
+  render(
+    <Drawer data-testid="drawer" ouiaId="test-id">
+      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
+        <DrawerContentBody>content</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+  expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-component-type', 'PF6/Drawer');
+});
+
+test('Renders with ouiaSafe defaulting to true', () => {
+  render(
+    <Drawer data-testid="drawer" ouiaId="test-id">
+      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
+        <DrawerContentBody>content</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+  expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-safe', 'true');
+});
+
+test('Renders with ouiaSafe=false when specified', () => {
+  render(
+    <Drawer data-testid="drawer" ouiaId="test-id" ouiaSafe={false}>
+      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
+        <DrawerContentBody>content</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+  expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-safe', 'false');
+});

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

@@ -4,6 +4,9 @@ exports[`Drawer expands from bottom 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-panel-bottom"
+    data-ouia-component-id="OUIA-Generated-Drawer-:rd:"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -19,7 +22,7 @@ exports[`Drawer expands from bottom 1`] = `
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:r8:"
+        id="pf-drawer-panel-:re:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -36,7 +39,7 @@ exports[`Drawer expands from bottom 1`] = `
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r9:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:rf:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -77,6 +80,9 @@ exports[`Drawer has resizable callback and id 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-panel-left"
+    data-ouia-component-id="OUIA-Generated-Drawer-:rj:"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -128,7 +134,7 @@ exports[`Drawer has resizable callback and id 1`] = `
                 <button
                   aria-label="Close drawer panel"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:rd:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:rl:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -170,6 +176,9 @@ exports[`Drawer has resizable css and color variants 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-panel-left"
+    data-ouia-component-id="OUIA-Generated-Drawer-:rg:"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -185,11 +194,11 @@ exports[`Drawer has resizable css and color variants 1`] = `
       </div>
       <div
         class="pf-v6-c-drawer__panel pf-m-resizable pf-m-secondary"
-        id="pf-drawer-panel-:ra:"
+        id="pf-drawer-panel-:rh:"
         style="--pf-v6-c-drawer__panel--md--FlexBasis: 300px; --pf-v6-c-drawer__panel--md--FlexBasis--min: 200px; --pf-v6-c-drawer__panel--md--FlexBasis--max: 400px;"
       >
         <div
-          aria-controls="pf-drawer-panel-:ra:"
+          aria-controls="pf-drawer-panel-:rh:"
           aria-label="Resize"
           aria-orientation="vertical"
           aria-valuemax="100"
@@ -222,7 +231,7 @@ exports[`Drawer has resizable css and color variants 1`] = `
                 <button
                   aria-label="Close drawer panel"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:rb:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:ri:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -264,6 +273,9 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -280,7 +292,7 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
       <div
         class="pf-v6-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-:r2:"
+        id="pf-drawer-panel-:r4:"
         inert=""
       />
     </div>
@@ -292,6 +304,9 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -308,7 +323,7 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
       <div
         class="pf-v6-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-:r5:"
+        id="pf-drawer-panel-:r9:"
         inert=""
       />
     </div>
@@ -320,6 +335,9 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -335,7 +353,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:r0:"
+        id="pf-drawer-panel-:r1:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -352,7 +370,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:r2:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -393,6 +411,9 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -408,7 +429,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:r6:"
+        id="pf-drawer-panel-:rb:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -425,7 +446,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:rc:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -466,6 +487,9 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -481,7 +505,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:r3:"
+        id="pf-drawer-panel-:r6:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -498,7 +522,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r4:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"

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

@@ -55,6 +55,7 @@ component.
 * [Checkbox](/components/forms/checkbox)
 * [Chip](/components/chip)
 * [Content](/components/content)
+* [Drawer](/components/drawer)
 * [Dropdown](/components/menus/dropdown)
 * [DropdownItem](/components/menus/dropdown)
 * [Form](/components/forms/form)