foreman_remote_execution 16.7.0 → 17.1.0

data/webpack/JobInvocationDetail/__tests__/TemplateInvocationPolling.test.js

@@ -0,0 +1,254 @@
+import React from 'react';
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import { Provider } from 'react-redux';
+import { render, act } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import * as api from 'foremanReact/redux/API';
+import * as selectors from '../JobInvocationSelectors';
+import { TemplateInvocation } from '../TemplateInvocation';
+import { mockTemplateInvocationResponse } from './fixtures';
+
+jest.spyOn(api, 'get');
+jest.mock('../JobInvocationSelectors');
+
+jest.mock('foremanReact/components/ToastsList', () => ({
+  addToast: jest.fn(payload => ({ type: 'ADD_TOAST', payload })),
+}));
+
+describe('TemplateInvocation polling', () => {
+  const noop = () => {};
+  const reducer = (state = {}) => state;
+  const makeStore = () => createStore(reducer, applyMiddleware(thunk));
+
+  const pollingProps = {
+    hostID: '1',
+    jobID: '1',
+    isInTableView: false,
+    isExpanded: true,
+    hostName: 'example-host',
+    hostProxy: { name: 'example-proxy', href: '#' },
+    showOutputType: { stderr: true, stdout: true, debug: true },
+    setShowOutputType: noop,
+    showTemplatePreview: false,
+    setShowTemplatePreview: noop,
+    showCommand: false,
+    setShowCommand: noop,
+  };
+
+  let apiGetSpy;
+
+  beforeEach(() => {
+    jest.useFakeTimers({ legacyFakeTimers: true });
+    selectors.selectTemplateInvocationStatus.mockImplementation(() => () =>
+      'RESOLVED'
+    );
+    selectors.selectTemplateInvocation.mockImplementation(() => () =>
+      mockTemplateInvocationResponse
+    );
+    apiGetSpy = jest
+      .spyOn(api.APIActions, 'get')
+      .mockImplementation(({ handleSuccess }) => {
+        handleSuccess &&
+          handleSuccess({ data: { finished: false, auto_refresh: true } });
+        return { type: 'MOCK_GET' };
+      });
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+    apiGetSpy.mockRestore();
+  });
+
+  it('fetches on mount when isExpanded is true', () => {
+    const localStore = makeStore();
+    render(
+      <Provider store={localStore}>
+        <TemplateInvocation {...pollingProps} isExpanded />
+      </Provider>
+    );
+    expect(apiGetSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not fetch on mount when isExpanded is false', () => {
+    const localStore = makeStore();
+    render(
+      <Provider store={localStore}>
+        <TemplateInvocation {...pollingProps} isExpanded={false} />
+      </Provider>
+    );
+    expect(apiGetSpy).not.toHaveBeenCalled();
+  });
+
+  it('schedules next poll via setTimeout when auto_refresh is true and not finished', () => {
+    const localStore = makeStore();
+    render(
+      <Provider store={localStore}>
+        <TemplateInvocation {...pollingProps} />
+      </Provider>
+    );
+    expect(apiGetSpy).toHaveBeenCalledTimes(1);
+
+    act(() => jest.advanceTimersByTime(5000));
+    expect(apiGetSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('does not schedule next poll when finished is true', () => {
+    apiGetSpy.mockImplementation(({ handleSuccess }) => {
+      handleSuccess &&
+        handleSuccess({ data: { finished: true, auto_refresh: true } });
+      return { type: 'MOCK_GET' };
+    });
+    const localStore = makeStore();
+    render(
+      <Provider store={localStore}>
+        <TemplateInvocation {...pollingProps} />
+      </Provider>
+    );
+    expect(apiGetSpy).toHaveBeenCalledTimes(1);
+
+    act(() => jest.advanceTimersByTime(5000));
+    expect(apiGetSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not schedule next poll when auto_refresh is false', () => {
+    apiGetSpy.mockImplementation(({ handleSuccess }) => {
+      handleSuccess &&
+        handleSuccess({ data: { finished: false, auto_refresh: false } });
+      return { type: 'MOCK_GET' };
+    });
+    const localStore = makeStore();
+    render(
+      <Provider store={localStore}>
+        <TemplateInvocation {...pollingProps} />
+      </Provider>
+    );
+    expect(apiGetSpy).toHaveBeenCalledTimes(1);
+
+    act(() => jest.advanceTimersByTime(5000));
+    expect(apiGetSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('clears the polling timeout and sets cancelled on unmount', () => {
+    const localStore = makeStore();
+    const { unmount } = render(
+      <Provider store={localStore}>
+        <TemplateInvocation {...pollingProps} />
+      </Provider>
+    );
+    expect(apiGetSpy).toHaveBeenCalledTimes(1);
+
+    unmount();
+    act(() => jest.advanceTimersByTime(5000));
+    expect(apiGetSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('cancels in-flight callback when unmounted before handleSuccess runs', () => {
+    let capturedHandleSuccess;
+    apiGetSpy.mockImplementation(({ handleSuccess }) => {
+      capturedHandleSuccess = handleSuccess;
+      return { type: 'MOCK_GET' };
+    });
+
+    const localStore = makeStore();
+    const { unmount } = render(
+      <Provider store={localStore}>
+        <TemplateInvocation {...pollingProps} />
+      </Provider>
+    );
+    expect(apiGetSpy).toHaveBeenCalledTimes(1);
+
+    unmount();
+
+    act(() => {
+      capturedHandleSuccess({ data: { finished: false, auto_refresh: true } });
+      jest.advanceTimersByTime(5000);
+    });
+
+    expect(apiGetSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('re-fetches when isExpanded changes from false to true', () => {
+    const localStore = makeStore();
+    const { rerender } = render(
+      <Provider store={localStore}>
+        <TemplateInvocation {...pollingProps} isExpanded={false} />
+      </Provider>
+    );
+    expect(apiGetSpy).not.toHaveBeenCalled();
+
+    rerender(
+      <Provider store={localStore}>
+        <TemplateInvocation {...pollingProps} isExpanded />
+      </Provider>
+    );
+    expect(apiGetSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not re-fetch on expand when response is already finished', () => {
+    selectors.selectTemplateInvocation.mockImplementation(() => () => ({
+      ...mockTemplateInvocationResponse,
+      finished: true,
+    }));
+    apiGetSpy.mockImplementation(({ handleSuccess }) => {
+      handleSuccess &&
+        handleSuccess({ data: { finished: true, auto_refresh: false } });
+      return { type: 'MOCK_GET' };
+    });
+
+    const localStore = makeStore();
+    const { rerender } = render(
+      <Provider store={localStore}>
+        <TemplateInvocation {...pollingProps} isExpanded={false} />
+      </Provider>
+    );
+    expect(apiGetSpy).not.toHaveBeenCalled();
+
+    rerender(
+      <Provider store={localStore}>
+        <TemplateInvocation {...pollingProps} isExpanded />
+      </Provider>
+    );
+    // Selector already returns finished=true → guard skips dispatchFetch
+    expect(apiGetSpy).not.toHaveBeenCalled();
+
+    rerender(
+      <Provider store={localStore}>
+        <TemplateInvocation {...pollingProps} isExpanded={false} />
+      </Provider>
+    );
+    rerender(
+      <Provider store={localStore}>
+        <TemplateInvocation {...pollingProps} isExpanded />
+      </Provider>
+    );
+    // Second expand: still finished → still no fetch
+    expect(apiGetSpy).not.toHaveBeenCalled();
+  });
+
+  it('cancels existing poll and starts fresh when isExpanded changes', () => {
+    const localStore = makeStore();
+    const { rerender } = render(
+      <Provider store={localStore}>
+        <TemplateInvocation {...pollingProps} isExpanded />
+      </Provider>
+    );
+    expect(apiGetSpy).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <Provider store={localStore}>
+        <TemplateInvocation {...pollingProps} isExpanded={false} />
+      </Provider>
+    );
+    act(() => jest.advanceTimersByTime(5000));
+    expect(apiGetSpy).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <Provider store={localStore}>
+        <TemplateInvocation {...pollingProps} isExpanded />
+      </Provider>
+    );
+    expect(apiGetSpy).toHaveBeenCalledTimes(2);
+  });
+});

data/webpack/JobInvocationDetail/__tests__/fixtures.js

@@ -42,6 +42,7 @@ export const jobInvocationData = {
     id: '37ad5ead-51de-4798-bc73-a17687c4d5aa',
     state: 'stopped',
     started_at: '2024-01-01 12:34:56 +0100',
+    cancellable: true,
   },
   template_invocations: [
     {
@@ -113,6 +114,7 @@ export const jobInvocationDataRecurring = {
   task: {
     id: '37ad5ead-51de-4798-bc73-a17687c4d5aa',
     state: 'scheduled',
+    cancellable: true,
   },
   mode: 'recurring',
   recurrence: {

data/webpack/JobInvocationDetail/index.js

@@ -5,13 +5,12 @@ import {
   PageSectionVariants,
   Skeleton,
 } from '@patternfly/react-core';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { translate as __, documentLocale } from 'foremanReact/common/I18n';
 import { useDispatch, useSelector } from 'react-redux';
 import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
 import PropTypes from 'prop-types';
 import SkeletonLoader from 'foremanReact/components/common/SkeletonLoader';
-import { stopInterval } from 'foremanReact/redux/middlewares/IntervalMiddleware';
 import { STATUS as API_STATUS } from 'foremanReact/constants';
 import {
   selectAPIErrorMessage,
@@ -25,12 +24,15 @@ import JobInvocationOverview from './JobInvocationOverview';
 import JobInvocationSystemStatusChart from './JobInvocationSystemStatusChart';
 import JobInvocationEmptyState from './JobInvocationEmptyState';
 import JobInvocationToolbarButtons from './JobInvocationToolbarButtons';
-import { getJobInvocation, getTask } from './JobInvocationActions';
+import {
+  getJobInvocation,
+  stopJobInvocationPolling,
+  isJobFinished,
+} from './JobInvocationActions';
 import './JobInvocationDetail.scss';
 import {
   DATE_OPTIONS,
   JOB_INVOCATION_KEY,
-  STATUS,
   STATUS_UPPERCASE,
 } from './JobInvocationConstants';
 import { selectItems } from './JobInvocationSelectors';
@@ -50,11 +52,13 @@ const JobInvocationDetailPage = ({
     start_at: startAt,
     targeting = {},
   } = items;
-  const finished =
-    statusLabel === STATUS.FAILED ||
-    statusLabel === STATUS.SUCCEEDED ||
-    statusLabel === STATUS.CANCELLED;
-  const autoRefresh = task?.state === STATUS.PENDING || false;
+  const finished = isJobFinished(statusLabel);
+  const pollTimeoutRef = useRef({ timeoutId: null, cancel: () => {} });
+  const permissionsRef = useRef(null);
+  if (items.permissions && !permissionsRef.current) {
+    permissionsRef.current = items.permissions;
+  }
+  const permissions = items.permissions || permissionsRef.current;
   const jobInvocationApiStatus = useSelector(state =>
     selectAPIStatus(state, JOB_INVOCATION_KEY)
   );
@@ -82,21 +86,16 @@ const JobInvocationDetailPage = ({
   }
 
   useEffect(() => {
-    dispatch(getJobInvocation(`/api/job_invocations/${id}`));
-    if (finished && !autoRefresh) {
-      dispatch(stopInterval(JOB_INVOCATION_KEY));
-    }
+    dispatch(getJobInvocation(`/api/job_invocations/${id}`, pollTimeoutRef));
     return () => {
-      dispatch(stopInterval(JOB_INVOCATION_KEY));
+      stopJobInvocationPolling(pollTimeoutRef);
     };
-  }, [dispatch, id, finished, autoRefresh]);
+  }, [dispatch, id]);
 
-  const taskId = task?.id;
-  useEffect(() => {
-    if (taskId !== undefined) {
-      dispatch(getTask(`${taskId}`));
-    }
-  }, [dispatch, taskId]);
+  const dataWithPermissions = useMemo(() => ({ ...items, permissions }), [
+    items,
+    permissions,
+  ]);
 
   const apiFailed = jobInvocationApiStatus === API_STATUS.ERROR;
 
@@ -154,7 +153,10 @@ const JobInvocationDetailPage = ({
         breadcrumbOptions={breadcrumbOptions}
         toolbarButtons={
           items.id !== undefined && (
-            <JobInvocationToolbarButtons jobId={id} data={items} />
+            <JobInvocationToolbarButtons
+              jobId={id}
+              data={dataWithPermissions}
+            />
           )
         }
         searchable={false}
@@ -216,10 +218,8 @@ const JobInvocationDetailPage = ({
           <JobInvocationHostTable
             id={id}
             targeting={targeting}
-            finished={finished}
-            autoRefresh={autoRefresh}
             initialFilter={selectedFilter}
-            statusLabel={statusLabel}
+            jobFinished={finished}
             onFilterUpdate={handleFilterChange}
           />
         </SkeletonLoader>

data/webpack/JobWizard/JobWizard.js

@@ -18,6 +18,7 @@ import {
   WIZARD_TITLES,
   SCHEDULE_TYPES,
   initialScheduleState,
+  STARTS_ERROR_CHECK_INTERVAL_MS,
 } from './JobWizardConstants';
 import {
   selectTemplateError,
@@ -237,7 +238,10 @@ export const JobWizard = ({ rerunData }) => {
       }
     };
     updateStartsError();
-    const interval = setInterval(updateStartsError, 5000);
+    const interval = setInterval(
+      updateStartsError,
+      STARTS_ERROR_CHECK_INTERVAL_MS
+    );
 
     return () => {
       interval && clearInterval(interval);

data/webpack/JobWizard/JobWizard.scss

@@ -1,5 +1,6 @@
 .job-wizard {
   font-size: var(--pf-v5-global--FontSize--md);
+
   .wizard-title {
     margin-bottom: 25px;
   }
@@ -15,6 +16,7 @@
       var(--pf-v5-cwizard__toggle--ZIndex) + 1
     ); // So the select box can be shown above the wizard footer and navigation toggle
   }
+
   .pf-v5-c-wizard__main-body {
     @media (max-width: 600px) {
       max-width: 100%;
@@ -41,6 +43,7 @@
     .pf-v5-c-chip-group.pf-m-category {
       margin-bottom: 10px;
     }
+
     .pf-v5-c-select__toggle-typeahead {
       border: 0px;
     }
@@ -50,62 +53,76 @@
         flex-wrap: nowrap;
       }
     }
+
     .foreman-search-field {
       width: 100%;
     }
   }
+
   input[type='radio'],
   input[type='checkbox'] {
     margin: 0;
   }
+
   .schedule-tab {
     #repeat-on-weekly {
       display: grid;
       grid-template-columns: repeat(7, 1fr);
     }
+
     .pf-v5-l-grid {
       gap: var(--pf-v5-cform--GridGap);
     }
+
     #repeat-on-hourly {
       max-height: 300px;
       overflow: scroll;
     }
+
     .schedule-radio label {
       width: 100%;
     }
+
     .schedule-radio input {
       align-self: center;
     }
+
     .schedule-radio-repeat-text {
       width: 100px;
       display: inline-block;
       margin-right: 5px;
       align-self: center;
     }
+
     .schedule-radio-title {
       width: 80px;
       display: inline-block;
       align-self: center;
     }
+
     .schedule-radio-occurences {
       display: inline-block;
       align-self: center;
     }
+
     .schedule-radio-wrapper {
       display: flex;
     }
   }
+
   .future-schedule-tab {
     .clear-datetime-button {
       margin-left: 10px;
       align-self: center;
       font-size: var(--pf-v5-global--FontSize--md);
     }
+
     .pf-v5-c-form__group-control {
       display: flex;
       flex-wrap: wrap;
     }
   }
+
   .pf-v5-c-date-picker {
     vertical-align: top;
   }
@@ -119,10 +136,12 @@
     // overwriting bootstrap/_forms.scss margin: 4px 0 0;
     margin: 0;
   }
+
   textarea {
     min-height: 40px;
     min-width: 100px;
   }
+
   .pf-v5-c-modal-box {
     width: auto;
   }
@@ -132,9 +151,11 @@
       margin-left: 10px;
     }
   }
+
   .pf-v5-c-radio__body {
     font-size: var(--pf-v5-cradio__label--FontSize);
   }
+
   .reset-default {
     padding-bottom: 0;
   }

data/webpack/JobWizard/JobWizardConstants.js

@@ -1,6 +1,9 @@
 import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from 'foremanReact/common/helpers';
-import { getControllerSearchProps } from 'foremanReact/constants';
+import {
+  getControllerSearchProps,
+  MS_PER_SECOND,
+} from 'foremanReact/constants';
 
 export const JOB_TEMPLATES = 'JOB_TEMPLATES';
 export const JOB_CATEGORIES = 'JOB_CATEGORIES';
@@ -78,3 +81,9 @@ export const HOST_IDS = 'HOST_IDS';
 export const REX_FEATURE = 'REX_FEATURE';
 
 export const JOB_API_KEY = 'JOB_API_KEY';
+
+export const SUNDAY_BASE_YEAR = 2017;
+export const DEFAULT_MINUTE_OPTIONS = [0, 15, 30, 45];
+export const STARTS_ERROR_CHECK_INTERVAL_MS = 5000;
+export const DATE_PADDING_SLICE = -2;
+export const DEBOUNCE_INPUT_MS = MS_PER_SECOND;

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

@@ -12,13 +12,15 @@ import {
   SelectVariant,
 } from '@patternfly/react-core/deprecated';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { MINUTES_PER_HOUR } from 'foremanReact/constants';
 import { helpLabel } from '../form/FormHelpers';
+import { DEFAULT_MINUTE_OPTIONS } from '../../JobWizardConstants';
 
 export const RepeatHour = ({ repeatData, setRepeatData }) => {
   const isValidMinute = newMinute =>
     Number.isInteger(parseInt(newMinute, 10)) &&
     newMinute >= 0 &&
-    newMinute < 60;
+    newMinute < MINUTES_PER_HOUR;
 
   const { minute } = repeatData;
   useEffect(() => {
@@ -27,7 +29,7 @@ export const RepeatHour = ({ repeatData, setRepeatData }) => {
     }
   }, [minute, setRepeatData]);
   const [minuteOpen, setMinuteOpen] = useState(false);
-  const [options, setOptions] = useState([0, 15, 30, 45]);
+  const [options, setOptions] = useState(DEFAULT_MINUTE_OPTIONS);
   const [isAlertOpen, setIsAlertOpen] = useState(false);
   return (
     <FormGroup

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

@@ -2,15 +2,17 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FormGroup, Checkbox } from '@patternfly/react-core';
 import { translate as __, documentLocale } from 'foremanReact/common/I18n';
+import { DAYS_PER_WEEK } from 'foremanReact/constants';
 import { RepeatDaily } from './RepeatDaily';
 import { noop } from '../../../helpers';
+import { SUNDAY_BASE_YEAR } from '../../JobWizardConstants';
 
 export const getWeekDays = () => {
   const locale = documentLocale().replace(/-/g, '_');
-  const baseDate = new Date(Date.UTC(2017, 0, 1)); // just a Sunday
+  const baseDate = new Date(Date.UTC(SUNDAY_BASE_YEAR, 0, 1)); // just a Sunday
   const weekDays = [];
   const formatOptions = { weekday: 'short', timeZone: 'UTC' };
-  for (let i = 0; i < 7; i++) {
+  for (let i = 0; i < DAYS_PER_WEEK; i++) {
     try {
       weekDays.push(baseDate.toLocaleDateString(locale, formatOptions));
     } catch {

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

@@ -12,6 +12,7 @@ import {
 } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { MS_PER_MINUTE } from 'foremanReact/constants';
 import { RepeatOn } from './RepeatOn';
 import { SCHEDULE_TYPES } from '../../JobWizardConstants';
 import { PurposeField } from './PurposeField';
@@ -114,7 +115,7 @@ export const ScheduleRecurring = ({
                   setScheduleValue(current => ({
                     ...current,
                     startsAt: new Date(
-                      new Date().getTime() + 60000
+                      new Date().getTime() + MS_PER_MINUTE
                     ).toISOString(), // 1 minute in the future
                     isFuture: true,
                   }))

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

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Form, FormGroup, Radio, Divider } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { MS_PER_MINUTE } from 'foremanReact/constants';
 import {
   WIZARD_TITLES,
   SCHEDULE_TYPES,
@@ -49,7 +50,9 @@ export const ScheduleType = ({
           onChange={() => {
             setScheduleValue(current => ({
               ...current,
-              startsAt: new Date(new Date().getTime() + 60000).toISOString(), // 1 minute in the future
+              startsAt: new Date(
+                new Date().getTime() + MS_PER_MINUTE
+              ).toISOString(), // 1 minute in the future
               scheduleType: SCHEDULE_TYPES.FUTURE,
               repeatType: repeatTypes.noRepeat,
             }));

data/webpack/JobWizard/steps/form/DateTimePicker.js

@@ -7,13 +7,19 @@ import {
 } from '@patternfly/react-core';
 import { debounce } from 'lodash';
 import { translate as __, documentLocale } from 'foremanReact/common/I18n';
+import {
+  DATE_PADDING_SLICE,
+  DEBOUNCE_INPUT_MS,
+} from '../../JobWizardConstants';
 
 const formatDateTime = d =>
   `${d.getFullYear()}-${`0${d.getMonth() + 1}`.slice(
-    -2
-  )}-${`0${d.getDate()}`.slice(-2)} ${`0${d.getHours()}`.slice(
-    -2
-  )}:${`0${d.getMinutes()}`.slice(-2)}:${`0${d.getSeconds()}`.slice(-2)}`;
+    DATE_PADDING_SLICE
+  )}-${`0${d.getDate()}`.slice(DATE_PADDING_SLICE)} ${`0${d.getHours()}`.slice(
+    DATE_PADDING_SLICE
+  )}:${`0${d.getMinutes()}`.slice(
+    DATE_PADDING_SLICE
+  )}:${`0${d.getSeconds()}`.slice(DATE_PADDING_SLICE)}`;
 
 export const DateTimePicker = ({
   dateTime,
@@ -103,7 +109,7 @@ export const DateTimePicker = ({
         aria-label={`${ariaLabel} datepicker`}
         value={formattedDate}
         placeholder="yyyy/mm/dd"
-        onChange={debounce(onDateChange, 1000, {
+        onChange={debounce(onDateChange, DEBOUNCE_INPUT_MS, {
           leading: false,
           trailing: true,
         })}
@@ -123,7 +129,7 @@ export const DateTimePicker = ({
         time={dateTime ? dateObject.toString() : ''}
         inputProps={dateTime ? {} : { value: '' }}
         placeholder={includeSeconds ? 'hh:mm:ss' : 'hh:mm'}
-        onChange={debounce(onTimeChange, 1000, {
+        onChange={debounce(onTimeChange, DEBOUNCE_INPUT_MS, {
           leading: false,
           trailing: true,
         })}

data/webpack/JobWizard/steps/form/FormHelpers.js

@@ -8,16 +8,17 @@ export const helpLabel = (text, id) => {
   if (!text) return null;
   return (
     <Popover id={`${id}-help`} bodyContent={text} aria-label="help-text">
-      <button
-        type="button"
+      <Button
+        ouiaId={`${id}-help-button`}
+        variant="plain"
         aria-label={__('open-help-tooltip-button')}
         onClick={e => e.preventDefault()}
-        className="pf-v5-c-form__group-label-help"
+        isInline
       >
         <Icon isInline>
           <HelpIcon />
         </Icon>
-      </button>
+      </Button>
     </Popover>
   );
 };