Merge pull request #59 from marmelab/update-demo

Update demo
marmelab · Jun 28, 2024 · f1a62b5 · f1a62b5
2 parents f5dfe6d + c1a124a
commit f1a62b5
Show file tree

Hide file tree

Showing 60 changed files with 1,579 additions and 919 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## 3.0.0
+
+- Upgrade to react-admin v5
+- The `<LoginPage>` will no longer automatically redirect to the app if the user is already authenticated.
+
 ## 2.3.0
 
 * Update supabase-js dev to match new auth system ([#55](https://github.com/marmelab/ra-supabase/pull/55)) ([Revarh](https://github.com/Revarh))

diff --git a/cypress/e2e/dashboard.cy.ts b/cypress/e2e/dashboard.cy.ts
@@ -5,14 +5,13 @@ describe('Dashboard spec', () => {
         cy.visit('/');
         login();
         cy.findByText('Upcoming Deal Revenue').should('exist');
-        cy.findByRole('list', { description: 'My Latest Notes' }).within(() => {
-            cy.findAllByRole('listitem').should('have.length.gt', 0);
-        });
-        cy.findByRole('list', { description: 'Hot contacts' }).within(() => {
-            cy.findAllByRole('listitem').should('have.length.gt', 0);
-        });
-        cy.findByRole('list', { description: 'Deals Pipeline' }).within(() => {
-            cy.findAllByRole('listitem').should('have.length.gt', 0);
-        });
+        cy.findByText('My Latest Notes').should('exist');
+        cy.findByText('Upcoming tasks').should('exist');
+        cy.findByText('Hot contacts').should('exist');
+        cy.findByTestId('my-latest-notes')
+            .find('p')
+            .should('have.length.gt', 0);
+        cy.findByTestId('tasks-list').find('li').should('have.length.gt', 0);
+        cy.findByTestId('hot-contacts').find('li').should('have.length.gt', 0);
     });
 });
diff --git a/cypress/e2e/lists.cy.ts b/cypress/e2e/lists.cy.ts
@@ -1,6 +1,7 @@
 import { login } from './login';
 
-const getPaginationText = () => cy.findByText(/\d+-\d+ of \d+/);
+const getPaginationText = () =>
+    cy.findByText(/\d+-\d+ of \d+/, { timeout: 10000 });
 
 describe('Lists', () => {
     it('should render a list', () => {
@@ -91,11 +92,23 @@ describe('Lists', () => {
         cy.visit('/');
         login();
         cy.findByText('Contacts').click();
-        cy.findAllByText(/\d+ days? ago/).should('have.length.greaterThan', 0);
-        cy.findAllByText(/\d+ years? ago/).should('have.length', 0);
+        cy.findAllByText(/\d+ days? ago/, { timeout: 10000 }).should(
+            'have.length.greaterThan',
+            0
+        );
+        cy.findAllByText(/\d+ years? ago/, { timeout: 10000 }).should(
+            'have.length',
+            0
+        );
         cy.findByText('Sort by Last seen descending').click();
         cy.findByText('Last seen ascending').click();
-        cy.findAllByText(/\d+ days? ago/).should('have.length', 0);
-        cy.findAllByText(/\d+ years? ago/).should('have.length.greaterThan', 0);
+        cy.findAllByText(/\d+ days? ago/, { timeout: 10000 }).should(
+            'have.length',
+            0
+        );
+        cy.findAllByText(/\d+ years? ago/, { timeout: 10000 }).should(
+            'have.length.greaterThan',
+            0
+        );
     });
 });
diff --git a/packages/demo/db-seed.ts b/packages/demo/db-seed.ts
@@ -91,10 +91,11 @@ async function main() {
                     new Date(a.date).valueOf() - new Date(b.date).valueOf()
             )
             .map(note => {
+                const relatedContact = persistedContacts.find(
+                    contact => contact.id === note.contact_id
+                );
                 return supabase.from('contacts').update({
-                    ...persistedContacts.find(
-                        contact => contact.id === note.contact_id
-                    ),
+                    ...relatedContact,
                     status: note.status,
                 });
             })
@@ -107,7 +108,7 @@ async function main() {
     });
     const { data: persistedDeals, error: errorDeals } = await supabase
         .from('deals')
-        .insert(deals.map(({ nb_notes, id, ...deal }) => deal))
+        .insert(deals.map(({ id, ...deal }) => deal))
         .select();
 
     if (errorDeals) {

diff --git a/packages/demo/index.html b/packages/demo/index.html
@@ -9,7 +9,7 @@
         <meta name="theme-color" content="#000000" />
         <link rel="manifest" href="./manifest.json" />
         <link rel="shortcut icon" href="./favicon.ico" />
-        <title>Posters Galore Administration</title>
+        <title>Atomic CRM</title>
         <style>
             body {
                 margin: 0;
@@ -121,6 +121,5 @@
             </div>
         </div>
     </body>
-    <script>window.global = window</script>
     <script type="module" src="/src/index.tsx"></script>
 </html>
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -3,6 +3,7 @@
     "version": "2.3.0",
     "private": true,
     "dependencies": {
+        "@hello-pangea/dnd": "^16.3.0",
         "@mui/icons-material": "^5.0.1",
         "@mui/material": "^5.15.20",
         "@nivo/bar": "^0.80.0",
@@ -29,15 +30,15 @@
         "@testing-library/jest-dom": "^6.4.5",
         "@testing-library/react": "^15.0.7",
         "@testing-library/user-event": "^14.4.3",
-        "@types/faker": "^5.1.7",
+        "@types/faker": "~5.1.7",
         "@types/jest": "^26.0.19",
         "@types/lodash": "~4.14.168",
         "@types/react": "^18.0.0",
         "@types/react-beautiful-dnd": "^13.0.0",
         "@types/react-dom": "^18.0.0",
         "source-map-explorer": "^2.0.0",
         "tsx": "^3.12.2",
-        "typescript": "^4.4.0",
+        "typescript": "^5.1.3",
         "web-vitals": "^1.0.1"
     },
     "scripts": {

diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx
@@ -63,7 +63,13 @@ const App = () => (
             <Resource name="contacts" {...contacts} />
             <Resource name="companies" {...companies} />
             <Resource name="tasks" list={ListGuesser} />
-            <Resource name="sales" list={ListGuesser} />
+            <Resource
+                name="sales"
+                list={ListGuesser}
+                recordRepresentation={(record: any) =>
+                    `${record.first_name} ${record.last_name}`
+                }
+            />
             <Resource name="tags" list={ListGuesser} />
         </Admin>
     </BrowserRouter>

diff --git a/packages/demo/src/Header.tsx b/packages/demo/src/Header.tsx
@@ -66,14 +66,8 @@ const Header = () => {
                                 />
                             </Tabs>
                         </Box>
-                        <Box display="flex">
-                            <LoadingIndicator
-                                sx={{
-                                    '& .RaLoadingIndicator-loader': {
-                                        marginTop: 2,
-                                    },
-                                }}
-                            />
+                        <Box display="flex" alignItems="center">
+                            <LoadingIndicator />
                             <UserMenu>
                                 <Logout />
                             </UserMenu>

diff --git a/packages/demo/src/Layout.tsx b/packages/demo/src/Layout.tsx
@@ -1,28 +1,26 @@
-import React, { HtmlHTMLAttributes } from 'react';
+import React, { Suspense, HtmlHTMLAttributes } from 'react';
 import { CssBaseline, Container } from '@mui/material';
-import { CoreLayoutProps } from 'react-admin';
+import { CoreLayoutProps, CheckForApplicationUpdate } from 'react-admin';
 import { ErrorBoundary } from 'react-error-boundary';
 
-import { Error } from 'react-admin';
+import { Error, Loading } from 'react-admin';
 import Header from './Header';
 
-const Layout = (props: LayoutProps) => {
-    const { children } = props;
-    return (
-        <>
-            <CssBaseline />
-            <Header />
-            <Container sx={{ maxWidth: { xl: 1280 } }}>
-                <main id="main-content">
-                    {/* @ts-ignore */}
-                    <ErrorBoundary FallbackComponent={Error}>
-                        {children}
-                    </ErrorBoundary>
-                </main>
-            </Container>
-        </>
-    );
-};
+const Layout = ({ children }: LayoutProps) => (
+    <>
+        <CssBaseline />
+        <Header />
+        <Container sx={{ maxWidth: { xl: 1280 } }}>
+            <main id="main-content">
+                {/* @ts-ignore */}
+                <ErrorBoundary FallbackComponent={Error}>
+                    <Suspense fallback={<Loading />}>{children}</Suspense>
+                </ErrorBoundary>
+            </main>
+        </Container>
+        <CheckForApplicationUpdate interval={30 * 1000} />
+    </>
+);
 
 export interface LayoutProps
     extends CoreLayoutProps,

diff --git a/packages/demo/src/companies/CompanyAside.tsx b/packages/demo/src/companies/CompanyAside.tsx
@@ -34,9 +34,19 @@ export const CompanyAside = ({ link = 'edit' }: CompanyAsideProps) => {
 
             <Box mt={2}>
                 <Typography variant="body2">
-                    Website: <Link href={record.website}>{record.website}</Link>
-                    <br />
-                    LinkedIn: <Link href={record.linkedIn}>LinkedIn</Link>
+                    {record.website && (
+                        <>
+                            Website:{' '}
+                            <Link href={record.website}>{record.website}</Link>
+                        </>
+                    )}
+                    {record.linkedIn && (
+                        <>
+                            <br />
+                            LinkedIn:{' '}
+                            <Link href={record.linkedIn}>LinkedIn</Link>
+                        </>
+                    )}
                 </Typography>
             </Box>
 
@@ -47,7 +57,7 @@ export const CompanyAside = ({ link = 'edit' }: CompanyAsideProps) => {
                     color="textSecondary"
                     component="span"
                 >
-                    Main
+                    Main Address
                 </Typography>
             </Box>
 
@@ -86,9 +96,7 @@ export const CompanyAside = ({ link = 'edit' }: CompanyAsideProps) => {
                     <FunctionField<Sale>
                         source="last_name"
                         render={record =>
-                            record
-                                ? `${record.first_name} ${record.last_name}`
-                                : ''
+                            `${record.first_name} ${record.last_name}`
                         }
                     />
                 </ReferenceField>

diff --git a/packages/demo/src/companies/CompanyCard.tsx b/packages/demo/src/companies/CompanyCard.tsx
@@ -1,24 +1,40 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Paper, Typography, Link as MuiLink, Box } from '@mui/material';
+import { Paper, Typography, Box } from '@mui/material';
 import ContactsIcon from '@mui/icons-material/AccountCircle';
 import DealIcon from '@mui/icons-material/MonetizationOn';
-import { useCreatePath, SelectField, useRecordContext } from 'react-admin';
-import { Link } from 'react-router-dom';
+import {
+    useCreatePath,
+    SelectField,
+    useRecordContext,
+    Link,
+} from 'react-admin';
 
 import { sectors } from './sectors';
 import { CompanyAvatar } from './CompanyAvatar';
 import { Company } from '../types';
+import { useNbRelations } from '../misc/useNbRelations';
 
 export const CompanyCard = (props: { record?: Company }) => {
     const [elevation, setElevation] = useState(1);
     const createPath = useCreatePath();
     const record = useRecordContext<Company>(props);
+    const { total: nb_contacts } = useNbRelations({
+        label: 'Contact',
+        reference: 'contacts',
+        target: 'company_id',
+        record,
+    });
+    const { total: nb_deals } = useNbRelations({
+        label: 'Deal',
+        reference: 'deals',
+        target: 'company_id',
+        record,
+    });
     if (!record) return null;
 
     return (
-        <MuiLink
-            component={Link}
+        <Link
             to={createPath({
                 resource: 'companies',
                 id: record.id,
@@ -57,28 +73,26 @@ export const CompanyCard = (props: { record?: Company }) => {
                         <ContactsIcon color="disabled" sx={{ mr: 1 }} />
                         <div>
                             <Typography variant="subtitle2" sx={{ mb: -1 }}>
-                                {record.nb_contacts}
+                                {nb_contacts}
                             </Typography>
                             <Typography variant="caption" color="textSecondary">
-                                {record.nb_contacts > 1
-                                    ? 'contacts'
-                                    : 'contact'}
+                                {nb_contacts > 1 ? 'contacts' : 'contact'}
                             </Typography>
                         </div>
                     </Box>
                     <Box sx={{ display: 'flex', alignItems: 'center' }}>
                         <DealIcon color="disabled" sx={{ mr: 1 }} />
                         <div>
                             <Typography variant="subtitle2" sx={{ mb: -1 }}>
-                                {record.nb_deals}
+                                {nb_deals}
                             </Typography>
                             <Typography variant="caption" color="textSecondary">
-                                {record.nb_deals > 1 ? 'deals' : 'deal'}
+                                {nb_deals > 1 ? 'deals' : 'deal'}
                             </Typography>
                         </div>
                     </Box>
                 </Box>
             </Paper>
-        </MuiLink>
+        </Link>
     );
 };
diff --git a/packages/demo/src/companies/CompanyEdit.tsx b/packages/demo/src/companies/CompanyEdit.tsx
@@ -7,29 +7,20 @@ import { CompanyForm } from './CompanyForm';
 import { CompanyAside } from './CompanyAside';
 import { LogoField } from './LogoField';
 
-export const CompanyEdit = () => {
-    return (
-        <Edit
-            aside={<CompanyAside link="show" />}
-            actions={false}
-            redirect="show"
-            // Remove the fts (full text search) column as it is a generated one
-            // see https://www.postgresql.org/docs/current/ddl-generated-columns.html
-            transform={({ fts, ...record }) => record}
-        >
-            <Form>
-                <CardContent>
-                    <Stack direction="row">
-                        <Avatar sx={{ mt: 1 }}>
-                            <LogoField />
-                        </Avatar>
-                        <Box ml={2} flex="1" maxWidth={796}>
-                            <CompanyForm />
-                        </Box>
-                    </Stack>
-                </CardContent>
-                <Toolbar />
-            </Form>
-        </Edit>
-    );
-};
+export const CompanyEdit = () => (
+    <Edit aside={<CompanyAside link="show" />} actions={false} redirect="show">
+        <Form>
+            <CardContent>
+                <Stack direction="row">
+                    <Avatar sx={{ mt: 1 }}>
+                        <LogoField />
+                    </Avatar>
+                    <Box ml={2} flex="1" maxWidth={796}>
+                        <CompanyForm />
+                    </Box>
+                </Stack>
+            </CardContent>
+            <Toolbar />
+        </Form>
+    </Edit>
+);
diff --git a/packages/demo/src/companies/CompanyListFilter.tsx b/packages/demo/src/companies/CompanyListFilter.tsx
@@ -17,8 +17,8 @@ import { sectors } from './sectors';
 export const CompanyListFilter = () => {
     const { identity } = useGetIdentity();
     return (
-        <Box width="13em" minWidth="13em" order={-1} mr={2} mt={7}>
-            <FilterLiveSearch source="fts@fts" />
+        <Box width="13em" minWidth="13em" order={-1} mr={2} mt={5}>
+            <FilterLiveSearch source="fts@fts" hiddenLabel />
 
             <FilterList label="Size" icon={<BusinessIcon />}>
                 {sizes.map(size => (