🐾 Add LazyTextInput component

packages/eslint-plugin/cspell.wordlist.txt

@@ -83,3 +83,4 @@ millicores
 inputgroup
 pvc
 pvcs
+LUKS

packages/forklift-console-plugin/src/components/InputList/InputList.tsx

@@ -5,7 +5,7 @@ import { MinusCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
 
 import './InputList.style.css';
 
-export type InputListRow<T> = React.FC<{ data: T; onChange: (value: T) => void }>;
+export type InputListRow<T> = React.FC<{ value: T; onChange: (value: T) => void }>;
 
 /**
  * Props for InputList component.
@@ -77,7 +77,7 @@ export const InputList = <T,>({
         <ListItem key={id} id={id}>
           <Flex alignItems={{ default: 'alignItemsCenter', lg: 'alignItemsBaseline' }}>
             <FlexItem>
-              <InputRow data={content} onChange={(newValue) => handleItemChange(id, newValue)} />
+              <InputRow value={content} onChange={(newValue) => handleItemChange(id, newValue)} />
             </FlexItem>
             <FlexItem>
               <Tooltip content={removeIconContent}>

packages/forklift-console-plugin/src/components/InputList/LazyTextInput.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+
+import { TextInput } from '@patternfly/react-core';
+
+interface LazyTextInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  type?:
+    | 'text'
+    | 'date'
+    | 'datetime-local'
+    | 'email'
+    | 'month'
+    | 'number'
+    | 'password'
+    | 'search'
+    | 'tel'
+    | 'time'
+    | 'url';
+  ariaLabel?: string;
+}
+
+/**
+ * LazyTextInput is a custom input component that triggers the onChange event
+ * only when the input loses focus (onBlur) or when the Enter key is pressed.
+ *
+ * @param {string} value - The current value of the input.
+ * @param {(value: string) => void} onChange - Callback function to handle value changes.
+ * @param {string} ariaLabel - Aria label for accessibility.
+ * @returns {React.ReactElement} The rendered input component.
+ */
+export const LazyTextInput: React.FunctionComponent<LazyTextInputProps> = ({
+  value: propValue,
+  onChange,
+  type = 'text',
+  ariaLabel = '',
+}) => {
+  const [value, setValue] = useState(propValue);
+
+  const handleBlur = () => {
+    if (value !== propValue) {
+      onChange(value);
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      if (value !== propValue) {
+        onChange(value);
+      }
+    }
+  };
+
+  return (
+    <TextInput
+      value={value}
+      type={type}
+      onChange={(value) => setValue(value)}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+      aria-label={ariaLabel}
+    />
+  );
+};

packages/forklift-console-plugin/src/components/InputList/index.ts

@@ -1,3 +1,4 @@
 // @index(['./*', /style/g], f => `export * from '${f.path}';`)
 export * from './InputList';
+export * from './LazyTextInput';
 // @endindex

packages/forklift-console-plugin/src/modules/Plans/views/details/components/SettingsSection/SettingsSection.tsx

@@ -66,6 +66,7 @@ export const SettingsSectionInternal: React.FC<SettingsSectionProps> = ({ obj, p
         {['ovirt'].includes(sourceProvider?.spec?.type) && (
           <PreserveClusterCpuModelDetailsItem resource={obj} canPatch={permissions.canPatch} />
         )}
+
         {['vsphere'].includes(sourceProvider?.spec?.type) && (
           <PreserveStaticIPsDetailsItem resource={obj} canPatch={permissions.canPatch} />
         )}