Merge pull request #9797 from marmelab/fix-strict-null-checks-mui

[TypeScript] Fix remaining strictNullCheck errors in ra-ui-materialui
marmelab · May 2, 2024 · ab27b44 · ab27b44
2 parents 496a5d4 + 0aa0e95
commit ab27b44
Show file tree

Hide file tree

Showing 45 changed files with 280 additions and 352 deletions.
diff --git a/docs/Upgrade.md b/docs/Upgrade.md
@@ -924,6 +924,10 @@ The `<InputHelperText>` component no longer accepts a `touched` prop. This prop
 
 If you were using this prop, you can safely remove it.
 
+## TypeScript: `BulkActionProps` Type Has Been Removed
+
+The `BulkActionProps` has been removed as it did not contain any prop. You can safely remove it from your custom bulk actions.
+
 ## `data-generator-retail` `commands` Have Been Renamed to `orders`
 
 The `data-generator-retail` package has been updated to provide types for all its records. In the process, we renamed the `commands` resource to `orders`. Accordingly, the `nb_commands` property of the `customers` resource has been renamed to `nb_orders` and the `command_id` property of the `invoices` and `reviews` resources has been renamed to `order_id`.

diff --git a/packages/ra-core/src/controller/create/useCreateController.ts b/packages/ra-core/src/controller/create/useCreateController.ts
@@ -193,7 +193,7 @@ export const useCreateController = <
 
 export interface CreateControllerProps<
     RecordType extends Omit<RaRecord, 'id'> = any,
-    MutationOptionsError = unknown,
+    MutationOptionsError = Error,
     ResultRecordType extends RaRecord = RecordType & { id: Identifier }
 > {
     disableAuthentication?: boolean;

diff --git a/packages/ra-core/src/controller/field/useReferenceArrayFieldController.ts b/packages/ra-core/src/controller/field/useReferenceArrayFieldController.ts
@@ -14,7 +14,7 @@ export interface UseReferenceArrayFieldControllerParams<
     perPage?: number;
     record?: RecordType;
     reference: string;
-    resource: string;
+    resource?: string;
     sort?: SortPayload;
     source: string;
     queryOptions?: Omit<

diff --git a/packages/ra-core/src/controller/usePrevNextController.ts b/packages/ra-core/src/controller/usePrevNextController.ts
@@ -125,7 +125,7 @@ export const usePrevNextController = <RecordType extends RaRecord = any>(
 
     if (!resource) {
         throw new Error(
-            `<useNextPrevController> was called outside of a ResourceContext and without a resource prop. You must set the resource prop.`
+            `useNextPrevController was called outside of a ResourceContext and without a resource prop. You must set the resource prop.`
         );
     }
 

diff --git a/packages/ra-core/src/inference/InferredElement.ts b/packages/ra-core/src/inference/InferredElement.ts
@@ -39,7 +39,7 @@ class InferredElement {
 
     getRepresentation() {
         if (!this.type) {
-            return;
+            return '';
         }
         if (this.type.representation) {
             return this.type.representation(this.props, this.children);
@@ -49,6 +49,7 @@ class InferredElement {
                 this.type.component.displayName || this.type.component.name
             } source="${this.props.source}" />`;
         }
+        return '';
     }
 }
 

diff --git a/packages/ra-core/src/preferences/PreferenceKeyContext.tsx b/packages/ra-core/src/preferences/PreferenceKeyContext.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { createContext, useContext } from 'react';
 
-export const PreferenceKeyContext = createContext<string>('');
+export const PreferenceKeyContext = createContext<string | null>('');
 
 export const PreferenceKeyContextProvider = ({
     value = '',
     children,
 }: {
-    value?: string;
+    value?: string | null;
     children: React.ReactNode;
 }) => (
     <PreferenceKeyContext.Provider value={value}>

diff --git a/packages/ra-core/src/preferences/PreferencesEditorContext.tsx b/packages/ra-core/src/preferences/PreferencesEditorContext.tsx
@@ -2,22 +2,20 @@ import * as React from 'react';
 import { createContext, ReactElement } from 'react';
 
 export const PreferencesEditorContext = createContext<
-    PreferencesEditorContextValue
+    PreferencesEditorContextValue | undefined
 >(undefined);
 
-export type PreferencesEditorContextValue =
-    | {
-          editor: ReactElement | null;
-          setEditor: React.Dispatch<React.SetStateAction<ReactElement>>;
-          preferenceKey?: string;
-          setPreferenceKey: React.Dispatch<React.SetStateAction<string>>;
-          title: string | null;
-          titleOptions?: any;
-          setTitle: (title: string, titleOptions?: any) => void;
-          isEnabled: boolean;
-          enable: () => void;
-          disable: () => void;
-          path: string | null;
-          setPath: (path: string) => void;
-      }
-    | undefined;
+export type PreferencesEditorContextValue = {
+    editor: ReactElement | null;
+    setEditor: React.Dispatch<React.SetStateAction<ReactElement | null>>;
+    preferenceKey: string | null;
+    setPreferenceKey: React.Dispatch<React.SetStateAction<string | null>>;
+    title: string | null;
+    titleOptions?: any;
+    setTitle: (title: string, titleOptions?: any) => void;
+    isEnabled: boolean;
+    enable: () => void;
+    disable: () => void;
+    path: string | null;
+    setPath: (path: string) => void;
+};
diff --git a/packages/ra-core/src/preferences/PreferencesEditorContextProvider.tsx b/packages/ra-core/src/preferences/PreferencesEditorContextProvider.tsx
@@ -8,7 +8,7 @@ import {
 export const PreferencesEditorContextProvider = ({ children }) => {
     const [isEnabled, setIsEnabled] = useState(false);
     const [editor, setEditor] = useState<ReactElement | null>(null);
-    const [preferenceKey, setPreferenceKey] = useState<string>();
+    const [preferenceKey, setPreferenceKey] = useState<string | null>(null);
     const [path, setPath] = useState<string | null>(null);
     const [title, setTitleString] = useState<string | null>(null);
     const [titleOptions, setTitleOptions] = useState<any>();

diff --git a/packages/ra-core/src/preferences/usePreferencesEditor.ts b/packages/ra-core/src/preferences/usePreferencesEditor.ts
@@ -4,5 +4,14 @@ import {
     PreferencesEditorContextValue,
 } from './PreferencesEditorContext';
 
-export const usePreferencesEditor = (): PreferencesEditorContextValue =>
-    useContext(PreferencesEditorContext);
+export const usePreferencesEditor = (): PreferencesEditorContextValue => {
+    const context = useContext(PreferencesEditorContext);
+
+    if (!context) {
+        throw new Error(
+            'usePreferencesEditor must be used within a PreferencesEditorContextProvider'
+        );
+    }
+
+    return context;
+};
diff --git a/packages/ra-core/src/store/useRemoveItemsFromStore.ts b/packages/ra-core/src/store/useRemoveItemsFromStore.ts
@@ -18,7 +18,7 @@ import { useStoreContext } from './useStoreContext';
  *    return <Button onClick={hancleClick}>Reset datagrid preferences</Button>;
  * }
  */
-export const useRemoveItemsFromStore = (hookTimeKeyPrefix?: string) => {
+export const useRemoveItemsFromStore = (hookTimeKeyPrefix?: string | null) => {
     const { removeItems } = useStoreContext();
     return useCallback(
         (keyPrefix?: string) => {

diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx
@@ -19,7 +19,6 @@ import {
 
 import { Confirm } from '../layout';
 import { Button, ButtonProps } from './Button';
-import { BulkActionProps } from '../types';
 import { UseMutationOptions } from '@tanstack/react-query';
 import { humanize, inflect } from 'inflection';
 
@@ -148,8 +147,7 @@ const sanitizeRestProps = ({
 export interface BulkDeleteWithConfirmButtonProps<
     RecordType extends RaRecord = any,
     MutationOptionsError = unknown
-> extends BulkActionProps,
-        ButtonProps {
+> extends ButtonProps {
     confirmContent?: React.ReactNode;
     confirmTitle?: React.ReactNode;
     confirmColor?: 'primary' | 'warning';

diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx
@@ -15,7 +15,6 @@ import {
 } from 'ra-core';
 
 import { Button, ButtonProps } from './Button';
-import { BulkActionProps } from '../types';
 import { UseMutationOptions } from '@tanstack/react-query';
 
 export const BulkDeleteWithUndoButton = (
@@ -100,8 +99,7 @@ const sanitizeRestProps = ({
 export interface BulkDeleteWithUndoButtonProps<
     RecordType extends RaRecord = any,
     MutationOptionsError = unknown
-> extends BulkActionProps,
-        ButtonProps {
+> extends ButtonProps {
     icon?: ReactElement;
     mutationOptions?: UseMutationOptions<
         RecordType,

diff --git a/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx
@@ -18,7 +18,6 @@ import {
 
 import { Confirm } from '../layout';
 import { Button, ButtonProps } from './Button';
-import { BulkActionProps } from '../types';
 import { UseMutationOptions } from '@tanstack/react-query';
 import { humanize, inflect } from 'inflection';
 
@@ -150,8 +149,7 @@ const sanitizeRestProps = ({
 export interface BulkUpdateWithConfirmButtonProps<
     RecordType extends RaRecord = any,
     MutationOptionsError = unknown
-> extends BulkActionProps,
-        ButtonProps {
+> extends ButtonProps {
     confirmContent?: React.ReactNode;
     confirmTitle?: React.ReactNode;
     icon?: ReactElement;

diff --git a/packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx
@@ -17,7 +17,6 @@ import {
 import { UseMutationOptions } from '@tanstack/react-query';
 
 import { Button, ButtonProps } from './Button';
-import { BulkActionProps } from '../types';
 
 export const BulkUpdateWithUndoButton = (
     props: BulkUpdateWithUndoButtonProps
@@ -108,8 +107,7 @@ const sanitizeRestProps = ({
 export interface BulkUpdateWithUndoButtonProps<
     RecordType extends RaRecord = any,
     MutationOptionsError = unknown
-> extends BulkActionProps,
-        ButtonProps {
+> extends ButtonProps {
     icon?: ReactElement;
     data: any;
     onSuccess?: () => void;

diff --git a/packages/ra-ui-materialui/src/button/PrevNextButtons.tsx b/packages/ra-ui-materialui/src/button/PrevNextButtons.tsx
@@ -141,31 +141,49 @@ export const PrevNextButtons = <RecordType extends RaRecord = any>(
             direction="row"
             className={clsx(PrevNextButtonClasses.root)}
         >
-            <IconButton
-                component={hasPrev ? Link : undefined}
-                to={prevPath}
-                aria-label={translate('ra.navigation.previous')}
-                disabled={!hasPrev}
-                size="small"
-            >
-                <NavigateBefore />
-            </IconButton>
+            {hasPrev && prevPath ? (
+                <IconButton
+                    component={Link}
+                    to={prevPath}
+                    aria-label={translate('ra.navigation.previous')}
+                    size="small"
+                >
+                    <NavigateBefore />
+                </IconButton>
+            ) : (
+                <IconButton
+                    aria-label={translate('ra.navigation.previous')}
+                    disabled
+                    size="small"
+                >
+                    <NavigateBefore />
+                </IconButton>
+            )}
 
             {typeof index === 'number' && (
                 <Typography variant="body2">
                     {index + 1} / {total}
                 </Typography>
             )}
 
-            <IconButton
-                component={hasNext ? Link : undefined}
-                to={nextPath}
-                aria-label={translate('ra.navigation.next')}
-                disabled={!hasNext}
-                size="small"
-            >
-                <NavigateNext />
-            </IconButton>
+            {hasNext && nextPath ? (
+                <IconButton
+                    component={Link}
+                    to={nextPath}
+                    aria-label={translate('ra.navigation.next')}
+                    size="small"
+                >
+                    <NavigateNext />
+                </IconButton>
+            ) : (
+                <IconButton
+                    aria-label={translate('ra.navigation.next')}
+                    disabled
+                    size="small"
+                >
+                    <NavigateNext />
+                </IconButton>
+            )}
         </Root>
     );
 };

diff --git a/packages/ra-ui-materialui/src/button/UpdateWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/UpdateWithConfirmButton.tsx
@@ -17,7 +17,6 @@ import {
 
 import { Confirm } from '../layout';
 import { Button, ButtonProps } from './Button';
-import { BulkActionProps } from '../types';
 import { UseMutationOptions } from '@tanstack/react-query';
 import { humanize, inflect } from 'inflection';
 
@@ -153,8 +152,7 @@ const sanitizeRestProps = ({
 export interface UpdateWithConfirmButtonProps<
     RecordType extends RaRecord = any,
     MutationOptionsError = unknown
-> extends BulkActionProps,
-        ButtonProps {
+> extends ButtonProps {
     confirmContent?: React.ReactNode;
     confirmTitle?: React.ReactNode;
     icon?: ReactElement;

diff --git a/packages/ra-ui-materialui/src/button/UpdateWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/UpdateWithUndoButton.tsx
@@ -15,7 +15,6 @@ import {
 import { UseMutationOptions } from '@tanstack/react-query';
 
 import { Button, ButtonProps } from './Button';
-import { BulkActionProps } from '../types';
 
 export const UpdateWithUndoButton = (props: UpdateWithUndoButtonProps) => {
     const record = useRecordContext(props);
@@ -109,8 +108,7 @@ const sanitizeRestProps = ({
 export interface UpdateWithUndoButtonProps<
     RecordType extends RaRecord = any,
     MutationOptionsError = unknown
-> extends BulkActionProps,
-        ButtonProps {
+> extends ButtonProps {
     icon?: ReactElement;
     data: any;
     mutationOptions?: UseMutationOptions<

diff --git a/packages/ra-ui-materialui/src/detail/Create.tsx b/packages/ra-ui-materialui/src/detail/Create.tsx
@@ -1,11 +1,15 @@
 import * as React from 'react';
 import { ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import { Identifier, RaRecord, useCheckMinimumRequiredProps } from 'ra-core';
+import {
+    CreateBase,
+    CreateControllerProps,
+    Identifier,
+    RaRecord,
+    useCheckMinimumRequiredProps,
+} from 'ra-core';
 
-import { CreateProps } from '../types';
-import { CreateView } from './CreateView';
-import { CreateBase } from 'ra-core';
+import { CreateView, CreateViewProps } from './CreateView';
 
 /**
  * Page component for the Create view
@@ -84,6 +88,17 @@ export const Create = <
     );
 };
 
+export interface CreateProps<
+    RecordType extends Omit<RaRecord, 'id'> = any,
+    MutationOptionsError = Error,
+    ResultRecordType extends RaRecord = RecordType & { id: Identifier }
+> extends CreateControllerProps<
+            RecordType,
+            MutationOptionsError,
+            ResultRecordType
+        >,
+        CreateViewProps {}
+
 Create.propTypes = {
     actions: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
     aside: PropTypes.element,