move more formInputs

kyma-project · Oct 6, 2023 · 44bd0fd · 44bd0fd
1 parent 24317a2
commit 44bd0fd
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 54 deletions.
diff --git 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,19 +22,18 @@ 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]);
           }}
           required
           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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}