theforeman · MariaAga · Feb 10, 2026
diff --git a/test/integration/compute_profile_js_test.rb b/test/integration/compute_profile_js_test.rb
@@ -59,7 +59,7 @@ class ComputeProfileJSTest < IntegrationTestWithJavascript
     assert click_button("Submit")
     visit compute_profile_path(selected_profile)
     assert click_link(compute_resources(:mycompute).to_s)
-    assert_equal  "2048 MB", find_field('compute_attribute_vm_attrs_memory').value
+    assert_equal  "2048", find_field('compute_attribute_vm_attrs_memory').value
     assert_equal  "1", find_field('compute_attribute_vm_attrs_cpus').value
   end
 

diff --git a/...ck/assets/javascripts/react_app/components/MemoryAllocationInput/MemoryAllocationInput.js b/...ck/assets/javascripts/react_app/components/MemoryAllocationInput/MemoryAllocationInput.js
@@ -1,9 +1,7 @@
-import RCInputNumber from 'rc-input-number';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { sprintf, translate as __ } from '../../common/I18n';
 import { MB_FORMAT, MEGABYTES } from './constants';
-import '../common/forms/NumericInput.scss';
+import CounterInput from '../common/forms/CounterInput/CounterInput';
 import { noop } from '../../common/helpers';
 
 const MemoryAllocationInput = ({
@@ -20,53 +18,36 @@ const MemoryAllocationInput = ({
 }) => {
   const [valueMB, setValueMB] = useState(value / MEGABYTES);
 
-  useEffect(() => {
-    const valueBytes = valueMB * MEGABYTES;
-    if (maxValue && valueBytes > maxValue) {
-      setWarning(null);
-      setError(
-        sprintf(
-          __('Specified value is higher than maximum value %s'),
-          `${maxValue / MEGABYTES} ${MB_FORMAT}`
-        )
-      );
-    } else if (recommendedMaxValue && valueBytes > recommendedMaxValue) {
-      setError(null);
-      setWarning(
-        sprintf(
-          __('Specified value is higher than recommended maximum %s'),
-          `${recommendedMaxValue / MEGABYTES} ${MB_FORMAT}`
-        )
-      );
-    } else {
-      setWarning(null);
-    }
-  }, [valueMB, recommendedMaxValue, maxValue, setError, setWarning]);
-
   const handleChange = v => {
-    if (v === valueMB + 1) {
-      v = valueMB * 2;
-    } else if (v === valueMB - 1) {
-      v = Math.floor(valueMB / 2);
-    }
     setValueMB(v);
     onChange(v * MEGABYTES);
   };
-
+  const handlePlus = v => {
+    v = valueMB * 2;
+    handleChange(v);
+  };
+  const handleMinus = v => {
+    v = Math.floor(valueMB / 2);
+    handleChange(v);
+  };
   return (
     <>
-      <RCInputNumber
+      <CounterInput
+        unit={MB_FORMAT}
         value={valueMB}
         id={id}
-        formatter={v => `${v} ${MB_FORMAT}`}
-        parser={str => str.replace(/\D/g, '')}
         onChange={handleChange}
+        handlePlus={handlePlus}
+        handleMinus={handleMinus}
         disabled={disabled}
-        min={minValue && minValue / MEGABYTES}
-        step={1}
-        precision={0}
+        min={minValue || undefined}
+        max={maxValue || undefined}
         name=""
-        prefixCls="foreman-numeric-input"
+        setError={setError}
+        setWarning={setWarning}
+        recommendedMaxValue={
+          recommendedMaxValue ? recommendedMaxValue / MEGABYTES : undefined
+        }
       />
       <input type="hidden" name={name} value={valueMB * MEGABYTES} />
     </>

diff --git a/...cripts/react_app/components/MemoryAllocationInput/__tests__/MemoryAllocationInput.test.js b/...cripts/react_app/components/MemoryAllocationInput/__tests__/MemoryAllocationInput.test.js
@@ -1,31 +1,47 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { Provider } from 'react-redux';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { MEGABYTES } from '../constants';
 import MemoryAllocationInput from '../';
 
-
 describe('MemoryAllocationInput', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('calls setWarning when value exceeds recommendedMaxValue', async () => {
+    const setWarning = jest.fn();
+    render(
+      <MemoryAllocationInput
+        value={11264 * MEGABYTES}
+        recommendedMaxValue={10240}
+        setWarning={setWarning}
+      />
+    );
 
-  it('warning alert', async () => {
-      const setWarning = jest.fn();
-      const component = mount(
-        <MemoryAllocationInput
-          value={11264*MEGABYTES}
-          recommendedMaxValue={10240}
-          setWarning={setWarning}
-        />
-      );
-      expect(component.find('.foreman-numeric-input-input').prop('value')).toEqual('11264 MB');
-      expect(setWarning.mock.calls.length).toBe(1);
+    const input = screen.getByRole('spinbutton');
+    expect(input).toHaveValue(11264);
+
+    await waitFor(() => {
+      expect(setWarning).toHaveBeenCalledTimes(1);
+    });
   });
 
-  it('error alert', async () => {
-      const setError = jest.fn();
-      const component = mount(
-        <MemoryAllocationInput value={21504*MEGABYTES} maxValue={20480*MEGABYTES} setError={setError} />
-      );
-      expect(component.find('.foreman-numeric-input-input').prop('value')).toEqual('21504 MB');
-      expect(setError.mock.calls.length).toBe(1);
+  it('calls setError when value exceeds maxValue', async () => {
+    const setError = jest.fn();
+    render(
+      <MemoryAllocationInput
+        value={21504 * MEGABYTES}
+        maxValue={20480 * MEGABYTES}
+        setError={setError}
+      />
+    );
+
+    const input = screen.getByRole('spinbutton');
+    expect(input).toHaveValue(21504);
+
+    await waitFor(() => {
+      expect(setError).toHaveBeenCalledTimes(1);
+    });
   });
 });
diff --git a/webpack/assets/javascripts/react_app/components/common/forms/CounterInput/CounterInput.js b/webpack/assets/javascripts/react_app/components/common/forms/CounterInput/CounterInput.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import RCInputNumber from 'rc-input-number';
+import { NumberInput } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
-import { translate as __ } from '../../../../common/I18n';
+import { translate as __, sprintf } from '../../../../common/I18n';
 import { noop } from '../../../../common/helpers';
 
 const CounterInput = ({
@@ -16,37 +16,87 @@ const CounterInput = ({
   onChange,
   setError,
   setWarning,
+  widthChars,
+  unit,
+  handlePlus,
+  handleMinus,
 }) => {
   const [innerValue, setInnerValue] = useState(value);
+  const [validated, setValidated] = useState('default');
+
+  useEffect(() => {
+    setInnerValue(value);
+  }, [value]);
+
   useEffect(() => {
     if (max && innerValue > max) {
       setWarning(null);
-      setError(__('Specified value is higher than maximum value'));
+      setError(
+        sprintf(
+          __('Specified value is higher than maximum value %s %s'),
+          max,
+          unit
+        )
+      );
+      setValidated('error');
     } else if (recommendedMaxValue && innerValue > recommendedMaxValue) {
       setError(null);
-      setWarning(__('Specified value is higher than recommended maximum'));
+      setWarning(
+        sprintf(
+          __('Specified value is higher than recommended maximum %s %s'),
+          recommendedMaxValue,
+          unit
+        )
+      );
+      setValidated('warning');
     } else {
       setError(null);
       setWarning(null);
+      setValidated('default');
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [recommendedMaxValue, max, innerValue]);
+  }, [recommendedMaxValue, max, innerValue, setError, setWarning, unit]);
+  const setValue = newValue => {
+    setInnerValue(newValue);
+    onChange(newValue);
+  };
+  const handleChange = event => {
+    const inputValue = event.target.value;
+    const numValue = inputValue === '' ? '' : parseInt(inputValue, 10) || min;
+    setValue(numValue);
+  };
 
-  const handleChange = v => {
-    setInnerValue(v);
-    onChange(v);
+  const defaultHandlePlus = () => {
+    if (handlePlus) {
+      handlePlus(innerValue);
+    } else {
+      const newValue = (innerValue || 0) + (step || 1);
+      setValue(newValue);
+    }
+  };
+
+  const defaultHandleMinus = () => {
+    if (handleMinus) {
+      handleMinus(innerValue);
+    } else {
+      const newValue = (innerValue || 0) - (step || 1);
+      setValue(newValue);
+    }
   };
 
   return (
-    <RCInputNumber
-      value={innerValue}
-      name={name}
-      id={id}
+    <NumberInput
+      value={innerValue === null || innerValue === undefined ? 0 : innerValue}
+      inputName={name}
+      inputProps={{ id, name }}
       min={min}
-      disabled={disabled}
+      max={max}
+      isDisabled={disabled}
       onChange={handleChange}
-      step={step}
-      prefixCls="foreman-numeric-input"
+      onPlus={defaultHandlePlus}
+      onMinus={defaultHandleMinus}
+      validated={validated}
+      widthChars={widthChars}
+      unit={unit}
     />
   );
 };
@@ -60,20 +110,28 @@ CounterInput.propTypes = {
   recommendedMaxValue: PropTypes.number,
   /** Set the max value of the numeric input */
   max: PropTypes.number,
-  /** Set the min value of the numeric input */
+  /** Set the min value of the numeric input, undefined will be defaulted to 0 */
   min: PropTypes.number,
   /** Set whether the numeric input will be disabled or not */
   disabled: PropTypes.bool,
   /** Set the onChange function of the numeric input */
   onChange: PropTypes.func,
   /** Set the default value of the numeric input */
-  value: PropTypes.number,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Set the step, the counter will increase and decrease by */
   step: PropTypes.number,
   /** Component passes the validation error to this function */
   setError: PropTypes.func,
   /** Component passes the validation warning to this function */
   setWarning: PropTypes.func,
+  /** Set the width of the numeric input in characters */
+  widthChars: PropTypes.number,
+  /** Set the unit of the numeric input */
+  unit: PropTypes.string,
+  /** Override the default handlePlus function */
+  handlePlus: PropTypes.func,
+  /** Override the default handleMinus function */
+  handleMinus: PropTypes.func,
 };
 
 CounterInput.defaultProps = {
@@ -83,11 +141,15 @@ CounterInput.defaultProps = {
   value: 1,
   step: 1,
   min: 1,
-  max: null,
+  max: undefined,
   recommendedMaxValue: null,
   onChange: noop,
   setError: noop,
   setWarning: noop,
+  widthChars: 10,
+  unit: '',
+  handlePlus: null,
+  handleMinus: null,
 };
 
 export default CounterInput;