chore: Enable eslint react/prop-types rule - part 4 (#4638)

* Refactored components

* Refactor

* Refactored BusolaExtensions

* Refactored components

* Refactored components

* Refactor ClusterValidationConfiguration

* Corrected types and added new

* Refactored components

* Corrected and refactored files

* Refactored and corrected components

* Corrected types

* Refactored HelmReleases to tsx

* Type corrections

* Corrections

* Correction

Author: KonradPietocha

…c/components/App/ExtensibilityRoutes.jsx …c/components/App/ExtensibilityRoutes.tsxsrc/components/App/ExtensibilityRoutes.jsx renamed to src/components/App/ExtensibilityRoutes.tsx src/components/App/ExtensibilityRoutes.jsx renamed to src/components/App/ExtensibilityRoutes.tsx

@@ -14,6 +14,8 @@ import { Spinner } from 'shared/components/Spinner/Spinner';
 import { ResourceCreate } from 'shared/components/ResourceCreate/ResourceCreate';
 import { ErrorBoundary } from 'shared/components/ErrorBoundary/ErrorBoundary';
 import { usePrepareLayoutColumns } from 'shared/hooks/usePrepareLayout';
+import { K8sResource } from 'types';
+import FCLLayout from '@ui5/webcomponents-fiori/dist/types/FCLLayout';
 import { lazyWithRetries } from 'shared/helpers/lazyWithRetries';
 
 const List = lazyWithRetries(
@@ -26,7 +28,17 @@ const Create = lazyWithRetries(
   () => import('../Extensibility/ExtensibilityCreate'),
 );
 
-const ColumnWrapper = ({ resourceType, extension, urlPath }) => {
+type ColumnWrapperProps = {
+  resourceType?: string;
+  extension?: Record<string, any>;
+  urlPath?: string;
+};
+
+const ColumnWrapper = ({
+  resourceType,
+  extension,
+  urlPath,
+}: ColumnWrapperProps) => {
   const layoutState = useAtomValue(columnLayoutAtom);
   const { resourceListUrl } = useUrl();
 
@@ -52,6 +64,9 @@ const ColumnWrapper = ({ resourceType, extension, urlPath }) => {
       layoutState?.showEdit?.resource ||
       null,
     rawResourceTypeName: extension?.general?.resource?.kind,
+    isCustomResource: undefined,
+    crName: undefined,
+    isModule: undefined,
   });
 
   const overrides = { resourceType: urlPath };
@@ -62,13 +77,14 @@ const ColumnWrapper = ({ resourceType, extension, urlPath }) => {
       metadata: {
         namespace: layoutState?.midColumn?.namespaceId ?? namespaceId,
       },
-    },
-    urlPath ? overrides : null,
+    } as K8sResource,
+    urlPath ? overrides : undefined,
   );
 
   let startColumnComponent = null;
   if (layoutState.layout === 'OneColumn' && defaultColumn === 'details') {
     startColumnComponent = (
+      /*@ts-expect-error Type mismatch between js and ts*/
       <Details
         resourceName={resourceName}
         namespaceId={namespaceId}
@@ -77,6 +93,7 @@ const ColumnWrapper = ({ resourceType, extension, urlPath }) => {
     );
   } else {
     startColumnComponent = (
+      /*@ts-expect-error Type mismatch between js and ts*/
       <List
         rawResourceType={extension?.general?.resource?.kind}
         layoutCloseCreateUrl={layoutCloseCreateUrl}
@@ -90,12 +107,14 @@ const ColumnWrapper = ({ resourceType, extension, urlPath }) => {
     resourceTypeForTitle: extension?.general?.name,
     apiGroup: extension?.general.resource.group,
     apiVersion: extension?.general.resource.version,
+    resourceCustomType: undefined,
   });
 
   let midColumnComponent = null;
 
   if (layoutState?.showCreate?.resourceType) {
     midColumnComponent = (
+      /*@ts-expect-error Type mismatch between js and ts*/
       <ResourceCreate
         title={elementCreateProps.resourceTitle}
         confirmText={t('common.buttons.create')}
@@ -122,6 +141,7 @@ const ColumnWrapper = ({ resourceType, extension, urlPath }) => {
     !(layoutState?.layout === 'OneColumn' && defaultColumn === 'details')
   ) {
     midColumnComponent = (
+      /*@ts-expect-error Type mismatch between js and ts*/
       <Details
         resourceName={layoutState?.midColumn?.resourceName ?? resourceName}
         namespaceId={layoutState.midColumn?.namespaceId ?? namespaceId}
@@ -134,15 +154,22 @@ const ColumnWrapper = ({ resourceType, extension, urlPath }) => {
     <FlexibleColumnLayout
       style={{ height: '100%' }}
       layout={
-        !midColumnComponent ? 'OneColumn' : layoutState?.layout || 'OneColumn'
+        (!midColumnComponent
+          ? 'OneColumn'
+          : layoutState?.layout || 'OneColumn') as
+          | FCLLayout
+          | keyof typeof FCLLayout
       }
       startColumn={<div className="column-content">{startColumnComponent}</div>}
       midColumn={<div className="column-content">{midColumnComponent}</div>}
     />
   );
 };
 
-export const createExtensibilityRoutes = (extension, language) => {
+export const createExtensibilityRoutes = (
+  extension: Record<string, any>,
+  language: string,
+) => {
   const urlPath =
     extension?.general?.urlPath ||
     pluralize(extension?.general?.resource?.kind?.toLowerCase() || '');

src/components/App/IncorrectPath.jsx src/components/App/IncorrectPath.tsxsrc/components/App/IncorrectPath.jsx renamed to src/components/App/IncorrectPath.tsx

@@ -1,6 +1,6 @@
 import { Button, MessageBox, Text } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
-import { useMatch, useNavigate } from 'react-router';
+import { To, useMatch, useNavigate } from 'react-router';
 import { useAtomValue } from 'jotai';
 import { extensionsAtom } from 'state/navigation/extensionsAtom';
 
@@ -10,7 +10,17 @@ import { useUrl } from 'hooks/useUrl';
 import { Spinner } from 'shared/components/Spinner/Spinner';
 import { useNotification } from 'shared/contexts/NotificationContext';
 
-export function IncorrectPath({ to, title = '', message = '' }) {
+type IncorrectPathProps = {
+  to: To;
+  title?: string;
+  message?: string;
+};
+
+export function IncorrectPath({
+  to,
+  title = '',
+  message = '',
+}: IncorrectPathProps) {
   const { t } = useTranslation();
   const { namespace, namespaceUrl, clusterUrl } = useUrl();
   const notificationManager = useNotification();
@@ -49,8 +59,12 @@ export function IncorrectPath({ to, title = '', message = '' }) {
   const resourceName = namespace ? namespaceResourceName : clusterResourceName;
 
   const { data, loading } = useGetList(
-    (crd) => pluralize(crd.spec.names.kind.toLowerCase()) === resourceType,
-  )(resourceUrl, { skip: !extensions?.length });
+    (crd: { spec: { names: { kind: string } } }) =>
+      pluralize(crd.spec.names.kind.toLowerCase()) === resourceType,
+  )(resourceUrl, { skip: !extensions?.length }) as {
+    data: { spec?: { group?: string } }[] | null;
+    loading?: boolean;
+  };
 
   if (!extensions?.length && extensions?.length !== 0) return null;
 

…solaExtensions/BusolaExtensionCreate.jsx …solaExtensions/BusolaExtensionCreate.tsxsrc/components/BusolaExtensions/BusolaExtensionCreate.jsx renamed to src/components/BusolaExtensions/BusolaExtensionCreate.tsx src/components/BusolaExtensions/BusolaExtensionCreate.jsx renamed to src/components/BusolaExtensions/BusolaExtensionCreate.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { FormEventHandler, RefObject, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAtomValue, useSetAtom } from 'jotai';
 
@@ -15,12 +15,19 @@ import { clusterAtom } from 'state/clusterAtom';
 import { usePrepareLayout } from 'shared/hooks/usePrepareLayout';
 import { columnLayoutAtom } from 'state/columnLayoutAtom';
 import { useNavigate } from 'react-router';
+import { Crd } from 'types';
+
+type BusolaExtensionCreateProps = {
+  formElementRef: RefObject<HTMLFormElement>;
+  onChange: FormEventHandler<HTMLFormElement>;
+  layoutNumber: string;
+};
 
 export default function BusolaExtensionCreate({
   formElementRef,
   onChange,
   layoutNumber,
-}) {
+}: BusolaExtensionCreateProps) {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const notificationManager = useNotification();
@@ -32,8 +39,8 @@ export default function BusolaExtensionCreate({
 
   const { data: crds } = useGetList()(
     '/apis/apiextensions.k8s.io/v1/customresourcedefinitions',
-  );
-  const [crd, setCrd] = useState(null);
+  ) as { data: Crd[] | null; loading: boolean; error: null };
+  const [crd, setCrd] = useState<Crd | null>(null);
   const [state, setState] = useState({});
 
   return (
@@ -46,11 +53,10 @@ export default function BusolaExtensionCreate({
         setResource={setState}
         className="resource-form--unset-height"
         createResource={async () => {
-          const onError = (e) =>
+          const onError = (e: Error) =>
             notificationManager.notifyError({
               content: t('common.messages.error', { error: e.message }),
-              title: t('extensibility.starter-modal.messages.error'),
-              type: 'error',
+              header: t('extensibility.starter-modal.messages.error'),
             });
 
           const onSuccess = () => {
@@ -68,15 +74,15 @@ export default function BusolaExtensionCreate({
                 namespaceId: 'kube-public',
               },
               midColumn: {
-                resourceName: crd?.metadata?.name,
+                resourceName: crd?.metadata?.name ?? null,
                 resourceType: 'Extensions',
                 rawResourceTypeName: 'ConfigMap',
                 namespaceId: 'kube-public',
               },
               endColumn: null,
             });
             navigate(
-              `/cluster/${cluster.contextName}/busolaextensions/kube-public/${crd.metadata.name}${nextQuery}`,
+              `/cluster/${cluster?.contextName}/busolaextensions/kube-public/${crd?.metadata?.name}${nextQuery}`,
             );
           };
 
@@ -94,8 +100,8 @@ export default function BusolaExtensionCreate({
           required
           label={t('extensibility.starter-modal.crd')}
           value={crd?.metadata.name}
-          setValue={(value) => {
-            const crd = crds.find((crd) => crd.metadata.name === value);
+          setValue={(value: string) => {
+            const crd = crds?.find((crd) => crd.metadata.name === value);
             if (crd) {
               setCrd(crd);
               setState(createExtensibilityTemplate(crd, t));

…olaExtensions/BusolaExtensionDetails.jsx …olaExtensions/BusolaExtensionDetails.tsxsrc/components/BusolaExtensions/BusolaExtensionDetails.jsx renamed to src/components/BusolaExtensions/BusolaExtensionDetails.tsx src/components/BusolaExtensions/BusolaExtensionDetails.jsx renamed to src/components/BusolaExtensions/BusolaExtensionDetails.tsx

@@ -1,3 +1,4 @@
+import { ComponentProps } from 'react';
 import { ExternalLink } from 'shared/components/ExternalLink/ExternalLink';
 import { Trans, useTranslation } from 'react-i18next';
 import { createPatch } from 'rfc6902';
@@ -32,22 +33,33 @@ import { EXTENSION_VERSION_LABEL } from './constants';
 import { UI5Panel } from 'shared/components/UI5Panel/UI5Panel';
 import { configFeaturesNames } from 'state/types';
 
-export function BusolaExtensionDetails({ name, namespace }) {
+type BusolaExtensionDetailsProps = {
+  name: string;
+  namespace: string;
+};
+
+export function BusolaExtensionDetails({
+  name,
+  namespace,
+}: BusolaExtensionDetailsProps) {
   const { t } = useTranslation();
   const extensibilitySchemas = useAtomValue(extensibilitySchemasAtom);
 
   const { clusterUrl } = useUrl();
 
   const resourceUrl = `/api/v1/namespaces/${namespace}/configmaps/${name}`;
 
-  const updateResourceMutation = useUpdate(resourceUrl);
+  const updateResourceMutation = useUpdate();
   const notification = useNotification();
 
   if (!name || !namespace) {
     return null;
   }
 
-  const updateBusolaExtension = async (newBusolaExtension, configmap) => {
+  const updateBusolaExtension = async (
+    newBusolaExtension: Record<string, any>,
+    configmap: Record<string, any>,
+  ) => {
     try {
       const diff = createPatch(configmap, newBusolaExtension);
       await updateResourceMutation(resourceUrl, diff);
@@ -61,14 +73,14 @@ export function BusolaExtensionDetails({ name, namespace }) {
       notification.notifyError({
         content: t('components.resource-details.messages.failure', {
           resourceType: 'BusolaExtension',
-          error: e.message,
+          error: (e as Error)?.message,
         }),
       });
       throw e;
     }
   };
 
-  const BusolaExtensionEditor = (resource) => {
+  const BusolaExtensionEditor = (resource: Record<string, any>) => {
     const { data } = resource;
     return SECTIONS.map((key) => (
       <ReadonlyEditorPanel
@@ -92,20 +104,21 @@ export function BusolaExtensionDetails({ name, namespace }) {
             id="edit-resource-modal"
             key="edit-resource-modal"
             className="modal-size--l"
-            renderForm={(props) => (
+            renderForm={(
+              props: Partial<ComponentProps<typeof SectionEditor>>,
+            ) => (
               <ErrorBoundary>
                 <SectionEditor
                   {...props}
                   onlyYaml={
                     // onlyYaml view for form & details due to heavy performance issues
-                    !extensibilitySchemas[key] ||
+                    !extensibilitySchemas?.[key] ||
                     key === 'form' ||
                     key === 'details'
                   }
                   data={data[key]}
-                  schema={extensibilitySchemas[key]}
-                  resource={data}
-                  onSubmit={(newData) => {
+                  schema={extensibilitySchemas?.[key]}
+                  onSubmit={(newData: string) => {
                     const newResource = {
                       ...resource,
                       data: {
@@ -124,7 +137,9 @@ export function BusolaExtensionDetails({ name, namespace }) {
     ));
   };
 
-  const ExtensibilityVersion = (configmap) => {
+  const ExtensibilityVersion = (configmap: {
+    metadata?: { labels?: Record<string, string> };
+  }) => {
     const { t } = useTranslation();
     const { isEnabled: isExtensibilityEnabled } = useFeature(
       configFeaturesNames.EXTENSIBILITY,
@@ -136,7 +151,7 @@ export function BusolaExtensionDetails({ name, namespace }) {
     if (!(isExtensibilityEnabled && hasExtensibilityLabel)) return null;
 
     const currentVersion = formatCurrentVersion(
-      configmap?.metadata.labels?.[EXTENSION_VERSION_LABEL],
+      configmap?.metadata?.labels?.[EXTENSION_VERSION_LABEL],
     );
 
     const hasMigrationFunction = getMigrationFunctions().some(
@@ -191,23 +206,18 @@ export function BusolaExtensionDetails({ name, namespace }) {
         key={'extensibility-version'}
         accessibleName={t('extensibility.accessible-name.version-panel')}
         headerActions={
-          hasMigrationFunction && (
-            <>
-              {currentVersion && (
-                <>
-                  <Button
-                    disabled={currentVersion === getLatestVersion()}
-                    endIcon="forward"
-                    onClick={() => {
-                      const newBusolaExtension = migrateToLatest(configmap);
-                      updateBusolaExtension(newBusolaExtension, configmap);
-                    }}
-                  >
-                    {t('config-maps.buttons.migrate')}
-                  </Button>
-                </>
-              )}
-            </>
+          hasMigrationFunction &&
+          currentVersion && (
+            <Button
+              disabled={currentVersion === getLatestVersion()}
+              endIcon="forward"
+              onClick={() => {
+                const newBusolaExtension = migrateToLatest(configmap);
+                updateBusolaExtension(newBusolaExtension, configmap);
+              }}
+            >
+              {t('config-maps.buttons.migrate')}
+            </Button>
           )
         }
       >
@@ -227,9 +237,13 @@ export function BusolaExtensionDetails({ name, namespace }) {
   const customColumns = [
     {
       header: t('common.headers.owner'),
-      value: (secret) => (
-        <ControlledBy ownerReferences={secret.metadata.ownerReferences} />
-      ),
+      value: (secret: {
+        metadata: {
+          ownerReferences?:
+            | { kind?: string; name?: string }[]
+            | { kind?: string; name?: string };
+        };
+      }) => <ControlledBy ownerReferences={secret.metadata.ownerReferences} />,
     },
   ];