From 44bd0fd7fc90fc7eb847bb098c996ff45a9e5381 Mon Sep 17 00:00:00 2001
From: mrCherry97 <mwisnia97@gmail.com>
Date: Fri, 6 Oct 2023 14:57:55 +0200
Subject: [PATCH] move more formInputs

---
 .../BusolaExtensions/ColumnsInput.js          | 12 ++++-----
 .../Extensibility/components-form/Jsonata.js  | 11 +++-----
 .../ResourceForm/fields/RuntimeResources.js   | 13 +++------
 .../ResourceForm/fields/TextArrayInput.js     | 27 +++++++++----------
 src/shared/ResourceForm/inputs/Number.js      |  9 +++----
 src/shared/ResourceForm/inputs/Text.js        |  9 ++-----
 src/shared/components/MemoryInput.js          |  7 +++--
 7 files changed, 34 insertions(+), 54 deletions(-)

diff --git a/src/components/BusolaExtensions/ColumnsInput.js b/src/components/BusolaExtensions/ColumnsInput.js
index 0adf9c2d58..ae8f1437e8 100644
--- a/src/components/BusolaExtensions/ColumnsInput.js
+++ b/src/components/BusolaExtensions/ColumnsInput.js
@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { CheckBox, MessageStrip } from '@ui5/webcomponents-react';
-import { FormInput } from 'fundamental-react';
+import { CheckBox, Input, MessageStrip } from '@ui5/webcomponents-react';
 
 export function ColumnsInput({ value: columns, setValue: setColumns }) {
   const { t } = useTranslation();
@@ -23,10 +22,9 @@ export function ColumnsInput({ value: columns, setValue: setColumns }) {
             setColumns([...columns]);
           }}
         />
-        <FormInput
-          compact
+        <Input
           value={value.name}
-          onChange={e => {
+          onInput={e => {
             value.name = e.target.value;
             setColumns([...columns]);
           }}
@@ -34,8 +32,8 @@ export function ColumnsInput({ value: columns, setValue: setColumns }) {
           placeholder={t('extensibility.starter-modal.headers.field-name')}
           readOnly={!value.isSelected}
         />
-        <FormInput readOnly compact defaultValue={value?.path} />
-        <FormInput readOnly compact defaultValue={value?.type} />
+        <Input readOnly defaultValue={value?.path} />
+        <Input readOnly defaultValue={value?.type} />
       </div>
     );
   });
diff --git a/src/components/Extensibility/components-form/Jsonata.js b/src/components/Extensibility/components-form/Jsonata.js
index 965d55da04..f70947dd6e 100644
--- a/src/components/Extensibility/components-form/Jsonata.js
+++ b/src/components/Extensibility/components-form/Jsonata.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { InputGroup, FormInput } from 'fundamental-react';
+import { InputGroup } from 'fundamental-react';
 
 import { useValidation } from 'shared/hooks/useValidation';
 import { ResourceForm } from 'shared/ResourceForm';
@@ -8,7 +8,7 @@ import {
   getPropsFromSchema,
 } from 'components/Extensibility/helpers';
 import { Tooltip } from 'shared/components/Tooltip/Tooltip';
-import { Icon } from '@ui5/webcomponents-react';
+import { Icon, Input } from '@ui5/webcomponents-react';
 
 export function JsonataInput({
   value,
@@ -36,12 +36,7 @@ export function JsonataInput({
             <Icon aria-label="Jsonata" name="source-code" />
           </Tooltip>
         </InputGroup.Addon>
-        <FormInput
-          compact
-          value={value || ''}
-          {...props}
-          {...validationProps}
-        />
+        <Input value={value || ''} {...props} {...validationProps} />
       </InputGroup>
     </div>
   );
diff --git a/src/shared/ResourceForm/fields/RuntimeResources.js b/src/shared/ResourceForm/fields/RuntimeResources.js
index 32141e7a75..5e8bfd07aa 100644
--- a/src/shared/ResourceForm/fields/RuntimeResources.js
+++ b/src/shared/ResourceForm/fields/RuntimeResources.js
@@ -1,11 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  FormItem,
-  FormInput,
-  FormLabel,
-  FormFieldset,
-} from 'fundamental-react';
+import { FormItem, FormLabel, FormFieldset } from 'fundamental-react';
 import * as jp from 'jsonpath';
 
 import { Dropdown } from 'shared/components/Dropdown/Dropdown';
@@ -14,6 +9,7 @@ import { ResourceForm } from '..';
 import * as Inputs from '../inputs';
 
 import './RuntimeResources.scss';
+import { Input } from '@ui5/webcomponents-react';
 
 function MemoryInput({ label, propertyPath, container = {}, setContainer }) {
   const units = ['K', 'Ki', 'M', 'Mi', 'G', 'Gi', 'Ti', 'T'];
@@ -39,12 +35,11 @@ function MemoryInput({ label, propertyPath, container = {}, setContainer }) {
     <FormItem>
       <FormLabel required>{label}</FormLabel>
       <div className="memory-input fd-col fd-col-md--11">
-        <FormInput
-          compact
+        <Input
           type="number"
           min="0"
           value={numericValue}
-          onChange={e => setValue(e.target.value + selectedUnit)}
+          onInput={e => setValue(e.target.value + selectedUnit)}
         />
         <Dropdown
           options={options}
diff --git a/src/shared/ResourceForm/fields/TextArrayInput.js b/src/shared/ResourceForm/fields/TextArrayInput.js
index f4a3ac5108..2fd7691c8b 100644
--- a/src/shared/ResourceForm/fields/TextArrayInput.js
+++ b/src/shared/ResourceForm/fields/TextArrayInput.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { FormInput } from 'fundamental-react';
 
 import { MultiInput } from './MultiInput';
+import { Input } from '@ui5/webcomponents-react';
 
 export function TextArrayInput({
   defaultOpen,
@@ -34,28 +34,27 @@ export function TextArrayInput({
           internalValue,
           setMultiValue,
         }) => (
-          <FormInput
+          <Input
             placeholder={Math.abs(index) === 1 ? placeholder : ''}
             key={index}
-            compact
             value={value || ''}
             ref={ref}
-            onChange={e => {
+            onInput={e => {
               setValue(e.target.value);
               updateValue();
             }}
-            onKeyDown={e => focus(e)}
-            onBlur={() => {
-              const fieldValue = internalValue?.filter(val => !!val);
-              setMultiValue(
-                typeof customFormatFn === 'function'
-                  ? customFormatFn(fieldValue)
-                  : fieldValue,
-              );
-            }}
+            // onKeyDown={e => focus(e)}
+            // onBlur={() => {
+            //   const fieldValue = internalValue?.filter(val => !!val);
+            //   setMultiValue(
+            //     typeof customFormatFn === 'function'
+            //       ? customFormatFn(fieldValue)
+            //       : fieldValue,
+            //   );
+            // }}
             readOnly={readOnly}
             {...inputProps}
-            ariaLabel={ariaLabel}
+            aria-label={ariaLabel}
           />
         ),
       ]}
diff --git a/src/shared/ResourceForm/inputs/Number.js b/src/shared/ResourceForm/inputs/Number.js
index 82c7422c9c..ddbc6f2082 100644
--- a/src/shared/ResourceForm/inputs/Number.js
+++ b/src/shared/ResourceForm/inputs/Number.js
@@ -1,14 +1,13 @@
 import React from 'react';
-import { FormInput } from 'fundamental-react';
+import { Input } from '@ui5/webcomponents-react';
 
 export function Number({ value = '', setValue, ...props }) {
   return (
     <div className="fd-col fd-col-md--11">
-      <FormInput
-        compact
-        type="number"
+      <Input
+        type="Number"
         value={value}
-        onChange={e => setValue(e.target.valueAsNumber ?? null)}
+        onInput={e => setValue(e.target.valueAsNumber ?? null)}
         {...props}
       />
     </div>
diff --git a/src/shared/ResourceForm/inputs/Text.js b/src/shared/ResourceForm/inputs/Text.js
index 7dcdfd952a..b64c16b0e5 100644
--- a/src/shared/ResourceForm/inputs/Text.js
+++ b/src/shared/ResourceForm/inputs/Text.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import { FormInput } from 'fundamental-react';
 import { useValidation } from 'shared/hooks/useValidation';
+import { Input } from '@ui5/webcomponents-react';
 
 export function Text(props) {
   return <WrappedText {...props} />;
@@ -24,12 +24,7 @@ export function WrappedText({ value, setValue, onChange, inputRef, ...props }) {
 
   return (
     <div className={fullWidth ? '' : 'fd-col fd-col-md--11'}>
-      <FormInput
-        compact
-        value={value || ''}
-        {...inputProps}
-        {...validationProps}
-      />
+      <Input value={value || ''} {...inputProps} {...validationProps} />
     </div>
   );
 }
diff --git a/src/shared/components/MemoryInput.js b/src/shared/components/MemoryInput.js
index 7d806df00a..26fb955bf0 100644
--- a/src/shared/components/MemoryInput.js
+++ b/src/shared/components/MemoryInput.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { FormInput } from 'fundamental-react';
 
 import { Dropdown } from 'shared/components/Dropdown/Dropdown';
+import { Input } from '@ui5/webcomponents-react';
 
 export function MemoryInput({ label, propertyPath, value = '', setValue }) {
   const units = ['K', 'Ki', 'M', 'Mi', 'G', 'Gi', 'Ti', 'T'];
@@ -19,13 +19,12 @@ export function MemoryInput({ label, propertyPath, value = '', setValue }) {
 
   return (
     <div className="memory-input">
-      <FormInput
-        compact
+      <Input
         type="number"
         min="0"
         required
         value={numericValue}
-        onChange={e => setValue(`${e.target.value}${selectedUnit}`)}
+        onInput={e => setValue(`${e.target.value}${selectedUnit}`)}
       />
       <Dropdown
         options={options}