Makes adminPath customizable for adminUI

keystonejs · Apr 22, 2018 · 00fae4f · 00fae4f
1 parent 1928b61
commit 00fae4f
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 32 deletions.
diff --git a/packages/admin-ui/client/components/ListTable.js b/packages/admin-ui/client/components/ListTable.js
@@ -25,7 +25,8 @@ class ListTableRow extends Component {
 
 export default class ListTable extends Component {
   render() {
-    const { items, fields, list, noResultsMessage } = this.props;
+    const { items, fields, list, noResultsMessage, adminPath } = this.props;
+
     return items.length ? (
       <Table>
         <thead>
@@ -39,7 +40,7 @@ export default class ListTable extends Component {
           {items.map(item => (
             <ListTableRow
               key={item.id}
-              link={`/admin/${list.path}/${item.id}`}
+              link={`${adminPath}/${list.path}/${item.id}`}
               fields={fields}
               item={item}
             />

diff --git a/packages/admin-ui/client/components/Nav.js b/packages/admin-ui/client/components/Nav.js
@@ -40,25 +40,25 @@ const NavItem = styled(Link)({
 
 class Home extends Component {
   render() {
-    const { lists, listKeys } = this.props;
+    const { lists, listKeys, adminPath } = this.props;
     return (
       <NavBar>
         <Container>
           <FlexProvider>
             <Group>
-              <NavItem to="/admin">Home</NavItem>
+              <NavItem to={adminPath}>Home</NavItem>
               {listKeys.map(key => {
                 const list = lists[key];
                 return (
                   <Fragment key={key}>
                     <Separator />
-                    <NavItem to={`/admin/${list.path}`}>{list.label}</NavItem>
+                    <NavItem to={`${adminPath}/${list.path}`}>{list.label}</NavItem>
                   </Fragment>
                 );
               })}
             </Group>
             <Group>
-              <NavItem to="/admin/signin">Sign Out</NavItem>
+              <NavItem to={`${adminPath}/signin`}>Sign Out</NavItem>
             </Group>
           </FlexProvider>
         </Container>

diff --git a/packages/admin-ui/client/index.js b/packages/admin-ui/client/index.js
@@ -22,39 +22,40 @@ import StyleGuidePage from './pages/StyleGuide';
 const Keystone = () => (
   <ApolloProvider client={apolloClient}>
     <AdminMetaProvider>
-      {adminMeta => (
-        <BrowserRouter>
+      {adminMeta => {
+        const { adminPath } = adminMeta;
+        return (<BrowserRouter>
           <ScrollToTop>
             <Switch>
               <Route
                 exact
-                path="/admin/style-guide"
+                path={`${adminPath}/style-guide`}
                 component={StyleGuidePage}
               />
               <Route
                 exact
-                path="/admin/signin"
+                path={`${adminPath}/signin`}
                 render={() => <SessionPage {...adminMeta} />}
               />
               <Route
                 exact
-                path="/admin"
+                path={`${adminPath}`}
                 render={() => <HomePage {...adminMeta} />}
               />
               <Route
-                path="/admin/:listKey"
+                path={`${adminPath}/:listKey`}
                 render={({ match: { params: { listKey } } }) => {
                   const list = adminMeta.getListByPath(listKey);
                   return list ? (
                     <Switch>
                       <Route
                         exact
-                        path="/admin/:list"
+                        path={`${adminPath}/:list`}
                         render={() => <ListPage list={list} {...adminMeta} />}
                       />
                       <Route
                         exact
-                        path="/admin/:list/:itemId"
+                        path={`${adminPath}/:list/:itemId`}
                         render={({ match: { params: { itemId } } }) => (
                           <ItemPage
                             list={list}
@@ -74,8 +75,9 @@ const Keystone = () => (
               />
             </Switch>
           </ScrollToTop>
-        </BrowserRouter>
-      )}
+        </BrowserRouter>);
+      }
+    }
     </AdminMetaProvider>
   </ApolloProvider>
 );

diff --git a/packages/admin-ui/client/pages/Home.js b/packages/admin-ui/client/pages/Home.js
@@ -39,7 +39,7 @@ const ListName = styled('span')`
   font-weight: 500;
 `;
 
-const HomePage = ({ lists, listKeys }) => (
+const HomePage = ({ lists, listKeys, adminPath }) => (
   <Fragment>
     <Nav />
     <Container>
@@ -48,7 +48,7 @@ const HomePage = ({ lists, listKeys }) => (
         {listKeys.map(key => {
           const list = lists[key];
           return (
-            <ListLink key={key} to={`/admin/${list.path}`}>
+            <ListLink key={key} to={`${adminPath}/${list.path}`}>
               <ListName>{list.label}</ListName>
             </ListLink>
           );

diff --git a/packages/admin-ui/client/pages/InvalidRoute.js b/packages/admin-ui/client/pages/InvalidRoute.js
@@ -5,12 +5,12 @@ import Nav from '../components/Nav';
 import { Container } from '@keystonejs/ui/src/primitives/layout';
 import { Title } from '@keystonejs/ui/src/primitives/typography';
 
-const InvalidRoutePage = () => (
+const InvalidRoutePage = ({ adminPath }) => (
   <Fragment>
     <Nav />
     <Container>
       <Title>404</Title>
-      <Link to="/admin">Go Home</Link>
+      <Link to={adminPath}>Go Home</Link>
     </Container>
   </Fragment>
 );

diff --git a/packages/admin-ui/client/pages/Item/index.js b/packages/admin-ui/client/pages/Item/index.js
@@ -48,12 +48,12 @@ class ItemDetails extends Component {
   };
   saveChanges = () => {};
   render() {
-    const { list } = this.props;
+    const { list, adminPath } = this.props;
     const { item } = this.state;
     return (
       <Fragment>
         <Title>
-          <Link to={`/admin/${list.path}`}>{list.label}</Link>: {item.name}
+          <Link to={`${adminPath}/${list.path}`}>{list.label}</Link>: {item.name}
         </Title>
         <ItemId>ID: {item.id}</ItemId>
         <Form>
@@ -79,17 +79,17 @@ class ItemDetails extends Component {
   }
 }
 
-const ItemNotFound = ({ itemId, list }) => (
+const ItemNotFound = ({ itemId, list, adminPath }) => (
   <Fragment>
     <Title>Item Not Found.</Title>
     <p>The item {itemId} does not exist.</p>
-    <Link to={`/admin/${list.path}`}>Back to {list.label}</Link>
+    <Link to={`${adminPath}/${list.path}`}>Back to {list.label}</Link>
     {' • '}
-    <Link to="/admin">Go Home</Link>
+    <Link to={adminPath}>Go Home</Link>
   </Fragment>
 );
 
-const ItemPage = ({ list, itemId }) => (
+const ItemPage = ({ list, itemId, adminPath }) => (
   <Fragment>
     <Nav />
     <Container>
@@ -107,9 +107,9 @@ const ItemPage = ({ list, itemId }) => (
 
           const item = data[list.itemQueryName];
           return item ? (
-            <ItemDetails list={list} item={item} key={itemId} />
+            <ItemDetails list={list} item={item} key={itemId} adminPath={adminPath} />
           ) : (
-            <ItemNotFound list={list} itemId={itemId} />
+            <ItemNotFound list={list} itemId={itemId} adminPath={adminPath} />
           );
         }}
       </Query>

diff --git a/packages/admin-ui/client/pages/List.js b/packages/admin-ui/client/pages/List.js
@@ -129,7 +129,7 @@ class ListPage extends Component {
   handleOrderChange = order => this.setState({ order });
 
   render() {
-    const { list } = this.props;
+    const { list, adminPath } = this.props;
     const { displayedFields, order, orderBy, search } = this.state;
 
     const sort = `${order.value === 'DESC' ? '-' : ''}${orderBy.path}`;
@@ -232,6 +232,7 @@ class ListPage extends Component {
                       items={items}
                       list={list}
                       fields={displayedFields}
+                      adminPath={adminPath}
                       noResultsMessage={`No ${list.plural.toLowerCase()} found matching ${search}.`}
                     />
                   ) : (

diff --git a/packages/admin-ui/client/pages/ListNotFound.js b/packages/admin-ui/client/pages/ListNotFound.js
@@ -5,13 +5,13 @@ import Nav from '../components/Nav';
 import { Container } from '@keystonejs/ui/src/primitives/layout';
 import { Title } from '@keystonejs/ui/src/primitives/typography';
 
-const ListNotFoundPage = ({ listKey }) => (
+const ListNotFoundPage = ({ listKey, adminPath }) => (
   <Fragment>
     <Nav />
     <Container>
       <Title>Invalid List.</Title>
       <p>The list {listKey} hasn't been defined.</p>
-      <Link to="/admin">Go Home</Link>
+      <Link to={adminPath}>Go Home</Link>
     </Container>
   </Fragment>
 );

diff --git a/packages/admin-ui/client/pages/Session.js b/packages/admin-ui/client/pages/Session.js
@@ -46,6 +46,7 @@ const Fields = styled.div({
 
 class Session extends Component {
   render() {
+    const { adminPath } = this.props;
     return (
       <Container>
         <Box>
@@ -58,7 +59,7 @@ class Session extends Component {
               <FieldLabel>Password</FieldLabel>
               <Input />
             </Fields>
-            <Button appearance="primary" to="/admin">
+            <Button appearance="primary" to={adminPath}>
               Sign In
             </Button>
           </div>

diff --git a/packages/test-project/index.js b/packages/test-project/index.js
@@ -39,6 +39,7 @@ const admin = new AdminUI(keystone);
 const server = new WebServer(keystone, {
   'cookie secret': 'qwerty',
   'admin ui': admin,
+  'adminPath': '/admin'
 });
 
 async function start() {