fix: Accessible name for KeyValueField and Eslint adjustments (#4410)

* fix: Accessible name for KeyValueField and Eslint adjustments

* fix: not updating

Author: OliwiaGowor

eslint.config.ts

@@ -44,15 +44,29 @@ export default defineConfig(
 
         // TypeScript
         '@typescript-eslint/no-explicit-any': 'off',
-        '@typescript-eslint/no-unused-vars': 'warn',
+        '@typescript-eslint/no-unused-vars': [
+          'warn',
+          {
+            varsIgnorePattern: '^_',
+            argsIgnorePattern: '^_',
+            caughtErrorsIgnorePattern: '^_',
+          },
+        ],
         '@typescript-eslint/no-empty-object-type': 'off',
         '@typescript-eslint/no-non-null-asserted-optional-chain': 'warn',
         '@typescript-eslint/no-unsafe-function-type': 'warn',
         '@typescript-eslint/no-unused-expressions': 'warn',
         '@typescript-eslint/ban-ts-comment': 'warn',
         '@typescript-eslint/no-require-imports': 'warn',
         // Misc
-        'no-unused-vars': 'warn',
+        'no-unused-vars': [
+          'warn',
+          {
+            varsIgnorePattern: '^_',
+            argsIgnorePattern: '^_',
+            caughtErrorsIgnorePattern: '^_',
+          },
+        ],
         'no-undef': 'warn',
         'no-case-declarations': 'warn',
         'no-constant-binary-expression': 'warn',

src/components/Extensibility/components-form/KeyValuePairRenderer.jsx

@@ -18,23 +18,23 @@ const getEnumComponent = (
   if (!Array.isArray(enumValues)) return input;
 
   const options = enumValues.map((opt) => ({ key: opt, text: opt }));
-  return ({ onChange, setValue, onBlur, value, ...props }) => (
+  const DropdownComp = ({ onChange, setValue, onBlur, value, ...props }) => (
     <Dropdown
       {...props}
       value={value}
       options={options}
       setValue={(v) => {
-        isKeyInput
-          ? onChange({
-              target: {
-                value: v,
-              },
-            })
-          : setValue(v);
+        if (isKeyInput) {
+          onChange({ target: { value: v } });
+        } else {
+          setValue(v);
+        }
         onBlur();
       }}
     />
   );
+
+  return DropdownComp;
 };
 
 const getValueComponent = (valueInfo) => {
@@ -45,8 +45,8 @@ const getValueComponent = (valueInfo) => {
       return getEnumComponent(valueEnum, false, Inputs.Number);
     case 'string':
       return getEnumComponent(valueEnum, false, Inputs.Text);
-    case 'object':
-      return ({ setValue, value }) => (
+    case 'object': {
+      const FieldComp = ({ setValue, value }) => (
         <KeyValueField
           className="nested-key-value-pair"
           value={value}
@@ -59,6 +59,8 @@ const getValueComponent = (valueInfo) => {
           }}
         />
       );
+      return FieldComp;
+    }
     default:
       return getEnumComponent(valueEnum, false);
   }
@@ -97,7 +99,7 @@ export function KeyValuePairRenderer({
 
   try {
     value = value ? value.toJS() : {};
-  } catch (error) {
+  } catch (_error) {
     value = {};
   }
 

src/shared/ResourceForm/fields/KeyValueField.jsx

@@ -24,7 +24,6 @@ export function KeyValueField({
   required,
   disableOnEdit,
   editMode,
-  accessibleName,
   ...props
 }) {
   const { t } = useTranslation();
@@ -60,6 +59,7 @@ export function KeyValueField({
     actions = [
       ...actions,
       <Button
+        key="button-encode"
         design="Transparent"
         icon={valuesEncoded ? 'show' : 'hide'}
         onClick={toggleEncoding}

src/shared/ResourceForm/fields/MultiInput.jsx

@@ -98,6 +98,21 @@ export function MultiInput({
   };
   const open = defaultOpen ?? false;
 
+  const inputComponents = internalValue.map((entry, index) =>
+    inputs.map((input, inputIndex) =>
+      input({
+        index: (index + 1) * keys,
+        value: entry,
+        setValue: (entry) => setEntry(entry, index),
+        ref: refs[index]?.[inputIndex],
+        updateValue: () => updateValue(internalValue),
+        internalValue,
+        setMultiValue: setValue,
+        focus: (e, target) => handleFocusMove(e, target, index),
+      }),
+    ),
+  );
+
   useEffect(() => {
     internalValue.forEach((entry, index) => {
       const isValid = (child) => child.props.validate(entry) ?? true;
@@ -122,32 +137,19 @@ export function MultiInput({
     });
   }, [inputs, internalValue]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const inputComponents = internalValue.map((entry, index) =>
-    inputs.map((input, inputIndex) =>
-      input({
-        index: (index + 1) * keys,
-        value: entry,
-        setValue: (entry) => setEntry(entry, index),
-        ref: refs[index]?.[inputIndex],
-        updateValue: () => updateValue(internalValue),
-        internalValue,
-        setMultiValue: setValue,
-        focus: (e, target) => {
-          if (e.key === 'Enter') {
-            if (typeof target === 'undefined') {
-              focus(refs[index + 1]?.[0]);
-            } else {
-              focus(refs[index][target]);
-            }
-          } else if (e.key === 'ArrowDown') {
-            focus(refs[index + 1]?.[0]);
-          } else if (e.key === 'ArrowUp') {
-            focus(refs[index - 1]?.[0]);
-          }
-        },
-      }),
-    ),
-  );
+  const handleFocusMove = (e, target, index) => {
+    if (e.key === 'Enter') {
+      if (typeof target === 'undefined') {
+        focus(refs[index + 1]?.[0]);
+      } else {
+        focus(refs[index][target]);
+      }
+    } else if (e.key === 'ArrowDown') {
+      focus(refs[index + 1]?.[0]);
+    } else if (e.key === 'ArrowUp') {
+      focus(refs[index - 1]?.[0]);
+    }
+  };
 
   return (
     <ResourceForm.CollapsibleSection

src/shared/ResourceForm/inputs/Switch.jsx

@@ -0,0 +1,12 @@
+import { Switch as UI5Switch } from '@ui5/webcomponents-react';
+
+interface SwitchProps {
+  value: boolean;
+  setValue: (_value: boolean) => void;
+}
+
+export function Switch({ value, setValue, ...props }: SwitchProps) {
+  return (
+    <UI5Switch checked={value} onChange={() => setValue(!value)} {...props} />
+  );
+}

src/shared/ResourceForm/inputs/Switch.tsx

@@ -8,16 +8,6 @@ export function Text({ key, ...props }) {
 export function WrappedText({ value, setValue, onChange, inputRef, ...props }) {
   if (!props.readOnly) delete props.readOnly;
 
-  const {
-    validationRef,
-    internalValue,
-    setMultiValue,
-    setResource,
-    validateMessage,
-    accessibleName,
-    ...inputProps
-  } = props;
-
   const validationProps = useValidation({
     inputRef,
     onChange: [onChange, (e) => setValue && setValue(e.target.value)],
@@ -27,7 +17,7 @@ export function WrappedText({ value, setValue, onChange, inputRef, ...props }) {
     <Input
       value={value || ''}
       onInput={onChange ?? ((e) => setValue && setValue(e.target.value))}
-      {...inputProps}
+      {...props}
       {...validationProps}
     />
   );