Admin UI: fixed no-access indicators not showing up in list table

keystonejs · May 13, 2020 · 4cfedbb · 4cfedbb
1 parent 33ce903
commit 4cfedbb
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/.changeset/popular-mayflies-doubt.md b/.changeset/popular-mayflies-doubt.md
@@ -0,0 +1,5 @@
+---
+'@keystonejs/app-admin-ui': patch
+---
+
+Fixed no-access indicators not showing up in list table.
diff --git a/packages/app-admin-ui/client/components/ListTable.js b/packages/app-admin-ui/client/components/ListTable.js
@@ -216,7 +216,7 @@ class ListRow extends Component {
           if (itemErrors[path] instanceof Error && itemErrors[path].name === 'AccessDeniedError') {
             return (
               <BodyCell key={path}>
-                <ShieldIcon title={itemErrors[path].message} css={{ color: colors.N10 }} />
+                <ShieldIcon title={itemErrors[path].message} css={{ color: colors.N20 }} />
                 <A11yText>{itemErrors[path].message}</A11yText>
               </BodyCell>
             );

diff --git a/packages/app-admin-ui/client/pages/List/index.js b/packages/app-admin-ui/client/pages/List/index.js
@@ -240,7 +240,8 @@ export function ListLayout(props) {
 const ListPage = props => {
   const {
     list,
-    listData: { items, itemCount, queryErrors },
+    listData: { items, itemCount },
+    queryErrorsParsed,
     query,
   } = useList();
 
@@ -268,7 +269,6 @@ const ListPage = props => {
   // ------------------------------
   // Only show error page if there is no data
   // (ie; there could be partial data + partial errors)
-  // Note this is the error returned from Apollo, *not* any that are part of the GQL result.
   if (query.error && (!query.data || !items || !Object.keys(items).length)) {
     let message = query.error.message;
 
@@ -306,7 +306,7 @@ const ListPage = props => {
         items={items}
         itemCount={itemCount}
         query={query}
-        queryErrors={queryErrors}
+        queryErrors={queryErrorsParsed}
       />
     </Fragment>
   );

diff --git a/packages/app-admin-ui/client/providers/List.js b/packages/app-admin-ui/client/providers/List.js
@@ -2,6 +2,7 @@ import React, { useContext, createContext, useState, useMemo } from 'react';
 import { useQuery } from '@apollo/react-hooks';
 
 import { useListUrlState } from '../pages/List/dataHooks';
+import { deconstructErrorsToDataShape } from '../util';
 
 const ListContext = createContext();
 
@@ -53,17 +54,17 @@ export const ListProvider = ({ list, children }) => {
 
   // Organize the data for easier use.
   // TODO: consider doing this at the query level with an alias
-  // TODO: should we use deconstructErrorsToDataShape on the error?
-  // Need to check all uses of this data before deciding.
   const {
-    data: { error, [listQueryName]: items, [listQueryMetaName]: { count } = {} } = {},
+    error,
+    data: { [listQueryName]: items, [listQueryMetaName]: { count } = {} } = {},
   } = query;
 
   return (
     <ListContext.Provider
       value={{
         list,
-        listData: { items, itemCount: count, queryErrors: error },
+        listData: { items, itemCount: count },
+        queryErrorsParsed: deconstructErrorsToDataShape(error)[listQueryName],
         query,
         isCreateItemModalOpen: isOpen,
         openCreateItemModal,