From c2cc65db960828d9fffbe04dc18f958daebba8eb Mon Sep 17 00:00:00 2001
From: MariaAga <mariaaga@redhat.com>
Date: Tue, 20 Aug 2024 15:20:25 +0100
Subject: [PATCH 1/2] Fixes #37755 - drop oval code leftovers in React

---
 webpack/components/EditableInput.js   | 166 --------------------------
 webpack/components/EditableInput.scss |   3 -
 webpack/helpers/formFieldsHelper.js   | 114 ------------------
 3 files changed, 283 deletions(-)
 delete mode 100644 webpack/components/EditableInput.js
 delete mode 100644 webpack/components/EditableInput.scss
 delete mode 100644 webpack/helpers/formFieldsHelper.js

diff --git a/webpack/components/EditableInput.js b/webpack/components/EditableInput.js
deleted file mode 100644
index 4c1ddcaf..00000000
--- a/webpack/components/EditableInput.js
+++ /dev/null
@@ -1,166 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { translate as __ } from 'foremanReact/common/I18n';
-import {
-  Button,
-  Split,
-  SplitItem,
-  Spinner,
-  FormGroup,
-} from '@patternfly/react-core';
-import {
-  TimesIcon,
-  CheckIcon,
-  PencilAltIcon,
-  ExclamationCircleIcon,
-} from '@patternfly/react-icons';
-
-import './EditableInput.scss';
-
-const EditableInput = props => {
-  const [editing, setEditing] = useState(false);
-  const [submitting, setSubmitting] = useState(false);
-  const [inputValue, setInputValue] = useState(props.value);
-  const [error, setError] = useState('');
-  const [touched, setTouched] = useState(false);
-
-  const stopSubmitting = () => setSubmitting(false);
-
-  const handleSubmit = event => {
-    event.preventDefault();
-    onSubmit();
-  };
-
-  const onFinish = () => {
-    setSubmitting(false);
-    setEditing(false);
-  };
-
-  const onSubmit = () => {
-    setSubmitting(true);
-    props.onConfirm(inputValue, onFinish, stopSubmitting, onError);
-  };
-
-  const onError = err => {
-    setTouched(false);
-    setError(err);
-  };
-
-  const onCancel = () => {
-    setInputValue(props.value);
-    setEditing(false);
-    setError('');
-  };
-
-  const onChange = value => {
-    if (!touched) {
-      setTouched(true);
-    }
-    setInputValue(value);
-  };
-
-  const editBtn = (
-    <SplitItem>
-      <Button
-        ouiaId={`oscap-edit-${props.attrName}-edit-button`}
-        className="inline-edit-icon"
-        aria-label={`edit ${props.attrName}`}
-        variant="plain"
-        onClick={() => setEditing(true)}
-      >
-        <PencilAltIcon />
-      </Button>
-    </SplitItem>
-  );
-
-  if (!editing) {
-    return (
-      <Split>
-        <SplitItem>{props.value || <i>{__('None provided')}</i>}</SplitItem>
-        {props.allowed && editBtn}
-      </Split>
-    );
-  }
-
-  const Component = props.component;
-
-  const shouldValidate = (isTouched, err) => {
-    if (!isTouched) {
-      return err ? 'error' : 'success';
-    }
-    return 'noval';
-  };
-
-  const valid = shouldValidate(touched, error);
-
-  return (
-    <Split>
-      <SplitItem>
-        <form onSubmit={handleSubmit} className="pf-c-form">
-          <FormGroup
-            helperTextInvalid={error}
-            helperTextInvalidIcon={<ExclamationCircleIcon />}
-            validated={valid}
-          >
-            <Component
-              {...props.inputProps}
-              type="text"
-              aria-label={`${props.attrName} text input`}
-              isDisabled={submitting}
-              value={inputValue || ''}
-              onChange={onChange}
-              validated={valid}
-            />
-          </FormGroup>
-        </form>
-      </SplitItem>
-      <SplitItem>
-        <Button
-          ouiaId={`oscap-edit-${props.attrName}-submit-button`}
-          aria-label={`submit ${props.attrName}`}
-          variant="plain"
-          onClick={onSubmit}
-          isDisabled={submitting}
-        >
-          <CheckIcon />
-        </Button>
-      </SplitItem>
-      <SplitItem>
-        <Button
-          ouiaId={`oscap-edit-${props.attrName}-cancel-button`}
-          aria-label={`cancel editing ${props.attrName}`}
-          variant="plain"
-          onClick={onCancel}
-          isDisabled={submitting}
-        >
-          <TimesIcon />
-        </Button>
-      </SplitItem>
-      <SplitItem>
-        {submitting && (
-          <Spinner
-            key="spinner"
-            size="lg"
-            id={`edit-${props.attrName}-spinner`}
-          />
-        )}
-      </SplitItem>
-    </Split>
-  );
-};
-
-EditableInput.propTypes = {
-  allowed: PropTypes.bool.isRequired,
-  value: PropTypes.string,
-  onConfirm: PropTypes.func.isRequired,
-  attrName: PropTypes.string.isRequired,
-  component: PropTypes.object.isRequired,
-  inputProps: PropTypes.object,
-};
-
-EditableInput.defaultProps = {
-  inputProps: {},
-  value: '',
-};
-
-export default EditableInput;
diff --git a/webpack/components/EditableInput.scss b/webpack/components/EditableInput.scss
deleted file mode 100644
index 81048f26..00000000
--- a/webpack/components/EditableInput.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.inline-edit-icon {
-  padding-top: 2px;
-}
diff --git a/webpack/helpers/formFieldsHelper.js b/webpack/helpers/formFieldsHelper.js
deleted file mode 100644
index fd830f38..00000000
--- a/webpack/helpers/formFieldsHelper.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import {
-  FormGroup,
-  TextInput,
-  TextArea,
-  FormSelect,
-  FormSelectOption,
-} from '@patternfly/react-core';
-import { ExclamationCircleIcon } from '@patternfly/react-icons';
-
-export const SelectField = props => {
-  const { selectItems, field, form } = props;
-  const fieldProps = wrapFieldProps(field);
-
-  const valid = shouldValidate(form, field.name);
-
-  return (
-    <FormGroup
-      label={props.label}
-      isRequired={props.isRequired}
-      helperTextInvalid={form.errors[field.name]}
-      helperTextInvalidIcon={<ExclamationCircleIcon />}
-      validated={valid}
-    >
-      <FormSelect
-        ouiaId={`oscap-form-sel-${field.name}`}
-        {...fieldProps}
-        className="without_select2"
-        aria-label={fieldProps.name}
-        validated={valid}
-        isDisabled={form.isSubmitting}
-      >
-        <FormSelectOption key={0} value="" label={props.blankLabel} />
-        {selectItems.map((item, idx) => (
-          <FormSelectOption key={idx + 1} value={item.id} label={item.name} />
-        ))}
-      </FormSelect>
-    </FormGroup>
-  );
-};
-
-SelectField.propTypes = {
-  selectItems: PropTypes.array,
-  label: PropTypes.string.isRequired,
-  isRequired: PropTypes.bool,
-  field: PropTypes.object.isRequired,
-  form: PropTypes.object.isRequired,
-  blankLabel: PropTypes.string.isRequired,
-};
-SelectField.defaultProps = {
-  selectItems: [],
-  isRequired: false,
-};
-
-const wrapFieldProps = fieldProps => {
-  const { onChange } = fieldProps;
-  // modify onChange args to correctly wire formik with pf4 input handlers
-  const wrappedOnChange = (value, event) => {
-    onChange(event);
-  };
-
-  return { ...fieldProps, onChange: wrappedOnChange };
-};
-
-const shouldValidate = (form, fieldName) => {
-  if (form.touched[fieldName]) {
-    return form.errors[fieldName] ? 'error' : 'success';
-  }
-
-  return 'noval';
-};
-
-const fieldWithHandlers = Component => {
-  const Subcomponent = ({ label, form, field, isRequired, ...rest }) => {
-    const fieldProps = wrapFieldProps(field);
-    const valid = shouldValidate(form, field.name);
-
-    return (
-      <FormGroup
-        label={label}
-        isRequired={isRequired}
-        helperTextInvalid={form.errors[field.name]}
-        helperTextInvalidIcon={<ExclamationCircleIcon />}
-        validated={valid}
-      >
-        <Component
-          aria-label={fieldProps.name}
-          {...fieldProps}
-          {...rest}
-          validated={valid}
-          isDisabled={form.isSubmitting}
-        />
-      </FormGroup>
-    );
-  };
-
-  Subcomponent.propTypes = {
-    form: PropTypes.object.isRequired,
-    field: PropTypes.object.isRequired,
-    label: PropTypes.string.isRequired,
-    isRequired: PropTypes.bool,
-  };
-
-  Subcomponent.defaultProps = {
-    isRequired: false,
-  };
-
-  return Subcomponent;
-};
-
-export const TextField = fieldWithHandlers(TextInput);
-export const TextAreaField = fieldWithHandlers(TextArea);

From ff84ba11775f3798d65612b745094bf8629780ae Mon Sep 17 00:00:00 2001
From: MariaAga <mariaaga@redhat.com>
Date: Fri, 6 Sep 2024 17:10:33 +0100
Subject: [PATCH 2/2] Fixes #37753 - Update to Patternfly 5

---
 webpack/components/ConfirmModal.scss                      | 2 +-
 webpack/components/EmptyState.js                          | 2 +-
 webpack/components/HostExtentions/HostKebabItems.js       | 4 +++-
 webpack/components/IndexTable/index.js                    | 6 +++++-
 webpack/components/OpenscapRemediationWizard/Footer.js    | 8 +++++---
 webpack/components/OpenscapRemediationWizard/index.js     | 7 ++++++-
 .../OpenscapRemediationWizard/steps/ReviewHosts.js        | 2 +-
 .../OpenscapRemediationWizard/steps/ReviewRemediation.js  | 2 +-
 .../OpenscapRemediationWizard/steps/SnippetSelect.js      | 2 +-
 9 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/webpack/components/ConfirmModal.scss b/webpack/components/ConfirmModal.scss
index 16971e8e..0a5da91f 100644
--- a/webpack/components/ConfirmModal.scss
+++ b/webpack/components/ConfirmModal.scss
@@ -1,3 +1,3 @@
-.pf-c-backdrop {
+.pf-v5-c-backdrop {
   z-index: 1040;
 }
diff --git a/webpack/components/EmptyState.js b/webpack/components/EmptyState.js
index be7cfed1..f5d94806 100644
--- a/webpack/components/EmptyState.js
+++ b/webpack/components/EmptyState.js
@@ -39,7 +39,7 @@ const EmptyState = ({
   ouiaEmptyStateTitleId,
 }) => (
   <Bullseye>
-    <PfEmptyState variant={EmptyStateVariant.small}>
+    <PfEmptyState variant={EmptyStateVariant.sm}>
       <EmptyStateIcon error={!!error} search={search} lock={lock} />
       <Title ouiaId={ouiaEmptyStateTitleId} headingLevel="h2" size="lg">
         {title}
diff --git a/webpack/components/HostExtentions/HostKebabItems.js b/webpack/components/HostExtentions/HostKebabItems.js
index 76409e55..1d0ed977 100644
--- a/webpack/components/HostExtentions/HostKebabItems.js
+++ b/webpack/components/HostExtentions/HostKebabItems.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { DropdownItem } from '@patternfly/react-core';
+import {
+	DropdownItem
+} from '@patternfly/react-core/deprecated';
 import { SecurityIcon } from '@patternfly/react-icons';
 import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
 import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
diff --git a/webpack/components/IndexTable/index.js b/webpack/components/IndexTable/index.js
index f96d8fa6..194c9d7b 100644
--- a/webpack/components/IndexTable/index.js
+++ b/webpack/components/IndexTable/index.js
@@ -1,6 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import {
+	Table,
+	TableHeader,
+	TableBody
+} from '@patternfly/react-table/deprecated';
 import { Flex, FlexItem } from '@patternfly/react-core';
 import Pagination from 'foremanReact/components/Pagination';
 import { refreshPage } from './IndexTableHelper';
diff --git a/webpack/components/OpenscapRemediationWizard/Footer.js b/webpack/components/OpenscapRemediationWizard/Footer.js
index 870b3dcf..38eb631f 100644
--- a/webpack/components/OpenscapRemediationWizard/Footer.js
+++ b/webpack/components/OpenscapRemediationWizard/Footer.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import {
-  Button,
-  WizardFooter,
-  WizardContextConsumer,
+	Button
 } from '@patternfly/react-core';
+import {
+	WizardFooter,
+	WizardContextConsumer
+} from '@patternfly/react-core/deprecated';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { WIZARD_TITLES } from './constants';
 
diff --git a/webpack/components/OpenscapRemediationWizard/index.js b/webpack/components/OpenscapRemediationWizard/index.js
index 577c4530..35294a51 100644
--- a/webpack/components/OpenscapRemediationWizard/index.js
+++ b/webpack/components/OpenscapRemediationWizard/index.js
@@ -1,7 +1,12 @@
 import React, { useState, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { Button, Wizard } from '@patternfly/react-core';
+import {
+	Button
+} from '@patternfly/react-core';
+import {
+	Wizard
+} from '@patternfly/react-core/deprecated';
 
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
 import { API_OPERATIONS, get } from 'foremanReact/redux/API';
diff --git a/webpack/components/OpenscapRemediationWizard/steps/ReviewHosts.js b/webpack/components/OpenscapRemediationWizard/steps/ReviewHosts.js
index 24a247aa..48d4193e 100644
--- a/webpack/components/OpenscapRemediationWizard/steps/ReviewHosts.js
+++ b/webpack/components/OpenscapRemediationWizard/steps/ReviewHosts.js
@@ -152,7 +152,7 @@ const ReviewHosts = () => {
           if (!isSelecting) setIsAllHostsSelected(false);
         },
         isSelected: rowData.id === hostId || isSelected(rowData.id),
-        disable: rowData.id === hostId || false,
+        isDisabled: rowData.id === hostId || false,
       }}
     />
   );
diff --git a/webpack/components/OpenscapRemediationWizard/steps/ReviewRemediation.js b/webpack/components/OpenscapRemediationWizard/steps/ReviewRemediation.js
index 065984e4..3e70e411 100644
--- a/webpack/components/OpenscapRemediationWizard/steps/ReviewRemediation.js
+++ b/webpack/components/OpenscapRemediationWizard/steps/ReviewRemediation.js
@@ -161,7 +161,7 @@ const ReviewRemediation = () => {
                   label={__('Reboot the system(s)')}
                   name="reboot-checkbox"
                   isChecked={isRebootSelected}
-                  onChange={selected => setIsRebootSelected(selected)}
+                  onChange={(_event, selected) => setIsRebootSelected(selected)}
                 />
               </GridItem>
             )}
diff --git a/webpack/components/OpenscapRemediationWizard/steps/SnippetSelect.js b/webpack/components/OpenscapRemediationWizard/steps/SnippetSelect.js
index e70af826..7203183b 100644
--- a/webpack/components/OpenscapRemediationWizard/steps/SnippetSelect.js
+++ b/webpack/components/OpenscapRemediationWizard/steps/SnippetSelect.js
@@ -113,7 +113,7 @@ const SnippetSelect = () => {
               ouiaId="snippet-select"
               isRequired
               value={snippet}
-              onChange={value => setSnippet(value)}
+              onChange={(_event, value) => setSnippet(value)}
               aria-label="FormSelect Input"
             >
               <FormSelectOption