From 56a7fe87d45463af326c4be6c5b319ecbc085e12 Mon Sep 17 00:00:00 2001
From: MariaAga <mariaaga@redhat.com>
Date: Thu, 29 Jun 2023 18:23:18 +0200
Subject: [PATCH] Fixes #36471 - Add eslint rule to alert missing ouia-ids

---
 .eslintrc                                          |  9 +++++++--
 .github/workflows/js_tests.yml                     |  4 ++--
 package-exclude.json                               |  1 +
 package.json                                       |  3 ++-
 .../BreadcrumbBar/components/Breadcrumb.js         |  4 +++-
 .../react_app/components/Layout/Navigation.js      |  6 +++++-
 .../components/Layout/components/Toolbar/Header.js |  2 +-
 .../Layout/components/Toolbar/HeaderToolbar.js     |  2 +-
 .../__snapshots__/HeaderToolbar.test.js.snap       |  1 +
 .../PersonalAccessTokenModal.js                    | 14 +++++++++++++-
 .../RegistrationCommandsPage/index.js              |  2 ++
 .../routes/common/PageLayout/PageLayout.js         |  4 +++-
 12 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index d2b5d09efc8..d6d85e90c27 100644
--- a/.eslintrc
+++ b/.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"]
   }
 }
diff --git a/.github/workflows/js_tests.yml b/.github/workflows/js_tests.yml
index 9d681f17342..a6b66d5818a 100644
--- a/.github/workflows/js_tests.yml
+++ b/.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)
diff --git a/package-exclude.json b/package-exclude.json
index 818dc95a830..1f37c76cf80 100644
--- a/package-exclude.json
+++ b/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",
diff --git a/package.json b/package.json
index 84e8b4b21a9..faf29ffebe6 100644
--- a/package.json
+++ b/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",
diff --git a/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/Breadcrumb.js b/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/Breadcrumb.js
index a88b2091bd4..228d02bf701 100644
--- a/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/Breadcrumb.js
+++ b/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>
     );
   }
diff --git a/webpack/assets/javascripts/react_app/components/Layout/Navigation.js b/webpack/assets/javascripts/react_app/components/Layout/Navigation.js
index 46c9e0d0ad1..5a92239fd88 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/Navigation.js
+++ b/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}
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/Header.js b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/Header.js
index 68454a6ab16..3a0cad884f1 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/Header.js
+++ b/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>
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.js b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.js
index 08ab75d8022..e0346ddc87b 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.js
+++ b/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
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap
index fc338091ed9..799e0753a83 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap
+++ b/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}
diff --git a/webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/PersonalAccessTokenModal.js b/webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/PersonalAccessTokenModal.js
index b8e36059bba..4aa09bcf2e9 100644
--- a/webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/PersonalAccessTokenModal.js
+++ b/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);
diff --git a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/index.js b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/index.js
index 0afcd7071e2..3fd94feb132 100644
--- a/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/index.js
+++ b/webpack/assets/javascripts/react_app/routes/RegistrationCommands/RegistrationCommandsPage/index.js
@@ -204,6 +204,7 @@ const RegistrationCommandsPage = () => {
               onSelect={(e, tab) => changeTab(e, tab)}
             >
               <Tab
+                ouiaId="tab-general"
                 eventKey={0}
                 title={<TabTitleText>{__('General')}</TabTitleText>}
                 tabContentId="generalTab"
@@ -211,6 +212,7 @@ const RegistrationCommandsPage = () => {
               />
 
               <Tab
+                ouiaId="tab-advanced"
                 eventKey={1}
                 title={<TabTitleText>{__('Advanced')}</TabTitleText>}
                 tabContentId="advancedTab"
diff --git a/webpack/assets/javascripts/react_app/routes/common/PageLayout/PageLayout.js b/webpack/assets/javascripts/react_app/routes/common/PageLayout/PageLayout.js
index 06a9c4aa17b..d88a0df1787 100644
--- a/webpack/assets/javascripts/react_app/routes/common/PageLayout/PageLayout.js
+++ b/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 ||