add icon to list name to indicate auth list (keystonejs#1806)

quangtynu · Oct 25, 2019 · 19b08a3 · 19b08a3
1 parent a18041a
commit 19b08a3
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 7 deletions.
diff --git a/.changeset/shiny-cars-care.md b/.changeset/shiny-cars-care.md
@@ -0,0 +1,5 @@
+---
+'@keystonejs/app-admin-ui': patch
+---
+
+indicate which list is auth list by adding a person icon afetr label
diff --git a/packages/app-admin-ui/client/components/Nav/index.js b/packages/app-admin-ui/client/components/Nav/index.js
@@ -19,6 +19,7 @@ import {
 import { Title } from '@arch-ui/typography';
 import Tooltip from '@arch-ui/tooltip';
 import { FlexGroup } from '@arch-ui/layout';
+import { PersonIcon } from '@arch-ui/icons';
 
 import { useAdminMeta } from '../../providers/AdminMeta';
 import ResizeHandler, { KEYBOARD_SHORTCUT } from './ResizeHandler';
@@ -142,7 +143,15 @@ function getPath(str) {
   return `/${arr[1]}/${arr[2]}`;
 }
 
-function renderChildren(node, mouseIsOverNav, getListByKey, adminPath, depth, onRenderIndexPage) {
+function renderChildren(
+  node,
+  authListKey,
+  mouseIsOverNav,
+  getListByKey,
+  adminPath,
+  depth,
+  onRenderIndexPage
+) {
   if (node.children) {
     const groupKey = uid(node.children);
     depth += 1;
@@ -151,7 +160,15 @@ function renderChildren(node, mouseIsOverNav, getListByKey, adminPath, depth, on
       <React.Fragment key={groupKey}>
         {node.label && <PrimaryNavHeading depth={depth}>{node.label}</PrimaryNavHeading>}
         {node.children.map(child =>
-          renderChildren(child, mouseIsOverNav, getListByKey, adminPath, depth, onRenderIndexPage)
+          renderChildren(
+            child,
+            authListKey,
+            mouseIsOverNav,
+            getListByKey,
+            adminPath,
+            depth,
+            onRenderIndexPage
+          )
         )}
       </React.Fragment>
     );
@@ -201,22 +218,48 @@ function renderChildren(node, mouseIsOverNav, getListByKey, adminPath, depth, on
       mouseIsOverNav={mouseIsOverNav}
     >
       {label}
+      {key === authListKey ? (
+        <PersonIcon title={label} color={colors.N20} css={{ paddingLeft: 8, paddingTop: 4 }} />
+      ) : null}
     </PrimaryNavItem>
   );
 }
 
-function PrimaryNavItems({ adminPath, getListByKey, pages, listKeys, mouseIsOverNav }) {
+function PrimaryNavItems({
+  adminPath,
+  authListKey,
+  getListByKey,
+  pages,
+  listKeys,
+  mouseIsOverNav,
+}) {
   let hasRenderedIndexPage = false;
   let onRenderIndexPage = () => {
     hasRenderedIndexPage = true;
   };
   let pageNavItems =
     pages && pages.length
       ? pages.map(node =>
-          renderChildren(node, mouseIsOverNav, getListByKey, adminPath, 0, onRenderIndexPage)
+          renderChildren(
+            node,
+            authListKey,
+            mouseIsOverNav,
+            getListByKey,
+            adminPath,
+            0,
+            onRenderIndexPage
+          )
         )
       : listKeys.map(key =>
-          renderChildren(key, mouseIsOverNav, getListByKey, adminPath, 0, onRenderIndexPage)
+          renderChildren(
+            key,
+            authListKey,
+            mouseIsOverNav,
+            getListByKey,
+            adminPath,
+            0,
+            onRenderIndexPage
+          )
         );
   return (
     <Relative>
@@ -246,8 +289,14 @@ function PrimaryNavItems({ adminPath, getListByKey, pages, listKeys, mouseIsOver
 }
 
 let PrimaryNavContent = ({ mouseIsOverNav }) => {
-  let { adminPath, getListByKey, listKeys, name, pages } = useAdminMeta();
-
+  let {
+    adminPath,
+    getListByKey,
+    listKeys,
+    name,
+    pages,
+    authStrategy: { listKey: authListKey } = {},
+  } = useAdminMeta();
   return (
     <Inner>
       <Title
@@ -267,6 +316,7 @@ let PrimaryNavContent = ({ mouseIsOverNav }) => {
       </Title>
       <PrimaryNavItems
         adminPath={adminPath}
+        authListKey={authListKey}
         getListByKey={getListByKey}
         listKeys={listKeys.sort()}
         pages={pages}