perf(ouia): make ouia functional, add namespace (#3927)

* helper implementation

* update ouia components

* rename data-ouia-id to data-ouia-component-id

* fix lint

Author: redallen

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

@@ -4,7 +4,7 @@ exports[`AboutModalBoxCloseButton should match snapshot (auto-generated) 1`] = `
 <div
   className="pf-c-about-modal-box__close ''"
 >
-  <Component
+  <Button
     aria-label="Close Dialog"
     onClick={[Function]}
     variant="plain"
@@ -15,6 +15,6 @@ exports[`AboutModalBoxCloseButton should match snapshot (auto-generated) 1`] = `
       size="sm"
       title={null}
     />
-  </Component>
+  </Button>
 </div>
 `;

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

@@ -4,7 +4,7 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
 <div
   className="pf-c-about-modal-box__close"
 >
-  <Component
+  <Button
     aria-label="Close Dialog"
     onClick={[Function]}
     variant="plain"
@@ -15,15 +15,15 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
       size="sm"
       title={null}
     />
-  </Component>
+  </Button>
 </div>
 `;
 
 exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
 <div
   className="pf-c-about-modal-box__close"
 >
-  <Component
+  <Button
     aria-label="Klose Daylok"
     onClick={[Function]}
     variant="plain"
@@ -34,15 +34,15 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
       size="sm"
       title={null}
     />
-  </Component>
+  </Button>
 </div>
 `;
 
 exports[`AboutModalBoxCloseButton Test onclose 1`] = `
 <div
   className="pf-c-about-modal-box__close"
 >
-  <Component
+  <Button
     aria-label="Close Dialog"
     onClick={[MockFunction]}
     variant="plain"
@@ -53,6 +53,6 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
       size="sm"
       title={null}
     />
-  </Component>
+  </Button>
 </div>
 `;

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

@@ -3,9 +3,8 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Alert/alert';
 import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 import { AlertIcon } from './AlertIcon';
-import { capitalize } from '../../helpers/util';
+import { capitalize, getOUIAProps, OUIAProps } from '../../helpers';
 import { Omit } from '../../helpers/typeUtils';
-import { InjectedOuiaProps, withOuiaContext } from '../withOuia';
 
 export enum AlertVariant {
   success = 'success',
@@ -36,7 +35,7 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   isLiveRegion?: boolean;
 }
 
-const Alert: React.FunctionComponent<AlertProps & InjectedOuiaProps> = ({
+export const Alert: React.FunctionComponent<AlertProps & OUIAProps> = ({
   variant = AlertVariant.info,
   isInline = false,
   isLiveRegion = false,
@@ -46,10 +45,9 @@ const Alert: React.FunctionComponent<AlertProps & InjectedOuiaProps> = ({
   title,
   children = '',
   className = '',
-  ouiaContext = null,
-  ouiaId = null,
+  ouiaId,
   ...props
-}: AlertProps & InjectedOuiaProps) => {
+}: AlertProps & OUIAProps) => {
   const readerTitle = (
     <React.Fragment>
       <span className={css(accessibleStyles.screenReader)}>{variantLabel}</span>
@@ -69,10 +67,7 @@ const Alert: React.FunctionComponent<AlertProps & InjectedOuiaProps> = ({
       {...props}
       className={customClassName}
       aria-label={ariaLabel}
-      {...(ouiaContext.isOuia && {
-        'data-ouia-component-type': 'Alert',
-        'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
-      })}
+      {...getOUIAProps('Alert', ouiaId)}
       {...(isLiveRegion && {
         'aria-live': 'polite',
         'aria-atomic': 'false'
@@ -87,6 +82,3 @@ const Alert: React.FunctionComponent<AlertProps & InjectedOuiaProps> = ({
     </div>
   );
 };
-
-const AlertWithOuiaContext = withOuiaContext(Alert);
-export { AlertWithOuiaContext as Alert };

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

@@ -1,7 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Alert should match snapshot (auto-generated) 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
+<div
+  aria-label="string"
+  className="pf-c-alert pf-m-success ''"
+  data-ouia-component-id={0}
+  data-ouia-component-type="PF4/Alert"
+  data-ouia-safe={true}
+>
+  <AlertIcon
+    variant="success"
+  />
+  <h4
+    className="pf-c-alert__title"
+  >
+    <span
+      className="pf-u-screen-reader"
+    >
+      string
+    </span>
+    <div>
+      ReactNode
+    </div>
+  </h4>
+</div>
 `;

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AlertActionCloseButton should match snapshot (auto-generated) 1`] = `
-<Component
+<Button
   aria-label="''"
   onClick={[Function]}
   variant="plain"
@@ -12,5 +12,5 @@ exports[`AlertActionCloseButton should match snapshot (auto-generated) 1`] = `
     size="sm"
     title={null}
   />
-</Component>
+</Button>
 `;

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

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AlertActionLink should match snapshot (auto-generated) 1`] = `
-<Component
+<Button
   className="''"
   variant="link"
 >
   ''
-</Component>
+</Button>
 `;