From 6fdda940ebf6f11948f2a70612917108d6b5d506 Mon Sep 17 00:00:00 2001 From: Charles Dang Date: Sat, 23 May 2020 15:20:39 +1100 Subject: [PATCH 1/9] Admin UI: cleaned up react-router usage to match latest recommendations --- .changeset/wild-mirrors-leave.md | 5 + packages/app-admin-ui/client/index.js | 142 ++++++------------ .../app-admin-ui/client/pages/Home/index.js | 54 +++---- .../app-admin-ui/client/pages/Item/index.js | 5 +- .../app-admin-ui/client/pages/ListNotFound.js | 6 +- packages/app-admin-ui/client/pages/NoLists.js | 22 +++ 6 files changed, 104 insertions(+), 130 deletions(-) create mode 100644 .changeset/wild-mirrors-leave.md create mode 100644 packages/app-admin-ui/client/pages/NoLists.js diff --git a/.changeset/wild-mirrors-leave.md b/.changeset/wild-mirrors-leave.md new file mode 100644 index 00000000000..8d4d97a1f80 --- /dev/null +++ b/.changeset/wild-mirrors-leave.md @@ -0,0 +1,5 @@ +--- +'@keystonejs/app-admin-ui': patch +--- + +Cleaned up react-router usage to match latest recommendations. diff --git a/packages/app-admin-ui/client/index.js b/packages/app-admin-ui/client/index.js index 2b6e2471860..c5d0198a13b 100644 --- a/packages/app-admin-ui/client/index.js +++ b/packages/app-admin-ui/client/index.js @@ -1,12 +1,11 @@ -import React, { Fragment, Suspense, useMemo } from 'react'; +import React, { Suspense, useMemo } from 'react'; import ReactDOM from 'react-dom'; import { ApolloProvider } from '@apollo/react-hooks'; -import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'; +import { BrowserRouter, Redirect, Route, Switch, useParams } from 'react-router-dom'; import { ToastProvider } from 'react-toast-notifications'; import { Global } from '@emotion/core'; import { globalStyles } from '@arch-ui/theme'; -import { InfoIcon } from '@arch-ui/icons'; import { initApolloClient } from './apolloClient'; import Nav from './components/Nav'; @@ -15,8 +14,6 @@ import ConnectivityListener from './components/ConnectivityListener'; import KeyboardShortcuts from './components/KeyboardShortcuts'; import PageLoading from './components/PageLoading'; import ToastContainer from './components/ToastContainer'; -import DocTitle from './components/DocTitle'; -import PageError from './components/PageError'; import { AdminMetaProvider, useAdminMeta } from './providers/AdminMeta'; import { ListProvider } from './providers/List'; import { HooksProvider } from './providers/Hooks'; @@ -26,94 +23,54 @@ import ListPage from './pages/List'; import ListNotFoundPage from './pages/ListNotFound'; import ItemPage from './pages/Item'; import InvalidRoutePage from './pages/InvalidRoute'; +import NoListsPage from './pages/NoLists'; import SignoutPage from './pages/Signout'; +const HomePageWrapper = () => { + const { listKeys } = useAdminMeta(); + + // TODO: handle case where there are no lists you have permission to view + // Perhaps handle that in HomePage + if (listKeys.length === 0) { + return ; + } + + return ; +}; + +const ListPageWrapper = () => { + const { getListByPath, adminPath } = useAdminMeta(); + const { listKey } = useParams(); + + // TODO: Permission query to show/hide a list from the menu + const list = getListByPath(listKey); + if (!list) { + return ; + } + + return ( + + + } /> + } /> + } />, + + + ); +}; + export const KeystoneAdminUI = () => { - const { - listKeys, - getListByPath, - adminPath, - signinPath, - signoutPath, - apiPath, - pages, - hooks, - } = useAdminMeta(); + const { adminPath, signinPath, signoutPath, apiPath, pages, hooks } = useAdminMeta(); const apolloClient = useMemo(() => initApolloClient({ uri: apiPath }), [apiPath]); - const routes = [ + const customRoutes = [ ...pages - .filter(page => typeof page.path === 'string') - .map(page => { - const Page = page.component; - const config = page.config || {}; - return { - path: `${adminPath}/${page.path}`, - component: () => { - return ; - }, - exact: true, - }; - }), - { - path: `${adminPath}`, - component: () => { - if (listKeys.length === 0) { - return ( - - - -

- No lists defined.{' '} - - Get started by creating your first list. - -

- - - ); - } - - return ; - }, - exact: true, - }, - { - path: `${adminPath}/:listKey`, - component: ({ - match: { - params: { listKey }, - }, - }) => { - // TODO: Permission query to show/hide a list from the - // menu - const list = getListByPath(listKey); - if (!list) { - return ; - } - - return ( - - - } /> - , - } - /> - , - } />, - - - ); - }, - }, + .filter(({ path }) => typeof path === 'string') + .map(({ component: Page, config = {}, path }) => ({ + path: `${adminPath}/${path}`, + children: , + })), ]; return ( @@ -128,20 +85,17 @@ export const KeystoneAdminUI = () => { - } /> + } /> diff --git a/packages/app-admin-ui/client/pages/Home/index.js b/packages/app-admin-ui/client/pages/Home/index.js index 4b629645dcd..51e70cda513 100644 --- a/packages/app-admin-ui/client/pages/Home/index.js +++ b/packages/app-admin-ui/client/pages/Home/index.js @@ -1,4 +1,4 @@ -import React, { Fragment, useState, useMemo } from 'react'; +import React, { useState, useMemo } from 'react'; import { useQuery } from '@apollo/react-hooks'; import { Container, Grid, Cell } from '@arch-ui/layout'; @@ -81,36 +81,32 @@ const Homepage = () => { ); } + // NOTE: `loading` is intentionally omitted here + // the display of a loading indicator for counts is deferred to the + // list component so we don't block rendering the lists immediately + // to the user. return ( - +
- { - // NOTE: `loading` is intentionally omitted here - // the display of a loading indicator for counts is deferred to the - // list component so we don't block rendering the lists immediately - // to the user. - } -
- - - Dashboard - - - {allowedLists.map(list => { - const { key, path } = list; - const meta = data && data[list.gqlNames.listQueryMetaName]; - return ( - - - - - - ); - })} - - -
- + + + Dashboard + + + {allowedLists.map(list => { + const { key, path } = list; + const meta = data && data[list.gqlNames.listQueryMetaName]; + return ( + + + + + + ); + })} + + +
); }; diff --git a/packages/app-admin-ui/client/pages/Item/index.js b/packages/app-admin-ui/client/pages/Item/index.js index 01efaebc2ea..6b30a33b46b 100644 --- a/packages/app-admin-ui/client/pages/Item/index.js +++ b/packages/app-admin-ui/client/pages/Item/index.js @@ -2,7 +2,7 @@ import { jsx } from '@emotion/core'; import { Fragment, Suspense, useMemo, useCallback, useState, useRef, useEffect } from 'react'; import { useMutation, useQuery } from '@apollo/react-hooks'; -import { useHistory } from 'react-router-dom'; +import { useHistory, useParams } from 'react-router-dom'; import { useToasts } from 'react-toast-notifications'; import memoizeOne from 'memoize-one'; @@ -336,7 +336,8 @@ const ItemNotFound = ({ errorMessage, list }) => ( ); -const ItemPage = ({ itemId }) => { +const ItemPage = () => { + const { itemId } = useParams(); const { list } = useList(); // network-only because the data we mutate with is important for display diff --git a/packages/app-admin-ui/client/pages/ListNotFound.js b/packages/app-admin-ui/client/pages/ListNotFound.js index 20f5c0e8f58..5f96cfb51d7 100644 --- a/packages/app-admin-ui/client/pages/ListNotFound.js +++ b/packages/app-admin-ui/client/pages/ListNotFound.js @@ -11,11 +11,7 @@ const ListNotFoundPage = ({ listKey }) => { return ( -

- The list “ - {listKey} - ” doesn't exist -

+

{`The list “${listKey}” does not exist`}

diff --git a/packages/app-admin-ui/client/pages/NoLists.js b/packages/app-admin-ui/client/pages/NoLists.js new file mode 100644 index 00000000000..935aefd3b25 --- /dev/null +++ b/packages/app-admin-ui/client/pages/NoLists.js @@ -0,0 +1,22 @@ +import React from 'react'; + +import DocTitle from '../components/DocTitle'; +import PageError from '../components/PageError'; + +import { InfoIcon } from '@arch-ui/icons'; + +const NoListsPage = () => { + return ( + + +

+ No lists defined.{' '} + + Get started by creating your first list. + +

+ + ); +}; + +export default NoListsPage; From 1f8c6c50ebaecdb8e283d08031a8f3b2af406e22 Mon Sep 17 00:00:00 2001 From: Charles Dang Date: Sat, 23 May 2020 15:27:20 +1100 Subject: [PATCH 2/9] Fixup --- packages/app-admin-ui/client/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app-admin-ui/client/index.js b/packages/app-admin-ui/client/index.js index c5d0198a13b..d363a201b50 100644 --- a/packages/app-admin-ui/client/index.js +++ b/packages/app-admin-ui/client/index.js @@ -92,7 +92,7 @@ export const KeystoneAdminUI = () => { }> {customRoutes.map(({ path, children }) => ( - + ))} } /> } /> From 490c785af567de20c5847ed0b713e5c2dc63d7fc Mon Sep 17 00:00:00 2001 From: Charles Dang Date: Sat, 23 May 2020 15:30:58 +1100 Subject: [PATCH 3/9] Removed comment --- packages/app-admin-ui/client/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/app-admin-ui/client/index.js b/packages/app-admin-ui/client/index.js index d363a201b50..53355c9c4d2 100644 --- a/packages/app-admin-ui/client/index.js +++ b/packages/app-admin-ui/client/index.js @@ -29,8 +29,6 @@ import SignoutPage from './pages/Signout'; const HomePageWrapper = () => { const { listKeys } = useAdminMeta(); - // TODO: handle case where there are no lists you have permission to view - // Perhaps handle that in HomePage if (listKeys.length === 0) { return ; } From a9658fb90395d5199691a3d4c130a515c8aca7c1 Mon Sep 17 00:00:00 2001 From: Charles Dang Date: Sat, 23 May 2020 15:41:24 +1100 Subject: [PATCH 4/9] Fixup tests --- .../access-control/cypress/integration/list/admin-ui.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test-projects/access-control/cypress/integration/list/admin-ui.js b/test-projects/access-control/cypress/integration/list/admin-ui.js index 9e3db220291..f1c98f97485 100644 --- a/test-projects/access-control/cypress/integration/list/admin-ui.js +++ b/test-projects/access-control/cypress/integration/list/admin-ui.js @@ -35,7 +35,7 @@ describe('Access Control Lists > Admin UI', () => { cy.visit(`admin/${slug}`); - cy.get('body').should('contain', `The list “${slug}” doesn't exist`); + cy.get('body').should('contain', `The list “${slug}” does not exist`); }); it(`is visible when readable`, () => { @@ -49,7 +49,7 @@ describe('Access Control Lists > Admin UI', () => { cy.visit(`/admin/${slug}`); - cy.get('body').should('not.contain', `The list “${slug}” doesn't exist`); + cy.get('body').should('not.contain', `The list “${slug}” does not exist`); cy.get('body h1').should('contain', prettyName); }); }); From 03fd21dbef00a17dcbacf850a4cb699d7fa305b2 Mon Sep 17 00:00:00 2001 From: Charles Dang Date: Sun, 24 May 2020 12:48:00 +1100 Subject: [PATCH 5/9] Split a thing --- packages/app-admin-ui/client/index.js | 45 ++++++++++++++++----------- 1 file changed, 26 insertions(+), 19 deletions(-) diff --git a/packages/app-admin-ui/client/index.js b/packages/app-admin-ui/client/index.js index 53355c9c4d2..7b37bb6ec8a 100644 --- a/packages/app-admin-ui/client/index.js +++ b/packages/app-admin-ui/client/index.js @@ -1,6 +1,7 @@ import React, { Suspense, useMemo } from 'react'; import ReactDOM from 'react-dom'; import { ApolloProvider } from '@apollo/react-hooks'; +import gql from 'graphql-tag'; import { BrowserRouter, Redirect, Route, Switch, useParams } from 'react-router-dom'; import { ToastProvider } from 'react-toast-notifications'; import { Global } from '@emotion/core'; @@ -57,10 +58,8 @@ const ListPageWrapper = () => { ); }; -export const KeystoneAdminUI = () => { - const { adminPath, signinPath, signoutPath, apiPath, pages, hooks } = useAdminMeta(); - - const apolloClient = useMemo(() => initApolloClient({ uri: apiPath }), [apiPath]); +const MainPageWrapper = () => { + const { adminPath, pages } = useAdminMeta(); const customRoutes = [ ...pages @@ -71,6 +70,28 @@ export const KeystoneAdminUI = () => { })), ]; + return ( + + + + ); +}; + +export const KeystoneAdminUI = () => { + const { adminPath, signinPath, signoutPath, apiPath, hooks } = useAdminMeta(); + + const apolloClient = useMemo(() => initApolloClient({ uri: apiPath }), [apiPath]); + return ( @@ -84,21 +105,7 @@ export const KeystoneAdminUI = () => { } /> - - - - - + } /> From baad3619206fe86ee9007fb98f0e6a809bcc328f Mon Sep 17 00:00:00 2001 From: Charles Dang Date: Sun, 24 May 2020 12:58:31 +1100 Subject: [PATCH 6/9] Fixup --- packages/app-admin-ui/client/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/app-admin-ui/client/index.js b/packages/app-admin-ui/client/index.js index 7b37bb6ec8a..c561de62850 100644 --- a/packages/app-admin-ui/client/index.js +++ b/packages/app-admin-ui/client/index.js @@ -1,7 +1,6 @@ import React, { Suspense, useMemo } from 'react'; import ReactDOM from 'react-dom'; import { ApolloProvider } from '@apollo/react-hooks'; -import gql from 'graphql-tag'; import { BrowserRouter, Redirect, Route, Switch, useParams } from 'react-router-dom'; import { ToastProvider } from 'react-toast-notifications'; import { Global } from '@emotion/core'; From 1998b0531c246cf181f81646e86ca62b4e579510 Mon Sep 17 00:00:00 2001 From: Charles Dang Date: Sun, 24 May 2020 16:21:33 +1100 Subject: [PATCH 7/9] Include public routes --- packages/app-admin-ui/client/public.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app-admin-ui/client/public.js b/packages/app-admin-ui/client/public.js index 1b4bc696725..905a7b6aa4f 100644 --- a/packages/app-admin-ui/client/public.js +++ b/packages/app-admin-ui/client/public.js @@ -39,8 +39,8 @@ const Keystone = () => { {authStrategy ? ( - } /> - } /> + } /> + } /> ) : ( From d1d8029c6e8e5e69ab68b3490a10628afdbcfab6 Mon Sep 17 00:00:00 2001 From: Charles Dang Date: Sun, 24 May 2020 18:08:05 +1100 Subject: [PATCH 8/9] Foo --- packages/app-admin-ui/client/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/app-admin-ui/client/index.js b/packages/app-admin-ui/client/index.js index c561de62850..e4f95d2fd52 100644 --- a/packages/app-admin-ui/client/index.js +++ b/packages/app-admin-ui/client/index.js @@ -100,9 +100,7 @@ export const KeystoneAdminUI = () => { - - - + } /> } /> } /> From 64c1446428001eacfdc84b2f095d84c05b965e25 Mon Sep 17 00:00:00 2001 From: Charles Dang Date: Sun, 24 May 2020 19:14:13 +1100 Subject: [PATCH 9/9] sdsd --- packages/app-admin-ui/client/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/app-admin-ui/client/index.js b/packages/app-admin-ui/client/index.js index e4f95d2fd52..5f1baba3b39 100644 --- a/packages/app-admin-ui/client/index.js +++ b/packages/app-admin-ui/client/index.js @@ -14,6 +14,7 @@ import ConnectivityListener from './components/ConnectivityListener'; import KeyboardShortcuts from './components/KeyboardShortcuts'; import PageLoading from './components/PageLoading'; import ToastContainer from './components/ToastContainer'; + import { AdminMetaProvider, useAdminMeta } from './providers/AdminMeta'; import { ListProvider } from './providers/List'; import { HooksProvider } from './providers/Hooks';