feat(HMS-3574): add additional ouiaId

scripts/sh/search-ouia-compliant.sh

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+# See: https://www.patternfly.org/developer-resources/open-ui-automation/#ouia-compliant-patternfly-5-components
+# See: https://github.com/podengo-project/idmsvc-frontend/pull/28
+
+opts=(-HRn)
+
+# react-core package           # Prefix to use on ouiaId attribute
+opts+=(-e \<Alert)             # Alert
+opts+=(-e \<Breadcrumb)        # Breadcrumb
+opts+=(-e \<Button)            # Button|Link
+opts+=(-e \<Card)              # Card
+opts+=(-e \<Checkbox)          # Checkbox
+opts+=(-e \<Chip)              # Chip
+opts+=(-e \<Dropdown)          # Dropdown
+opts+=(-e \<DropdownItem)      # Dropitem
+opts+=(-e \<FormSelect)        # Select
+opts+=(-e \<Menu)              # Menu
+opts+=(-e \<Modal)             # Modal
+opts+=(-e \<Navigation)        # Nav
+opts+=(-e \<NavExpandable)     # Navexpandable
+opts+=(-e \<NavItem)           # Navitem
+opts+=(-e \<Pagination)        # Pagination
+opts+=(-e \<Radio)             # Radio
+opts+=(-e \<Select)            # Select
+opts+=(-e \<Switch)            # Switch
+opts+=(-e \<TabContent)        # Tabcontent
+opts+=(-e \<Tabs)              # Tabs
+opts+=(-e \<Text)              # Text
+opts+=(-e \<TextInput)         # Textinput
+opts+=(-e \<Title)             # Title
+opts+=(-e \<Toolbar)           # Toolbar
+
+# react-table package
+opts+=(-e \<Table)             # Table
+opts+=(-e \<Tr)                # Tr
+
+# Launch the search
+grep "${opts[@]}" src/

src/Components/DomainList/DomainList.tsx

@@ -216,7 +216,7 @@ export const DomainList = () => {
     <>
       <TableComposable>
         <Thead>
-          <Tr>
+          <Tr ouiaId="TrDomainListHeader">
             <Th sort={getSortParams(0)}>Name</Th>
             <Th>Type</Th>
             <Th sort={getSortParams(3)}>Domain auto-join on launch</Th>
@@ -241,7 +241,7 @@ export const DomainList = () => {
                       onClick={() => {
                         onShowDetails(domain);
                       }}
-                      ouiaId="LinkListDomainDetails"
+                      ouiaId="LinkDomainListDetails"
                     >
                       {domain.title}
                     </Button>

src/Routes/DefaultPage/DefaultPage.tsx

@@ -36,7 +36,7 @@
 
   return (
     <PageHeader>
-      <PageHeaderTitle title={title} ouiaId="TextDefaultTitle" />
+      <PageHeaderTitle title={title} />
       <p>
         Manage registered identity domains to leverage host access controls from your existing identity and access management.{' '}
         <Button
@@ -77,7 +77,7 @@
         <Bullseye>
           <EmptyState variant={EmptyStateVariant.full}>
             <EmptyStateIcon icon={RegistryIcon} />
-            <Title headingLevel="h2" size="lg" className="pf-u-pt-sm">
+            <Title headingLevel="h2" size="lg" className="pf-u-pt-sm" ouiaId="TitleEmptyContent">
               No identity domains registered
             </Title>
             <EmptyStateBody>
@@ -235,7 +235,7 @@
   const resources_api = ResourcesApiFactory(undefined, base_url, undefined);
 
   // States
   const [page, setPage] = useState<number>(0);
   const [itemCount, setItemCount] = useState<number>(appContext?.domains.length || -1);
   const [perPage] = useState<number>(10);
   const [offset, setOffset] = useState<number>(0);

src/Routes/DetailPage/Components/FilterField/filter-field.tsx

@@ -36,6 +36,7 @@
       key="Name"
       value="Name"
       component="button"
+      ouiaId="DropitemFilterFieldName"
       onClick={() => {
         setFilter('Name');
       }}
@@ -46,6 +47,7 @@
       key="Location"
       value="Location"
       component="button"
+      ouiaId="DropitemFilterFieldLocation"
       onClick={() => {
         setFilter('Location');
       }}
@@ -54,7 +56,7 @@
     </DropdownItem>,
   ];
 
   const onChange = (value: string, event: React.FormEvent<HTMLInputElement>) => {
     setValue(value);
   };
 
@@ -70,9 +72,16 @@
           }
           isOpen={isOpen}
           dropdownItems={dropdownItems}
+          ouiaId="DropdownFilterField"
         />
-        <TextInput id="input-filter-dropdown" aria-label="input with dropdown and button" value={value} onChange={onChange} />
-        <Button id="input-filter-button" variant="control" icon={<SearchIcon />} />
+        <TextInput
+          id="input-filter-dropdown"
+          aria-label="input with dropdown and button"
+          value={value}
+          onChange={onChange}
+          ouiaId="TextinputFilterField"
+        />
+        <Button id="input-filter-button" variant="control" icon={<SearchIcon />} ouiaId="ButtonFilterField" />
       </InputGroup>
     </>
   );

src/Routes/DetailPage/DetailPage.tsx

@@ -71,7 +71,7 @@
 
   const onKebabToggle = (
     isOpen: boolean,
     event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>
   ) => {
     event.stopPropagation();
     setIsKebabOpen(isOpen);
@@ -111,7 +111,7 @@
 
   // Tabs
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
   const handleTabClick = (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent, tabIndex: string | number) => {
     setActiveTabKey(tabIndex);
   };
 
@@ -132,6 +132,7 @@
                 isPlain
                 dropdownItems={dropdownItems}
                 position="right"
+                ouiaId=""
               />
             </FlexItem>
           </Flex>
@@ -148,7 +149,7 @@
           </Tabs>
         </PageHeader>
         <PageSection>
-          <Card>
+          <Card ouiaId="CardDetailPage">
             <CardBody>
               {activeTabKey === 0 && (
                 <DetailGeneral

src/Routes/WizardPage/Components/PagePreparation/PagePreparation.tsx

@@ -75,7 +75,7 @@ const PagePreparation = (props: PagePreparationProps) => {
 
   return (
     <>
-      <Title headingLevel={'h2'} ouiaId="TextWizardPagePreparationTitle">
+      <Title headingLevel={'h2'} ouiaId="TextPagePreparationTitle">
         Preparation for your identity domain registration
       </Title>
       <Form
@@ -88,7 +88,7 @@ const PagePreparation = (props: PagePreparationProps) => {
             title={'Only Red Hat Identity Management (IdM) is currently supported.'}
             variant="info"
             isInline
-            ouiaId="AlertWizardPagePrepare"
+            ouiaId="AlertPagePreparationPrepare"
           ></Alert>
         </FormGroup>
         <FormGroup label="Identity domain prerequisites">
@@ -103,7 +103,7 @@ const PagePreparation = (props: PagePreparationProps) => {
                 iconPosition="right"
                 isInline
                 href={prerequisitesLink}
-                ouiaId="ButtonWizardPagePreparePrerequisites"
+                ouiaId="ButtonPagePreparationPrerequisites"
               >
                 prerequisites
               </Button>
@@ -126,11 +126,11 @@ const PagePreparation = (props: PagePreparationProps) => {
                   iconPosition="right"
                   isInline
                   href={installServerPackagesLink}
-                  ouiaId="LinkWizardPagePrepareInstall"
+                  ouiaId="LinkPagePreparationInstall"
                 >
                   steps to install the server packages
                 </Button>
-                <ClipboardCopy hoverTip="copy" clickTip="Copied" isReadOnly ouiaId="TextWizardPagePrepareInstallPackage">
+                <ClipboardCopy hoverTip="copy" clickTip="Copied" isReadOnly ouiaId="TextPagePreparationInstallPackage">
                   dnf copr enable @podengo/ipa-hcc && dnf install ipa-hcc-server
                 </ClipboardCopy>
               </TextContent>

src/Routes/WizardPage/Components/PageReview/PageReview.tsx

@@ -27,7 +27,7 @@ import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-tab
 const PageReviewIpaServersHead = () => {
   return (
     <Thead>
-      <Tr>
+      <Tr ouiaId="TrPageReviewIpaServers">
         <Th>Name</Th>
         <Th>UUID</Th>
       </Tr>

src/Routes/WizardPage/Components/PageServiceDetails/PageServiceDetails.tsx

@@ -51,14 +51,14 @@
     }
   };
 
   const onChangeTitle = (value: string, event: React.FormEvent<HTMLInputElement>) => {
     setTitle(value);
     if (props.onChangeTitle) {
       props.onChangeTitle(value);
     }
   };
 
   const onChangeDescription = (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => {
     setDescription(value);
     if (props.onChangeDescription) {
       props.onChangeDescription(value);
@@ -70,7 +70,7 @@
   return (
     <>
       <Form onSubmit={(e) => e.preventDefault()}>
-        <Title headingLevel={'h2'} ouiaId="TextWizardDetailsTitle">
+        <Title headingLevel={'h2'} ouiaId="TitleWizardDetailsTitle">
           Add your identity domain information
         </Title>
         <FormGroup label="Display name" isRequired fieldId="register-title">
@@ -79,7 +79,7 @@
             value={title}
             onChange={onChangeTitle}
             className="pf-u-w-100 pf-u-w-50-on-md pf-u-w-50-on-xl"
-            ouiaId="TextWizardDetailsDomainTitle"
+            ouiaId="TextinputWizardDetailsDomainTitle"
           />
         </FormGroup>
         <FormGroup label="Description" fieldId="register-description">
@@ -113,7 +113,7 @@
             isChecked={isAutoEnrollmentEnabled}
             hasCheckIcon
             onChange={onChangeAutoEnrollment}
-            ouiaId="ButtonWizardDetailsDomainAutoenrollment"
+            ouiaId="SwitchWizardDetailsDomainAutoenrollment"
           />
         </FormGroup>
       </Form>

src/Routes/WizardPage/Components/PageServiceRegistration/PageServiceRegistration.tsx

@@ -60,7 +60,7 @@ const PageServiceRegistration = (props: PageServiceRegistrationProp) => {
 
   return (
     <>
-      <Title headingLevel={'h2'} ouiaId="TextWizardRegistrationTitle">
+      <Title headingLevel={'h2'} ouiaId="TitleWizardRegistration">
         Register your identity domain
       </Title>
       <Form onSubmit={(e) => e.preventDefault()}>