feat: add ability to toggle counts at admin dashboard

.changeset/smart-pumpkins-raise.md

@@ -0,0 +1,5 @@
+---
+'@keystonejs/app-admin-ui': minor
+---
+
+Add ability to toggle dashboard counts at admin dashboard

packages/app-admin-ui/README.md

@@ -49,6 +49,7 @@ module.exports = {
 | `schemaName`         | `String`   | `public`      |                                                                            |
 | `isAccessAllowed`    | `Function` | `true`        | Controls which users have access to the Admin UI.                          |
 | `adminMeta`          | `Object`   | `{}`          | Provides additional `adminMeta`. Useful for Hooks and other customizations |
+| `showDashboardCounts`| `Bool`     | `true`        | Switch for dashboard list count display and loading                        |
 | `defaultPageSize`    | `Integer`  | 50            | The default number of list items to show at once.                          |
 | `maximumPageSize`    | `Integer`  | 1000          | The maximum number of list items to show at once.                          |
 

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

@@ -4,6 +4,7 @@ import { Fragment } from 'react';
 import { Link } from 'react-router-dom';
 import { withPseudoState } from 'react-pseudo-state';
 import { useList } from '../../providers/List';
+import { useAdminMeta } from '../../providers/AdminMeta';
 
 import CreateItemModal from '../../components/CreateItemModal';
 
@@ -37,6 +38,7 @@ const BoxElement = props => (
 );
 
 const BoxComponent = ({ focusOrigin, isActive, isHover, isFocus, meta, ...props }) => {
+  const { showDashboardCounts } = useAdminMeta();
   const { list, openCreateItemModal } = useList();
   const { label, singular } = list;
 
@@ -52,7 +54,7 @@ const BoxComponent = ({ focusOrigin, isActive, isHover, isFocus, meta, ...props
         >
           {label}
         </Name>
-        <Count meta={meta} />
+        {showDashboardCounts && <Count meta={meta} />}
         <CreateButton
           title={`Create ${singular}`}
           isHover={isHover || isFocus}

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

@@ -25,14 +25,15 @@ const getCountQuery = lists => {
 };
 
 const Homepage = () => {
-  const { getListByKey, listKeys, adminPath } = useAdminMeta();
+  const { getListByKey, listKeys, adminPath, showDashboardCounts } = useAdminMeta();
 
   // TODO: A permission query to limit which lists are visible
   const lists = listKeys.map(key => getListByKey(key));
 
   const { data, error } = useQuery(getCountQuery(lists), {
     fetchPolicy: 'cache-and-network',
     errorPolicy: 'all',
+    skip: !showDashboardCounts,
   });
 
   const [cellWidth, setCellWidth] = useState(3);

packages/app-admin-ui/index.js

@@ -24,6 +24,7 @@ class AdminUIApp {
     adminMeta = {},
     defaultPageSize = 50,
     maximumPageSize = 1000,
+    showDashboardCounts = true,
   } = {}) {
     if (adminPath === '/') {
       throw new Error("Admin path cannot be the root path. Try; '/admin'");
@@ -56,6 +57,7 @@ class AdminUIApp {
       signinPath: `${this.adminPath}/signin`,
       signoutPath: `${this.adminPath}/signout`,
     };
+    this.showDashboardCounts = showDashboardCounts;
   }
 
   isAccessAllowed(req) {
@@ -111,7 +113,7 @@ class AdminUIApp {
 
   getAdminUIMeta(keystone) {
     // This is exposed as the global `KEYSTONE_ADMIN_META` in the client.
-    const { name, adminPath, apiPath, graphiqlPath, pages, hooks } = this;
+    const { name, adminPath, apiPath, graphiqlPath, pages, hooks, showDashboardCounts } = this;
     const { signinPath, signoutPath } = this.routes;
     const { lists } = keystone.getAdminMeta({ schemaName: this._schemaName });
     const authStrategy = this.authStrategy ? this.authStrategy.getAdminMeta() : undefined;
@@ -149,6 +151,7 @@ class AdminUIApp {
       authStrategy,
       lists,
       name,
+      showDashboardCounts,
       ...this._adminMeta,
     };
   }