Fixes #37619 - Add ouia-ids for remediation wizard

.eslintrc

@@ -1,4 +1,13 @@
 {
-  "plugins": ["@theforeman/foreman"],
-  "extends": ["plugin:@theforeman/foreman/core", "plugin:@theforeman/foreman/plugins"]
-}
+  "plugins": [
+    "@theforeman/foreman",
+    "@theforeman/rules"
+  ],
+  "extends": [
+    "plugin:@theforeman/foreman/core",
+    "plugin:@theforeman/foreman/plugins"
+  ],
+  "rules":{
+    "@theforeman/rules/require-ouiaid": ["error"]
+  }
+}

.github/workflows/js_tests.yml

@@ -12,6 +12,27 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
+  lint_custom:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: [14]
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version:  ${{ matrix.node-version }}
+      - name: Npm install
+        run: |
+          npm install
+      - name: Run plugin linter
+        run: |
+          npm run lint
+      - name: Run custom plugin linter
+        run: |
+          npm run lint:custom
   test:
     name: JavaScript
     uses: theforeman/actions/.github/workflows/foreman_plugin_js.yml@v0

package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "scripts": {
     "lint": "tfm-lint --plugin -d /webpack",
+    "lint:custom": "eslint ./webpack",
     "test": "tfm-test --plugin --config jest.config.js",
     "test:watch": "tfm-test --plugin --watchAll --config jest.config.js",
     "test:current": "tfm-test --plugin --watch --config jest.config.js",
@@ -28,6 +29,7 @@
     "@testing-library/user-event": "^13.2.1",
     "@theforeman/builder": ">= 10.1.0",
     "@theforeman/eslint-plugin-foreman": ">= 10.1.0",
+    "@theforeman/eslint-plugin-rules": ">= 10.1.0",
     "@theforeman/find-foreman": ">= 10.1.0",
     "@theforeman/test": ">= 10.1.0",
     "@theforeman/vendor-dev": ">= 10.1.0",

webpack/components/ConfirmModal.js

@@ -11,6 +11,7 @@ const ConfirmModal = props => {
 
   const actions = [
     <Button
+      ouiaId={`oscap-conf-modal-${props.record.id}-confirm`}
       key="confirm"
       variant="primary"
       onClick={() => props.onConfirm(callMutation, props.record.id)}
@@ -19,6 +20,7 @@ const ConfirmModal = props => {
       {__('Confirm')}
     </Button>,
     <Button
+      ouiaId={`oscap-conf-modal-${props.record.id}-cancel`}
       key="cancel"
       variant="link"
       onClick={event => props.onClose()}
@@ -34,6 +36,7 @@ const ConfirmModal = props => {
 
   return (
     <Modal
+      ouiaId={`oscap-conf-modal-${props.record.id}`}
       variant={ModalVariant.medium}
       title={props.title}
       isOpen={props.isOpen}

webpack/components/EditableInput.js

@@ -62,6 +62,7 @@ const EditableInput = props => {
   const editBtn = (
     <SplitItem>
       <Button
+        ouiaId={`oscap-edit-${props.attrName}-edit-button`}
         className="inline-edit-icon"
         aria-label={`edit ${props.attrName}`}
         variant="plain"
@@ -115,6 +116,7 @@ const EditableInput = props => {
       </SplitItem>
       <SplitItem>
         <Button
+          ouiaId={`oscap-edit-${props.attrName}-submit-button`}
           aria-label={`submit ${props.attrName}`}
           variant="plain"
           onClick={onSubmit}
@@ -125,6 +127,7 @@ const EditableInput = props => {
       </SplitItem>
       <SplitItem>
         <Button
+          ouiaId={`oscap-edit-${props.attrName}-cancel-button`}
           aria-label={`cancel editing ${props.attrName}`}
           variant="plain"
           onClick={onCancel}

webpack/components/EmptyState.js

@@ -29,11 +29,19 @@ const EmptyStateIcon = ({ error, search, lock }) => {
   return <PfEmptyStateIcon icon={CubeIcon} />;
 };
 
-const EmptyState = ({ title, body, error, search, lock, primaryButton }) => (
+const EmptyState = ({
+  title,
+  body,
+  error,
+  search,
+  lock,
+  primaryButton,
+  ouiaEmptyStateTitleId,
+}) => (
   <Bullseye>
     <PfEmptyState variant={EmptyStateVariant.small}>
       <EmptyStateIcon error={!!error} search={search} lock={lock} />
-      <Title headingLevel="h2" size="lg">
+      <Title ouiaId={ouiaEmptyStateTitleId} headingLevel="h2" size="lg">
         {title}
       </Title>
       <EmptyStateBody>{body}</EmptyStateBody>
@@ -65,6 +73,7 @@ EmptyState.propTypes = {
   search: PropTypes.bool,
   lock: PropTypes.bool,
   primaryButton: PropTypes.node,
+  ouiaEmptyStateTitleId: PropTypes.string,
 };
 
 EmptyState.defaultProps = {
@@ -75,6 +84,7 @@ EmptyState.defaultProps = {
   search: false,
   lock: false,
   primaryButton: null,
+  ouiaEmptyStateTitleId: 'oscap-empty-state-title',
 };
 
 export default EmptyState;

webpack/components/IndexLayout.js

@@ -21,7 +21,9 @@ const IndexLayout = ({ pageTitle, children, contentWidthSpan }) => (
     <Grid className="scap-page-grid">
       <GridItem span={12} className="pf-u-pb-xl">
         <TextContent>
-          <Text component={TextVariants.h1}>{pageTitle}</Text>
+          <Text ouiaId="oscap-index-title" component={TextVariants.h1}>
+            {pageTitle}
+          </Text>
         </TextContent>
       </GridItem>
       <GridItem span={contentWidthSpan}>{children}</GridItem>

webpack/components/IndexTable/index.js

@@ -11,6 +11,7 @@ const IndexTable = ({
   totalCount,
   toolbarBtns,
   ariaTableLabel,
+  ouiaTableId,
   columns,
   ...rest
 }) => {
@@ -38,6 +39,7 @@ const IndexTable = ({
         </FlexItem>
       </Flex>
       <Table
+        ouiaId={ouiaTableId}
         aria-label={ariaTableLabel}
         cells={columns}
         {...rest}
@@ -56,6 +58,7 @@ IndexTable.propTypes = {
   toolbarBtns: PropTypes.node,
   totalCount: PropTypes.number.isRequired,
   ariaTableLabel: PropTypes.string.isRequired,
+  ouiaTableId: PropTypes.string.isRequired,
   columns: PropTypes.array.isRequired,
 };
 

webpack/components/LinkButton.js

@@ -9,9 +9,11 @@ const LinkButton = ({
   btnText,
   isDisabled,
   btnAriaLabel,
+  ouiaId,
 }) => (
   <Link to={path}>
     <Button
+      ouiaId={ouiaId}
       variant={btnVariant}
       isDisabled={isDisabled}
       aria-label={btnAriaLabel}
@@ -27,12 +29,14 @@ LinkButton.propTypes = {
   btnVariant: PropTypes.string,
   isDisabled: PropTypes.bool,
   btnAriaLabel: PropTypes.string,
+  ouiaId: PropTypes.string,
 };
 
 LinkButton.defaultProps = {
   btnVariant: 'primary',
   isDisabled: false,
   btnAriaLabel: null,
+  ouiaId: 'oscap-link-button',
 };
 
 export default LinkButton;

webpack/components/OpenscapRemediationWizard/ViewSelectedHostsLink.js

@@ -17,6 +17,7 @@ const ViewSelectedHostsLink = ({
   const url = foremanUrl(`${useForemanHostsPageUrl()}?search=${search}`);
   return (
     <Button
+      ouiaId="oscap-rem-wiz-ext-link-to-hosts"
       component="a"
       variant="link"
       icon={<ExternalLinkSquareAltIcon />}

webpack/components/OpenscapRemediationWizard/index.js

@@ -132,6 +132,7 @@ const OpenscapRemediationWizard = ({
         </OpenscapRemediationWizardContext.Provider>
       )}
       <Button
+        ouiaId="oscap-rem-wiz-open-wiz-button"
         id="openscapRemediationWizardButton"
         variant="link"
         isInline

webpack/components/OpenscapRemediationWizard/steps/Finish.js

@@ -74,6 +74,7 @@ const Finish = ({ onClose }) => {
 
   const linkToJob = (
     <Button
+      ouiaId="oscap-rem-wiz-job-details-link"
       variant="link"
       icon={<ExternalLinkSquareAltIcon />}
       iconPosition="right"
@@ -84,7 +85,11 @@ const Finish = ({ onClose }) => {
       {__('Job details')}
     </Button>
   );
-  const closeBtn = <Button onClick={onClose}>{__('Close')}</Button>;
+  const closeBtn = (
+    <Button ouiaId="oscap-rem-wiz-close-button-fin-step" onClick={onClose}>
+      {__('Close')}
+    </Button>
+  );
   const errorComponent =
     statusCode === 403 ? (
       <PermissionDenied
@@ -93,6 +98,7 @@ const Finish = ({ onClose }) => {
       />
     ) : (
       <EmptyState
+        ouiaEmptyStateTitleId="oscap-rem-wiz-empty-state-title"
         error
         title={__('Error!')}
         body={errorMsg(data)}
@@ -102,6 +108,7 @@ const Finish = ({ onClose }) => {
   const body =
     status === STATUS.RESOLVED ? (
       <EmptyState
+        ouiaEmptyStateTitleId="oscap-rem-wiz-empty-state-title"
         title={__(
           'The job has started on selected host(s), you can check the status on the job details page.'
         )}

webpack/components/OpenscapRemediationWizard/steps/ReviewHosts.js

@@ -109,7 +109,7 @@
         selectAllMode,
       };
     }
   }, [selectedCount, fetchBulkParams, setHostIdsParam]);
 
   const selectionToolbar = (
     <ToolbarItem key="selectAll">
@@ -166,6 +166,7 @@
       title: __('Name'),
       wrapper: ({ name, display_name: displayName }) => (
         <Button
+          ouiaId={`oscap-rem-wiz-ext-link-to-host-${name}-revhst-step`}
           component="a"
           variant="link"
           target="_blank"

webpack/components/OpenscapRemediationWizard/steps/ReviewRemediation.js

@@ -118,6 +118,7 @@ const ReviewRemediation = () => {
         </GridItem>
         <GridItem md={12} span={4} rowSpan={1}>
           <Button
+            ouiaId={`oscap-wiz-host-details-button-${hostName}-revrem-step`}
             variant="link"
             icon={<ExternalLinkSquareAltIcon />}
             iconPosition="right"
@@ -130,6 +131,7 @@ const ReviewRemediation = () => {
         </GridItem>
         <GridItem md={12} span={8} rowSpan={1}>
           <Button
+            ouiaId={`oscap-wiz-ext-link-to-hosts-${source}-revrem-step`}
             variant="link"
             icon={<ExternalLinkSquareAltIcon />}
             iconPosition="right"
@@ -154,6 +156,7 @@ const ReviewRemediation = () => {
             {method === 'manual' ? null : (
               <GridItem span={4} rowSpan={1}>
                 <Checkbox
+                  ouiaId="oscap-wiz-reboot-checkbox-revrem-step"
                   id="reboot-checkbox"
                   label={__('Reboot the system(s)')}
                   name="reboot-checkbox"

webpack/components/OpenscapRemediationWizard/steps/SnippetSelect.js

@@ -141,7 +141,12 @@ const SnippetSelect = () => {
         )}
       </Form>
     ) : (
-      <EmptyState error title={__('Error!')} body={errorMsg(logError)} />
+      <EmptyState
+        ouiaEmptyStateTitleId="oscap-rem-wiz-empty-state-title"
+        error
+        title={__('Error!')}
+        body={errorMsg(logError)}
+      />
     );
 
   return (

webpack/helpers/formFieldsHelper.js

@@ -25,6 +25,7 @@ export const SelectField = props => {
       validated={valid}
     >
       <FormSelect
+        ouiaId={`oscap-form-sel-${field.name}`}
         {...fieldProps}
         className="without_select2"
         aria-label={fieldProps.name}