type fixes for React 18

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx

@@ -29,7 +29,7 @@ import {
   useRouteRefParams,
   useApi,
 } from '@backstage/core-plugin-api';
-import { FormProps, IChangeEvent, withTheme } from '@rjsf/core';
+import { FormProps, IChangeEvent, ISubmitEvent, withTheme } from '@rjsf/core';
 import { Theme as MuiTheme } from '@rjsf/material-ui';
 import React, { ComponentType, useState } from 'react';
 import { transformSchemaToProps } from './schema';
@@ -185,7 +185,7 @@ export const MultistepJsonForm = (props: MultistepJsonFormProps) => {
                   formData={formData}
                   formContext={{ formData }}
                   onChange={onChange}
-                  onSubmit={e => {
+                  onSubmit={(e: ISubmitEvent<any>) => {
                     if (e.errors.length === 0) handleNext();
                   }}
                   {...formProps}

plugins/scaffolder/src/components/TemplateEditorPage/CustomFieldExplorer.tsx

@@ -28,7 +28,7 @@ import {
   Select,
 } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
-import { withTheme } from '@rjsf/core';
+import { ISubmitEvent, withTheme } from '@rjsf/core';
 import { Theme as MuiTheme } from '@rjsf/material-ui';
 import CodeMirror from '@uiw/react-codemirror';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -104,7 +104,7 @@ export const CustomFieldExplorer = ({
   }, [customFieldExtensions]);
 
   const handleSelectionChange = useCallback(
-    selection => {
+    (selection: FieldExtensionOptions) => {
       setSelectedField(selection);
       setFieldFormState({});
       setFormState({});
@@ -113,7 +113,7 @@ export const CustomFieldExplorer = ({
   );
 
   const handleFieldConfigChange = useCallback(
-    state => {
+    (state: {}) => {
       setFieldFormState(state);
       setFormState({});
       // Force TemplateEditorForm to re-render since some fields
@@ -134,7 +134,9 @@ export const CustomFieldExplorer = ({
             value={selectedField}
             label="Choose Custom Field Extension"
             labelId="select-field-label"
-            onChange={e => handleSelectionChange(e.target.value)}
+            onChange={e =>
+              handleSelectionChange(e.target.value as FieldExtensionOptions)
+            }
           >
             {fieldOptions.map((option, idx) => (
               <MenuItem key={idx} value={option as any}>
@@ -158,7 +160,9 @@ export const CustomFieldExplorer = ({
               noHtml5Validate
               formData={fieldFormState}
               formContext={{ fieldFormState }}
-              onSubmit={e => handleFieldConfigChange(e.formData)}
+              onSubmit={(e: ISubmitEvent<any>) =>
+                handleFieldConfigChange(e.formData)
+              }
               schema={selectedField.schema?.uiOptions || {}}
             >
               <Button

plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx

@@ -164,7 +164,8 @@ export const TemplateFormPreviewer = ({
   );
 
   const handleSelectChange = useCallback(
-    selected => {
+    // TODO(Rugvip): Afaik this should be Entity, but didn't want to make runtime changes while fixing types
+    (selected: any) => {
       setSelectedTemplate(selected);
       setTemplateYaml(yaml.stringify(selected.spec));
     },

plugins/scaffolder/src/next/TemplateEditorPage/CustomFieldExplorer.tsx

@@ -102,7 +102,7 @@ export const CustomFieldExplorer = ({
   }, [customFieldExtensions]);
 
   const handleSelectionChange = useCallback(
-    selection => {
+    (selection: NextFieldExtensionOptions) => {
       setSelectedField(selection);
       setFieldFormState({});
     },
@@ -110,7 +110,7 @@ export const CustomFieldExplorer = ({
   );
 
   const handleFieldConfigChange = useCallback(
-    state => {
+    (state: {}) => {
       setFieldFormState(state);
       // Force TemplateEditorForm to re-render since some fields
       // may not be responsive to ui:option changes
@@ -130,7 +130,9 @@ export const CustomFieldExplorer = ({
             value={selectedField}
             label="Choose Custom Field Extension"
             labelId="select-field-label"
-            onChange={e => handleSelectionChange(e.target.value)}
+            onChange={e =>
+              handleSelectionChange(e.target.value as NextFieldExtensionOptions)
+            }
           >
             {fieldOptions.map((option, idx) => (
               <MenuItem key={idx} value={option as any}>

plugins/scaffolder/src/next/TemplateEditorPage/TemplateFormPreviewer.tsx

@@ -161,7 +161,8 @@ export const TemplateFormPreviewer = ({
   );
 
   const handleSelectChange = useCallback(
-    selected => {
+    // TODO(Rugvip): Afaik this should be Entity, but didn't want to make runtime changes while fixing types
+    (selected: any) => {
       setSelectedTemplate(selected);
       setTemplateYaml(yaml.stringify(selected.spec));
     },