From c30a8ce185ee4a9542f39ef23250300215339d13 Mon Sep 17 00:00:00 2001
From: Pierre-Eric Garcia <garciapierreeric@gmil.com>
Date: Fri, 11 Aug 2023 11:40:40 +0200
Subject: [PATCH] Fix various components types

---
 .../atoms/inputs/FieldsetWrapper.tsx          |  2 +-
 .../src/components/atoms/inputs/Input.tsx     |  2 +-
 .../src/components/atoms/inputs/Label.tsx     |  2 +-
 .../components/molecules/ListHeader/index.tsx |  2 +-
 .../molecules/TablePagination/index.tsx       |  2 +-
 .../src/components/organisms/AuthContext.tsx  | 10 ++++---
 .../InstructorEnrollmentListFilters/index.tsx | 21 ++++++++-------
 .../templates/Form/HideSectionsContainer.tsx  |  4 ++-
 .../hooks/use-form-submission.test.tsx        |  4 ++-
 .../hooks/use-form-submission.ts              | 11 +++++---
 .../templates/Form/SubmissionPanel/index.tsx  | 26 +++++++++++++------
 .../templates/hooks/use-full-data-provider.ts |  9 +++++--
 frontend/src/services/enrollments.test.ts     |  3 ++-
 13 files changed, 64 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/atoms/inputs/FieldsetWrapper.tsx b/frontend/src/components/atoms/inputs/FieldsetWrapper.tsx
index f20c5edbe..b836fb009 100644
--- a/frontend/src/components/atoms/inputs/FieldsetWrapper.tsx
+++ b/frontend/src/components/atoms/inputs/FieldsetWrapper.tsx
@@ -1,7 +1,7 @@
 import './FieldsetWrapper.css';
 
 type FieldsetWrapperProps = {
-  title?: string;
+  title?: string | React.ReactNode;
   required?: boolean;
   grid?: boolean;
   inline?: boolean;
diff --git a/frontend/src/components/atoms/inputs/Input.tsx b/frontend/src/components/atoms/inputs/Input.tsx
index d2ece0158..ca9cd552f 100644
--- a/frontend/src/components/atoms/inputs/Input.tsx
+++ b/frontend/src/components/atoms/inputs/Input.tsx
@@ -5,7 +5,7 @@ import Label from './Label';
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   label?: string;
   helper?: string;
-  meta?: string;
+  meta?: string | React.ReactNode;
   ariaLabel?: string;
 }
 
diff --git a/frontend/src/components/atoms/inputs/Label.tsx b/frontend/src/components/atoms/inputs/Label.tsx
index 7bde4ba83..9614024c6 100644
--- a/frontend/src/components/atoms/inputs/Label.tsx
+++ b/frontend/src/components/atoms/inputs/Label.tsx
@@ -6,7 +6,7 @@ type Props = {
   label: ReactNode;
   required?: boolean;
   helper?: string;
-  meta?: string;
+  meta?: string | React.ReactNode;
 };
 
 export const Label: FunctionComponent<Props> = ({
diff --git a/frontend/src/components/molecules/ListHeader/index.tsx b/frontend/src/components/molecules/ListHeader/index.tsx
index 709d3f930..d70c84b5d 100644
--- a/frontend/src/components/molecules/ListHeader/index.tsx
+++ b/frontend/src/components/molecules/ListHeader/index.tsx
@@ -3,7 +3,7 @@ import './style.css';
 
 type Props = {
   title: string;
-  children: React.ReactNode;
+  children?: React.ReactNode;
 };
 
 export const ListHeader: React.FC<Props> = ({ title, children = null }) => {
diff --git a/frontend/src/components/molecules/TablePagination/index.tsx b/frontend/src/components/molecules/TablePagination/index.tsx
index b56f33ad8..118b8506f 100644
--- a/frontend/src/components/molecules/TablePagination/index.tsx
+++ b/frontend/src/components/molecules/TablePagination/index.tsx
@@ -3,7 +3,7 @@ import NumberInput from '../../atoms/inputs/NumberInput';
 import './style.css';
 import { Table } from '@tanstack/react-table';
 
-const TablePagination = ({ table }: { table: Table<any> }) => {
+const TablePagination = ({ table }: { table: Table<unknown> }) => {
   return (
     <div className="table-pagination-container page-container">
       <Button
diff --git a/frontend/src/components/organisms/AuthContext.tsx b/frontend/src/components/organisms/AuthContext.tsx
index e8942e86a..6fe9908c4 100644
--- a/frontend/src/components/organisms/AuthContext.tsx
+++ b/frontend/src/components/organisms/AuthContext.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 import httpClient from '../../lib/http-client';
 import { getErrorMessages } from '../../lib';
 import { Login } from '../templates/Login';
@@ -64,7 +64,7 @@ export const useAuth = () => {
  */
 export let resetAuthContext = (): void => {};
 
-export class AuthStore extends React.Component {
+export class AuthStore extends React.Component<{ children: React.ReactNode }> {
   _isMounted: boolean;
   state: {
     user: any;
@@ -147,7 +147,11 @@ export class AuthStore extends React.Component {
   }
 }
 
-export const AuthRequired: FunctionComponent = ({ children }) => {
+type AuthRequiredProps = {
+  children: React.ReactNode;
+};
+
+export const AuthRequired: React.FC<AuthRequiredProps> = ({ children }) => {
   const { user } = useAuth();
 
   if (!user) {
diff --git a/frontend/src/components/organisms/InstructorEnrollmentListFilters/index.tsx b/frontend/src/components/organisms/InstructorEnrollmentListFilters/index.tsx
index 9ee0b9a05..a0362cb88 100644
--- a/frontend/src/components/organisms/InstructorEnrollmentListFilters/index.tsx
+++ b/frontend/src/components/organisms/InstructorEnrollmentListFilters/index.tsx
@@ -50,16 +50,19 @@ const InstructorEnrollmentListFilters = ({
         <Label id="target_api" label="Filtrer par API" />
         <MultiSelect
           id="target_api"
-          options={user?.roles
-            .filter((role) => role.endsWith(':reporter'))
-            .map((role) => {
-              const targetApiKey = role.split(':')[0];
+          options={
+            user?.roles
+              .filter((role) => role.endsWith(':reporter'))
+              .map((role) => {
+                const targetApiKey = role.split(':')[0];
 
-              return {
-                key: targetApiKey,
-                label: dataProviderConfigurations?.[targetApiKey].label,
-              };
-            })}
+                return {
+                  key: targetApiKey,
+                  label: dataProviderConfigurations?.[targetApiKey]
+                    .label as string,
+                };
+              }) || []
+          }
           values={
             filters.find(({ id }: { id: string }) => id === 'target_api')?.value
           }
diff --git a/frontend/src/components/templates/Form/HideSectionsContainer.tsx b/frontend/src/components/templates/Form/HideSectionsContainer.tsx
index a737aee75..8b42572e2 100644
--- a/frontend/src/components/templates/Form/HideSectionsContainer.tsx
+++ b/frontend/src/components/templates/Form/HideSectionsContainer.tsx
@@ -19,7 +19,9 @@ export const HideSectionsContext = createContext<HideSectionsContextType>({
   setLastIndexToShow: () => null,
 });
 
-export const HideSectionsContainer: FunctionComponent = ({ children }) => {
+export const HideSectionsContainer: FunctionComponent<{
+  children: React.ReactNode | React.ReactNode[];
+}> = ({ children }) => {
   const [showOnlyFirstStep, setShowOnlyFirstStep] = useState(false);
   const [isShowNextStepButtonDisabled, setIsShowNextStepButtonDisabled] =
     useState(false);
diff --git a/frontend/src/components/templates/Form/SubmissionPanel/hooks/use-form-submission.test.tsx b/frontend/src/components/templates/Form/SubmissionPanel/hooks/use-form-submission.test.tsx
index 2a3756cb0..5f772f1d5 100644
--- a/frontend/src/components/templates/Form/SubmissionPanel/hooks/use-form-submission.test.tsx
+++ b/frontend/src/components/templates/Form/SubmissionPanel/hooks/use-form-submission.test.tsx
@@ -14,7 +14,9 @@ describe('The form submission hook', () => {
   const updateEnrollment = jest.fn();
   const processEvent = jest.fn();
 
-  const wrapper: FunctionComponent = ({ children }) => (
+  const wrapper: FunctionComponent<{ children: React.ReactNode }> = ({
+    children,
+  }) => (
     <OpenMessagePromptContext.Provider
       value={{
         onClick: jest.fn(),
diff --git a/frontend/src/components/templates/Form/SubmissionPanel/hooks/use-form-submission.ts b/frontend/src/components/templates/Form/SubmissionPanel/hooks/use-form-submission.ts
index 5a0dc2832..7c69a46c9 100644
--- a/frontend/src/components/templates/Form/SubmissionPanel/hooks/use-form-submission.ts
+++ b/frontend/src/components/templates/Form/SubmissionPanel/hooks/use-form-submission.ts
@@ -1,6 +1,7 @@
 import { useCallback, useContext, useEffect, useState } from 'react';
 import {
   EnrollmentEvent,
+  EventConfiguration,
   eventConfigurations,
   PromptType,
 } from '../../../../../config/event-configuration';
@@ -22,7 +23,9 @@ export const useFormSubmission = (
     async (event: EnrollmentEvent) => {
       setPendingEvent(event);
 
-      const eventConfiguration = eventConfigurations[event];
+      const eventConfiguration = eventConfigurations[
+        event
+      ] as EventConfiguration;
       if (!eventConfiguration.prompt) {
         setLoading(true);
         setPendingEvent(undefined);
@@ -62,20 +65,20 @@ export const useFormSubmission = (
 
   const eventToProcess =
     pendingEvent &&
-    eventConfigurations[pendingEvent].prompt === PromptType.submit_instead
+    eventConfigurations[pendingEvent]?.prompt === PromptType.submit_instead
       ? EnrollmentEvent.submit
       : pendingEvent;
 
   const onPromptConfirmation = pendingEvent
     ? onPromptConfirmationFactory(
-        eventConfigurations[pendingEvent].prompt === PromptType.submit_instead
+        eventConfigurations[pendingEvent]?.prompt === PromptType.submit_instead
           ? EnrollmentEvent.submit
           : eventToProcess!
       )
     : () => null;
 
   const onPromptCancellation = pendingEvent
-    ? eventConfigurations[pendingEvent].prompt === PromptType.submit_instead
+    ? eventConfigurations[pendingEvent]?.prompt === PromptType.submit_instead
       ? onPromptConfirmationFactory(pendingEvent)
       : () => {
           setPendingEvent(undefined);
diff --git a/frontend/src/components/templates/Form/SubmissionPanel/index.tsx b/frontend/src/components/templates/Form/SubmissionPanel/index.tsx
index 789b48d42..9ae4570ac 100644
--- a/frontend/src/components/templates/Form/SubmissionPanel/index.tsx
+++ b/frontend/src/components/templates/Form/SubmissionPanel/index.tsx
@@ -1,5 +1,6 @@
-import { FunctionComponent, useState } from 'react';
+import { FunctionComponent, MouseEventHandler, useState } from 'react';
 import {
+  EventConfiguration,
   eventConfigurations,
   PromptType,
 } from '../../../../config/event-configuration';
@@ -51,19 +52,26 @@ const SubmissionPanel: FunctionComponent<Props> = ({
       {loading && <Loader enableBePatientMessage />}
 
       {pendingEvent &&
-        eventConfigurations[pendingEvent].prompt === PromptType.comment && (
+        eventConfigurations[pendingEvent] &&
+        eventConfigurations[pendingEvent]?.prompt === PromptType.comment && (
           <Prompt
             inputValue={promptInputValue}
             setInputValue={setPromptInputValue}
             onAccept={onPromptConfirmation}
-            onCancel={onPromptCancellation}
-            displayProps={eventConfigurations[pendingEvent!].displayProps}
-            selectedEvent={pendingEvent as string}
+            onCancel={
+              onPromptCancellation as MouseEventHandler<HTMLButtonElement>
+            }
+            displayProps={
+              eventConfigurations[pendingEvent!]
+                ?.displayProps as EventConfiguration['displayProps']
+            }
+            selectedEvent={pendingEvent}
             enrollment={enrollment}
           />
         )}
       {pendingEvent &&
-        eventConfigurations[pendingEvent].prompt ===
+        eventConfigurations[pendingEvent] &&
+        eventConfigurations[pendingEvent]?.prompt ===
           PromptType.submit_instead && (
           <ConfirmationModal
             title="Vos modifications vont être enregistrées."
@@ -79,7 +87,8 @@ const SubmissionPanel: FunctionComponent<Props> = ({
           </ConfirmationModal>
         )}
       {pendingEvent &&
-        eventConfigurations[pendingEvent].prompt ===
+        eventConfigurations[pendingEvent] &&
+        eventConfigurations[pendingEvent]?.prompt ===
           PromptType.confirm_deletion && (
           <ConfirmationModal
             title="La suppression d'une habilitation est irréversible"
@@ -90,7 +99,8 @@ const SubmissionPanel: FunctionComponent<Props> = ({
           </ConfirmationModal>
         )}
       {pendingEvent &&
-        eventConfigurations[pendingEvent].prompt ===
+        eventConfigurations[pendingEvent] &&
+        eventConfigurations[pendingEvent]?.prompt ===
           PromptType.confirm_archive && (
           <ConfirmationModal
             title="Vous n’aurez plus accès à cette habilitation"
diff --git a/frontend/src/components/templates/hooks/use-full-data-provider.ts b/frontend/src/components/templates/hooks/use-full-data-provider.ts
index d84e2e9c5..9bcade59f 100644
--- a/frontend/src/components/templates/hooks/use-full-data-provider.ts
+++ b/frontend/src/components/templates/hooks/use-full-data-provider.ts
@@ -1,16 +1,21 @@
 import {
   DATA_PROVIDER_CONFIGURATIONS,
   FullDataProviderConfiguration,
+  TargetAPI,
 } from '../../../config/data-provider-configurations';
 import { useEffect, useState } from 'react';
 import { getCachedDataProviderConfiguration } from '../../../services/data-provider-configurations';
 import { AxiosError } from 'axios';
 
-function getLocalConfiguration(targetApi: string) {
+function getLocalConfiguration(targetApi: TargetAPI) {
   return DATA_PROVIDER_CONFIGURATIONS[targetApi];
 }
 
-export const useFullDataProvider = ({ targetApi }: { targetApi: string }) => {
+export const useFullDataProvider = ({
+  targetApi,
+}: {
+  targetApi: TargetAPI;
+}) => {
   const [notFound, setNotFound] = useState<boolean>(false);
   const [configuration, setConfiguration] =
     useState<FullDataProviderConfiguration | null>(null);
diff --git a/frontend/src/services/enrollments.test.ts b/frontend/src/services/enrollments.test.ts
index 874b3175a..72da5be3b 100644
--- a/frontend/src/services/enrollments.test.ts
+++ b/frontend/src/services/enrollments.test.ts
@@ -60,7 +60,8 @@ describe('getUserEnrollment', () => {
 describe('serializeEnrollment', () => {
   describe('When there is a response', () => {
     it('should return a 200 status', () => {
-      const enrollment: Enrollment = FIRST_ENROLLMENT_1.enrollment;
+      const enrollment: Enrollment =
+        FIRST_ENROLLMENT_1.enrollment as Enrollment;
 
       const formData = serializeEnrollment(enrollment);
       expect(formData.getAll('enrollment[status]')).toEqual(['draft']);