feat: add ouia support to dropdown next

Author: gefgu

packages/react-core/src/next/components/Dropdown/Dropdown.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../../../components/Menu';
 import { Popper } from '../../../helpers/Popper/Popper';
+import { useOUIAProps, OUIAProps } from '../../../helpers';
 
-export interface DropdownProps extends MenuProps {
+export interface DropdownProps extends MenuProps, OUIAProps {
   /** Anything which can be rendered in a dropdown. */
   children?: React.ReactNode;
   /** Classes applied to root element of dropdown. */
@@ -23,6 +24,10 @@ export interface DropdownProps extends MenuProps {
   isScrollable?: boolean;
   /** Min width of the menu. */
   minWidth?: string;
+  /** 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 const Dropdown: React.FunctionComponent<DropdownProps> = ({
@@ -35,11 +40,14 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
   isPlain,
   isScrollable,
   minWidth,
+  ouiaId,
+  ouiaSafe = true,
   ...props
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
   const toggleRef = React.useRef<HTMLButtonElement>();
   const containerRef = React.useRef<HTMLDivElement>();
+  const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
 
   const menuRef = (props.innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
   React.useEffect(() => {
@@ -101,7 +109,7 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
     </Menu>
   );
   return (
-    <div ref={containerRef}>
+    <div ref={containerRef} {...ouiaProps}>
       <Popper
         trigger={toggle(toggleRef)}
         removeFindDomNode

packages/react-core/src/next/components/Dropdown/DropdownItem.tsx

@@ -1,24 +1,34 @@
 import React from 'react';
 import { css } from '@patternfly/react-styles';
 import { MenuItemProps, MenuItem } from '../../../components/Menu';
+import { useOUIAProps, OUIAProps } from '../../../helpers';
 
-export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'> {
+export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps {
   /** Anything which can be rendered in a dropdown item */
   children?: React.ReactNode;
   /** Classes applied to root element of dropdown item */
   className?: string;
   /** Description of the dropdown item */
   description?: 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 const DropdownItem: React.FunctionComponent<MenuItemProps> = ({
   children,
   className,
   description,
+  ouiaId,
+  ouiaSafe,
   ...props
-}: DropdownItemProps) => (
-  <MenuItem className={css(className)} description={description} {...props}>
-    {children}
-  </MenuItem>
-);
+}: DropdownItemProps) => {
+  const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
+  return (
+    <MenuItem className={css(className)} description={description} {...ouiaProps} {...props}>
+      {children}
+    </MenuItem>
+  );
+};
 DropdownItem.displayName = 'DropdownItem';