@strato-admin/core 0.1.1 → 0.3.0

package/dist/ra-core/src/auth/useAuthState.js

@@ -0,0 +1,171 @@
+import { useEffect, useMemo } from 'react';
+import { useQuery, } from '@tanstack/react-query';
+import useAuthProvider, { defaultAuthParams } from './useAuthProvider';
+import useLogout from './useLogout';
+import { removeDoubleSlashes, useBasename } from '../routing';
+import { useNotify } from '../notification';
+import { useEvent } from '../util';
+const emptyParams = {};
+/**
+ * Hook for getting the authentication status
+ *
+ * Calls the authProvider.checkAuth() method asynchronously.
+ *
+ * The return value updates according to the authProvider request state:
+ *
+ * - isPending: true just after mount, while the authProvider is being called. false once the authProvider has answered.
+ * - authenticated: true while loading. then true or false depending on the authProvider response.
+ *
+ * To avoid rendering a component and force waiting for the authProvider response, use the useAuthState() hook
+ * instead of the useAuthenticated() hook.
+ *
+ * You can render different content depending on the authenticated status.
+ *
+ * @see useAuthenticated()
+ *
+ * @param {Object} params Any params you want to pass to the authProvider
+ *
+ * @param {Boolean} logoutOnFailure: Optional. Whether the user should be logged out if the authProvider fails to authenticate them. False by default.
+ *
+ * @returns The current auth check state. Destructure as { authenticated, error, isPending }.
+ *
+ * @example
+ * import { useAuthState, Loading } from 'react-admin';
+ *
+ * const MyPage = () => {
+ *     const { isPending, authenticated } = useAuthState();
+ *     if (isPending) {
+ *         return <Loading />;
+ *     }
+ *     if (authenticated) {
+ *        return <AuthenticatedContent />;
+ *     }
+ *     return <AnonymousContent />;
+ * };
+ */
+const useAuthState = (params = emptyParams, logoutOnFailure = false, queryOptions = emptyParams) => {
+    const authProvider = useAuthProvider();
+    const logout = useLogout();
+    const basename = useBasename();
+    const notify = useNotify();
+    const { onSuccess, onError, onSettled, ...options } = queryOptions;
+    const queryResult = useQuery({
+        queryKey: ['auth', 'checkAuth', params],
+        queryFn: async ({ signal }) => {
+            // The authProvider is optional in react-admin
+            if (!authProvider) {
+                return true;
+            }
+            try {
+                await authProvider.checkAuth({ ...params, signal });
+                return true;
+            }
+            catch (error) {
+                // This is necessary because react-query requires the error to be defined
+                if (error != null) {
+                    throw error;
+                }
+                throw new Error();
+            }
+        },
+        retry: false,
+        ...options,
+    });
+    const onSuccessEvent = useEvent(onSuccess ?? noop);
+    const onSettledEvent = useEvent(onSettled ?? noop);
+    const onErrorEvent = useEvent(onError ??
+        ((error) => {
+            if (!logoutOnFailure)
+                return;
+            const loginUrl = removeDoubleSlashes(`${basename}/${defaultAuthParams.loginUrl}`);
+            logout({}, error && error.redirectTo != null
+                ? error.redirectTo
+                : loginUrl);
+            const shouldSkipNotify = error && error.message === false;
+            !shouldSkipNotify &&
+                notify(getErrorMessage(error, "strato.auth.auth_check_error'), {
+                    type: 'error',
+                });
+        }));
+    useEffect(() => {
+        if (queryResult.data === undefined || queryResult.isFetching)
+            return;
+        if (queryOptions.enabled === false)
+            return;
+        onSuccessEvent(queryResult.data);
+    }, [
+        onSuccessEvent,
+        queryResult.data,
+        queryResult.isFetching,
+        queryOptions.enabled,
+    ]);
+    useEffect(() => {
+        if (queryResult.error == null || queryResult.isFetching)
+            return;
+        if (queryOptions.enabled === false)
+            return;
+        onErrorEvent(queryResult.error);
+    }, [
+        onErrorEvent,
+        queryResult.error,
+        queryResult.isFetching,
+        queryOptions.enabled,
+    ]);
+    useEffect(() => {
+        if (queryResult.status === 'pending' || queryResult.isFetching)
+            return;
+        if (queryOptions.enabled === false)
+            return;
+        onSettledEvent(queryResult.data, queryResult.error);
+    }, [
+        onSettledEvent,
+        queryResult.data,
+        queryResult.error,
+        queryResult.status,
+        queryResult.isFetching,
+        queryOptions.enabled,
+    ]);
+    const result = useMemo(() => {
+        return {
+            ...queryResult,
+            authenticated: queryResult.error ? false : queryResult.data,
+        };
+    }, [queryResult]);
+    return authProvider != null
+        ? result
+        : noAuthProviderQueryResult;
+};
+export default useAuthState;
+const getErrorMessage = (error, defaultMessage) => typeof error === 'string'
+    ? error
+    : typeof error === 'undefined' || !error.message
+        ? defaultMessage
+        : error.message;
+const noop = () => { };
+const noAuthProviderQueryResult = {
+    authenticated: true,
+    data: true,
+    dataUpdatedAt: 0,
+    error: null,
+    errorUpdatedAt: 0,
+    errorUpdateCount: 0,
+    failureCount: 0,
+    failureReason: null,
+    fetchStatus: 'idle',
+    isError: false,
+    isInitialLoading: false,
+    isLoading: false,
+    isLoadingError: false,
+    isFetched: true,
+    isFetchedAfterMount: true,
+    isFetching: false,
+    isPaused: false,
+    isPlaceholderData: false,
+    isPending: false,
+    isRefetchError: false,
+    isRefetching: false,
+    isStale: false,
+    isSuccess: true,
+    status: 'success',
+    refetch: () => Promise.resolve(noAuthProviderQueryResult),
+};

package/dist/ra-core/src/auth/useAuthenticated.d.ts

@@ -0,0 +1,36 @@
+import { UseQueryOptions } from '@tanstack/react-query';
+/**
+ * Restrict access to authenticated users.
+ * Redirect anonymous users to the login page.
+ *
+ * Use it in your custom page components to require
+ * authentication.
+ *
+ * You can set additional `authParams` at will if your authProvider
+ * requires it.
+ *
+ * @example
+ * import { Admin, CustomRoutes, useAuthenticated } from 'react-admin';
+ *
+ * const FooPage = () => {
+ *     const { isPending } = useAuthenticated();
+ *     if (isPending) return null;
+ *     return <Foo />;
+ * }
+ *
+ * const customRoutes = [
+ *     <Route path="/foo" element={<FooPage />} />
+ * ];
+ *
+ * const App = () => (
+ *     <Admin>
+ *         <CustomRoutes>{customRoutes}</CustomRoutes>
+ *     </Admin>
+ * );
+ */
+export declare const useAuthenticated: <ParamsType = any>({ params, logoutOnFailure, ...options }?: UseAuthenticatedOptions<ParamsType>) => import("./useAuthState").UseAuthStateResult<any>;
+export type UseAuthenticatedOptions<ParamsType> = Omit<UseQueryOptions<boolean, any> & {
+    params?: ParamsType;
+}, 'queryKey' | 'queryFn'> & {
+    logoutOnFailure?: boolean;
+};

package/dist/ra-core/src/auth/useAuthenticated.js

@@ -0,0 +1,34 @@
+import useAuthState from './useAuthState';
+/**
+ * Restrict access to authenticated users.
+ * Redirect anonymous users to the login page.
+ *
+ * Use it in your custom page components to require
+ * authentication.
+ *
+ * You can set additional `authParams` at will if your authProvider
+ * requires it.
+ *
+ * @example
+ * import { Admin, CustomRoutes, useAuthenticated } from 'react-admin';
+ *
+ * const FooPage = () => {
+ *     const { isPending } = useAuthenticated();
+ *     if (isPending) return null;
+ *     return <Foo />;
+ * }
+ *
+ * const customRoutes = [
+ *     <Route path="/foo" element={<FooPage />} />
+ * ];
+ *
+ * const App = () => (
+ *     <Admin>
+ *         <CustomRoutes>{customRoutes}</CustomRoutes>
+ *     </Admin>
+ * );
+ */
+export const useAuthenticated = ({ params, logoutOnFailure = true, ...options } = {}) => {
+    return useAuthState(params ?? emptyParams, logoutOnFailure, options);
+};
+const emptyParams = {};

package/dist/ra-core/src/auth/useCanAccess.d.ts

@@ -0,0 +1,56 @@
+import { QueryObserverLoadingErrorResult, QueryObserverLoadingResult, QueryObserverRefetchErrorResult, QueryObserverSuccessResult, UseQueryOptions } from '@tanstack/react-query';
+import { HintedString } from '../types';
+/**
+ * A hook that calls the authProvider.canAccess() method using react-query for a provided resource and action (and optionally a record).
+ *
+ * The return value updates according to the request state:
+ *
+ * - start: { isPending: true }
+ * - success: { canAccess: true | false, isPending: false }
+ * - error: { error: [error from provider], isPending: false }
+ *
+ * Useful to enable or disable features based on users permissions.
+ *
+ * @param {Object} params Any params you want to pass to the authProvider
+ * @param {string} params.resource The resource to check access for
+ * @param {string} params.action The action to check access for
+ * @param {Object} params.record Optional. The record to check access for
+ *
+ * @returns Return the react-query result and a canAccess property which is a boolean indicating the access status
+ *
+ * @example
+ *     import { useCanAccess } from 'react-admin';
+ *
+ *     const PostDetail = () => {
+ *         const { isPending, canAccess, error } = useCanAccess({
+ *             resource: 'posts',
+ *             action: 'read',
+ *         });
+ *         if (isPending || !canAccess) {
+ *             return null;
+ *         }
+ *         if (error) {
+ *             return <div>{error.message}</div>;
+ *         }
+ *         return <PostEdit />;
+ *     };
+ */
+export declare const useCanAccess: <RecordType extends Record<string, any> = Record<string, any>, ErrorType extends Error = Error>(params: UseCanAccessOptions<RecordType, ErrorType>) => UseCanAccessResult<ErrorType>;
+export interface UseCanAccessOptions<RecordType extends Record<string, any> = Record<string, any>, ErrorType extends Error = Error> extends Omit<UseQueryOptions<boolean, ErrorType>, 'queryKey' | 'queryFn'> {
+    resource?: string;
+    action: HintedString<'list' | 'create' | 'edit' | 'show' | 'delete'>;
+    record?: RecordType;
+}
+export type UseCanAccessResult<ErrorType = Error> = UseCanAccessLoadingResult<ErrorType> | UseCanAccessLoadingErrorResult<ErrorType> | UseCanAccessRefetchErrorResult<ErrorType> | UseCanAccessSuccessResult<ErrorType>;
+export interface UseCanAccessLoadingResult<ErrorType = Error> extends QueryObserverLoadingResult<boolean, ErrorType> {
+    canAccess: undefined;
+}
+export interface UseCanAccessLoadingErrorResult<ErrorType = Error> extends QueryObserverLoadingErrorResult<boolean, ErrorType> {
+    canAccess: undefined;
+}
+export interface UseCanAccessRefetchErrorResult<ErrorType = Error> extends QueryObserverRefetchErrorResult<boolean, ErrorType> {
+    canAccess: boolean;
+}
+export interface UseCanAccessSuccessResult<ErrorType = Error> extends QueryObserverSuccessResult<boolean, ErrorType> {
+    canAccess: boolean;
+}

package/dist/ra-core/src/auth/useCanAccess.js

@@ -0,0 +1,108 @@
+import { useMemo } from 'react';
+import { useQuery, } from '@tanstack/react-query';
+import useAuthProvider from './useAuthProvider';
+import { useResourceContext } from '../core';
+import { useRecordContext } from '../controller';
+/**
+ * A hook that calls the authProvider.canAccess() method using react-query for a provided resource and action (and optionally a record).
+ *
+ * The return value updates according to the request state:
+ *
+ * - start: { isPending: true }
+ * - success: { canAccess: true | false, isPending: false }
+ * - error: { error: [error from provider], isPending: false }
+ *
+ * Useful to enable or disable features based on users permissions.
+ *
+ * @param {Object} params Any params you want to pass to the authProvider
+ * @param {string} params.resource The resource to check access for
+ * @param {string} params.action The action to check access for
+ * @param {Object} params.record Optional. The record to check access for
+ *
+ * @returns Return the react-query result and a canAccess property which is a boolean indicating the access status
+ *
+ * @example
+ *     import { useCanAccess } from 'react-admin';
+ *
+ *     const PostDetail = () => {
+ *         const { isPending, canAccess, error } = useCanAccess({
+ *             resource: 'posts',
+ *             action: 'read',
+ *         });
+ *         if (isPending || !canAccess) {
+ *             return null;
+ *         }
+ *         if (error) {
+ *             return <div>{error.message}</div>;
+ *         }
+ *         return <PostEdit />;
+ *     };
+ */
+export const useCanAccess = (params) => {
+    const authProvider = useAuthProvider();
+    const resource = useResourceContext(params);
+    if (!resource) {
+        throw new Error('useCanAccess must be used inside a <Resource> component or provide a resource prop');
+    }
+    const record = useRecordContext(params);
+    const { record: _record, ...restParams } = params;
+    const authProviderHasCanAccess = !!authProvider?.canAccess;
+    const queryResult = useQuery({
+        queryKey: [
+            'auth',
+            'canAccess',
+            { ...restParams, recordId: record?.id, resource },
+        ],
+        queryFn: async ({ signal }) => {
+            if (!authProvider || !authProvider.canAccess) {
+                return true;
+            }
+            return authProvider.canAccess({
+                ...params,
+                record,
+                resource,
+                signal: authProvider.supportAbortSignal ? signal : undefined,
+            });
+        },
+        enabled: authProviderHasCanAccess,
+        ...params,
+    });
+    const result = useMemo(() => {
+        // Don't check for the authProvider or authProvider.canAccess method in the useMemo
+        // to avoid unnecessary re-renders
+        return {
+            ...queryResult,
+            canAccess: queryResult.data,
+        };
+    }, [queryResult]);
+    return authProviderHasCanAccess
+        ? result
+        : emptyQueryObserverResult;
+};
+const emptyQueryObserverResult = {
+    canAccess: true,
+    data: true,
+    dataUpdatedAt: 0,
+    error: null,
+    errorUpdatedAt: 0,
+    errorUpdateCount: 0,
+    failureCount: 0,
+    failureReason: null,
+    fetchStatus: 'idle',
+    isError: false,
+    isInitialLoading: false,
+    isLoading: false,
+    isLoadingError: false,
+    isFetched: true,
+    isFetchedAfterMount: true,
+    isFetching: false,
+    isPaused: false,
+    isPlaceholderData: false,
+    isPending: false,
+    isRefetchError: false,
+    isRefetching: false,
+    isStale: false,
+    isSuccess: true,
+    status: 'success',
+    refetch: () => Promise.resolve(emptyQueryObserverResult),
+};

package/dist/ra-core/src/auth/useCanAccessCallback.d.ts

@@ -0,0 +1,39 @@
+import { UseMutateAsyncFunction, UseMutationOptions } from '@tanstack/react-query';
+import { HintedString } from '../types';
+/**
+ * A hook that returns a function you can call to determine whether user has access to the given resource
+ *
+ * @example
+ *     import { Datagrid, List, TextField, useCanAccessCallback } from 'react-admin';
+ *
+ *     const UserList = () => {
+ *         const checkAccess = useCanAccessCallback();
+ *
+ *         const handleRowClick = (id: Identifier, resource: string, record: Record) => {
+ *             try {
+ *                 const canAccess = checkAccess({ resource: 'users', action: 'edit', record });
+ *                 return canAccess ? "edit" : "show";
+ *             } catch (error) {
+ *                 console.error(error);
+ *             }
+ *         };
+ *
+ *         return (
+ *             <List>
+ *                 <Datagrid onClick={handleRowClick}>
+ *                     <TextField source="id" />
+ *                     <TextField source="name" />
+ *                     <TextField source="email" />
+ *                 </Datagrid>
+ *             </List>
+ *         );
+ *     };
+ */
+export declare const useCanAccessCallback: <RecordType extends Record<string, any> = Record<string, any>, ErrorType = Error>(options?: Omit<UseMutationOptions<UseCanAccessCallbackResult, ErrorType, UseCanAccessCallbackOptions<RecordType>>, "mutationFn">) => UseMutateAsyncFunction<boolean, ErrorType, UseCanAccessCallbackOptions<Record<string, any>>, unknown>;
+export type UseCanAccessCallback<RecordType extends Record<string, any> = Record<string, any>, ErrorType = Error> = UseMutateAsyncFunction<UseCanAccessCallbackResult, ErrorType, UseCanAccessCallbackOptions<RecordType>, unknown>;
+export type UseCanAccessCallbackOptions<RecordType extends Record<string, any> = Record<string, any>> = {
+    resource: string;
+    action: HintedString<'list' | 'create' | 'edit' | 'show' | 'delete'>;
+    record?: RecordType;
+};
+export type UseCanAccessCallbackResult = boolean;

package/dist/ra-core/src/auth/useCanAccessCallback.js

@@ -0,0 +1,45 @@
+import { useMutation, } from '@tanstack/react-query';
+import useAuthProvider from './useAuthProvider';
+/**
+ * A hook that returns a function you can call to determine whether user has access to the given resource
+ *
+ * @example
+ *     import { Datagrid, List, TextField, useCanAccessCallback } from 'react-admin';
+ *
+ *     const UserList = () => {
+ *         const checkAccess = useCanAccessCallback();
+ *
+ *         const handleRowClick = (id: Identifier, resource: string, record: Record) => {
+ *             try {
+ *                 const canAccess = checkAccess({ resource: 'users', action: 'edit', record });
+ *                 return canAccess ? "edit" : "show";
+ *             } catch (error) {
+ *                 console.error(error);
+ *             }
+ *         };
+ *
+ *         return (
+ *             <List>
+ *                 <Datagrid onClick={handleRowClick}>
+ *                     <TextField source="id" />
+ *                     <TextField source="name" />
+ *                     <TextField source="email" />
+ *                 </Datagrid>
+ *             </List>
+ *         );
+ *     };
+ */
+export const useCanAccessCallback = (options = {}) => {
+    const authProvider = useAuthProvider();
+    const { mutateAsync } = useMutation({
+        mutationFn: async (params) => {
+            if (!authProvider || !authProvider.canAccess) {
+                return true;
+            }
+            return authProvider.canAccess(params);
+        },
+        retry: false,
+        ...options,
+    });
+    return mutateAsync;
+};

package/dist/ra-core/src/auth/useCanAccessResources.d.ts

@@ -0,0 +1,67 @@
+import { UseQueryOptions } from '@tanstack/react-query';
+import { HintedString } from '../types';
+/**
+ * Checks whether users can access the provided resources.
+ *
+ * `useCanAccessResources` returns an object describing the state of the request:
+ *
+ * - start: { isPending: true }
+ * - success: { canAccess: Object<string, boolean>, isPending: false }
+ * - error: { error: [error from provider], isPending: false }
+ *
+ * @param {Object} params Any params you want to pass to the authProvider
+ * @param {string} params.action The action to check access for
+ * @param {string[]} params.resources The list of resources to check access for
+ * @param {Object} params.record Optional. The record to check access for
+ *
+ * @returns Return the react-query result and a canAccess property which is a map of the resources and their access status { [resource: string]: boolean }
+ *
+ * @example
+ * import { useCanAccessResources } from 'react-admin';
+ *
+ * const UserList = ({ record }) => {
+ *     const { isPending, canAccess } = useCanAccessResources({
+ *         action: 'read',
+ *         resources: ['users.id', 'users.name', 'users.email'],
+ *         record
+ *     });
+ *
+ *     if (isPending) {
+ *         return null;
+ *     }
+ *     return (
+ *         <SimpleList
+ *              primaryText={record => canAccess.users.name ? record.name : ''}
+ *              secondaryText={record => canAccess.users.email ? record.email : ''}
+ *              tertiaryText={record => canAccess.users.id ? record.id : ''}
+ *          />
+ *     );
+ * };
+ */
+export declare const useCanAccessResources: <RecordType extends Record<string, any> = Record<string, any>, ErrorType extends Error = Error>(params: UseCanAccessResourcesOptions<RecordType>) => UseCanAccessResourcesResult<ErrorType>;
+export interface UseCanAccessResourcesOptions<RecordType extends Record<string, any> = Record<string, any>, ErrorType extends Error = Error> extends Omit<UseQueryOptions<Record<string, boolean>, ErrorType>, 'queryKey' | 'queryFn'> {
+    resources: string[];
+    action: HintedString<'list' | 'create' | 'edit' | 'show' | 'delete'>;
+    record?: RecordType;
+}
+export type UseCanAccessResourcesResult<ErrorType = Error> = UseCanAccessResourcesLoadingResult | UseCanAccessResourcesLoadingErrorResult<ErrorType> | UseCanAccessResourcesRefetchErrorResult<ErrorType> | UseCanAccessResourcesSuccessResult;
+export interface UseCanAccessResourcesLoadingResult {
+    canAccess: undefined;
+    error: null;
+    isPending: true;
+}
+export interface UseCanAccessResourcesLoadingErrorResult<ErrorType = Error> {
+    canAccess: undefined;
+    error: ErrorType;
+    isPending: false;
+}
+export interface UseCanAccessResourcesRefetchErrorResult<ErrorType = Error> {
+    canAccess: Record<string, boolean>;
+    error: ErrorType;
+    isPending: false;
+}
+export interface UseCanAccessResourcesSuccessResult {
+    canAccess: Record<string, boolean>;
+    error: null;
+    isPending: false;
+}

package/dist/ra-core/src/auth/useCanAccessResources.js

@@ -0,0 +1,92 @@
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import useAuthProvider from './useAuthProvider';
+import { useRecordContext } from '../controller';
+/**
+ * Checks whether users can access the provided resources.
+ *
+ * `useCanAccessResources` returns an object describing the state of the request:
+ *
+ * - start: { isPending: true }
+ * - success: { canAccess: Object<string, boolean>, isPending: false }
+ * - error: { error: [error from provider], isPending: false }
+ *
+ * @param {Object} params Any params you want to pass to the authProvider
+ * @param {string} params.action The action to check access for
+ * @param {string[]} params.resources The list of resources to check access for
+ * @param {Object} params.record Optional. The record to check access for
+ *
+ * @returns Return the react-query result and a canAccess property which is a map of the resources and their access status { [resource: string]: boolean }
+ *
+ * @example
+ * import { useCanAccessResources } from 'react-admin';
+ *
+ * const UserList = ({ record }) => {
+ *     const { isPending, canAccess } = useCanAccessResources({
+ *         action: 'read',
+ *         resources: ['users.id', 'users.name', 'users.email'],
+ *         record
+ *     });
+ *
+ *     if (isPending) {
+ *         return null;
+ *     }
+ *     return (
+ *         <SimpleList
+ *              primaryText={record => canAccess.users.name ? record.name : ''}
+ *              secondaryText={record => canAccess.users.email ? record.email : ''}
+ *              tertiaryText={record => canAccess.users.id ? record.id : ''}
+ *          />
+ *     );
+ * };
+ */
+export const useCanAccessResources = (params) => {
+    const authProvider = useAuthProvider();
+    const record = useRecordContext(params);
+    const { action, resources, ...options } = params;
+    const queryResult = useQuery({
+        queryKey: ['auth', 'canAccess', resources, action, record],
+        queryFn: async ({ signal }) => {
+            const queries = await Promise.all(resources.map(async (resource) => {
+                if (!authProvider || !authProvider.canAccess) {
+                    return { canAccess: true, resource };
+                }
+                const canAccess = await authProvider.canAccess({
+                    resource,
+                    action,
+                    record,
+                    signal: authProvider.supportAbortSignal
+                        ? signal
+                        : undefined,
+                });
+                return { canAccess, resource };
+            }));
+            const result = queries.reduce((acc, { resource, canAccess }) => {
+                acc[resource] = canAccess;
+                return acc;
+            }, {});
+            return result;
+        },
+        ...options,
+    });
+    const result = useMemo(() => {
+        return {
+            canAccess: queryResult.data,
+            ...queryResult,
+        };
+    }, [queryResult]);
+    const resultWithoutAuthProvider = useMemo(() => {
+        return {
+            canAccess: resources.reduce((acc, resource) => {
+                acc[resource] = true;
+                return acc;
+            }, {}),
+            isPending: false,
+            isError: false,
+            error: null,
+        };
+    }, [resources]);
+    return !authProvider || !authProvider.canAccess
+        ? resultWithoutAuthProvider
+        : result;
+};