chore: Enable eslint react/prop-types rule - part 2 (kyma-project#4534)

* Chnage components to tsx

* Change another components

* Corrected types

* Corrected types

* Fix error detected by the test

* Types correction

* Correction

* Corrected types

Author: KonradPietocha

src/components/App/App.tsx

@@ -149,7 +149,6 @@ export default function App() {
               manualKubeConfigId.formOpen &&
               createPortal(
                 <Dialog open={true}>
-                  {/*@ts-expect-error Type mismatch between js and ts*/}
                   <ResourceForm.Single
                     formElementRef={authFormRef}
                     createResource={updateManualKubeConfigIdState}
@@ -164,7 +163,6 @@ export default function App() {
                         {t('clusters.add.title')}
                       </Button>
                     </div>
-                    {/*@ts-expect-error Type mismatch between js and ts*/}
                   </ResourceForm.Single>
                 </Dialog>,
                 document.body,

src/resources/RoleBindings/RoleForm.tsx

@@ -30,7 +30,6 @@ export const RoleForm = ({
   if (error) return error.message;
 
   const roleTypeDropdown = (
-    /*@ts-expect-error Type mismatch between js and ts*/
     <ResourceForm.FormField
       required
       label={t('role-bindings.create-modal.role-type')}
@@ -68,7 +67,6 @@ export const RoleForm = ({
   };
 
   const roleNameInput = (
-    /*@ts-expect-error Type mismatch between js and ts*/
     <ResourceForm.FormField
       required
       label={t('role-bindings.create-modal.role')}
@@ -102,7 +100,6 @@ export const RoleForm = ({
   );
 
   return (
-    /*@ts-expect-error Type mismatch between js and ts*/
     <ResourceFormWrapper resource={binding} setResource={setBinding}>
       {roleTypeDropdown}
       {roleNameInput}

src/resources/ServiceAccounts/TokenRequestModal/TokenRequestModal.tsx

@@ -121,12 +121,10 @@ export function TokenRequestModal({
         />
       }
     >
-      {/*@ts-expect-error Type mismatch between js and ts*/}
       <ResourceForm.Single
         resource={tokenRequest}
         setResource={setTokenRequest}
       >
-        {/*@ts-expect-error Type mismatch between js and ts*/}
         <ResourceForm.FormField
           required
           propertyPath="$.spec.expirationSeconds"
@@ -181,7 +179,6 @@ export function TokenRequestModal({
             language="yaml"
           />
         </div>
-        {/*@ts-expect-error Type mismatch between js and ts*/}
       </ResourceForm.Single>
     </Dialog>
   );

…ceForm/components/CollapsibleSection.jsx …ceForm/components/CollapsibleSection.tsxsrc/shared/ResourceForm/components/CollapsibleSection.jsx renamed to src/shared/ResourceForm/components/CollapsibleSection.tsx src/shared/ResourceForm/components/CollapsibleSection.jsx renamed to src/shared/ResourceForm/components/CollapsibleSection.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { ResourceFormWrapper } from './Wrapper';
 import { Panel } from '@ui5/webcomponents-react';
@@ -7,6 +7,25 @@ import './CollapsibleSection.scss';
 import { Toolbar } from '@ui5/webcomponents-react-compat/dist/components/Toolbar/index.js';
 import { ToolbarSpacer } from '@ui5/webcomponents-react-compat/dist/components/ToolbarSpacer/index.js';
 
+export type CollapsibleSectionProps = {
+  disabled?: boolean;
+  defaultOpen?: boolean;
+  canChangeState?: boolean;
+  title: string | JSX.Element;
+  defaultTitleType?: boolean;
+  actions?:
+    | React.ReactNode[]
+    | JSX.Element
+    | ((setOpen: Dispatch<SetStateAction<boolean | undefined>>) => JSX.Element);
+  children: React.ReactNode;
+  resource?: Record<string, any> | string;
+  setResource?: (resource: Record<string, any> | string) => void;
+  className?: string;
+  required?: boolean;
+  tooltipContent?: React.ReactNode;
+  nestingLevel?: number;
+};
+
 export function CollapsibleSection({
   disabled = undefined,
   defaultOpen,
@@ -21,9 +40,9 @@ export function CollapsibleSection({
   required = undefined,
   tooltipContent = undefined,
   nestingLevel = 0,
-}) {
+}: CollapsibleSectionProps) {
   const [open, setOpen] = useState(defaultOpen);
-  const actionsRef = useRef();
+  const actionsRef = useRef<HTMLDivElement>(null);
   required = required === true;
 
   useEffect(() => {
@@ -38,11 +57,12 @@ export function CollapsibleSection({
     }
   }, [defaultOpen]);
 
-  const toggle = (e) => {
-    e.stopPropagation();
-    if (!canChangeState) return;
-    if (disabled) return;
-    if (!actionsRef.current?.contains(e.target)) setOpen(!open);
+  const toggle = (e?: CustomEvent) => {
+    e?.stopPropagation();
+    if (!canChangeState || disabled) return;
+    if (!actionsRef.current?.contains(e?.target as Node)) {
+      setOpen(!open);
+    }
   };
 
   const classNames = classnames(
@@ -71,7 +91,7 @@ export function CollapsibleSection({
       onToggle={toggle}
       data-testid={titleText?.toLowerCase().replaceAll(' ', '-')}
       accessibleName={titleText}
-      ref={(panelElement) => {
+      ref={(panelElement: any) => {
         if (panelElement) {
           panelElement.useAccessibleNameForToggleButton = true;
         }

…ed/ResourceForm/components/FormField.jsx …ed/ResourceForm/components/FormField.tsxsrc/shared/ResourceForm/components/FormField.jsx renamed to src/shared/ResourceForm/components/FormField.tsx src/shared/ResourceForm/components/FormField.jsx renamed to src/shared/ResourceForm/components/FormField.tsx

@@ -4,10 +4,24 @@ import { Label } from './Label';
 import { HintButton } from 'shared/components/HintButton/HintButton';
 
 import { useCreateResourceDescription } from 'components/Extensibility/helpers';
-import { useState } from 'react';
+import { JSXElementConstructor, ReactElement, useState } from 'react';
 
 import './FormField.scss';
 
+export type FormFieldProps = {
+  label?: string;
+  input: (props: any) => JSX.Element;
+  className?: string;
+  required?: boolean;
+  disabled?: boolean;
+  tooltipContent?: React.ReactNode | string;
+  isListItem?: boolean;
+  messageStrip?: JSX.Element;
+  inputInfo?: string | ReactElement<any, string | JSXElementConstructor<any>>;
+  updatesOnInput?: boolean;
+  style?: React.CSSProperties;
+} & Record<string, any>;
+
 export function FormField({
   label,
   input,
@@ -21,8 +35,7 @@ export function FormField({
   updatesOnInput,
   style,
   ...props
-}) {
-  const { ...inputProps } = props;
+}: FormFieldProps) {
   const inputInfoLink = useCreateResourceDescription(inputInfo);
   const [openPopover, setOpenPopover] = useState(false);
 
@@ -63,17 +76,16 @@ export function FormField({
         alignItems="Center"
         className="full-width"
       >
-        {messageStrip
-          ? messageStrip
-          : input({
-              updatesOnInput,
-              required,
-              disabled,
-              className: 'full-width',
-              accessibleName: label,
-              id: label.replace(' ', '-').toLowerCase(),
-              ...inputProps,
-            })}
+        {messageStrip ||
+          input({
+            updatesOnInput,
+            required,
+            disabled,
+            className: 'full-width',
+            accessibleName: label,
+            id: label?.replace(' ', '-').toLowerCase(),
+            ...props,
+          })}
         {inputInfo && (
           <Label wrappingType="Normal" style={{ marginTop: '5px' }}>
             {inputInfoLink}

src/shared/ResourceForm/components/Label.tsx

@@ -1,7 +1,7 @@
 import { Label as UI5Label } from '@ui5/webcomponents-react';
 import WrappingType from '@ui5/webcomponents/dist/types/WrappingType';
 
-type LabelProps = {
+export type LabelProps = {
   required?: boolean;
   forElement?: string;
   children: React.ReactNode;

…ResourceForm/components/ModeSelector.jsx …ResourceForm/components/ModeSelector.tsxsrc/shared/ResourceForm/components/ModeSelector.jsx renamed to src/shared/ResourceForm/components/ModeSelector.tsx src/shared/ResourceForm/components/ModeSelector.jsx renamed to src/shared/ResourceForm/components/ModeSelector.tsx

@@ -3,10 +3,21 @@ import { SegmentedButton, SegmentedButtonItem } from '@ui5/webcomponents-react';
 import { useAtom } from 'jotai';
 import {
   editViewModeAtom,
+  EditViewTypes,
   getEditViewModeState,
 } from 'state/settings/editViewModeAtom';
 
-export function ModeSelector({ mode, setMode, isDisabled = false }) {
+type ModeSelectorProps = {
+  mode: string;
+  setMode: (mode: string) => void;
+  isDisabled?: boolean;
+};
+
+export function ModeSelector({
+  mode,
+  setMode,
+  isDisabled = false,
+}: ModeSelectorProps) {
   const { t } = useTranslation();
   const [editViewMode, setEditViewMode] = useAtom(editViewModeAtom);
   const { preferencesViewType } = getEditViewModeState(editViewMode);
@@ -27,8 +38,10 @@ export function ModeSelector({ mode, setMode, isDisabled = false }) {
       <SegmentedButton
         className="mode-selector__content"
         onSelectionChange={(event) => {
-          const mode = event.detail.selectedItems[0].getAttribute('data-mode');
-          setMode(mode);
+          const mode = event.detail.selectedItems[0].getAttribute(
+            'data-mode',
+          ) as EditViewTypes['dynamicViewType'];
+          setMode(mode as string);
           if (preferencesViewType === 'MODE_DEFAULT') {
             setEditViewMode({
               preferencesViewType: preferencesViewType,

src/shared/ResourceForm/components/Presets.tsx

@@ -3,8 +3,12 @@ import { useTranslation } from 'react-i18next';
 import { Dropdown } from 'shared/components/Dropdown/Dropdown';
 import './Presets.scss';
 
-type PresetProps = {
-  presets: { name: string; data: Record<string, any> }[];
+export type PresetProps = {
+  presets: {
+    name: string;
+    data?: Record<string, any>;
+    value?: Record<string, any>;
+  }[];
   onSelect: (preset?: any) => void;
   inlinePresets?: boolean;
   disabled?: boolean;

src/shared/ResourceForm/components/ResourceForm.tsx

@@ -14,8 +14,13 @@ import EditorWrapper from 'shared/ResourceForm/fields/Editor';
 import { useTranslation } from 'react-i18next';
 
 import { ModeSelector } from './ModeSelector';
-import { ResourceFormWrapper } from './Wrapper';
-import { Presets } from './Presets';
+import { ResourceFormWrapper, ResourceFormWrapperProps } from './Wrapper';
+import { PresetProps, Presets } from './Presets';
+import { SingleFormProps } from './Single';
+import { CollapsibleSectionProps } from './CollapsibleSection';
+import { LabelProps } from './Label';
+import { FormFieldProps } from './FormField';
+import { TitleProps } from './Title';
 import { useCreateResource } from '../useCreateResource';
 import { K8sNameField, KeyValueField } from '../fields';
 import jp from 'jsonpath';
@@ -83,7 +88,17 @@ type ResourceFormProps = {
   formWithoutPanel?: boolean;
 };
 
-export function ResourceForm({
+type ResourceFormType = FunctionComponent<ResourceFormProps> & {
+  Single: FunctionComponent<SingleFormProps>;
+  Wrapper: FunctionComponent<ResourceFormWrapperProps>;
+  CollapsibleSection: FunctionComponent<CollapsibleSectionProps>;
+  Label: FunctionComponent<LabelProps>;
+  FormField: FunctionComponent<FormFieldProps>;
+  Title: FunctionComponent<TitleProps>;
+  Presets: FunctionComponent<PresetProps>;
+};
+
+export const ResourceForm: ResourceFormType = (({
   pluralKind, // used for the request path
   singularName,
   resource,
@@ -122,7 +137,7 @@ export function ResourceForm({
   title,
   resetLayout,
   formWithoutPanel,
-}: ResourceFormProps) {
+}) => {
   const layoutState = useAtomValue(columnLayoutAtom);
 
   const isEdit = useMemo(
@@ -411,4 +426,4 @@ export function ResourceForm({
       )}
     </section>
   );
-}
+}) as ResourceFormType;

…hared/ResourceForm/components/Single.jsx …hared/ResourceForm/components/Single.tsxsrc/shared/ResourceForm/components/Single.jsx renamed to src/shared/ResourceForm/components/Single.tsx src/shared/ResourceForm/components/Single.jsx renamed to src/shared/ResourceForm/components/Single.tsx

@@ -6,6 +6,17 @@ import { createPortal } from 'react-dom';
 import { UnsavedMessageBox } from 'shared/components/UnsavedMessageBox/UnsavedMessageBox';
 import { useFormEditTracking } from 'shared/hooks/useFormEditTracking';
 
+export type SingleFormProps = {
+  formElementRef?: React.RefObject<HTMLFormElement>;
+  createResource?: (e: React.FormEvent<HTMLFormElement>) => void;
+  children: React.ReactNode;
+  resource?: Record<string, any>;
+  setResource?: (resource: any) => void;
+  className?: string;
+  setCustomValid?: (isValid: boolean) => void;
+  initialResource?: Record<string, any>;
+} & Record<string, any>;
+
 export function SingleForm({
   formElementRef,
   createResource,
@@ -16,7 +27,7 @@ export function SingleForm({
   setCustomValid,
   initialResource,
   ...props
-}) {
+}: SingleFormProps) {
   const validationRef = useRef(true);
 
   useEffect(() => {