chore: Enable eslint react/prop-types rule - part 3

src/components/Extensibility/components-form/AlertRenderer.jsx → src/components/Extensibility/components-form/AlertRenderer.tsx

@@ -5,6 +5,33 @@ import { useCreateResourceDescription } from 'components/Extensibility/helpers';
 
 import { useVariables } from '../hooks/useVariables';
 import { useJsonata } from '../hooks/useJsonata';
+import { StoreKeys, StoreSchemaType } from '@ui-schema/ui-schema';
+import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign';
+import { Resource } from '../contexts/DataSources';
+
+type AlertRendererProps = {
+  value: any;
+  schema: StoreSchemaType;
+  storeKeys: StoreKeys;
+  originalResource: Resource;
+  resource?: Resource;
+  embedResource?: Resource;
+};
+
+const getMessageType = (
+  severity: string,
+): MessageStripDesign | keyof typeof MessageStripDesign => {
+  switch (severity) {
+    case 'warning':
+      return 'Critical';
+    case 'error':
+      return 'Negative';
+    case 'success':
+      return 'Positive';
+    default:
+      return 'Information';
+  }
+};
 
 export function AlertRenderer({
   value,
@@ -13,7 +40,7 @@ export function AlertRenderer({
   originalResource,
   resource,
   embedResource,
-}) {
+}: AlertRendererProps) {
   const { itemVars } = useVariables();
 
   const rule = schema.get('schemaRule');
@@ -32,19 +59,15 @@ export function AlertRenderer({
   const alert = schema.get('alert');
   const severity = schema.get('severity');
 
-  let schemaType = 'Information';
-  if (severity === 'warning') {
-    schemaType = 'Critical';
-  } else if (severity === 'error') {
-    schemaType = 'Negative';
-  } else if (severity === 'success') {
-    schemaType = 'Positive';
-  }
+  const schemaType = getMessageType(severity);
 
-  const [alertJsonata, setAlertJsonata] = useState('');
+  const [alertJsonata, setAlertJsonata] = useState<string | null>('');
 
   useEffect(() => {
-    async function getAlertJsonata(alertFormula, item) {
+    async function getAlertJsonata(
+      alertFormula: string,
+      item: Record<string, any>,
+    ) {
       const [value, error] = await jsonata(alertFormula, item);
       if (error) {
         console.warn('Widget::shouldBeVisible error:', error);

src/components/Extensibility/components-form/FormGroup.jsx → src/components/Extensibility/components-form/FormGroup.tsx

@@ -1,15 +1,24 @@
 import { ResourceForm } from 'shared/ResourceForm';
 import { useGetTranslation } from 'components/Extensibility/helpers';
+import { StoreKeys, StoreSchemaType } from '@ui-schema/ui-schema';
 import './FormGroup.scss';
 
+type FormGroupProps = {
+  schema: StoreSchemaType;
+  storeKeys: StoreKeys;
+  widgets: { WidgetRenderer: React.ComponentType<any> };
+  nestingLevel?: number;
+  required?: boolean;
+} & Record<string, any>;
+
 export function FormGroup({
   schema,
   storeKeys,
   widgets,
   nestingLevel = 0,
   required = false,
   ...props
-}) {
+}: FormGroupProps) {
   const { WidgetRenderer } = widgets;
   const ownSchema = schema.delete('widget');
   const { tFromStoreKeys, t: tExt } = useGetTranslation();

src/components/Extensibility/components-form/GenericList.jsx → src/components/Extensibility/components-form/GenericList.tsx

@@ -1,13 +1,33 @@
 import { useState } from 'react';
-import { PluginStack, useUIStore } from '@ui-schema/ui-schema';
+import {
+  PluginStack,
+  StoreKeys,
+  StoreSchemaType,
+  useUIStore,
+} from '@ui-schema/ui-schema';
 import { Button } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
 
 import { ResourceForm } from 'shared/ResourceForm';
-import { useGetTranslation } from 'components/Extensibility/helpers';
+import {
+  SchemaOnChangeParams,
+  useGetTranslation,
+} from 'components/Extensibility/helpers';
 import pluralize from 'pluralize';
 import { fromJS } from 'immutable';
 
+type GenericListProps = {
+  storeKeys: StoreKeys;
+  onChange: (params: SchemaOnChangeParams) => void;
+  schema: StoreSchemaType;
+  schemaKeys: StoreKeys;
+  showValidity: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  level: number;
+  nestingLevel?: number;
+} & Record<string, any>;
+
 export function GenericList({
   storeKeys,
   onChange,
@@ -19,19 +39,21 @@ export function GenericList({
   level,
   nestingLevel = 0,
   ...props
-}) {
+}: GenericListProps) {
   const { t } = useTranslation();
   const { tFromStoreKeys, t: tExt } = useGetTranslation();
   const { store } = useUIStore();
-  const { value } = store?.extractValues(storeKeys) || {};
+  const { value } = (store?.extractValues(storeKeys) || {}) as {
+    value: { size?: number };
+  };
   const listSize = value?.size || 0;
   const schemaPlaceholder = schema.get('placeholder');
   const itemTemplate = schema.get('template') || {};
   const defaultOpen = schema.get('defaultExpanded') ?? false;
   const tooltipContent = schema.get('description');
   const [newItemIndex, setNewItemIndex] = useState(0);
 
-  const addItem = (itemTemplate) => {
+  const addItem = (itemTemplate: any) => {
     onChange({
       storeKeys,
       scopes: ['value', 'internal'],
@@ -42,7 +64,7 @@ export function GenericList({
     });
   };
 
-  const removeItem = (index) => {
+  const removeItem = (index: number) => {
     onChange({
       storeKeys,
       scopes: ['value', 'internal'],
@@ -57,7 +79,6 @@ export function GenericList({
     <ResourceForm.CollapsibleSection
       defaultOpen={defaultOpen}
       tooltipContent={tExt(tooltipContent)}
-      container
       title={tFromStoreKeys(storeKeys, schema)}
       nestingLevel={nestingLevel}
       required={required}
@@ -105,6 +126,7 @@ export function GenericList({
                 parentSchema={schema}
                 storeKeys={ownKeys}
                 level={level + 1}
+                /*@ts-expect-error Type mismatch or probably no longer used*/
                 schemaKeys={schemaKeys?.push('items')}
                 placeholder={tExt(schemaPlaceholder)}
                 nestingLevel={nestingLevel + 1}

src/components/Extensibility/components-form/Jsonata.jsx → src/components/Extensibility/components-form/Jsonata.tsx

@@ -1,19 +1,48 @@
 import { ResourceForm } from 'shared/ResourceForm';
 import {
   getPropsFromSchema,
+  SchemaOnChangeParams,
   useGetTranslation,
 } from 'components/Extensibility/helpers';
-import { Icon, Input } from '@ui5/webcomponents-react';
+import {
+  Icon,
+  Input,
+  InputDomRef,
+  Ui5CustomEvent,
+} from '@ui5/webcomponents-react';
 import { t } from 'i18next';
+import { StoreKeys, StoreSchemaType } from '@ui-schema/ui-schema';
+
+type JsonataInputProps = {
+  value: string;
+  setValue?: (value: string) => void;
+  onChange?: (e: Ui5CustomEvent<InputDomRef>) => void;
+  readOnly?: boolean;
+} & Record<string, any>;
+
+type JsonataProps = {
+  value: string;
+  onChange?: (params: SchemaOnChangeParams) => void;
+  schema: StoreSchemaType;
+  storeKeys: StoreKeys;
+  required?: boolean;
+  compact?: boolean;
+  placeholder?: string;
+};
 
-export function JsonataInput({ value, setValue, onChange, ...props }) {
+export function JsonataInput({
+  value,
+  setValue,
+  onChange,
+  ...props
+}: JsonataInputProps) {
   if (!props.readOnly) delete props.readOnly;
 
   return (
     <Input
       value={value || ''}
       {...props}
-      onInput={onChange ?? ((e) => setValue && setValue(e.target.value))}
+      onInput={onChange ?? ((e) => setValue?.(e.target.value))}
       icon={<Icon accessibleName="Jsonata" name="source-code" />}
     />
   );
@@ -27,14 +56,14 @@ export function Jsonata({
   required,
   compact,
   placeholder,
-}) {
+}: JsonataProps) {
   const { tFromStoreKeys, t: tExt } = useGetTranslation();
   const schemaPlaceholder = schema.get('placeholder');
 
   return (
     <ResourceForm.FormField
       value={value}
-      setValue={(value) => {
+      setValue={(value: string) => {
         if (onChange) {
           onChange({
             storeKeys,

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

@@ -1,6 +1,9 @@
 import { KeyValueField } from 'shared/ResourceForm/fields';
 import { createOrderedMap } from '@ui-schema/ui-schema/Utils/createMap';
-import { useGetTranslation } from 'components/Extensibility/helpers';
+import {
+  SchemaOnChangeParams,
+  useGetTranslation,
+} from 'components/Extensibility/helpers';
 import { useTranslation } from 'react-i18next';
 import {
   getObjectValueWorkaround,
@@ -9,21 +12,37 @@ import {
 import * as Inputs from 'shared/ResourceForm/inputs';
 import { Dropdown } from 'shared/ResourceForm/inputs';
 import './KeyValuePairRenderer.scss';
+import { StoreKeys, StoreSchemaType } from '@ui-schema/ui-schema';
+
+type DropdownCompProps = {
+  onChange: (params: { target: { value: string } }) => void;
+  setValue: (val: string) => void;
+  onBlur: () => void;
+  value: any;
+  [key: string]: any;
+};
 
 const getEnumComponent = (
-  enumValues,
-  isKeyInput = true,
-  input = Inputs.Text,
+  enumValues: any,
+  isKeyInput: boolean = true,
+  input: () => JSX.Element = Inputs.Text,
 ) => {
   if (!Array.isArray(enumValues)) return input;
 
   const options = enumValues.map((opt) => ({ key: opt, text: opt }));
-  const DropdownComp = ({ onChange, setValue, onBlur, value, ...props }) => (
+  const DropdownComp = ({
+    onChange,
+    setValue,
+    onBlur,
+    value,
+    ...props
+  }: DropdownCompProps) => (
+    /*@ts-expect-error Type mismatch between js and ts*/
     <Dropdown
       {...props}
       value={value}
       options={options}
-      setValue={(v) => {
+      setValue={(v: string) => {
         if (isKeyInput) {
           onChange({ target: { value: v } });
         } else {
@@ -37,7 +56,7 @@ const getEnumComponent = (
   return DropdownComp;
 };
 
-const getValueComponent = (valueInfo) => {
+const getValueComponent = (valueInfo: Record<string, any>) => {
   const { type, keyEnum: valuKeyEnum, valueEnum } = valueInfo || {};
 
   switch (type) {
@@ -46,11 +65,17 @@ const getValueComponent = (valueInfo) => {
     case 'string':
       return getEnumComponent(valueEnum, false, Inputs.Text);
     case 'object': {
-      const FieldComp = ({ setValue, value }) => (
+      const FieldComp = ({
+        setValue,
+        value,
+      }: {
+        setValue: (val: any) => void;
+        value: any;
+      }) => (
         <KeyValueField
           className="nested-key-value-pair"
           value={value}
-          setValue={(v) => {
+          setValue={(v: any) => {
             setValue(v);
           }}
           input={{
@@ -66,6 +91,17 @@ const getValueComponent = (valueInfo) => {
   }
 };
 
+type KeyValuePairRendererProps = {
+  storeKeys: StoreKeys;
+  schema: StoreSchemaType;
+  value: any;
+  onChange: (params: SchemaOnChangeParams) => void;
+  required: boolean;
+  resource: any;
+  nestingLevel?: number;
+  editMode?: boolean;
+};
+
 export function KeyValuePairRenderer({
   storeKeys,
   schema,
@@ -75,7 +111,7 @@ export function KeyValuePairRenderer({
   resource,
   nestingLevel = 0,
   editMode,
-}) {
+}: KeyValuePairRendererProps) {
   // TODO the value obtained by ui-schema is undefined for this component
   value = getObjectValueWorkaround(schema, resource, storeKeys, value);
 
@@ -107,7 +143,7 @@ export function KeyValuePairRenderer({
     <KeyValueField
       nestingLevel={nestingLevel}
       value={value}
-      setValue={(value) => {
+      setValue={(value: any) => {
         onChange({
           storeKeys,
           scopes: ['value'],