From 0f3daa79e11bc0573accb0d89c3566e26fec5062 Mon Sep 17 00:00:00 2001 From: MariaAga Date: Fri, 6 Sep 2024 14:55:45 +0100 Subject: [PATCH] Fixes #37747 - Update to Patternfly 5 --- .../AnsibleHostDetail/AnsibleHostDetail.scss | 2 +- .../AnsibleVariableOverridesTable.js | 15 ++----- .../EditableValueHelper.js | 16 ++++--- .../JobsTab/NewRecurringJobModal.scss | 4 +- .../components/JobsTab/PreviousJobsTable.js | 13 ++---- .../components/JobsTab/RecurringJobsTable.js | 13 ++---- .../RolesTab/AllRolesModal/AllRolesTable.js | 13 ++---- .../EditRolesModal/EditRolesModal.scss | 2 +- .../components/RolesTab/RolesTable.js | 13 ++---- .../AnsibleRolesAndVariables.js | 12 +++--- webpack/components/DualList/ListControls.js | 18 ++++---- webpack/components/DualList/ListHeader.js | 6 +-- webpack/components/DualList/ListItem.js | 18 ++++---- webpack/components/DualList/ListPane.js | 6 +-- webpack/components/DualList/SelectedStatus.js | 4 +- webpack/components/DualList/index.js | 2 +- webpack/formHelper.js | 43 +++++++++++-------- 17 files changed, 90 insertions(+), 110 deletions(-) diff --git a/webpack/components/AnsibleHostDetail/AnsibleHostDetail.scss b/webpack/components/AnsibleHostDetail/AnsibleHostDetail.scss index da8a018c9..439ac8d0d 100644 --- a/webpack/components/AnsibleHostDetail/AnsibleHostDetail.scss +++ b/webpack/components/AnsibleHostDetail/AnsibleHostDetail.scss @@ -1,4 +1,4 @@ -@import '~@theforeman/vendor/scss/variables'; +@import 'foremanReact/common/colors'; .ansible-host-detail { background-color: $pf-color-white; diff --git a/webpack/components/AnsibleHostDetail/components/AnsibleVariableOverrides/AnsibleVariableOverridesTable.js b/webpack/components/AnsibleHostDetail/components/AnsibleVariableOverrides/AnsibleVariableOverridesTable.js index a0389561f..3ca7b9045 100644 --- a/webpack/components/AnsibleHostDetail/components/AnsibleVariableOverrides/AnsibleVariableOverridesTable.js +++ b/webpack/components/AnsibleHostDetail/components/AnsibleVariableOverrides/AnsibleVariableOverridesTable.js @@ -5,14 +5,7 @@ import { useMutation } from '@apollo/client'; import { sprintf, translate as __ } from 'foremanReact/common/I18n'; import { openConfirmModal } from 'foremanReact/components/ConfirmModal'; -import { - TableComposable, - Thead, - Tbody, - Tr, - Th, - Td, -} from '@patternfly/react-table'; +import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table'; import { Flex, FlexItem } from '@patternfly/react-core'; import Pagination from 'foremanReact/components/Pagination'; @@ -77,7 +70,7 @@ const AnsibleVariableOverridesTable = ({ innerDispatch({ idx, payload: { open: flag } }); }; - const onValueChange = (idx, variable) => value => { + const onValueChange = (idx, variable) => (e, value) => { const payload = { value, validation: validateValue(variable, value), @@ -156,7 +149,7 @@ const AnsibleVariableOverridesTable = ({ /> - + {columns.map(col => ( @@ -203,7 +196,7 @@ const AnsibleVariableOverridesTable = ({ ))} - +
componentProps => { const { validation, ...rest } = componentProps; return ( - + + {validation.key === 'error' && ( + + + {validation.msg} + + + )} ); }; diff --git a/webpack/components/AnsibleHostDetail/components/JobsTab/NewRecurringJobModal.scss b/webpack/components/AnsibleHostDetail/components/JobsTab/NewRecurringJobModal.scss index ad21007d3..f658ac14a 100644 --- a/webpack/components/AnsibleHostDetail/components/JobsTab/NewRecurringJobModal.scss +++ b/webpack/components/AnsibleHostDetail/components/JobsTab/NewRecurringJobModal.scss @@ -1,4 +1,4 @@ -.pf-c-backdrop { +.pf-v5-c-backdrop { z-index: 1040; } @@ -8,7 +8,7 @@ height: 70vh; } - .pf-c-form-control, .pf-c-date-picker, .pf-c-date-picker__input { + .pf-v5-c-form-control, .pf-v5-c-date-picker, .pf-v5-c-date-picker__input { width: 250px } } diff --git a/webpack/components/AnsibleHostDetail/components/JobsTab/PreviousJobsTable.js b/webpack/components/AnsibleHostDetail/components/JobsTab/PreviousJobsTable.js index d657fc2af..99545754f 100644 --- a/webpack/components/AnsibleHostDetail/components/JobsTab/PreviousJobsTable.js +++ b/webpack/components/AnsibleHostDetail/components/JobsTab/PreviousJobsTable.js @@ -3,14 +3,7 @@ import PropTypes from 'prop-types'; import { translate as __ } from 'foremanReact/common/I18n'; import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime'; -import { - TableComposable, - Thead, - Tbody, - Tr, - Th, - Td, -} from '@patternfly/react-table'; +import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table'; import { Flex, FlexItem } from '@patternfly/react-core'; import Pagination from 'foremanReact/components/Pagination'; @@ -40,7 +33,7 @@ const PreviousJobsTable = ({ history, totalCount, jobs, pagination }) => { /> - + {columns.map(col => ( @@ -73,7 +66,7 @@ const PreviousJobsTable = ({ history, totalCount, jobs, pagination }) => { ))} - +

{__('Scheduled recurring jobs')}

- + {columns.map(col => ( @@ -93,7 +86,7 @@ const RecurringJobsTable = ({ ))} - +
); }; diff --git a/webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/AllRolesTable.js b/webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/AllRolesTable.js index 9ccf41d3a..6c635565c 100644 --- a/webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/AllRolesTable.js +++ b/webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/AllRolesTable.js @@ -2,14 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { translate as __ } from 'foremanReact/common/I18n'; -import { - TableComposable, - Thead, - Tbody, - Tr, - Th, - Td, -} from '@patternfly/react-table'; +import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table'; import { Flex, FlexItem } from '@patternfly/react-core'; import Pagination from 'foremanReact/components/Pagination'; import withLoading from '../../../../withLoading'; @@ -28,7 +21,7 @@ const AllRolesTable = ({ allAnsibleRoles, totalCount }) => { variant="top" /> - + ))} - +
@@ -60,7 +53,7 @@ const AllRolesTable = ({ allAnsibleRoles, totalCount }) => {
- + {columns.map(col => ( @@ -92,7 +85,7 @@ const RolesTable = ({ ))} - +
SelectAll(checked)} aria-label="select all checkbox" id="select-all" name="select-all" diff --git a/webpack/components/DualList/ListControls.js b/webpack/components/DualList/ListControls.js index 5227d3e4c..474432a77 100644 --- a/webpack/components/DualList/ListControls.js +++ b/webpack/components/DualList/ListControls.js @@ -3,10 +3,10 @@ import PropTypes from 'prop-types'; import { translate as __ } from 'foremanReact/common/I18n'; const ListControls = props => ( -
-
+
+
-
+
-
+
-
+
diff --git a/webpack/components/DualList/ListPane.js b/webpack/components/DualList/ListPane.js index 24b8087a9..cc70c8285 100644 --- a/webpack/components/DualList/ListPane.js +++ b/webpack/components/DualList/ListPane.js @@ -58,16 +58,16 @@ const ListPane = ({ return (
-
+
-
    +
      {items.map(renderItem)}
    diff --git a/webpack/components/DualList/SelectedStatus.js b/webpack/components/DualList/SelectedStatus.js index fbba40e89..ceeb15da8 100644 --- a/webpack/components/DualList/SelectedStatus.js +++ b/webpack/components/DualList/SelectedStatus.js @@ -3,8 +3,8 @@ import PropTypes from 'prop-types'; import { translate as __, sprintf } from 'foremanReact/common/I18n'; const SelectedStatus = ({ selectedCount, totalCount }) => ( -
    - +
    + {sprintf(__('%(selectedCount)s of %(totalCount)s items selected'), { selectedCount, totalCount, diff --git a/webpack/components/DualList/index.js b/webpack/components/DualList/index.js index bf3247520..8a03d854e 100644 --- a/webpack/components/DualList/index.js +++ b/webpack/components/DualList/index.js @@ -61,7 +61,7 @@ const DualList = props => { props.onListChange(props.availableOptions, items); return ( -
    +
    } - validated={valid} - > + ))} + {valid === 'error' && ( + + + }> + {form.errors[field.name]} + + + + )} ); }; @@ -96,25 +102,26 @@ const pickerWithHandlers = ComponentType => { const Component = ComponentType === 'date' ? DatePicker : TimePicker; return ( - } - validated={valid} - > + { - // datepicker: onChange (event: React.FormEvent, value: string, date?: Date) => void - // timepicker: onChange (time: string, hour?: number, minute?: number, seconds?: number, isValid?: boolean ) => void - ComponentType === 'date' ? onChange(b, a) : onChange(a); + onChange={(e, value) => { + onChange(value); }} onBlur={onBlur} {...rest} validated={valid} isDisabled={form.isSubmitting} /> + {valid === 'error' && ( + + + }> + {form.errors[field.name]} + + + + )} ); };