feat: modular dashboard (2nd approach - WIP)

.github/workflows/main.yml

@@ -260,6 +260,7 @@ jobs:
           - auth
           - auth-basic
           - bulk-edit
+          - dashboard
           - joins
           - field-error-states
           - fields-relationship
@@ -404,6 +405,7 @@ jobs:
           - auth
           - auth-basic
           - bulk-edit
+          - dashboard
           - joins
           - field-error-states
           - fields-relationship

.vscode/settings.json

@@ -27,6 +27,7 @@
   "playwright.env": {
     "NODE_OPTIONS": "--no-deprecation --no-experimental-strip-types"
   },
+  "typescript.experimental.useTsgo": true,
   "jest.virtualFolders": [
     {
       "name": "root",

docs/custom-components/custom-views.mdx

@@ -46,6 +46,11 @@ const config = buildConfig({
 })
 ```
 
+<Banner type="success">
+  **Note:** The dashboard is a special case, where in addition to replacing the
+  default view, [you can add widgets modularly](../custom-components/dashboard).
+</Banner>
+
 For more granular control, pass a configuration object instead. Payload exposes the following properties for each view:
 
 | Property       | Description                                                                                                                                                                         |

docs/custom-components/dashboard.mdx

@@ -0,0 +1,9 @@
+WIP:
+
+## Dashboard Widgets
+
+- `card` class.
+
+## Dashboard View
+
+Just a link to [Customizing Views](./custom-views) or describe here?

docs/custom-components/root-components.mdx

@@ -52,7 +52,7 @@ The following options are available:
 _For details on how to build Custom Components, see [Building Custom Components](./overview#building-custom-components)._
 
 <Banner type="success">
-  **Note:** You can also use set [Collection
+  **Note:** You can also set [Collection
   Components](../configuration/collections#custom-components) and [Global
   Components](../configuration/globals#custom-components) in their respective
   configs.
@@ -127,6 +127,12 @@ export default function MyBeforeDashboardComponent() {
 }
 ```
 
+<Banner type="success">
+  **Note:** You can also set [Dashboard Widgets](../custom-components/dashboard)
+  in the `admin.dashboard` property, or replace the entire [Dashboard
+  View](../custom-components/dashboard) with your own.
+</Banner>
+
 ### afterDashboard
 
 Similar to `beforeDashboard`, the `afterDashboard` property allows you to inject Custom Components into the built-in Dashboard, _after_ the default dashboard contents.
@@ -156,6 +162,12 @@ export default function MyAfterDashboardComponent() {
 }
 ```
 
+<Banner type="success">
+  **Note:** You can also set [Dashboard Widgets](../custom-components/dashboard)
+  in the `admin.dashboard` property, or replace the entire [Dashboard
+  View](../custom-components/dashboard) with your own.
+</Banner>
+
 ### beforeLogin
 
 The `beforeLogin` property allows you to inject Custom Components into the built-in Login view, _before_ the default login form.

packages/next/package.json

@@ -107,6 +107,8 @@
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",
+    "@dnd-kit/modifiers": "9.0.0",
+    "@dnd-kit/sortable": "7.0.2",
     "@payloadcms/graphql": "workspace:*",
     "@payloadcms/translations": "workspace:*",
     "@payloadcms/ui": "workspace:*",

packages/next/src/utilities/handleServerFunctions.ts

@@ -6,6 +6,7 @@ import { buildTableStateHandler } from '@payloadcms/ui/utilities/buildTableState
 import { getFolderResultsComponentAndDataHandler } from '@payloadcms/ui/utilities/getFolderResultsComponentAndData'
 import { schedulePublishHandler } from '@payloadcms/ui/utilities/schedulePublishHandler'
 
+import { renderWidgetHandler } from '../views/Dashboard/Default/GridLayout/renderWidget/renderWidgetServerFn.js'
 import { renderDocumentHandler } from '../views/Document/handleServerFunction.js'
 import { renderDocumentSlotsHandler } from '../views/Document/renderDocumentSlots.js'
 import { renderListHandler } from '../views/List/handleServerFunction.js'
@@ -19,6 +20,7 @@ const baseServerFunctions: Record<string, ServerFunction<any, any>> = {
   'render-document-slots': renderDocumentSlotsHandler,
   'render-field': _internal_renderFieldHandler,
   'render-list': renderListHandler,
+  'render-widget': renderWidgetHandler,
   'schedule-publish': schedulePublishHandler,
   'table-state': buildTableStateHandler,
 }

packages/next/src/views/Dashboard/Default/GridLayout/DashboardStepNav.tsx

@@ -0,0 +1,127 @@
+import type { Widget } from 'payload'
+
+import { useStepNav } from '@payloadcms/ui'
+import { Button } from '@payloadcms/ui/elements/Button'
+import { DrawerToggler } from '@payloadcms/ui/elements/Drawer'
+import { ItemsDrawer } from '@payloadcms/ui/elements/ItemsDrawer'
+import { type Option, ReactSelect } from '@payloadcms/ui/elements/ReactSelect'
+import { useEffect, useId } from 'react'
+
+export function DashboardStepNav({
+  addWidget,
+  cancel,
+  isEditing,
+  resetLayout,
+  saveLayout,
+  setIsEditing,
+  widgets,
+}: {
+  addWidget: (slug: string) => void
+  cancel: () => void
+  isEditing: boolean
+  resetLayout: () => Promise<void>
+  saveLayout: () => Promise<void>
+  setIsEditing: (isEditing: boolean) => void
+  widgets: Widget[]
+}) {
+  const { setStepNav } = useStepNav()
+  const uuid = useId()
+  const drawerSlug = `widgets-drawer-${uuid}`
+
+  // Set step nav directly with minimal dependencies to avoid infinite loops
+  useEffect(() => {
+    setStepNav([
+      {
+        label: (
+          <DashboardBreadcrumbDropdown
+            isEditing={isEditing}
+            onCancel={cancel}
+            onEditClick={() => setIsEditing(true)}
+            onResetLayout={resetLayout}
+            onSaveChanges={saveLayout}
+            widgetsDrawerSlug={drawerSlug}
+          />
+        ),
+      },
+    ])
+    // TODO: useEffectEvent
+    // Only depend on isEditing and drawerSlug - the functions are stable enough
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isEditing, drawerSlug])
+
+  return (
+    <>
+      {isEditing && (
+        <ItemsDrawer
+          drawerSlug={drawerSlug}
+          items={widgets}
+          onItemClick={(widget) => addWidget(widget.slug)}
+          searchPlaceholder="Search widgets..."
+          title="Add Widget"
+        />
+      )}
+    </>
+  )
+}
+
+export function DashboardBreadcrumbDropdown(props: {
+  isEditing: boolean
+  onCancel: () => void
+  onEditClick: () => void
+  onResetLayout: () => void
+  onSaveChanges: () => void
+  widgetsDrawerSlug: string
+}) {
+  const { isEditing, onCancel, onEditClick, onResetLayout, onSaveChanges, widgetsDrawerSlug } =
+    props
+  if (isEditing) {
+    return (
+      <div className="dashboard-breadcrumb-dropdown__editing">
+        <span>Editing Dashboard</span>
+        <div className="dashboard-breadcrumb-dropdown__actions">
+          <DrawerToggler className="drawer-toggler--unstyled" slug={widgetsDrawerSlug}>
+            <Button buttonStyle="pill" el="span" size="small">
+              Add +
+            </Button>
+          </DrawerToggler>
+          <Button buttonStyle="pill" onClick={onSaveChanges} size="small">
+            Save Changes
+          </Button>
+          <Button buttonStyle="pill" onClick={onCancel} size="small">
+            Cancel
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  const options = [
+    { label: 'Edit Dashboard', value: 'edit' },
+    { label: 'Reset Layout', value: 'reset' },
+  ]
+
+  const handleChange = (selectedOption: Option | Option[]) => {
+    // Since isMulti is false, we expect a single Option
+    const option = Array.isArray(selectedOption) ? selectedOption[0] : selectedOption
+
+    if (option?.value === 'edit') {
+      onEditClick()
+    } else if (option?.value === 'reset') {
+      onResetLayout()
+    }
+  }
+
+  return (
+    <ReactSelect
+      className="dashboard-breadcrumb-select"
+      isClearable={false}
+      isSearchable={false}
+      menuIsOpen={undefined} // Let ReactSelect handle open/close
+      onChange={handleChange}
+      options={options}
+      placeholder="Dashboard"
+      value={{ label: 'Dashboard', value: 'dashboard' }}
+    />
+  )
+}