Fix various components types

betagouv · Aug 11, 2023 · c30a8ce · c30a8ce
1 parent 2565101
commit c30a8ce
Show file tree

Hide file tree

Showing 13 changed files with 64 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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']);