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/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 = (
-
-
-
- );
-
- if (!editing) {
- return (
-
- {props.value || {__('None provided')}}
- {props.allowed && editBtn}
-
- );
- }
-
- const Component = props.component;
-
- const shouldValidate = (isTouched, err) => {
- if (!isTouched) {
- return err ? 'error' : 'success';
- }
- return 'noval';
- };
-
- const valid = shouldValidate(touched, error);
-
- return (
-
-
-
-
-
-
-
-
-
-
-
- {submitting && (
-
- )}
-
-
- );
-};
-
-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/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,
}) => (
-
+
{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
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);