diff --git a/package.json b/package.json index e0e0dcf6c..dad1a0ab4 100644 --- a/package.json +++ b/package.json @@ -29,8 +29,7 @@ "prettier": "^1.19.1", "redux-mock-store": "^1.2.2", "graphql-tag": "^2.11.0", - "graphql": "^15.5.0", - "victory-core": "~36.8.6" + "graphql": "^15.5.0" }, "peerDependencies": { "@theforeman/vendor": ">= 12.0.1" diff --git a/webpack/JobInvocationDetail/JobInvocationDetail.scss b/webpack/JobInvocationDetail/JobInvocationDetail.scss index 6cc58986e..f68500355 100644 --- a/webpack/JobInvocationDetail/JobInvocationDetail.scss +++ b/webpack/JobInvocationDetail/JobInvocationDetail.scss @@ -15,22 +15,22 @@ .legend-title { font-weight: bold; - font-size: var(--pf-global--FontSize--sm); + font-size: var(--pf-v5-global--FontSize--sm); margin-left: 8px; margin-bottom: 0; } - .pf-c-description-list { + .pf-v5-c-description-list { margin-left: 8px; margin-top: 8px; - .pf-c-description-list__term .pf-c-description-list__text { + .pf-v5-c-description-list__term .pf-v5-c-description-list__text { font-weight: normal; } } } - .pf-c-divider { + .pf-v5-c-divider { max-height: $chart_size; } diff --git a/webpack/JobInvocationDetail/JobInvocationToolbarButtons.js b/webpack/JobInvocationDetail/JobInvocationToolbarButtons.js index 02e838c70..8f24dc71b 100644 --- a/webpack/JobInvocationDetail/JobInvocationToolbarButtons.js +++ b/webpack/JobInvocationDetail/JobInvocationToolbarButtons.js @@ -2,15 +2,17 @@ import PropTypes from 'prop-types'; import React, { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { - Button, - Dropdown, - DropdownItem, - DropdownPosition, - DropdownSeparator, - DropdownToggle, - Split, - SplitItem, + Button, + Split, + SplitItem } from '@patternfly/react-core'; +import { + Dropdown, + DropdownItem, + DropdownPosition, + DropdownSeparator, + DropdownToggle +} from '@patternfly/react-core/deprecated'; import { translate as __ } from 'foremanReact/common/I18n'; import { foremanUrl } from 'foremanReact/common/helpers'; import { STATUS as APIStatus } from 'foremanReact/constants'; @@ -242,7 +244,7 @@ const JobInvocationToolbarButtons = ({ , ]} splitButtonVariant="action" - onToggle={setIsActionOpen} + onToggle={(_event, val) => setIsActionOpen(val)} /> } isOpen={isActionOpen} diff --git a/webpack/JobInvocationDetail/__tests__/MainInformation.test.js b/webpack/JobInvocationDetail/__tests__/MainInformation.test.js index bfcc4d158..4cb75633e 100644 --- a/webpack/JobInvocationDetail/__tests__/MainInformation.test.js +++ b/webpack/JobInvocationDetail/__tests__/MainInformation.test.js @@ -97,7 +97,7 @@ describe('JobInvocationDetailPage', () => { expect(screen.getByText('Description')).toBeInTheDocument(); expect( - container.querySelector('.chart-donut .pf-c-chart') + container.querySelector('.chart-donut .pf-v5-c-chart') ).toBeInTheDocument(); expect(screen.getByText('2/6')).toBeInTheDocument(); expect(screen.getByText('Systems')).toBeInTheDocument(); @@ -116,22 +116,22 @@ describe('JobInvocationDetailPage', () => { Object.entries(informationToCheck).forEach(([term, expectedText]) => { const termContainers = container.querySelectorAll( - '.pf-c-description-list__term .pf-c-description-list__text' + '.pf-v5-c-description-list__term .pf-v5-c-description-list__text' ); termContainers.forEach(termContainer => { if (termContainer.textContent.includes(term)) { let descriptionContainer; if (term === 'SSH user:') { descriptionContainer = termContainer - .closest('.pf-c-description-list__group') + .closest('.pf-v5-c-description-list__group') .querySelector( - '.pf-c-description-list__description .pf-c-description-list__text .disabled-text' + '.pf-v5-c-description-list__description .pf-v5-c-description-list__text .disabled-text' ); } else { descriptionContainer = termContainer - .closest('.pf-c-description-list__group') + .closest('.pf-v5-c-description-list__group') .querySelector( - '.pf-c-description-list__description .pf-c-description-list__text' + '.pf-v5-c-description-list__description .pf-v5-c-description-list__text' ); } expect(descriptionContainer.textContent).toContain(expectedText); diff --git a/webpack/JobWizard/Footer.js b/webpack/JobWizard/Footer.js index 745844532..bf67d8648 100644 --- a/webpack/JobWizard/Footer.js +++ b/webpack/JobWizard/Footer.js @@ -2,12 +2,14 @@ import React from 'react'; import { useSelector } from 'react-redux'; import PropTypes from 'prop-types'; import { - Button, - WizardFooter, - WizardContextConsumer, - Tooltip, - Spinner, + Button, + Tooltip, + Spinner } from '@patternfly/react-core'; +import { + WizardFooter, + WizardContextConsumer +} from '@patternfly/react-core/deprecated'; import { translate as __ } from 'foremanReact/common/I18n'; import { WIZARD_TITLES } from './JobWizardConstants'; import { selectIsSubmitting } from './JobWizardSelectors'; diff --git a/webpack/JobWizard/JobWizard.js b/webpack/JobWizard/JobWizard.js index 9f329ecd3..d10d57571 100644 --- a/webpack/JobWizard/JobWizard.js +++ b/webpack/JobWizard/JobWizard.js @@ -3,7 +3,9 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import PropTypes from 'prop-types'; -import { Wizard } from '@patternfly/react-core'; +import { + Wizard +} from '@patternfly/react-core/deprecated'; import { get } from 'foremanReact/redux/API'; import history from 'foremanReact/history'; diff --git a/webpack/JobWizard/JobWizard.scss b/webpack/JobWizard/JobWizard.scss index 0da73762f..08e3afb0b 100644 --- a/webpack/JobWizard/JobWizard.scss +++ b/webpack/JobWizard/JobWizard.scss @@ -1,21 +1,21 @@ .job-wizard { - font-size: var(--pf-global--FontSize--md); + font-size: var(--pf-v5-global--FontSize--md); .wizard-title { margin-bottom: 25px; } - .pf-c-wizard__nav.pf-m-expanded { + .pf-v5-c-wizard__nav.pf-m-expanded { z-index: calc( - var(--pf-c-wizard__toggle--ZIndex) + 2 + var(--pf-v5-cwizard__toggle--ZIndex) + 2 ); // So the small screen navigation can be shown above the select box and wizard body } - .pf-c-wizard__main { + .pf-v5-c-wizard__main { z-index: calc( - var(--pf-c-wizard__toggle--ZIndex) + 1 + var(--pf-v5-cwizard__toggle--ZIndex) + 1 ); // So the select box can be shown above the wizard footer and navigation toggle } - .pf-c-wizard__main-body { + .pf-v5-c-wizard__main-body { @media (max-width: 600px) { max-width: 100%; } @@ -34,19 +34,19 @@ } .gray-text { - color: var(--pf-global--Color--dark-200); + color: var(--pf-v5-global--Color--dark-200); } .target-hosts-and-inputs { - .pf-c-chip-group.pf-m-category { + .pf-v5-c-chip-group.pf-m-category { margin-bottom: 10px; } - .pf-c-select__toggle-typeahead { + .pf-v5-c-select__toggle-typeahead { border: 0px; } .target-method-select { - .pf-c-select__toggle-wrapper { + .pf-v5-c-select__toggle-wrapper { flex-wrap: nowrap; } } @@ -63,8 +63,8 @@ display: grid; grid-template-columns: repeat(7, 1fr); } - .pf-l-grid { - gap: var(--pf-c-form--GridGap); + .pf-v5-l-grid { + gap: var(--pf-v5-cform--GridGap); } #repeat-on-hourly { max-height: 300px; @@ -99,14 +99,14 @@ .clear-datetime-button { margin-left: 10px; align-self: center; - font-size: var(--pf-global--FontSize--md); + font-size: var(--pf-v5-global--FontSize--md); } - .pf-c-form__group-control { + .pf-v5-c-form__group-control { display: flex; flex-wrap: wrap; } } - .pf-c-date-picker { + .pf-v5-c-date-picker { vertical-align: top; } @@ -123,7 +123,7 @@ min-height: 40px; min-width: 100px; } - .pf-c-modal-box { + .pf-v5-c-modal-box { width: auto; } @@ -132,15 +132,15 @@ margin-left: 10px; } } - .pf-c-radio__body { - font-size: var(--pf-c-radio__label--FontSize); + .pf-v5-c-radio__body { + font-size: var(--pf-v5-cradio__label--FontSize); } .reset-default { padding-bottom: 0; } } -.job-wizard-alert.pf-c-alert.pf-m-warning { +.job-wizard-alert.pf-v5-c-alert.pf-m-warning { margin-bottom: 10px; margin-top: 10px; } diff --git a/webpack/JobWizard/JobWizardPageRerun.js b/webpack/JobWizard/JobWizardPageRerun.js index 8655d11b2..4fbfc99be 100644 --- a/webpack/JobWizard/JobWizardPageRerun.js +++ b/webpack/JobWizard/JobWizardPageRerun.js @@ -7,11 +7,10 @@ import { Divider, Skeleton, Button, - Title, EmptyState, EmptyStateVariant, EmptyStateIcon, - EmptyStateBody, + EmptyStateBody, EmptyStateHeader, EmptyStateFooter, } from '@patternfly/react-core'; import { ExclamationCircleIcon } from '@patternfly/react-icons'; import { global_palette_red_200 as exclamationColor } from '@patternfly/react-tokens'; @@ -63,15 +62,12 @@ const JobWizardPageRerun = ({ const currentLocation = useForemanLocation(); const emptyStateLarge = ( - - + {__('Unable to run job')}} icon={ - - {__('Unable to run job')} - - {sprintf(errorMessage)} + />} headingLevel="h4" /> + {sprintf(errorMessage)} - + ); useEffect(() => { diff --git a/webpack/JobWizard/PermissionDenied.js b/webpack/JobWizard/PermissionDenied.js index 7f053cdde..7e70cfa17 100644 --- a/webpack/JobWizard/PermissionDenied.js +++ b/webpack/JobWizard/PermissionDenied.js @@ -3,11 +3,10 @@ import PropTypes from 'prop-types'; import { translate as __ } from 'foremanReact/common/I18n'; import { Icon } from 'patternfly-react'; import { - Title, Button, EmptyState, EmptyStateVariant, - EmptyStateBody, + EmptyStateBody, EmptyStateHeader, EmptyStateFooter, } from '@patternfly/react-core'; const PermissionDenied = ({ missingPermissions, setProceedAnyway }) => { @@ -37,10 +36,8 @@ const PermissionDenied = ({ missingPermissions, setProceedAnyway }) => { - - {__('Permission Denied')} - - {description} + {__('Permission Denied')}} headingLevel="h5" /> + {description} - + ); }; diff --git a/webpack/JobWizard/__tests__/integration.test.js b/webpack/JobWizard/__tests__/integration.test.js index e3e011233..8f3262c94 100644 --- a/webpack/JobWizard/__tests__/integration.test.js +++ b/webpack/JobWizard/__tests__/integration.test.js @@ -59,26 +59,28 @@ describe('Job wizard fill', () => { ); - expect(wrapper.find('.pf-c-wizard__nav-link.pf-m-disabled')).toHaveLength( - 5 - ); + expect( + wrapper.find('.pf-v5-c-wizard__nav-link.pf-m-disabled') + ).toHaveLength(5); selectors.selectJobCategoriesStatus.mockImplementation(() => 'RESOLVED'); expect(store.getActions()).toMatchSnapshot('initial'); selectors.selectJobTemplate.mockRestore(); jest.spyOn(selectors, 'selectJobTemplate'); selectors.selectJobTemplate.mockImplementation(() => jobTemplate); - wrapper.find('.pf-c-button.pf-c-select__toggle-button').simulate('click'); + wrapper + .find('.pf-v5-c-button.pf-v5-c-select__toggle-button') + .simulate('click'); await act(async () => { await wrapper - .find('.pf-c-select__menu-item') + .find('.pf-v5-c-select__menu-item') .first() .simulate('click'); }); expect(store.getActions().slice(-1)).toMatchSnapshot('select template'); wrapper.update(); - expect(wrapper.find('.pf-c-wizard__nav-link.pf-m-disabled')).toHaveLength( - 0 - ); + expect( + wrapper.find('.pf-v5-c-wizard__nav-link.pf-m-disabled') + ).toHaveLength(0); }); it('have all steps', async () => { diff --git a/webpack/JobWizard/steps/AdvancedFields/DescriptionField.js b/webpack/JobWizard/steps/AdvancedFields/DescriptionField.js index 2bcd24c20..d85a0710f 100644 --- a/webpack/JobWizard/steps/AdvancedFields/DescriptionField.js +++ b/webpack/JobWizard/steps/AdvancedFields/DescriptionField.js @@ -1,7 +1,15 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useSelector } from 'react-redux'; import PropTypes from 'prop-types'; -import { FormGroup, TextInput, Tooltip, Button } from '@patternfly/react-core'; +import { + FormGroup, + TextInput, + Tooltip, + Button, + FormHelperText, + HelperText, + HelperTextItem, +} from '@patternfly/react-core'; import { translate as __ } from 'foremanReact/common/I18n'; import { selectTemplateInputs, @@ -55,18 +63,6 @@ export const DescriptionField = ({ } fieldId="description" - helperText={ - - } > {isPreview ? ( @@ -89,9 +85,25 @@ export const DescriptionField = ({ autoComplete="description" id="description" value={value} - onChange={newValue => setValue(newValue)} + onChange={(_event, newValue) => setValue(newValue)} /> )} + + + + + + + ); }; diff --git a/webpack/JobWizard/steps/AdvancedFields/Fields.js b/webpack/JobWizard/steps/AdvancedFields/Fields.js index ecb07d97f..1bcaa6c83 100644 --- a/webpack/JobWizard/steps/AdvancedFields/Fields.js +++ b/webpack/JobWizard/steps/AdvancedFields/Fields.js @@ -25,7 +25,7 @@ export const EffectiveUserField = ({ value, setValue, defaultValue }) => ( id="effective-user" type="text" value={value} - onChange={newValue => setValue(newValue)} + onChange={(_event, newValue) => setValue(newValue)} /> ); @@ -94,7 +94,7 @@ export const PasswordField = ({ value, setValue }) => ( type="password" placeholder="*****" value={value} - onChange={newValue => setValue(newValue)} + onChange={(_event, newValue) => setValue(newValue)} /> ); @@ -118,7 +118,7 @@ export const KeyPassphraseField = ({ value, setValue }) => ( type="password" placeholder="*****" value={value} - onChange={newValue => setValue(newValue)} + onChange={(_event, newValue) => setValue(newValue)} /> ); @@ -142,7 +142,7 @@ export const EffectiveUserPasswordField = ({ value, setValue }) => ( type="password" placeholder="*****" value={value} - onChange={newValue => setValue(newValue)} + onChange={(_event, newValue) => setValue(newValue)} /> ); @@ -228,7 +228,7 @@ export const SSHUserField = ({ value, setValue, defaultValue }) => ( id="ssh-user" type="text" value={value} - onChange={newValue => setValue(newValue)} + onChange={(_event, newValue) => setValue(newValue)} /> ); diff --git a/webpack/JobWizard/steps/AdvancedFields/__tests__/AdvancedFields.test.js b/webpack/JobWizard/steps/AdvancedFields/__tests__/AdvancedFields.test.js index 850b6e617..531fac5b4 100644 --- a/webpack/JobWizard/steps/AdvancedFields/__tests__/AdvancedFields.test.js +++ b/webpack/JobWizard/steps/AdvancedFields/__tests__/AdvancedFields.test.js @@ -44,18 +44,20 @@ describe('AdvancedFields', () => { ); // setup - wrapper.find('.pf-c-button.pf-c-select__toggle-button').simulate('click'); wrapper - .find('.pf-c-select__menu-item') + .find('.pf-v5-c-button.pf-v5-c-select__toggle-button') + .simulate('click'); + wrapper + .find('.pf-v5-c-select__menu-item') .first() .simulate('click'); // test - expect(wrapper.find('.pf-c-wizard__nav-link.pf-m-disabled')).toHaveLength( - 0 - ); + expect( + wrapper.find('.pf-v5-c-wizard__nav-link.pf-m-disabled') + ).toHaveLength(0); wrapper - .find('.pf-c-wizard__nav-link') + .find('.pf-v5-c-wizard__nav-link') .at(2) .simulate('click'); // Advanced step @@ -64,7 +66,7 @@ describe('AdvancedFields', () => { }); const effectiveUserInput = () => wrapper.find('input#effective-user'); const advancedTemplateInput = () => - wrapper.find('.pf-c-form__group-control textarea'); + wrapper.find('.pf-v5-c-form__group-control textarea'); const effectiveUesrValue = 'effective user new value'; const advancedTemplateInputValue = 'advanced input new value'; effectiveUserInput().getDOMNode().value = effectiveUesrValue; @@ -79,15 +81,15 @@ describe('AdvancedFields', () => { ); wrapper - .find('.pf-c-wizard__nav-link') + .find('.pf-v5-c-wizard__nav-link') .at(1) .simulate('click'); - expect(wrapper.find('.pf-c-wizard__nav-link.pf-m-current').text()).toEqual( - 'Target hosts and inputs' - ); + expect( + wrapper.find('.pf-v5-c-wizard__nav-link.pf-m-current').text() + ).toEqual('Target hosts and inputs'); wrapper - .find('.pf-c-wizard__nav-link') + .find('.pf-v5-c-wizard__nav-link') .at(2) .simulate('click'); // Advanced step diff --git a/webpack/JobWizard/steps/HostsAndInputs/SelectAPI.js b/webpack/JobWizard/steps/HostsAndInputs/SelectAPI.js index 4d072a0c0..efdea0a46 100644 --- a/webpack/JobWizard/steps/HostsAndInputs/SelectAPI.js +++ b/webpack/JobWizard/steps/HostsAndInputs/SelectAPI.js @@ -1,7 +1,9 @@ import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import URI from 'urijs'; -import { SelectVariant } from '@patternfly/react-core'; +import { + SelectVariant +} from '@patternfly/react-core/deprecated'; import { get } from 'foremanReact/redux/API'; import { selectResponse, selectIsLoading } from '../../JobWizardSelectors'; import { SearchSelect } from '../form/SearchSelect'; diff --git a/webpack/JobWizard/steps/HostsAndInputs/SelectGQL.js b/webpack/JobWizard/steps/HostsAndInputs/SelectGQL.js index 884bc6958..b6f7c4168 100644 --- a/webpack/JobWizard/steps/HostsAndInputs/SelectGQL.js +++ b/webpack/JobWizard/steps/HostsAndInputs/SelectGQL.js @@ -1,6 +1,8 @@ import React, { useState } from 'react'; import { useQuery } from '@apollo/client'; -import { SelectVariant } from '@patternfly/react-core'; +import { + SelectVariant +} from '@patternfly/react-core/deprecated'; import { useForemanOrganization, useForemanLocation, diff --git a/webpack/JobWizard/steps/HostsAndInputs/__tests__/HostsAndInputs.test.js b/webpack/JobWizard/steps/HostsAndInputs/__tests__/HostsAndInputs.test.js index 816661e93..28c0723a5 100644 --- a/webpack/JobWizard/steps/HostsAndInputs/__tests__/HostsAndInputs.test.js +++ b/webpack/JobWizard/steps/HostsAndInputs/__tests__/HostsAndInputs.test.js @@ -43,7 +43,7 @@ describe('Hosts', () => { await act(async () => { fireEvent.click( screen.getByText('host1', { - selector: '.pf-c-select__menu-item', + selector: '.pf-v5-c-select__menu-item', }) ); fireEvent.blur(select('hosts')); @@ -56,7 +56,7 @@ describe('Hosts', () => { fireEvent.click(screen.getByText('host2')); }); fireEvent.click( - screen.getByText('Hosts', { selector: '.pf-c-select__toggle-text' }) + screen.getByText('Hosts', { selector: '.pf-v5-c-select__toggle-text' }) ); await act(async () => { fireEvent.click(screen.getByText('Host groups')); @@ -71,7 +71,7 @@ describe('Hosts', () => { await act(async () => { fireEvent.click( screen.getByText('Host groups', { - selector: '.pf-c-select__toggle-text', + selector: '.pf-v5-c-select__toggle-text', }) ); }); @@ -128,7 +128,7 @@ describe('Hosts', () => { expect(screen.queryAllByText('Hosts')).toHaveLength(1); await act(async () => { fireEvent.click( - screen.getByText('Hosts', { selector: '.pf-c-select__toggle-text' }) + screen.getByText('Hosts', { selector: '.pf-v5-c-select__toggle-text' }) ); }); expect(screen.queryAllByText('Host groups')).toHaveLength(1); @@ -138,7 +138,7 @@ describe('Hosts', () => { await act(async () => { fireEvent.click( // Close the select - screen.getByText('Hosts', { selector: '.pf-c-select__toggle-text' }) + screen.getByText('Hosts', { selector: '.pf-v5-c-select__toggle-text' }) ); }); }); diff --git a/webpack/JobWizard/steps/HostsAndInputs/index.js b/webpack/JobWizard/steps/HostsAndInputs/index.js index 9661b76cd..065473af2 100644 --- a/webpack/JobWizard/steps/HostsAndInputs/index.js +++ b/webpack/JobWizard/steps/HostsAndInputs/index.js @@ -8,6 +8,9 @@ import { InputGroup, Text, Spinner, + InputGroupItem, + FormHelperText, + HelperText, } from '@patternfly/react-core'; import PropTypes from 'prop-types'; import { useSelector, useDispatch } from 'react-redux'; @@ -145,43 +148,40 @@ const HostsAndInputs = ({ /> )}
- + setWasFocus(true)}> - } - fieldId="host_methods" - options={Object.values(hostMethods).filter(method => { - if (method === hostMethods.hostCollections && !withKatello) { - return false; - } - return true; - })} - setValue={val => { - setHostMethod(val); - if (val === hostMethods.searchQuery) { - setErrorText(__('Please enter a search query')); - } - if (val === hostMethods.hosts) { - setErrorText(__('Please select at least one host')); - } - if (val === hostMethods.hostCollections) { - setErrorText( - __('Please select at least one host collection') - ); - } - if (val === hostMethods.hostGroups) { - setErrorText(__('Please select at least one host group')); - } - }} - value={hostMethod} - /> + + } + fieldId="host_methods" + options={Object.values(hostMethods).filter(method => { + if (method === hostMethods.hostCollections && !withKatello) { + return false; + } + return true; + })} + setValue={val => { + setHostMethod(val); + if (val === hostMethods.searchQuery) { + setErrorText(__('Please enter a search query')); + } + if (val === hostMethods.hosts) { + setErrorText(__('Please select at least one host')); + } + if (val === hostMethods.hostCollections) { + setErrorText( + __('Please select at least one host collection') + ); + } + if (val === hostMethods.hostGroups) { + setErrorText(__('Please select at least one host group')); + } + }} + value={hostMethod} + /> + {hostMethod === hostMethods.searchQuery && ( )} + {isError && ( + + {errorText} + + )} { expect(screen.getAllByText('Review details')).toHaveLength(3); fireEvent.click( screen.getByText('Job template', { - selector: '.pf-c-button', + selector: '.pf-v5-c-button', }) ); expect(screen.getAllByText('Category and template')).toHaveLength(3); @@ -88,7 +88,7 @@ describe('ReviewDetails', () => { act(() => { fireEvent.click( screen.getByText('Target hosts', { - selector: '.pf-c-button', + selector: '.pf-v5-c-button', }) ); jest.advanceTimersByTime(1000); // to handle pf4 date picker popover useTimer @@ -100,7 +100,7 @@ describe('ReviewDetails', () => { act(() => { fireEvent.click( screen.getByText('Advanced fields', { - selector: '.pf-c-button', + selector: '.pf-v5-c-button', }) ); jest.advanceTimersByTime(1000); diff --git a/webpack/JobWizard/steps/ReviewDetails/index.js b/webpack/JobWizard/steps/ReviewDetails/index.js index eebf79fad..e3f1b4a11 100644 --- a/webpack/JobWizard/steps/ReviewDetails/index.js +++ b/webpack/JobWizard/steps/ReviewDetails/index.js @@ -1,13 +1,15 @@ /* eslint-disable max-lines */ import React, { useEffect, useState } from 'react'; import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListGroup, - DescriptionListDescription, - WizardContextConsumer, + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription } from '@patternfly/react-core'; +import { + WizardContextConsumer +} from '@patternfly/react-core/deprecated'; import PropTypes from 'prop-types'; import { useDispatch, useSelector } from 'react-redux'; import { get } from 'foremanReact/redux/API'; diff --git a/webpack/JobWizard/steps/Schedule/PurposeField.js b/webpack/JobWizard/steps/Schedule/PurposeField.js index c36e8daac..eb06cee11 100644 --- a/webpack/JobWizard/steps/Schedule/PurposeField.js +++ b/webpack/JobWizard/steps/Schedule/PurposeField.js @@ -18,7 +18,7 @@ export const PurposeField = ({ purpose, setPurpose }) => ( aria-label="purpose" type="text" value={purpose} - onChange={newPurpose => { + onChange={(_event, newPurpose) => { setPurpose(newPurpose); }} /> diff --git a/webpack/JobWizard/steps/Schedule/RepeatCron.js b/webpack/JobWizard/steps/Schedule/RepeatCron.js index b3ed8af3d..9ec5fdfb0 100644 --- a/webpack/JobWizard/steps/Schedule/RepeatCron.js +++ b/webpack/JobWizard/steps/Schedule/RepeatCron.js @@ -72,7 +72,7 @@ export const RepeatCron = ({ repeatData, setRepeatData, setValid }) => { placeholder="* * * * *" type="text" value={cronline || ''} - onChange={newTime => { + onChange={(_event, newTime) => { setRepeatData({ cronline: newTime }); }} /> diff --git a/webpack/JobWizard/steps/Schedule/RepeatDaily.js b/webpack/JobWizard/steps/Schedule/RepeatDaily.js index 8292dbbfb..709dd91b3 100644 --- a/webpack/JobWizard/steps/Schedule/RepeatDaily.js +++ b/webpack/JobWizard/steps/Schedule/RepeatDaily.js @@ -20,7 +20,7 @@ export const RepeatDaily = ({ repeatData, setRepeatData, setValid }) => { className="time-picker" time={repeatData.at} placeholder="hh:mm" - onChange={newTime => { + onChange={(e, newTime) => { setRepeatData({ ...repeatData, at: newTime }); }} is24Hour diff --git a/webpack/JobWizard/steps/Schedule/RepeatHour.js b/webpack/JobWizard/steps/Schedule/RepeatHour.js index 4e4e81841..84ae5cb4e 100644 --- a/webpack/JobWizard/steps/Schedule/RepeatHour.js +++ b/webpack/JobWizard/steps/Schedule/RepeatHour.js @@ -1,14 +1,16 @@ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { - FormGroup, - Select, - SelectOption, - SelectVariant, - Alert, - AlertActionCloseButton, - ValidatedOptions, + FormGroup, + Alert, + AlertActionCloseButton, + ValidatedOptions } from '@patternfly/react-core'; +import { + Select, + SelectOption, + SelectVariant +} from '@patternfly/react-core/deprecated'; import { translate as __ } from 'foremanReact/common/I18n'; import { helpLabel } from '../form/FormHelpers'; @@ -43,7 +45,7 @@ export const RepeatHour = ({ repeatData, setRepeatData }) => { setMinuteOpen(false); }} selections={`${minute}` || ''} - onToggle={toggle => { + onToggle={(_event, toggle) => { setMinuteOpen(toggle); }} isOpen={minuteOpen} diff --git a/webpack/JobWizard/steps/Schedule/RepeatMonth.js b/webpack/JobWizard/steps/Schedule/RepeatMonth.js index 7e2070bea..bfb00550b 100644 --- a/webpack/JobWizard/steps/Schedule/RepeatMonth.js +++ b/webpack/JobWizard/steps/Schedule/RepeatMonth.js @@ -26,7 +26,7 @@ export const RepeatMonth = ({ repeatData, setRepeatData, setValid }) => { placeholder="1,2..." type="text" value={repeatData.days || ''} - onChange={newTime => { + onChange={(_event, newTime) => { setRepeatData({ ...repeatData, days: newTime }); }} /> diff --git a/webpack/JobWizard/steps/Schedule/RepeatWeek.js b/webpack/JobWizard/steps/Schedule/RepeatWeek.js index 39876bb18..770925b4c 100644 --- a/webpack/JobWizard/steps/Schedule/RepeatWeek.js +++ b/webpack/JobWizard/steps/Schedule/RepeatWeek.js @@ -32,7 +32,7 @@ export const RepeatWeek = ({ repeatData, setRepeatData, setValid }) => { return () => setValid(true); }, [setValid, daysOfWeek, at]); const days = getWeekDays(); - const handleChangeDays = (checked, { target: { name } }) => { + const handleChangeDays = ({ target: { name } }, checked) => { setRepeatData({ ...repeatData, daysOfWeek: { ...repeatData.daysOfWeek, [name]: checked }, diff --git a/webpack/JobWizard/steps/Schedule/ScheduleFuture.js b/webpack/JobWizard/steps/Schedule/ScheduleFuture.js index 5d45a15ef..a110a6a20 100644 --- a/webpack/JobWizard/steps/Schedule/ScheduleFuture.js +++ b/webpack/JobWizard/steps/Schedule/ScheduleFuture.js @@ -4,7 +4,9 @@ import { FormGroup, Form, Button, - ValidatedOptions, + FormHelperText, + HelperText, + HelperTextItem, } from '@patternfly/react-core'; import { translate as __ } from 'foremanReact/common/I18n'; import { DateTimePicker } from '../form/DateTimePicker'; @@ -85,8 +87,6 @@ export const ScheduleFuture = ({ ), 'start-before-date' )} - validated={error ? ValidatedOptions.error : ValidatedOptions.noval} - helperTextInvalid={error} > {__('Clear input')} + {error && ( + + + {error} + + + )}
diff --git a/webpack/JobWizard/steps/Schedule/ScheduleRecurring.js b/webpack/JobWizard/steps/Schedule/ScheduleRecurring.js index 0b88ecba3..ad881f711 100644 --- a/webpack/JobWizard/steps/Schedule/ScheduleRecurring.js +++ b/webpack/JobWizard/steps/Schedule/ScheduleRecurring.js @@ -5,8 +5,10 @@ import { FormGroup, Radio, TextInput, - ValidatedOptions, Divider, + FormHelperText, + HelperText, + HelperTextItem, } from '@patternfly/react-core'; import { ExclamationCircleIcon } from '@patternfly/react-icons'; import { translate as __ } from 'foremanReact/common/I18n'; @@ -86,7 +88,7 @@ export const ScheduleRecurring = ({
-
+
-
+
- } - > + } /> + {!validEnd && ( + + + } + variant="error" + > + {__('End time needs to be after start time')} + + + + )}
{__('After')}
- + + handleRepeatInputChange(newValue) + } isDisabled={!(repeatAmount === 0 || !!repeatAmount)} /> + {repeatValidated === 'error' && ( + + + {__('Repeat amount can only be a positive number')} + + + )}
{__('occurences')} diff --git a/webpack/JobWizard/steps/form/DateTimePicker.js b/webpack/JobWizard/steps/form/DateTimePicker.js index b4dc314e4..67b379a00 100644 --- a/webpack/JobWizard/steps/form/DateTimePicker.js +++ b/webpack/JobWizard/steps/form/DateTimePicker.js @@ -74,7 +74,7 @@ export const DateTimePicker = ({ } }; - const onTimeChange = newTime => { + const onTimeChange = (e, newTime) => { if (!newTime.length && allowEmpty) { const parsedNewTime = new Date(`${formattedDate} 00:00`); setDateTime(formatDateTime(parsedNewTime)); diff --git a/webpack/JobWizard/steps/form/FormHelpers.js b/webpack/JobWizard/steps/form/FormHelpers.js index 5e442ba02..ca62e148c 100644 --- a/webpack/JobWizard/steps/form/FormHelpers.js +++ b/webpack/JobWizard/steps/form/FormHelpers.js @@ -1,8 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Popover, Button } from '@patternfly/react-core'; +import { Popover, Button, Icon } from '@patternfly/react-core'; import { HelpIcon } from '@patternfly/react-icons'; import { translate as __ } from 'foremanReact/common/I18n'; +import styles from '@patternfly/react-styles/css/components/Form/form'; export const helpLabel = (text, id) => { if (!text) return null; @@ -12,9 +13,11 @@ export const helpLabel = (text, id) => { type="button" aria-label={__('open-help-tooltip-button')} onClick={e => e.preventDefault()} - className="pf-c-form__group-label-help" + className={styles.formGroupLabelHelp} > - + + + ); @@ -31,7 +34,7 @@ export const ResetDefault = ({ setValue, defaultValue }) => className="reset-default" component="a" variant="link" - isSmall + size="sm" onClick={() => setValue(defaultValue)} > {__('Reset to default')} diff --git a/webpack/JobWizard/steps/form/Formatter.js b/webpack/JobWizard/steps/form/Formatter.js index d184cb9cd..9dddae34e 100644 --- a/webpack/JobWizard/steps/form/Formatter.js +++ b/webpack/JobWizard/steps/form/Formatter.js @@ -127,7 +127,9 @@ export const formatter = (input, values, setValue) => { rows={2} id={id} value={value} - onChange={newValue => setValue({ ...values, [name]: newValue })} + onChange={(_event, newValue) => + setValue({ ...values, [name]: newValue }) + } /> ); diff --git a/webpack/JobWizard/steps/form/GroupedSelectField.js b/webpack/JobWizard/steps/form/GroupedSelectField.js index cff2be34e..ad4524dc9 100644 --- a/webpack/JobWizard/steps/form/GroupedSelectField.js +++ b/webpack/JobWizard/steps/form/GroupedSelectField.js @@ -1,12 +1,14 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { - SelectOption, - Select, - SelectGroup, - SelectVariant, - FormGroup, + FormGroup } from '@patternfly/react-core'; +import { + SelectOption, + Select, + SelectGroup, + SelectVariant +} from '@patternfly/react-core/deprecated'; export const GroupedSelectField = ({ label, @@ -62,7 +64,7 @@ export const GroupedSelectField = ({ ouiaId={fieldId} isGrouped variant={SelectVariant.typeahead} - onToggle={setIsOpen} + onToggle={(_event, val) => setIsOpen(val)} onFilter={onFilter} isOpen={isOpen} onSelect={() => null} diff --git a/webpack/JobWizard/steps/form/NumberInput.js b/webpack/JobWizard/steps/form/NumberInput.js index c9fca8f3f..07fe05e83 100644 --- a/webpack/JobWizard/steps/form/NumberInput.js +++ b/webpack/JobWizard/steps/form/NumberInput.js @@ -1,6 +1,13 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { FormGroup, TextInput, ValidatedOptions } from '@patternfly/react-core'; +import { + FormGroup, + TextInput, + ValidatedOptions, + FormHelperText, + HelperText, + HelperTextItem, +} from '@patternfly/react-core'; import { translate as __ } from 'foremanReact/common/I18n'; import { isPositiveNumber } from './FormHelpers'; @@ -8,17 +15,13 @@ export const NumberInput = ({ formProps, inputProps }) => { const [validated, setValidated] = useState(); const name = inputProps.id.replace(/-/g, ' '); return ( - + { + onChange={(_event, newValue) => { setValidated( isPositiveNumber(newValue) || newValue === '' ? ValidatedOptions.noval @@ -27,6 +30,13 @@ export const NumberInput = ({ formProps, inputProps }) => { inputProps.onChange(newValue); }} /> + {validated === 'error' && ( + + + {__('Has to be a positive number')} + + + )} ); }; diff --git a/webpack/JobWizard/steps/form/ResourceSelect.js b/webpack/JobWizard/steps/form/ResourceSelect.js index 6ab0069f0..5039406c3 100644 --- a/webpack/JobWizard/steps/form/ResourceSelect.js +++ b/webpack/JobWizard/steps/form/ResourceSelect.js @@ -1,6 +1,10 @@ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; -import { Select, SelectOption, SelectVariant } from '@patternfly/react-core'; +import { + Select, + SelectOption, + SelectVariant +} from '@patternfly/react-core/deprecated'; import Immutable from 'seamless-immutable'; import { sprintf, translate as __ } from 'foremanReact/common/I18n'; import { useSelector, useDispatch } from 'react-redux'; @@ -85,7 +89,7 @@ export const ResourceSelect = ({ selections={selected} loadingVariant={isLoading ? 'spinner' : null} onSelect={onSelect} - onToggle={setIsOpen} + onToggle={(_event, val) => setIsOpen(val)} isOpen={isOpen} className="without_select2" maxHeight="45vh" diff --git a/webpack/JobWizard/steps/form/SearchSelect.js b/webpack/JobWizard/steps/form/SearchSelect.js index 66cd27590..46d06b2f1 100644 --- a/webpack/JobWizard/steps/form/SearchSelect.js +++ b/webpack/JobWizard/steps/form/SearchSelect.js @@ -1,6 +1,10 @@ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; -import { Select, SelectOption, SelectVariant } from '@patternfly/react-core'; +import { + Select, + SelectOption, + SelectVariant +} from '@patternfly/react-core/deprecated'; import Immutable from 'seamless-immutable'; import { sprintf, translate as __ } from 'foremanReact/common/I18n'; import { DEBOUNCE_API } from '../../JobWizardConstants'; @@ -87,7 +91,7 @@ export const SearchSelect = ({ } loadingVariant={isLoading ? 'spinner' : null} onSelect={onSelect} - onToggle={setIsOpen} + onToggle={(_event, val) => setIsOpen(val)} isOpen={isOpen} className="without_select2" maxHeight="45vh" diff --git a/webpack/JobWizard/steps/form/SelectField.js b/webpack/JobWizard/steps/form/SelectField.js index 802daf793..63a649083 100644 --- a/webpack/JobWizard/steps/form/SelectField.js +++ b/webpack/JobWizard/steps/form/SelectField.js @@ -1,5 +1,11 @@ import React, { useState } from 'react'; -import { FormGroup, Select, SelectOption } from '@patternfly/react-core'; +import { + FormGroup +} from '@patternfly/react-core'; +import { + Select, + SelectOption +} from '@patternfly/react-core/deprecated'; import PropTypes from 'prop-types'; export const SelectField = ({ @@ -40,7 +46,7 @@ export const SelectField = ({ ouiaId={fieldId} selections={value} onSelect={onSelect} - onToggle={setIsOpen} + onToggle={(_event, val) => setIsOpen(val)} isOpen={isOpen} className="without_select2" maxHeight="45vh" diff --git a/webpack/react_app/components/FeaturesDropdown/index.js b/webpack/react_app/components/FeaturesDropdown/index.js index 90b3bc5ef..fa72a1986 100644 --- a/webpack/react_app/components/FeaturesDropdown/index.js +++ b/webpack/react_app/components/FeaturesDropdown/index.js @@ -2,11 +2,11 @@ import PropTypes from 'prop-types'; import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { - DropdownItem, - Dropdown, - DropdownToggle, - DropdownToggleAction, -} from '@patternfly/react-core'; + DropdownItem, + Dropdown, + DropdownToggle, + DropdownToggleAction +} from '@patternfly/react-core/deprecated'; import { push } from 'connected-react-router'; import { useAPI } from 'foremanReact/common/hooks/API/APIHooks'; diff --git a/webpack/react_app/components/FeaturesDropdown/index.scss b/webpack/react_app/components/FeaturesDropdown/index.scss index a17dea8e7..e7e90c486 100644 --- a/webpack/react_app/components/FeaturesDropdown/index.scss +++ b/webpack/react_app/components/FeaturesDropdown/index.scss @@ -1,10 +1,10 @@ -#schedule-a-job-dropdown ul.pf-c-dropdown__menu { +#schedule-a-job-dropdown ul.pf-v5-c-dropdown__menu { padding-left: 0; li { display: unset; a { font-size: 16px; - color: var(--pf-c-dropdown__menu-item--Color); + color: var(--pf-v5-cdropdown__menu-item--Color); font-weight: 300; } } diff --git a/webpack/react_app/components/HostKebab/KebabItems.js b/webpack/react_app/components/HostKebab/KebabItems.js index 7f2be2bd3..34ce0b96b 100644 --- a/webpack/react_app/components/HostKebab/KebabItems.js +++ b/webpack/react_app/components/HostKebab/KebabItems.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 { CodeIcon } from '@patternfly/react-icons'; import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors'; import { translate as __ } from 'foremanReact/common/I18n'; diff --git a/webpack/react_app/components/RecentJobsCard/RecentJobsCard.js b/webpack/react_app/components/RecentJobsCard/RecentJobsCard.js index 8350a75a3..096c61600 100644 --- a/webpack/react_app/components/RecentJobsCard/RecentJobsCard.js +++ b/webpack/react_app/components/RecentJobsCard/RecentJobsCard.js @@ -1,7 +1,14 @@ import PropTypes from 'prop-types'; import React, { useState } from 'react'; -import { DropdownItem, Tabs, Tab, TabTitleText } from '@patternfly/react-core'; +import { + Tabs, + Tab, + TabTitleText +} from '@patternfly/react-core'; +import { + DropdownItem +} from '@patternfly/react-core/deprecated'; import CardTemplate from 'foremanReact/components/HostDetails/Templates/CardItem/CardTemplate'; import { translate as __ } from 'foremanReact/common/I18n'; import { foremanUrl } from 'foremanReact/common/helpers'; diff --git a/webpack/react_app/components/RecentJobsCard/RecentJobsTable.js b/webpack/react_app/components/RecentJobsCard/RecentJobsTable.js index b7564e8dd..27e7dbeff 100644 --- a/webpack/react_app/components/RecentJobsCard/RecentJobsTable.js +++ b/webpack/react_app/components/RecentJobsCard/RecentJobsTable.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { Text, Bullseye } from '@patternfly/react-core'; -import { TableComposable, Tr, Tbody, Td } from '@patternfly/react-table'; +import { Table /* data-codemods */, Tr, Tbody, Td } from '@patternfly/react-table'; import { STATUS } from 'foremanReact/constants'; import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime'; @@ -41,7 +41,7 @@ const RecentJobsTable = ({ status, hostId }) => { } > {!!jobs?.length && ( - { ) )} - + )} ); diff --git a/webpack/react_app/components/RecentJobsCard/styles.scss b/webpack/react_app/components/RecentJobsCard/styles.scss index d1feffcdb..bc858a164 100644 --- a/webpack/react_app/components/RecentJobsCard/styles.scss +++ b/webpack/react_app/components/RecentJobsCard/styles.scss @@ -1,11 +1,11 @@ .job-success { - color: var(--pf-global--success-color--100); + color: var(--pf-v5-global--success-color--100); } .job-error { - color: var(--pf-global--danger-color--100); + color: var(--pf-v5-global--danger-color--100); } .job-info { - color: var(--pf-global--info-color--200); + color: var(--pf-v5-global--info-color--200); } diff --git a/webpack/react_app/components/RegistrationExtension/RexInterface.js b/webpack/react_app/components/RegistrationExtension/RexInterface.js index d01c03237..0095cc3d3 100644 --- a/webpack/react_app/components/RegistrationExtension/RexInterface.js +++ b/webpack/react_app/components/RegistrationExtension/RexInterface.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { translate as __ } from 'foremanReact/common/I18n'; -import { FormGroup, TextInput, Popover } from '@patternfly/react-core'; +import { FormGroup, TextInput, Popover, Icon } from '@patternfly/react-core'; import { HelpIcon } from '@patternfly/react-icons'; @@ -20,10 +20,12 @@ const RexInterface = ({ isLoading, onChange }) => ( } > } diff --git a/webpack/react_app/components/RegistrationExtension/RexPull.js b/webpack/react_app/components/RegistrationExtension/RexPull.js index 8ab558299..a761df2cd 100644 --- a/webpack/react_app/components/RegistrationExtension/RexPull.js +++ b/webpack/react_app/components/RegistrationExtension/RexPull.js @@ -38,7 +38,7 @@ const RexPull = ({ isLoading, onChange, pluginValues, configParams }) => ( + onChange={(_event, setupRemoteExecutionPull) => onChange({ setupRemoteExecutionPull }) } className="without_select2" diff --git a/webpack/react_app/components/RegistrationExtension/__tests__/__snapshots__/RexInterface.test.js.snap b/webpack/react_app/components/RegistrationExtension/__tests__/__snapshots__/RexInterface.test.js.snap index 6ebe82575..47e0cdcb2 100644 --- a/webpack/react_app/components/RegistrationExtension/__tests__/__snapshots__/RexInterface.test.js.snap +++ b/webpack/react_app/components/RegistrationExtension/__tests__/__snapshots__/RexInterface.test.js.snap @@ -13,14 +13,14 @@ exports[`RexInterface renders 1`] = ` } > }