Introduce Exit To AppsDashboard Menu

Author: djhi

packages/ra-no-code/src/Admin.spec.tsx

@@ -4,6 +4,7 @@ import userEvents from '@testing-library/user-event';
 import fs from 'fs';
 import path from 'path';
 import { Admin } from './Admin';
+import { ApplicationContext } from './ApplicationContext';
 
 describe('Admin', () => {
     it('should be functional', async () => {
@@ -30,7 +31,14 @@ describe('Admin', () => {
             type: 'text/csv',
         });
         const { getByLabelText, getByText, getByDisplayValue } = render(
-            <Admin application={{ name: 'test', created_at: new Date() }} />
+            <ApplicationContext.Provider
+                value={{
+                    application: { name: 'test', created_at: new Date() },
+                    onExit: () => {},
+                }}
+            >
+                <Admin />
+            </ApplicationContext.Provider>
         );
 
         userEvents.upload(getByLabelText('CSV File'), file);

packages/ra-no-code/src/Admin.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
-import {
-    Admin as RaAdmin,
-    AdminProps as RaAdminProps,
-    Resource,
-} from 'react-admin';
+import { Admin as RaAdmin, AdminProps, Resource } from 'react-admin';
 import localStorageDataProvider from 'ra-data-local-storage';
 import { Create, Edit, List } from './builders';
 import {
     useResourcesConfiguration,
     ResourceConfigurationProvider,
 } from './ResourceConfiguration';
 import { Layout, Ready } from './ui';
-import { Application } from './ApplicationsDashboard';
+import { useApplication } from './ApplicationContext';
 
-export const Admin = ({ application, ...props }: AdminProps) => {
+export const Admin = (props: Omit<AdminProps, 'dataProvider'>) => {
+    const { application } = useApplication();
+    if (!application) {
+        return null;
+    }
     const dataProvider = localStorageDataProvider({
         localStorageKey: `@@ra-no-code/${application.name}/data`,
     });
@@ -22,12 +22,16 @@ export const Admin = ({ application, ...props }: AdminProps) => {
             dataProvider={dataProvider}
             storageKey={`@@ra-no-code/${application.name}`}
         >
-            <InnerAdmin {...props} dataProvider={dataProvider} />
+            <InnerAdmin
+                {...props}
+                title={application.name}
+                dataProvider={dataProvider}
+            />
         </ResourceConfigurationProvider>
     );
 };
 
-const InnerAdmin = (props: RaAdminProps) => {
+const InnerAdmin = (props: AdminProps) => {
     const [resources] = useResourcesConfiguration();
     const hasResources = !!resources && Object.keys(resources).length > 0;
     return (
@@ -47,7 +51,3 @@ const InnerAdmin = (props: RaAdminProps) => {
         </RaAdmin>
     );
 };
-
-interface AdminProps extends Omit<RaAdminProps, 'dataProvider'> {
-    application: Application;
-}

packages/ra-no-code/src/ApplicationContext.tsx

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+import { Application } from './ApplicationsDashboard';
+
+export type ApplicationContextValue = {
+    application: Application;
+    onExit: () => void;
+};
+
+export const ApplicationContext = createContext<ApplicationContextValue>(
+    undefined
+);
+
+export const useApplication = () => useContext(ApplicationContext);

packages/ra-no-code/src/Root.tsx

@@ -1,17 +1,34 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Admin } from './Admin';
+import { ApplicationContext } from './ApplicationContext';
 import { ApplicationsDashboard } from './ApplicationsDashboard';
 
 export const Root = () => {
     const [application, setApplication] = useState();
 
+    const handleExitApplication = () => {
+        setApplication(undefined);
+    };
+
     const handleApplicationSelected = selectedApplication => {
         setApplication(selectedApplication);
     };
 
-    if (application) {
-        return <Admin application={application} />;
+    const context = useMemo(
+        () => ({
+            application,
+            onExit: handleExitApplication,
+        }),
+        [application]
+    );
+
+    if (context.application) {
+        return (
+            <ApplicationContext.Provider value={context}>
+                <Admin />
+            </ApplicationContext.Provider>
+        );
     }
 
     return (

packages/ra-no-code/src/ui/Appbar.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AppBar as RaAppBar, AppBarProps } from 'react-admin';
+import { UserMenu } from './UserMenu';
+
+export const AppBar = (props: AppBarProps) => (
+    <RaAppBar {...props} userMenu={<UserMenu />} />
+);

packages/ra-no-code/src/ui/ExitApplicationMenu.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { forwardRef } from 'react';
+import { MenuItemLink, MenuItemLinkProps } from 'react-admin';
+import ExitToAppIcon from '@material-ui/icons/ExitToApp';
+import { useApplication } from '../ApplicationContext';
+
+export const ExitApplicationMenu = forwardRef<HTMLLIElement>(
+    ({ onClick, ...props }: MenuItemLinkProps, ref) => {
+        const { onExit } = useApplication();
+
+        const handleClick = () => {
+            onExit();
+        };
+
+        return (
+            <MenuItemLink
+                ref={ref}
+                to="/"
+                primaryText="Exit application"
+                leftIcon={<ExitToAppIcon />}
+                onClick={handleClick}
+                {...props}
+            />
+        );
+    }
+);

packages/ra-no-code/src/ui/Layout.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Layout as RaLayout, LayoutProps } from 'react-admin';
+import { AppBar } from './Appbar';
 import Menu from './Menu';
 
 export const Layout = (props: LayoutProps) => (
-    <RaLayout {...props} menu={Menu} />
+    <RaLayout {...props} appBar={AppBar} menu={Menu} />
 );

packages/ra-no-code/src/ui/UserMenu.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { UserMenu as RaUserMenu } from 'react-admin';
+import { ExitApplicationMenu } from './ExitApplicationMenu';
+
+export const UserMenu = props => {
+    return (
+        <RaUserMenu {...props}>
+            <ExitApplicationMenu />
+        </RaUserMenu>
+    );
+};

packages/ra-no-code/src/ui/index.ts

@@ -1,4 +1,6 @@
 export * from './Layout';
 export * from './Menu';
+export * from './UserMenu';
+export * from './ExitApplicationMenu';
 export * from './Ready';
 export * from './ImportResourceDialog';