Fixes #36471 - Add eslint rule to alert missing ouia-ids

.eslintrc

@@ -1,5 +1,9 @@
 {
-  "plugins": ["@theforeman/foreman", "spellcheck"],
+  "plugins": [
+    "@theforeman/foreman",
+    "spellcheck",
+    "@theforeman/rules"
+  ],
   "extends": "plugin:@theforeman/foreman/core",
   "rules": {
     "spellcheck/spell-checker": [
@@ -184,6 +188,7 @@
         ],
         "minLength": 3
       }
-    ]
+    ],
+    "@theforeman/rules/require-ouiaid": ["error"]
   }
 }

.github/workflows/js_tests.yml

@@ -40,8 +40,8 @@ jobs:
         run: npm ci --no-audit
       - name: Run linter
         run: npm run lint
-      - name: Run Spellcheck (only warnings)
-        run: npm run lint:spelling
+      - name: Run custom eslint rules Spellcheck (only warnings) and missing ouia-ids
+        run: npm run lint:custom
       - name: Run tests
         run: npm run test
       - name: Publish Coveralls (node v14)

package-exclude.json

@@ -3,6 +3,7 @@
         "@sheerun/mutationobserver-shim",
         "@theforeman/env",
         "@theforeman/eslint-plugin-foreman",
+        "@theforeman/eslint-plugin-rules",
         "@theforeman/stories",
         "@theforeman/test",
         "@theforeman/vendor-dev",

package.json

@@ -9,7 +9,7 @@
   },
   "scripts": {
     "lint": "tfm-lint",
-    "lint:spelling": "eslint ./webpack",
+    "lint:custom": "eslint ./webpack",
     "foreman-js:link": "./script/npm_link_foreman_js.sh",
     "postlint": "./script/npm_lint_plugins.js",
     "test": "tfm-test",
@@ -30,6 +30,7 @@
     "@babel/core": "^7.7.0",
     "@theforeman/builder": "^12.0.1",
     "@theforeman/eslint-plugin-foreman": "^12.0.1",
+    "@theforeman/eslint-plugin-rules": "^12.0.2",
     "@theforeman/test": "^12.0.1",
     "@theforeman/vendor-dev": "^12.0.1",
     "@types/jest": "<27.0.0",

webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/Breadcrumb.js

@@ -20,7 +20,9 @@ const Breadcrumb = ({
   if (isTitle) {
     return (
       <TextContent>
-        <Text component="h1">{items[0].caption}</Text>
+        <Text ouiaId="breadcrumb_title" component="h1">
+          {items[0].caption}
+        </Text>
       </TextContent>
     );
   }

webpack/assets/javascripts/react_app/components/Layout/Navigation.js

@@ -91,11 +91,12 @@ const Navigation = ({
     setCurrentPath(href);
   };
   return (
-    <Nav id="foreman-nav">
+    <Nav id="foreman-nav" ouiaId="foreman-nav">
       <NavList>
         {groupedItems.map(({ title, iconClass, groups, className }, index) => (
           <React.Fragment key={index}>
             <NavExpandable
+              ouiaId={`nav-expandable-${index}`}
               title={titleWithIcon(title, iconClass)}
               groupId="nav-expandable-group-1"
               isActive={
@@ -126,6 +127,7 @@ const Navigation = ({
                     ) => (
                       <React.Fragment key={id}>
                         <NavItem
+                          ouiaId={`nav-item-${id}`}
                           className={subItemClassName}
                           id={id}
                           // to={href}
@@ -144,6 +146,7 @@ const Navigation = ({
                   <React.Fragment key={groupIndex}>
                     <NavItemSeparator />
                     <NavExpandable
+                      ouiaId={`nav-expandable-${index}-${groupIndex}`}
                       title={group.title}
                       isExpanded={group.groupItems.some(
                         ({ isActive }) => isActive
@@ -163,6 +166,7 @@ const Navigation = ({
                         ) => (
                           <React.Fragment key={id}>
                             <NavItem
+                              ouiaId={`nav-item-${id}`}
                               className={subItemClassName}
                               id={id}
                               to={href}

webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/Header.js

@@ -25,7 +25,7 @@ const Header = ({
 }) => (
   <Masthead display={{ default: 'inline' }}>
     <MastheadToggle>
-      <Button onClick={onNavToggle} variant="plain">
+      <Button ouiaId="nav-toggle" onClick={onNavToggle} variant="plain">
         <BarsIcon />
       </Button>
     </MastheadToggle>

webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.js

@@ -29,7 +29,7 @@ const HeaderToolbar = ({
   instance_title: instanceTitle,
   isLoading,
 }) => (
-  <Toolbar id="data-toolbar" isFullHeight isStatic>
+  <Toolbar ouiaId="data-toolbar" id="data-toolbar" isFullHeight isStatic>
     <ToolbarContent>
       <ToolbarGroup className="header-tool-item-hidden-lg">
         <TaxonomySwitcher

webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap

@@ -5,6 +5,7 @@ exports[`HeaderToolbar rendering render HeaderToolbar 1`] = `
   id="data-toolbar"
   isFullHeight={true}
   isStatic={true}
+  ouiaId="data-toolbar"
 >
   <ToolbarContent
     isExpanded={false}

webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/PersonalAccessTokenModal.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -138,10 +139,16 @@ const PersonalAccessTokenModal = ({ controller, url }) => {
 
   return (
     <>
-      <Button variant="primary" isSmall onClick={() => setIsModalOpen(true)}>
+      <Button
+        ouiaId="add-personal-access-token-button"
+        variant="primary"
+        isSmall
+        onClick={() => setIsModalOpen(true)}
+      >
         {__('Add Personal Access Token')}
       </Button>
       <Modal
+        ouiaId="new-token-modal"
         id="new-token-modal"
         className="token-modal"
         variant={ModalVariant.small}
@@ -150,6 +157,7 @@ const PersonalAccessTokenModal = ({ controller, url }) => {
         onClose={closeModal}
         actions={[
           <Button
+            ouiaId="confirm-button"
             id="confirm-button"
             key="confirm"
             variant="primary"
@@ -169,6 +177,7 @@ const PersonalAccessTokenModal = ({ controller, url }) => {
             {__('Confirm')}
           </Button>,
           <Button
+            ouiaId="cancel-button"
             key="cancel"
             variant="link"
             onClick={closeModal}
@@ -190,6 +199,7 @@ const PersonalAccessTokenModal = ({ controller, url }) => {
             helperTextInvalid={nameHelperText()}
           >
             <TextInput
+              ouiaId="personal-token-name"
               aria-label="personal access token name input"
               id="personal-token-name"
               isRequired
@@ -216,6 +226,7 @@ const PersonalAccessTokenModal = ({ controller, url }) => {
             <div className="pf-c-form">
               <FormGroup fieldId="token-expires-never">
                 <Radio
+                  ouiaId="expires-never"
                   isChecked={endsNever}
                   onChange={() => {
                     clearDateTimeState();
@@ -228,6 +239,7 @@ const PersonalAccessTokenModal = ({ controller, url }) => {
               </FormGroup>
               <FormGroup fieldId="token-expires-datetime">
                 <Radio
+                  ouiaId="expires-at"
                   isChecked={!endsNever}
                   onChange={() => {
                     setEndsNever(false);

webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/index.js

@@ -204,13 +204,15 @@ const RegistrationCommandsPage = () => {
               onSelect={(e, tab) => changeTab(e, tab)}
             >
               <Tab
+                ouiaId="tab-general"
                 eventKey={0}
                 title={<TabTitleText>{__('General')}</TabTitleText>}
                 tabContentId="generalTab"
                 tabContentRef={generalTabRef}
               />
 
               <Tab
+                ouiaId="tab-advanced"
                 eventKey={1}
                 title={<TabTitleText>{__('Advanced')}</TabTitleText>}
                 tabContentId="advancedTab"

webpack/assets/javascripts/react_app/routes/common/PageLayout/PageLayout.js

@@ -34,7 +34,9 @@ const PageLayout = ({
       <div id="breadcrumb">
         {!breadcrumbOptions && (
           <TextContent>
-            <Text component="h1">{header}</Text>
+            <Text ouiaId="breadcrumb_title" component="h1">
+              {header}
+            </Text>
           </TextContent>
         )}
         {customBreadcrumbs ||