Admin UI: cleaned up handling of admin meta

- Refactored admin meta to use a React context
- Stopped passing around the entire admin meta object through props by making use of useAdminMeta

.changeset/pink-tips-live.md

@@ -0,0 +1,5 @@
+---
+'@keystonejs/app-admin-ui': patch
+---
+
+Cleaned up handling of admin metadata.

packages/app-admin-ui/client/index.js

@@ -14,7 +14,7 @@ import ConnectivityListener from './components/ConnectivityListener';
 import KeyboardShortcuts from './components/KeyboardShortcuts';
 import PageLoading from './components/PageLoading';
 import ToastContainer from './components/ToastContainer';
-import { useAdminMeta } from './providers/AdminMeta';
+import { AdminMetaProvider, useAdminMeta } from './providers/AdminMeta';
 import { ListProvider } from './providers/List';
 import { HooksProvider } from './providers/Hooks';
 
@@ -26,8 +26,15 @@ import InvalidRoutePage from './pages/InvalidRoute';
 import SignoutPage from './pages/Signout';
 
 export const KeystoneAdminUI = () => {
-  let adminMeta = useAdminMeta();
-  let { adminPath, signinPath, signoutPath, apiPath, pages, hooks } = adminMeta;
+  const {
+    getListByPath,
+    adminPath,
+    signinPath,
+    signoutPath,
+    apiPath,
+    pages,
+    hooks,
+  } = useAdminMeta();
 
   const apolloClient = useMemo(() => new ApolloClient({ uri: apiPath }), [apiPath]);
 
@@ -47,7 +54,7 @@ export const KeystoneAdminUI = () => {
       }),
     {
       path: `${adminPath}`,
-      component: () => <HomePage {...adminMeta} />,
+      component: () => <HomePage />,
       exact: true,
     },
     {
@@ -59,9 +66,9 @@ export const KeystoneAdminUI = () => {
       }) => {
         // TODO: Permission query to show/hide a list from the
         // menu
-        const list = adminMeta.getListByPath(listKey);
+        const list = getListByPath(listKey);
         if (!list) {
-          return <ListNotFoundPage listKey={listKey} {...adminMeta} />;
+          return <ListNotFoundPage listKey={listKey} />;
         }
 
         return (
@@ -71,12 +78,7 @@ export const KeystoneAdminUI = () => {
                 exact
                 path={`${adminPath}/:list`}
                 render={routeProps => (
-                  <ListPage
-                    key={listKey}
-                    list={list}
-                    adminMeta={adminMeta}
-                    routeProps={routeProps}
-                  />
+                  <ListPage key={listKey} list={list} routeProps={routeProps} />
                 )}
               />
               ,
@@ -87,17 +89,10 @@ export const KeystoneAdminUI = () => {
                   match: {
                     params: { itemId },
                   },
-                }) => (
-                  <ItemPage
-                    key={`${listKey}-${itemId}`}
-                    list={list}
-                    itemId={itemId}
-                    {...adminMeta}
-                  />
-                )}
+                }) => <ItemPage key={`${listKey}-${itemId}`} list={list} itemId={itemId} />}
               />
               ,
-              <Route render={() => <InvalidRoutePage {...adminMeta} />} />,
+              <Route render={() => <InvalidRoutePage />} />,
             </Switch>
           </ListProvider>
         );
@@ -117,22 +112,20 @@ export const KeystoneAdminUI = () => {
                 <Route exact path={signinPath}>
                   <Redirect to={adminPath} />
                 </Route>
-                <Route exact path={signoutPath} render={() => <SignoutPage {...adminMeta} />} />
+                <Route exact path={signoutPath} render={() => <SignoutPage />} />
                 <Route>
                   <ScrollToTop>
                     <Nav>
                       <Suspense fallback={<PageLoading />}>
                         <Switch>
-                          {routes.map(route => {
-                            return (
-                              <Route
-                                exact={route.exact ? true : false}
-                                key={route.path}
-                                path={route.path}
-                                render={route.component}
-                              />
-                            );
-                          })}
+                          {routes.map(route => (
+                            <Route
+                              exact={route.exact ? true : false}
+                              key={route.path}
+                              path={route.path}
+                              render={route.component}
+                            />
+                          ))}
                         </Switch>
                       </Suspense>
                     </Nav>
@@ -149,7 +142,9 @@ export const KeystoneAdminUI = () => {
 
 ReactDOM.render(
   <Suspense fallback={null}>
-    <KeystoneAdminUI />
+    <AdminMetaProvider>
+      <KeystoneAdminUI />
+    </AdminMetaProvider>
   </Suspense>,
   document.getElementById('app')
 );

packages/app-admin-ui/client/pages/Home/index.js

@@ -12,42 +12,44 @@ import { Box, HeaderInset } from './components';
 import ContainerQuery from '../../components/ContainerQuery';
 import { gqlCountQueries } from '../../classes/List';
 
-const HomePage = ({ lists, data, adminPath }) => {
-  return (
-    <main>
-      <Container>
-        <HeaderInset>
-          <PageTitle>Dashboard</PageTitle>
-        </HeaderInset>
-        <ContainerQuery>
-          {({ width }) => {
-            let cellWidth = 3;
-            if (width < 1024) cellWidth = 4;
-            if (width < 768) cellWidth = 6;
-            if (width < 480) cellWidth = 12;
-            return (
-              <Grid gap={16}>
-                {lists.map(list => {
-                  const { key, path } = list;
-                  const meta = data && data[list.gqlNames.listQueryMetaName];
-                  return (
-                    <ListProvider list={list} key={key}>
-                      <Cell width={cellWidth}>
-                        <Box to={`${adminPath}/${path}`} meta={meta} />
-                      </Cell>
-                    </ListProvider>
-                  );
-                })}
-              </Grid>
-            );
-          }}
-        </ContainerQuery>
-      </Container>
-    </main>
-  );
-};
+import { useAdminMeta } from '../../providers/AdminMeta';
+
+const HomePage = ({ lists, data, adminPath }) => (
+  <main>
+    <Container>
+      <HeaderInset>
+        <PageTitle>Dashboard</PageTitle>
+      </HeaderInset>
+      <ContainerQuery>
+        {({ width }) => {
+          let cellWidth = 3;
+          if (width < 1024) cellWidth = 4;
+          if (width < 768) cellWidth = 6;
+          if (width < 480) cellWidth = 12;
+          return (
+            <Grid gap={16}>
+              {lists.map(list => {
+                const { key, path } = list;
+                const meta = data && data[list.gqlNames.listQueryMetaName];
+                return (
+                  <ListProvider list={list} key={key}>
+                    <Cell width={cellWidth}>
+                      <Box to={`${adminPath}/${path}`} meta={meta} />
+                    </Cell>
+                  </ListProvider>
+                );
+              })}
+            </Grid>
+          );
+        }}
+      </ContainerQuery>
+    </Container>
+  </main>
+);
+
+const HomepageListProvider = () => {
+  const { getListByKey, listKeys, adminPath } = useAdminMeta();
 
-const HomepageListProvider = ({ getListByKey, listKeys, ...props }) => {
   // TODO: A permission query to limit which lists are visible
   const lists = listKeys.map(key => getListByKey(key));
 
@@ -109,7 +111,7 @@ const HomepageListProvider = ({ getListByKey, listKeys, ...props }) => {
         // list component so we don't block rendering the lists immediately
         // to the user.
       }
-      <HomePage lists={allowedLists} data={data} {...props} />
+      <HomePage lists={allowedLists} data={data} adminPath={adminPath} />
     </Fragment>
   );
 };

packages/app-admin-ui/client/pages/InvalidRoute.js

@@ -3,11 +3,17 @@ import React from 'react';
 import PageError from '../components/PageError';
 import { Button } from '@arch-ui/button';
 
-const InvalidRoutePage = ({ adminPath }) => (
-  <PageError>
-    <p>Page Not Found (404)</p>
-    <Button to={adminPath}>Go Home</Button>
-  </PageError>
-);
+import { useAdminMeta } from '../providers/AdminMeta';
+
+const InvalidRoutePage = () => {
+  const { adminPath } = useAdminMeta();
+
+  return (
+    <PageError>
+      <p>Page Not Found (404)</p>
+      <Button to={adminPath}>Go Home</Button>
+    </PageError>
+  );
+};
 
 export default InvalidRoutePage;

packages/app-admin-ui/client/pages/Item/index.js

@@ -36,6 +36,7 @@ import {
 } from '../../util';
 import { ItemTitle } from './ItemTitle';
 import { ItemProvider } from '../../providers/Item';
+import { useAdminMeta } from '../../providers/AdminMeta';
 
 let Render = ({ children }) => children();
 
@@ -358,10 +359,12 @@ const ItemNotFound = ({ adminPath, errorMessage, list }) => (
   </PageError>
 );
 
-const ItemPage = ({ list, itemId, adminPath, getListByKey }) => {
-  const itemQuery = list.getItemQuery(itemId);
+const ItemPage = ({ list, itemId }) => {
+  const { adminPath, getListByKey } = useAdminMeta();
   const { addToast } = useToasts();
 
+  const itemQuery = list.getItemQuery(itemId);
+
   // network-only because the data we mutate with is important for display
   // in the UI, and may be different than what's in the cache
   // NOTE: We specifically trigger this query here, before the later code which

packages/app-admin-ui/client/pages/List/index.js

@@ -31,19 +31,21 @@ import Management, { ManageToolbar } from './Management';
 import { useListFilter, useListSelect, useListSort, useListUrlState } from './dataHooks';
 import { captureSuspensePromises } from '@keystonejs/utils';
 
+import { useAdminMeta } from '../../providers/AdminMeta';
+
 const HeaderInset = props => (
   <div css={{ paddingLeft: gridSize * 2, paddingRight: gridSize * 2 }} {...props} />
 );
 
 export function ListLayout(props) {
-  const { adminMeta, items, itemCount, queryErrors, routeProps, query } = props;
+  const { items, itemCount, queryErrors, routeProps, query } = props;
   const measureElementRef = useRef();
   const { list, openCreateItemModal } = useList();
   const { urlState } = useListUrlState(list.key);
   const { filters } = useListFilter(list.key);
   const [sortBy, handleSortChange] = useListSort(list.key);
 
-  const { adminPath } = adminMeta;
+  const { adminPath } = useAdminMeta();
   const { history, location } = routeProps;
   const { currentPage, fields, pageSize, search } = urlState;
 

packages/app-admin-ui/client/pages/ListNotFound.js

@@ -4,17 +4,23 @@ import PageError from '../components/PageError';
 import { Button } from '@arch-ui/button';
 import { IssueOpenedIcon } from '@arch-ui/icons';
 
-const ListNotFoundPage = ({ listKey, adminPath }) => (
-  <PageError Icon={IssueOpenedIcon}>
-    <p>
-      The list &ldquo;
-      {listKey}
-      &rdquo; doesn&apos;t exist
-    </p>
-    <Button to={adminPath} variant="ghost">
-      Go Home
-    </Button>
-  </PageError>
-);
+import { useAdminMeta } from '../providers/AdminMeta';
+
+const ListNotFoundPage = ({ listKey }) => {
+  const { adminPath } = useAdminMeta();
+
+  return (
+    <PageError Icon={IssueOpenedIcon}>
+      <p>
+        The list &ldquo;
+        {listKey}
+        &rdquo; doesn&apos;t exist
+      </p>
+      <Button to={adminPath} variant="ghost">
+        Go Home
+      </Button>
+    </PageError>
+  );
+};
 
 export default ListNotFoundPage;

packages/app-admin-ui/client/pages/Signin.js

@@ -12,6 +12,8 @@ import gql from 'graphql-tag';
 
 import KeystoneLogo from '../components/KeystoneLogo';
 
+import { useAdminMeta } from '../providers/AdminMeta';
+
 const upcase = str => str[0].toUpperCase() + str.substring(1);
 
 const Container = styled.div({
@@ -66,7 +68,12 @@ const Spacer = styled.div({
   height: 120,
 });
 
-const SignInPage = ({ name: siteName, authStrategy: { listKey, identityField, secretField } }) => {
+const SignInPage = () => {
+  const {
+    name: siteName,
+    authStrategy: { listKey, identityField, secretField },
+  } = useAdminMeta();
+
   const [identity, setIdentity] = useState('');
   const [secret, setSecret] = useState('');
   const [reloading, setReloading] = useState(false);

packages/app-admin-ui/client/pages/Signout.js

@@ -8,6 +8,8 @@ import KeystoneLogo from '../components/KeystoneLogo';
 
 import { LoadingIndicator } from '@arch-ui/loading';
 
+import { useAdminMeta } from '../providers/AdminMeta';
+
 const Container = styled.div({
   alignItems: 'center',
   display: 'flex',
@@ -52,7 +54,12 @@ const Spacer = styled.div({
   height: 120,
 });
 
-const SignedOutPage = ({ authStrategy: { listKey }, signinPath }) => {
+const SignedOutPage = () => {
+  const {
+    authStrategy: { listKey },
+    signinPath,
+  } = useAdminMeta();
+
   const UNAUTH_MUTATION = gql`
     mutation {
       unauthenticate: unauthenticate${listKey} {