feat(Wizard,ClipboardCopy): add OUIA props to WizardNav, WizardNavItem, ClipboardCopy

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

@@ -9,6 +9,7 @@ import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { ClipboardCopyButton } from './ClipboardCopyButton';
 import { ClipboardCopyToggle } from './ClipboardCopyToggle';
 import { ClipboardCopyExpanded } from './ClipboardCopyExpanded';
+import { getOUIAProps, OUIAProps } from '../../helpers';
 
 export const clipboardCopyFunc = (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => {
   const clipboard = event.currentTarget.parentElement;
@@ -32,7 +33,7 @@ export interface ClipboardCopyState {
   copied: boolean;
 }
 
-export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
+export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'>, OUIAProps {
   /** Additional classes added to the clipboard copy container. */
   className?: string;
   /** Tooltip message to display when hover the copy button */
@@ -86,6 +87,10 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   children: React.ReactNode;
   /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */
   additionalActions?: React.ReactNode;
+  /** 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 class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopyState> {
@@ -118,7 +123,8 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
     onChange: (): any => undefined,
     textAriaLabel: 'Copyable input',
     toggleAriaLabel: 'Show content',
-    additionalActions: null
+    additionalActions: null,
+    ouiaSafe: true
   };
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -168,6 +174,8 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
       position,
       className,
       additionalActions,
+      ouiaId,
+      ouiaSafe,
       ...divProps
     } = this.props;
     const textIdPrefix = 'text-input-';
@@ -183,6 +191,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
           className
         )}
         {...divProps}
+        {...getOUIAProps(ClipboardCopy.displayName, ouiaId, ouiaSafe)}
       >
         {variant === 'inline-compact' && (
           <GenerateId prefix="">

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

@@ -4,6 +4,8 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-clipboard-copy string"
+    data-ouia-component-type="PF4/ClipboardCopy"
+    data-ouia-safe="true"
   >
     <div
       class="pf-c-clipboard-copy__group"

packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -3,6 +3,7 @@ id: Clipboard copy
 section: components
 cssPrefix: pf-c-copyclipboard
 propComponents: ['ClipboardCopy', 'ClipboardCopyButton']
+ouia: true
 ---
 
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';

packages/react-core/src/components/Wizard/WizardNav.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
+import { useOUIAProps, OUIAProps } from '../../helpers';
 
-export interface WizardNavProps {
+export interface WizardNavProps extends OUIAProps {
   /** children should be WizardNavItem components */
   children?: any;
   /** Aria-label applied to the nav element */
@@ -20,8 +21,12 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
   isOpen = false,
-  returnList = false
+  returnList = false,
+  ouiaId,
+  ouiaSafe = true
 }: WizardNavProps) => {
+  const ouiaProps = useOUIAProps(WizardNav.displayName, ouiaId, ouiaSafe);
+
   const innerList = <ol className={css(styles.wizardNavList)}>{children}</ol>;
 
   if (returnList) {
@@ -33,6 +38,7 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
       className={css(styles.wizardNav, isOpen && styles.modifiers.expanded)}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
+      {...ouiaProps}
     >
       <ol className={css(styles.wizardNavList)}>{children}</ol>
     </nav>

packages/react-core/src/components/Wizard/WizardNavItem.tsx

@@ -2,8 +2,9 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import { useOUIAProps, OUIAProps } from '../../helpers';
 
-export interface WizardNavItemProps {
+export interface WizardNavItemProps extends OUIAProps {
   /** Can nest a WizardNav component for substeps */
   children?: React.ReactNode;
   /** The content to display in the nav item */
@@ -37,8 +38,11 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
   href = null,
   isExpandable = false,
   id,
+  ouiaId,
+  ouiaSafe = true,
   ...rest
 }: WizardNavItemProps) => {
+  const ouiaProps = useOUIAProps(WizardNavItem.displayName, ouiaId, ouiaSafe);
   const NavItemComponent = navItemComponent;
 
   const [isExpanded, setIsExpanded] = React.useState(false);
@@ -82,6 +86,7 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
         aria-disabled={isDisabled ? true : null}
         aria-current={isCurrent && !children ? 'step' : false}
         {...(isExpandable && { 'aria-expanded': isExpanded })}
+        {...ouiaProps}
       >
         {isExpandable ? (
           <>

packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap

@@ -6,6 +6,9 @@ exports[`WizardNav should match snapshot (auto-generated) 1`] = `
     aria-label="string"
     aria-labelledby="string"
     class="pf-c-wizard__nav"
+    data-ouia-component-id="OUIA-Generated-WizardNav-1"
+    data-ouia-component-type="PF4/WizardNav"
+    data-ouia-safe="true"
   >
     <ol
       class="pf-c-wizard__nav-list"

packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap

@@ -8,6 +8,9 @@ exports[`WizardNavItem should match snapshot (auto-generated) 1`] = `
     <button
       aria-current="false"
       class="pf-c-wizard__nav-link"
+      data-ouia-component-id="OUIA-Generated-WizardNavItem-1"
+      data-ouia-component-type="PF4/WizardNavItem"
+      data-ouia-safe="true"
     />
     ReactNode
   </li>

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

@@ -94,6 +94,9 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
         <nav
           aria-labelledby="pf-wizard-title-1"
           class="pf-c-wizard__nav"
+          data-ouia-component-id="OUIA-Generated-WizardNav-3"
+          data-ouia-component-type="PF4/WizardNav"
+          data-ouia-safe="true"
         >
           <ol
             class="pf-c-wizard__nav-list"
@@ -104,6 +107,9 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               <button
                 aria-current="step"
                 class="pf-c-wizard__nav-link pf-m-current"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-7"
+                data-ouia-component-type="PF4/WizardNavItem"
+                data-ouia-safe="true"
               >
                 A
               </button>
@@ -115,6 +121,9 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 aria-current="false"
                 aria-expanded="false"
                 class="pf-c-wizard__nav-link"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-8"
+                data-ouia-component-type="PF4/WizardNavItem"
+                data-ouia-safe="true"
               >
                 <span
                   class="pf-c-wizard__nav-link-text"
@@ -152,6 +161,9 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-c-wizard__nav-link"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-9"
+                    data-ouia-component-type="PF4/WizardNavItem"
+                    data-ouia-safe="true"
                   >
                     B-1
                   </button>
@@ -162,6 +174,9 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-c-wizard__nav-link"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-10"
+                    data-ouia-component-type="PF4/WizardNavItem"
+                    data-ouia-safe="true"
                   >
                     B-2
                   </button>
@@ -174,6 +189,9 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-c-wizard__nav-link"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-11"
+                data-ouia-component-type="PF4/WizardNavItem"
+                data-ouia-safe="true"
               >
                 C
               </button>
@@ -184,6 +202,9 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-c-wizard__nav-link"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-12"
+                data-ouia-component-type="PF4/WizardNavItem"
+                data-ouia-safe="true"
               >
                 D
               </button>
@@ -341,6 +362,9 @@ exports[`Wizard Wizard should match snapshot 1`] = `
         <nav
           aria-labelledby="pf-wizard-title-0"
           class="pf-c-wizard__nav"
+          data-ouia-component-id="OUIA-Generated-WizardNav-1"
+          data-ouia-component-type="PF4/WizardNav"
+          data-ouia-safe="true"
         >
           <ol
             class="pf-c-wizard__nav-list"
@@ -351,6 +375,9 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="step"
                 class="pf-c-wizard__nav-link pf-m-current"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-1"
+                data-ouia-component-type="PF4/WizardNavItem"
+                data-ouia-safe="true"
                 id="step-A"
               >
                 A
@@ -362,6 +389,9 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-c-wizard__nav-link"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-2"
+                data-ouia-component-type="PF4/WizardNavItem"
+                data-ouia-safe="true"
                 id="step-B"
               >
                 B
@@ -375,6 +405,9 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-c-wizard__nav-link"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-3"
+                    data-ouia-component-type="PF4/WizardNavItem"
+                    data-ouia-safe="true"
                     id="step-B-1"
                   >
                     B-1
@@ -386,6 +419,9 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-c-wizard__nav-link"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-4"
+                    data-ouia-component-type="PF4/WizardNavItem"
+                    data-ouia-safe="true"
                     id="step-B-2"
                   >
                     B-2
@@ -399,6 +435,9 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-c-wizard__nav-link"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-5"
+                data-ouia-component-type="PF4/WizardNavItem"
+                data-ouia-safe="true"
                 id="step-C"
               >
                 C
@@ -410,6 +449,9 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-c-wizard__nav-link"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-6"
+                data-ouia-component-type="PF4/WizardNavItem"
+                data-ouia-safe="true"
                 id="step-D"
               >
                 D
@@ -525,6 +567,9 @@ exports[`Wizard bare wiz 1`] = `
       >
         <nav
           class="pf-c-wizard__nav"
+          data-ouia-component-id="OUIA-Generated-WizardNav-5"
+          data-ouia-component-type="PF4/WizardNav"
+          data-ouia-safe="true"
         >
           <ol
             class="pf-c-wizard__nav-list"
@@ -535,6 +580,9 @@ exports[`Wizard bare wiz 1`] = `
               <button
                 aria-current="step"
                 class="pf-c-wizard__nav-link pf-m-current"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-13"
+                data-ouia-component-type="PF4/WizardNavItem"
+                data-ouia-safe="true"
               >
                 A
               </button>

packages/react-core/src/components/Wizard/examples/Wizard.md

@@ -4,6 +4,7 @@ section: components
 cssPrefix: pf-c-wizard
 propComponents:
   ['Wizard', 'WizardNav', 'WizardNavItem', 'WizardHeader', 'WizardBody', 'WizardFooter', 'WizardToggle', 'WizardStep']
+ouia: true
 ---
 
 import { Button, Drawer, DrawerActions, DrawerCloseButton, DrawerColorVariant,
@@ -812,10 +813,10 @@ class GetCurrentStepWizard extends React.Component {
       step: 1
     };
     this.onCurrentStepChanged = ({ id }) => {
-        this.setState({
-            step: id
-        });
-    }
+      this.setState({
+        step: id
+      });
+    };
     this.closeWizard = () => {
       console.log('close wizard');
     };