@applica-software-guru/react-admin 1.5.327 → 1.5.330

package/package.json

@@ -14,6 +14,7 @@
     "@mui/icons-material": "^5.0.1",
     "@mui/lab": "5.0.0-alpha.148",
     "@mui/material": "5.15.17",
+    "@react-oauth/google": "^0.12.1",
     "dayjs": "^1.11.8",
     "framer-motion": "^10.12.17",
     "history": "^5.1.0",
@@ -107,5 +108,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.327"
+  "version": "1.5.330"
 }

package/src/ApplicaAdmin.tsx

@@ -15,6 +15,7 @@ import {
 } from '@/components';
 import { AppStateProvider } from '@/components/AppStateProvider';
 import { ThemeConfig, ThemeProvider } from '@/components/Layout/ThemeProvider';
+import { GoogleOAuthProvider } from '@react-oauth/google';
 import React, { useMemo } from 'react';
 import { AdminProps, AuthProvider, DataProvider, I18nProvider } from 'react-admin';
 import { QueryClient } from 'react-query';
@@ -53,6 +54,7 @@ function ApplicaAdmin({
   enablePasswordRecover = false,
   enableThemeToggler = false,
   enableLocaleSwitcher = false,
+  oauth = {},
   queryClient = defaultQueryClient,
   background,
   notificationAPI = 'entities/notification',
@@ -93,11 +95,12 @@ function ApplicaAdmin({
         version,
         background,
         enableRegistration,
-        enablePasswordRecover
+        enablePasswordRecover,
+        oauth
       });
     }
     return loginPage;
-  }, [loginPage, name, version, copy, background, logoMain, enableRegistration, enablePasswordRecover]);
+  }, [loginPage, name, version, copy, background, logoMain, enableRegistration, enablePasswordRecover, oauth]);
   const layout = useMemo(
     () => (props: any) => {
       const _logoMain = name ? <MainIcon title={name} /> : logoMain;
@@ -152,7 +155,7 @@ function ApplicaAdmin({
     );
   }
 
-  return (
+  const appContent = (
     <AppStateProvider>
       <MenuConfigProvider menu={menu}>
         <ThemeProvider initialConfig={themeConfig}>
@@ -171,6 +174,12 @@ function ApplicaAdmin({
       </MenuConfigProvider>
     </AppStateProvider>
   );
+
+  if (oauth.google?.clientId) {
+    return <GoogleOAuthProvider clientId={oauth.google.clientId}>{appContent}</GoogleOAuthProvider>;
+  } else {
+    return appContent;
+  }
 }
 
 type ApplicaAdminProps = AdminProps & {
@@ -309,6 +318,14 @@ type ApplicaAdminProps = AdminProps & {
    * Indicates whether the locale switcher should be displayed.
    */
   enableLocaleSwitcher: boolean;
+  /**
+   * Indicates which OAuth providers to enable and configurations.
+   */
+  oauth: {
+    google?: {
+      clientId: string;
+    };
+  };
 };
 
 export { ApplicaAdmin };

package/src/components/ra-buttons/DeleteWithConfirmButton.tsx

@@ -7,10 +7,19 @@ import { Button } from './Button';
 import { Confirm, DeleteWithConfirmButtonProps as RaDeleteWithConfirmButtonProps } from 'ra-ui-materialui';
 import { Box, SxProps, Typography, useTheme } from '@mui/material';
 import { DeleteFilled } from '@ant-design/icons';
+import { useCallback } from 'react';
 
 type DeleteWithConfirmButtonProps<RecordType extends RaRecord = RaRecord> =
   RaDeleteWithConfirmButtonProps<RecordType> & {
     dialogSx?: SxProps;
+    /**
+     * @deprecated confirmTitle prop is deprecated, please use confirmContent instead.
+     */
+    confirmTitle?: React.ReactNode;
+    /**
+     * onConfirm {callback} is used to handle a custom delete action when user confirms the deletion.
+     */
+    onConfirm?: () => void;
   };
 
 function DeleteWithConfirmButton<RecordType extends RaRecord = any>(
@@ -30,6 +39,7 @@ function DeleteWithConfirmButton<RecordType extends RaRecord = any>(
     onClick,
     redirect = 'list',
     translateOptions = {},
+    onConfirm,
     ...rest
   } = props;
   const translate = useTranslate();
@@ -46,6 +56,17 @@ function DeleteWithConfirmButton<RecordType extends RaRecord = any>(
     resource
   });
 
+  const handleOnConfirm = useCallback(
+    (event: any) => {
+      if (onConfirm) {
+        onConfirm();
+      } else {
+        handleDelete(event);
+      }
+    },
+    [handleDelete, onConfirm]
+  );
+
   return (
     <>
       <Button
@@ -122,9 +143,9 @@ function DeleteWithConfirmButton<RecordType extends RaRecord = any>(
           )
         }
         content={
-          confirmContent || (
-            <Typography maxWidth="300px" variant="h4" align="center">
-              {translate('ra.message.delete_content', {
+          <Typography maxWidth="300px" variant="h4" align="center">
+            {confirmContent ||
+              translate('ra.message.delete_content', {
                 _: 'ra.message.delete_content',
                 name: translate(`resources.${resource}.forcedCaseName`, {
                   smart_count: 1,
@@ -138,8 +159,7 @@ function DeleteWithConfirmButton<RecordType extends RaRecord = any>(
                 }),
                 id: record?.id
               })}
-            </Typography>
-          )
+          </Typography>
         }
         confirmColor={confirmColor}
         translateOptions={{
@@ -156,7 +176,7 @@ function DeleteWithConfirmButton<RecordType extends RaRecord = any>(
           id: record?.id,
           ...translateOptions
         }}
-        onConfirm={handleDelete}
+        onConfirm={handleOnConfirm}
         onClose={handleDialogClose}
       />
     </>

package/src/components/ra-buttons/GoogleLoginButton.tsx

@@ -0,0 +1,76 @@
+import { ApplicaAuthProvider, AuthThirdPartyProviders } from '@applica-software-guru/iam-client';
+import { Box, useTheme } from '@mui/material';
+import { GoogleLogin } from '@react-oauth/google';
+import { useAuthProvider, useNotify } from 'ra-core';
+import { useNavigate } from 'react-router-dom';
+import { useEffect, useRef, useState } from 'react';
+import { debounce } from 'lodash';
+
+type GoogleLoginButtonProps = {
+  setLoading: (loading: boolean) => void;
+};
+
+function GoogleLoginButton({ setLoading }: GoogleLoginButtonProps) {
+  const theme = useTheme() as any;
+  const isDark = theme.palette.mode === 'dark';
+  const authProvider = useAuthProvider<ApplicaAuthProvider>();
+  const notify = useNotify();
+  const navigate = useNavigate();
+  const [boxWidth, setBoxWidth] = useState<string | number>(395);
+  const boxRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const debouncedUpdateButtonWidth = debounce(() => {
+      if (boxRef?.current) {
+        setBoxWidth(boxRef.current.offsetWidth);
+      }
+    }, 100);
+
+    debouncedUpdateButtonWidth();
+    window.addEventListener('resize', debouncedUpdateButtonWidth);
+
+    return () => {
+      window.removeEventListener('resize', debouncedUpdateButtonWidth);
+      debouncedUpdateButtonWidth.cancel();
+    };
+  }, [boxRef]);
+
+  function handleSuccess(response: any) {
+    setLoading(true);
+    authProvider
+      .thirdPartyLogin({ provider: AuthThirdPartyProviders.GOOGLE, payload: { credential: response.credential } })
+      .then(() => {
+        setLoading(false);
+        navigate('/');
+      })
+      .catch((error: any) => {
+        setLoading(false);
+        notify(
+          typeof error === 'string'
+            ? error
+            : typeof error === 'undefined' || !error.message
+            ? 'ra.auth.sign_in_error'
+            : error.message,
+          {
+            type: 'error',
+            messageArgs: {
+              _: typeof error === 'string' ? error : error && error.message ? error.message : undefined
+            }
+          }
+        );
+      });
+  }
+
+  function handleError() {
+    notify('ra.auth.sign_in_error', {
+      type: 'error'
+    });
+  }
+  return (
+    <Box sx={{ colorScheme: isDark ? 'light' : 'dark', width: '100%' }} ref={boxRef}>
+      <GoogleLogin theme="outline" width={boxWidth} onSuccess={handleSuccess} onError={handleError} />
+    </Box>
+  );
+}
+
+export { GoogleLoginButton };

package/src/components/ra-buttons/index.ts

@@ -4,4 +4,5 @@ export * from './CreateButton';
 export * from './CreateInDialogButton';
 export * from './DeleteWithConfirmButton';
 export * from './EditInDialogButton';
+export * from './GoogleLoginButton';
 export * from './ImpersonateUserButton';

package/src/components/ra-forms/TableForm/TableFormIterator.tsx

@@ -19,10 +19,11 @@ import {
 import { styled, useTheme } from '@mui/material/styles';
 import { FormDataConsumer, RaRecord, useTranslate, useTranslateLabel } from 'ra-core';
 import * as React from 'react';
-import { Children, ReactElement, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
-import { Confirm, useArrayInput } from 'react-admin';
+import { Children, ReactElement, ReactNode, useCallback, useMemo, useRef } from 'react';
+import { useArrayInput } from 'react-admin';
 import { UseFieldArrayReturn, useFormContext } from 'react-hook-form';
 import { Tooltip } from '@/components/@extended';
+import { DeleteWithConfirmButton } from '@/components/ra-buttons';
 
 /**
  * How to use TableFormIterator:
@@ -57,7 +58,6 @@ function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | nul
     inset,
     sx
   } = props;
-  const [confirmIsOpen, setConfirmIsOpen] = useState<boolean>(false);
   const { fields, remove, replace, append } = useArrayInput(props);
   const { resetField } = useFormContext();
   const theme = useTheme();
@@ -129,7 +129,6 @@ function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | nul
 
   const handleArrayClear = useCallback(() => {
     replace([]);
-    setConfirmIsOpen(false);
   }, [replace]);
 
   const context = useMemo(
@@ -217,9 +216,10 @@ function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | nul
                 {!disableRemove && showClearAllButton ? (
                   <TableCell key="actions" sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                     <ActionsMenu horizontal>
-                      <Typography color="error" onClick={() => setConfirmIsOpen(true)}>
-                        {translate('ra.action.delete')}
-                      </Typography>
+                      <DeleteWithConfirmButton
+                        onConfirm={handleArrayClear}
+                        confirmContent={translate('ra.message.clear_array_input')}
+                      />
                     </ActionsMenu>
                   </TableCell>
                 ) : (
@@ -264,16 +264,6 @@ function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | nul
             </TableBody>
           </Table>
         </TableContainer>
-
-        {fields.length > 0 && (
-          <Confirm
-            isOpen={confirmIsOpen}
-            title={translate('ra.action.clear_array_input')}
-            content={translate('ra.message.clear_array_input')}
-            onConfirm={handleArrayClear}
-            onClose={() => setConfirmIsOpen(false)}
-          />
-        )}
       </div>
     </TableFormIteratorContext.Provider>
   ) : null;

package/src/components/ra-forms/TableForm/TableFormIteratorItem.tsx

@@ -1,25 +1,24 @@
 import { EditButton } from './EditButton';
 import { ActionsMenu } from '@/components/ActionsMenu';
+import { DeleteWithConfirmButton } from '@/components/ra-buttons';
 import { useTableFormIterator } from '@/components/ra-forms/TableForm/TableFormIteratorContext';
 import {
   TableFormIteratorItemContext,
   TableFormIteratorItemContextValue
 } from '@/components/ra-forms/TableForm/TableFormIteratorItemContext';
-import { Button, Stack, TableCell } from '@mui/material';
+import { Stack, TableCell } from '@mui/material';
 import { RaRecord } from 'ra-core';
 import { Children, ReactElement, ReactNode, cloneElement, isValidElement, useMemo } from 'react';
 import * as React from 'react';
-import { Confirm, useTranslate } from 'react-admin';
+import { useTranslate } from 'react-admin';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const TableFormIteratorItem = React.forwardRef((props: TableFormIteratorItemProps, _: any) => {
   const { children, disabled, disableRemove = false, index, member, resource, record } = props;
   const translate = useTranslate();
-  const [confirmIsOpen, setConfirmIsOpen] = React.useState<boolean>(false);
   const { total, remove } = useTableFormIterator();
 
   const handleRowDelete = React.useCallback(() => {
-    setConfirmIsOpen(false);
     remove(index);
   }, [index, remove]);
 
@@ -75,9 +74,10 @@ const TableFormIteratorItem = React.forwardRef((props: TableFormIteratorItemProp
         <TableCell>
           <Stack direction="row" spacing={1} justifyContent="center" alignItems="center">
             <ActionsMenu horizontal>
-              <Button onClick={() => setConfirmIsOpen(true)} color="error" sx={{ justifyContent: 'flex-start' }}>
-                {translate('ra.action.delete')}
-              </Button>
+              <DeleteWithConfirmButton
+                onConfirm={handleRowDelete}
+                confirmContent={translate('ra.message.remove_item')}
+              />
               {renderEditButton}
             </ActionsMenu>
           </Stack>
@@ -90,17 +90,6 @@ const TableFormIteratorItem = React.forwardRef((props: TableFormIteratorItemProp
           </Stack>
         </TableCell>
       ) : null}
-
-      {/** @ts-ignore */}
-      {children.length > 0 && (
-        <Confirm
-          isOpen={confirmIsOpen}
-          title={translate('ra.action.remove_item')}
-          content={translate('ra.message.remove_item')}
-          onConfirm={handleRowDelete}
-          onClose={() => setConfirmIsOpen(false)}
-        />
-      )}
     </TableFormIteratorItemContext.Provider>
   );
 });

package/src/components/ra-pages/LoginPage.tsx

@@ -2,10 +2,12 @@ import { BaseAuthProps } from './types';
 import { AuthBackground } from '@/components/AuthBackground';
 import { AuthWrapper } from '@/components/AuthWrapper';
 import { TextInput } from '@/components/ra-inputs';
-import { Button, CircularProgress, Grid, Link, Stack, Typography } from '@mui/material';
+import { Button, CircularProgress, Divider, Grid, Link, Stack, Typography } from '@mui/material';
 import { Form, required, useCheckAuth, useLogin, useNotify, useSafeSetState, useTranslate } from 'ra-core';
 import { useEffect } from 'react';
 import { Link as RouterLink, useNavigate } from 'react-router-dom';
+import _ from 'lodash';
+import { GoogleLoginButton } from '@/components/ra-buttons';
 
 type LoginPageProps = BaseAuthProps & {
   /**
@@ -39,6 +41,14 @@ type LoginPageProps = BaseAuthProps & {
    * If not specified, the react-admin home page is used.
    */
   redirectTo: string;
+  /**
+   * Indicates which OAuth providers to enable and configurations.
+   */
+  oauth?: {
+    google?: {
+      clientId: string;
+    };
+  };
 };
 function LoginPage({
   version,
@@ -47,6 +57,7 @@ function LoginPage({
   logo,
   enablePasswordRecover = false,
   enableRegistration = false,
+  oauth = {},
   redirectTo,
   background = <AuthBackground />
 }: LoginPageProps): JSX.Element {
@@ -56,6 +67,7 @@ function LoginPage({
   const notify = useNotify();
   const checkAuth = useCheckAuth();
   const navigate = useNavigate();
+
   useEffect(() => {
     checkAuth({}, false)
       .then(() => {
@@ -65,6 +77,7 @@ function LoginPage({
         // not authenticated, stay on the login page
       });
   }, [checkAuth, navigate]);
+
   function handleSubmit(values: any) {
     setLoading(true);
     login(values, redirectTo)
@@ -88,6 +101,7 @@ function LoginPage({
         );
       });
   }
+
   return (
     <AuthWrapper name={name} version={version} copy={copy} logo={logo} background={background}>
       <Grid container spacing={3}>
@@ -153,6 +167,18 @@ function LoginPage({
               </Button>
             </Grid>
           </Form>
+          {!_.isEmpty(oauth) ? (
+            <>
+              <Grid item xs={12} sx={{ mt: 2 }}>
+                <Divider />
+              </Grid>
+              {oauth.google ? (
+                <Grid item xs={12} sx={{ mt: 2, width: '100%' }}>
+                  <GoogleLoginButton setLoading={setLoading} />
+                </Grid>
+              ) : null}
+            </>
+          ) : null}
         </Grid>
       </Grid>
     </AuthWrapper>

package/src/components/ra-pages/RegisterPage.tsx

@@ -26,7 +26,7 @@ function RegisterPage({ name, copy, version, logo, background }: BaseAuthProps)
         redirect('/login');
       })
       .catch((error: any) => {
-        notify(error, { type: 'error' });
+        notify(error.message || error, { type: 'error' });
       })
       .finally(() => setLoading(false));
   }

package/src/playground/App.jsx

@@ -41,6 +41,9 @@ function App() {
       enableRegistration
       enablePasswordRecover
       enableThemeToggler
+      oauth={{
+        google: { clientId: 'YOUR_CLIENT_ID' }
+      }}
     >
       <CustomRoutes>
         <Route path="/custom-page" element={<CustomPage />} />