foreman_remote_execution 15.0.1 → 16.0.0

data/webpack/JobWizard/JobWizardPageRerun.js

@@ -7,11 +7,12 @@ import {
   Divider,
   Skeleton,
   Button,
-  Title,
   EmptyState,
   EmptyStateVariant,
   EmptyStateIcon,
   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,23 +64,28 @@ const JobWizardPageRerun = ({
   const currentLocation = useForemanLocation();
 
   const emptyStateLarge = (
-    <EmptyState variant={EmptyStateVariant.large}>
-      <EmptyStateIcon
-        icon={ExclamationCircleIcon}
-        color={exclamationColor.value}
+    <EmptyState variant={EmptyStateVariant.lg}>
+      <EmptyStateHeader
+        titleText={<>{__('Unable to run job')}</>}
+        icon={
+          <EmptyStateIcon
+            icon={ExclamationCircleIcon}
+            color={exclamationColor.value}
+          />
+        }
+        headingLevel="h4"
       />
-      <Title ouiaId="job-wizard-empty-state-header" headingLevel="h4" size="lg">
-        {__('Unable to run job')}
-      </Title>
       <EmptyStateBody>{sprintf(errorMessage)}</EmptyStateBody>
-      <Button
-        ouiaId="job-wizard-run-job-button"
-        component="a"
-        href="/job_invocations/new"
-        variant="primary"
-      >
-        {__('Create job')}
-      </Button>
+      <EmptyStateFooter>
+        <Button
+          ouiaId="job-wizard-run-job-button"
+          component="a"
+          href="/job_invocations/new"
+          variant="primary"
+        >
+          {__('Create job')}
+        </Button>
+      </EmptyStateFooter>
     </EmptyState>
   );
 

data/webpack/JobWizard/PermissionDenied.js

@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { Icon } from 'patternfly-react';
 import {
-  Title,
   Button,
   EmptyState,
   EmptyStateVariant,
   EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateFooter,
 } from '@patternfly/react-core';
 
 const PermissionDenied = ({ missingPermissions, setProceedAnyway }) => {
@@ -37,17 +38,20 @@ const PermissionDenied = ({ missingPermissions, setProceedAnyway }) => {
       <span className="empty-state-icon">
         <Icon name="lock" type="fa" size="2x" />
       </span>
-      <Title ouiaId="empty-state-header" headingLevel="h5" size="4xl">
-        {__('Permission Denied')}
-      </Title>
+      <EmptyStateHeader
+        titleText={<>{__('Permission Denied')}</>}
+        headingLevel="h5"
+      />
       <EmptyStateBody>{description}</EmptyStateBody>
-      <Button
-        ouiaId="job-invocation-proceed-anyway-button"
-        variant="primary"
-        onClick={handleProceedAnyway}
-      >
-        {__('Proceed Anyway')}
-      </Button>
+      <EmptyStateFooter>
+        <Button
+          ouiaId="job-invocation-proceed-anyway-button"
+          variant="primary"
+          onClick={handleProceedAnyway}
+        >
+          {__('Proceed Anyway')}
+        </Button>
+      </EmptyStateFooter>
     </EmptyState>
   );
 };

data/webpack/JobWizard/__tests__/integration.test.js

@@ -59,26 +59,28 @@ describe('Job wizard fill', () => {
         <JobWizard />
       </Provider>
     );
-    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 () => {

data/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 = ({
         <ResetDefault setValue={setValue} defaultValue={defaultValue} />
       }
       fieldId="description"
-      helperText={
-        <Button
-          ouiaId="description-preview-button"
-          variant="link"
-          isInline
-          onClick={togglePreview}
-        >
-          {isPreview
-            ? __('Edit job description template')
-            : __('Preview job description')}
-        </Button>
-      }
     >
       {isPreview ? (
         <Tooltip content={generatedDesc}>
@@ -89,9 +85,25 @@ export const DescriptionField = ({
           autoComplete="description"
           id="description"
           value={value}
-          onChange={newValue => setValue(newValue)}
+          onChange={(_event, newValue) => setValue(newValue)}
         />
       )}
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem>
+            <Button
+              ouiaId="description-preview-button"
+              variant="link"
+              isInline
+              onClick={togglePreview}
+            >
+              {isPreview
+                ? __('Edit job description template')
+                : __('Preview job description')}
+            </Button>
+          </HelperTextItem>
+        </HelperText>
+      </FormHelperText>
     </FormGroup>
   );
 };

data/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)}
     />
   </FormGroup>
 );
@@ -94,7 +94,7 @@ export const PasswordField = ({ value, setValue }) => (
       type="password"
       placeholder="*****"
       value={value}
-      onChange={newValue => setValue(newValue)}
+      onChange={(_event, newValue) => setValue(newValue)}
     />
   </FormGroup>
 );
@@ -118,7 +118,7 @@ export const KeyPassphraseField = ({ value, setValue }) => (
       type="password"
       placeholder="*****"
       value={value}
-      onChange={newValue => setValue(newValue)}
+      onChange={(_event, newValue) => setValue(newValue)}
     />
   </FormGroup>
 );
@@ -142,7 +142,7 @@ export const EffectiveUserPasswordField = ({ value, setValue }) => (
       type="password"
       placeholder="*****"
       value={value}
-      onChange={newValue => setValue(newValue)}
+      onChange={(_event, newValue) => setValue(newValue)}
     />
   </FormGroup>
 );
@@ -181,7 +181,7 @@ export const ExecutionOrderingField = ({ isRandomizedOrdering, setValue }) => (
       <div
         dangerouslySetInnerHTML={{
           __html: __(
-            'Execution ordering determines whether the jobs should be executed on hosts in alphabetical order or in randomized order.<br><ul><li><b>Ordered</b> - executes the jobs on hosts in alphabetical order</li><li><b>Randomized</b> - randomizes the order in which jobs are executed on hosts</li></ul>'
+            'Execution ordering determines whether the jobs should be executed on hosts in alphabetical order or in randomized order.<br><ul><li><b>Ordered</b> - Executes the jobs on hosts in alphabetical order</li><li><b>Randomized</b> - Randomizes the order in which jobs are executed on hosts</li></ul>'
           ),
         }}
       />,
@@ -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)}
     />
   </FormGroup>
 );

data/webpack/JobWizard/steps/AdvancedFields/__tests__/AdvancedFields.test.js

@@ -44,18 +44,20 @@ describe('AdvancedFields', () => {
       </MockedProvider>
     );
     // 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
 

data/webpack/JobWizard/steps/HostsAndInputs/SelectAPI.js

@@ -1,7 +1,7 @@
 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';

data/webpack/JobWizard/steps/HostsAndInputs/SelectGQL.js

@@ -1,6 +1,6 @@
 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,

data/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' })
       );
     });
   });

data/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 = ({
         />
       )}
       <Form>
-        <FormGroup
-          fieldId="host_selection"
-          id="host-selection"
-          helperTextInvalid={errorText}
-          validated={isError ? 'error' : 'default'}
-        >
+        <FormGroup fieldId="host_selection" id="host-selection">
           <InputGroup onBlur={() => setWasFocus(true)}>
-            <SelectField
-              isRequired
-              className="target-method-select"
-              toggleIcon={<FilterIcon />}
-              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}
-            />
+            <InputGroupItem>
+              <SelectField
+                isRequired
+                className="target-method-select"
+                toggleIcon={<FilterIcon />}
+                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}
+              />
+            </InputGroupItem>
             {hostMethod === hostMethods.searchQuery && (
               <HostSearch
                 setValue={setHostsSearchQuery}
@@ -220,6 +220,11 @@ const HostsAndInputs = ({
               />
             )}
           </InputGroup>
+          {isError && (
+            <FormHelperText>
+              <HelperText>{errorText}</HelperText>
+            </FormHelperText>
+          )}
         </FormGroup>
         <SelectedChips
           selectedHosts={selectedHosts}

data/webpack/JobWizard/steps/ReviewDetails/ReviewDetails.test.js

@@ -76,7 +76,7 @@ describe('ReviewDetails', () => {
     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);

data/webpack/JobWizard/steps/ReviewDetails/index.js

@@ -6,8 +6,8 @@ import {
   DescriptionListTerm,
   DescriptionListGroup,
   DescriptionListDescription,
-  WizardContextConsumer,
 } 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';

data/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);
       }}
     />

data/webpack/JobWizard/steps/Schedule/QueryType.js

@@ -10,7 +10,7 @@ export const QueryType = ({ isTypeStatic, setIsTypeStatic }) => (
       label={__('Query type')}
       fieldId="query-type-static"
       labelIcon={helpLabel(
-        __('Type has impact on when is the query evaluated to hosts.'),
+        __('Type determines when the query is evaluated to hosts.'),
         'query-type'
       )}
     >
@@ -21,7 +21,7 @@ export const QueryType = ({ isTypeStatic, setIsTypeStatic }) => (
         onChange={() => setIsTypeStatic(true)}
         id="query-type-static"
         label={__('Static query')}
-        body={__('evaluates just after you submit this form')}
+        body={__('Executes the job on the current list of target hosts.')}
       />
     </FormGroup>
     <FormGroup fieldId="query-type-dynamic">
@@ -33,7 +33,7 @@ export const QueryType = ({ isTypeStatic, setIsTypeStatic }) => (
         id="query-type-dynamic"
         label={__('Dynamic query')}
         body={__(
-          "evaluates just before the execution is started, so if it's planned in future, targeted hosts set may change before it"
+          'Evaluates the list of target hosts just before the job is executed. If you used a filter to select the target hosts, the list of target hosts might be different from the current list.'
         )}
       />
     </FormGroup>

data/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 });
         }}
       />

data/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

data/webpack/JobWizard/steps/Schedule/RepeatHour.js

@@ -2,13 +2,15 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import {
   FormGroup,
-  Select,
-  SelectOption,
-  SelectVariant,
   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}

data/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 });
           }}
         />

data/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 },

data/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}
         >
           <DateTimePicker
             ariaLabel="starts before"
@@ -112,6 +112,13 @@ export const ScheduleFuture = ({
           >
             {__('Clear input')}
           </Button>
+          {error && (
+            <FormHelperText>
+              <HelperText>
+                <HelperTextItem variant="error">{error}</HelperTextItem>
+              </HelperText>
+            </FormHelperText>
+          )}
         </FormGroup>
       </Form>
     </>