muffin-admin 11.8.0 → 12.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muffin-admin",
-  "version": "11.8.0",
+  "version": "12.0.0",
   "description": "NPM package for https://github.com/klen/muffin-admin",
   "files": [
     "src",

package/src/MuffinResourceEdit.tsx

@@ -1,3 +1,4 @@
+import { Box, Typography } from "@mui/material"
 import { PropsWithChildren } from "react"
 import {
   DeleteButton,
@@ -8,10 +9,14 @@ import {
   SimpleForm,
   Toolbar,
   TopToolbar,
+  useRecordContext,
   useResourceContext,
+  useTranslate,
 } from "react-admin"
+import { useLocation, useNavigate } from "react-router-dom"
 import { buildRA } from "./buildRA"
 import { ActionButton } from "./buttons"
+import { AdminModal } from "./common"
 import { useMuffinAdminOpts, useMuffinResourceOpts } from "./hooks"
 import { findBuilder, setupAdmin } from "./utils"
 
@@ -21,18 +26,64 @@ export function MuffinEdit({ children }: PropsWithChildren) {
   } = useMuffinAdminOpts()
 
   const { edit, name, key } = useMuffinResourceOpts()
+  const location = useLocation()
+  const navigate = useNavigate()
+  const returnTo = new URLSearchParams(location.search).get("returnTo")
   if (!edit) return null
 
+  const handleClose = () => {
+    if (returnTo) {
+      navigate(returnTo)
+      return
+    }
+
+    if (window.history.length > 1) {
+      navigate(-1)
+      return
+    }
+
+    navigate(`/${name}`)
+  }
+
   const Actions = findBuilder(["edit-toolbar", name])
   const Inputs = findBuilder(["edit-inputs", name])
   const FormToolbar = findBuilder(["edit-form-toolbar", name])
 
   return (
-    <Edit actions={<Actions />} mutationMode={mutationMode} queryOptions={{ meta: { key } }}>
-      {children}
-      <SimpleForm toolbar={<FormToolbar />}>
-        <Inputs />
-      </SimpleForm>
+    <Edit
+      actions={false}
+      title={false}
+      component="div"
+      mutationMode={mutationMode}
+      queryOptions={{ meta: { key } }}
+      sx={{
+        "& .RaEdit-main": {
+          padding: 0,
+        },
+      }}
+    >
+      <AdminModal
+        open={true}
+        onClose={handleClose}
+        title={<Actions />}
+        maxWidth="xl"
+        contentSx={{
+          paddingTop: "8px !important",
+          paddingBottom: "12px !important",
+          paddingLeft: "16px !important",
+          paddingRight: "16px !important",
+        }}
+        sx={{
+          "& .MuiDialog-paper": {
+            width: "min(1400px, 96vw)",
+          },
+        }}
+      >
+        {children}
+        <SimpleForm toolbar={<FormToolbar />}>
+          <Inputs />
+        </SimpleForm>
+      </AdminModal>
     </Edit>
   )
 }
@@ -66,14 +117,24 @@ setupAdmin(["edit-inputs"], MuffinEditInputs)
 
 export function MuffinEditToolbar({ children }: PropsWithChildren) {
   const resource = useResourceContext()
+  const record = useRecordContext()
+  const translate = useTranslate()
   const Actions = findBuilder(["edit-actions", resource])
   return (
-    <TopToolbar>
-      <Actions />
-      {children}
-      <ListButton />
-      <ShowButton />
-    </TopToolbar>
+    <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
+      <TopToolbar sx={{ pl: 0, pr: 0, width: "100%", justifyContent: "space-between" }}>
+        <Typography variant="h6" sx={{ mr: 2 }}>
+          {translate(`resources.${resource}.name`, { smart_count: 1, _: resource })}
+          {record?.id ? ` #${record.id}` : ""}
+        </Typography>
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          <Actions />
+          {children}
+          <ShowButton />
+          <ListButton />
+        </Box>
+      </TopToolbar>
+    </Box>
   )
 }
 

package/src/MuffinResourceList.tsx

@@ -14,6 +14,7 @@ import {
   Pagination,
   SelectColumnsButton,
   TopToolbar,
+  useTranslate,
 } from "react-admin"
 import { buildRA, buildRAComponent } from "./buildRA"
 import { BulkActionButton, ListActionButton } from "./buttons"
@@ -76,6 +77,7 @@ function MuffinListDatagrid() {
   const { name, list } = useMuffinResourceOpts()
   const { fields, edit, show } = list
   const BulkActions = findBuilder(["list-actions", name])
+
   return (
     <DatagridConfigurable
       rowClick={show ? "show" : edit ? "edit" : false}
@@ -91,9 +93,21 @@ setupAdmin(["list-grid"], MuffinListDatagrid)
 
 function MuffinListGridButtons() {
   const { list } = useMuffinResourceOpts()
+  const translate = useTranslate()
   const { edit } = list
   if (!edit) return null
-  return <EditButton />
+  return (
+    <EditButton
+      label=""
+      title={translate("ra.action.edit", { _: "Edit" })}
+      sx={{
+        minWidth: "auto",
+        width: "100%",
+        justifyContent: "flex-end",
+        "& .MuiButton-startIcon": { margin: 0 },
+      }}
+    />
+  )
 }
 
 setupAdmin(["list-grid-buttons"], MuffinListGridButtons)

package/src/MuffinResourceShow.tsx

@@ -1,19 +1,86 @@
+import { Box, Typography } from "@mui/material"
 import { PropsWithChildren } from "react"
-import { EditButton, ListButton, Show, SimpleShowLayout, TopToolbar } from "react-admin"
+import {
+  EditButton,
+  ListButton,
+  Show,
+  SimpleShowLayout,
+  TopToolbar,
+  useRecordContext,
+  useTranslate,
+} from "react-admin"
+import { useLocation, useNavigate } from "react-router-dom"
 import { LinkAction } from "./actions"
 import { buildRA } from "./buildRA"
 import { ActionButton } from "./buttons"
+import { AdminModal } from "./common"
 import { useMuffinResourceOpts } from "./hooks"
 import { buildAdmin, findBuilder, setupAdmin } from "./utils"
 
 export function MuffinShow({ children }: PropsWithChildren) {
   const { show, name, key } = useMuffinResourceOpts()
+  const location = useLocation()
+  const navigate = useNavigate()
   const ShowToolbar = findBuilder(["show-toolbar", name])
+  const returnTo = new URLSearchParams(location.search).get("returnTo")
+
+  const handleClose = () => {
+    if (returnTo) {
+      navigate(returnTo)
+      return
+    }
+
+    if (window.history.length > 1) {
+      navigate(-1)
+      return
+    }
+
+    navigate(`/${name}`)
+  }
 
   return (
-    <Show actions={<ShowToolbar />} queryOptions={{ meta: { key } }}>
-      <SimpleShowLayout>{buildAdmin(["show-fields", name], show)}</SimpleShowLayout>
-      {children}
+    <Show
+      actions={false}
+      title={false}
+      component="div"
+      queryOptions={{ meta: { key } }}
+      sx={{
+        "& .RaShow-main": {
+          padding: 0,
+        },
+      }}
+    >
+      <AdminModal
+        open={true}
+        onClose={handleClose}
+        title={<ShowToolbar />}
+        maxWidth="xl"
+        hideBackdrop
+        disableScrollLock
+        contentSx={{
+          paddingTop: "8px !important",
+          paddingBottom: "12px !important",
+          paddingLeft: "16px !important",
+          paddingRight: "16px !important",
+        }}
+        sx={{
+          "& .MuiDialog-paper": {
+            width: "min(1400px, 96vw)",
+          },
+        }}
+      >
+        <SimpleShowLayout
+          sx={{
+            padding: 0,
+            "& .RaSimpleShowLayout-stack": {
+              rowGap: 1,
+            },
+          }}
+        >
+          {buildAdmin(["show-fields", name], show)}
+        </SimpleShowLayout>
+        {children}
+      </AdminModal>
     </Show>
   )
 }
@@ -21,21 +88,32 @@ export function MuffinShow({ children }: PropsWithChildren) {
 setupAdmin(["show"], MuffinShow)
 setupAdmin(["show-fields"], ({ fields }) => buildRA(fields))
 
-export function MuffinShowToolbar({ children }: PropsWithChildren) {
+export function MuffinShowToolbar() {
   const { show, name } = useMuffinResourceOpts()
+  const record = useRecordContext()
+  const translate = useTranslate()
   const { edit } = show
 
   const Links = findBuilder(["show-links", name])
   const Actions = findBuilder(["show-actions", name])
 
   return (
-    <TopToolbar>
-      <Links />
-      <Actions />
-      {children}
-      <ListButton />
-      {edit && <EditButton />}
-    </TopToolbar>
+    <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
+      <TopToolbar sx={{ pl: 0, pr: 0, width: "100%", justifyContent: "space-between" }}>
+        <Typography variant="h6" sx={{ mr: 2 }}>
+          {translate(`resources.${name}.name`, { smart_count: 1, _: name })}
+          {record?.id ? ` #${record.id}` : ""}
+        </Typography>
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          <Actions />
+          {edit && <EditButton />}
+          <ListButton />
+        </Box>
+      </TopToolbar>
+      <Box sx={{ mt: 0.5 }}>
+        <Links />
+      </Box>
+    </Box>
   )
 }
 
@@ -60,12 +138,12 @@ export function MuffinShowLinks({ children }: PropsWithChildren) {
   const { show } = useMuffinResourceOpts()
   const { links } = show
   return (
-    <div style={{ marginRight: "auto" }}>
+    <Box sx={{ display: "flex", flexWrap: "wrap", gap: 1 }}>
       {links.map(([key, props]) => (
         <LinkAction key={key} resource={key} {...props} />
       ))}
       {children}
-    </div>
+    </Box>
   )
 }
 

package/src/buttons/LinkButton.tsx

@@ -1,5 +1,5 @@
 import { Button } from "react-admin"
-import { Link } from "react-router-dom"
+import { Link, useLocation } from "react-router-dom"
 import { AdminShowLink } from "../types"
 import { buildIcon } from "../utils"
 
@@ -11,9 +11,17 @@ const LinkButton = ({
   id,
   title,
 }: AdminShowLink & { resource: string; filters?: any; id?: string }) => {
+  const location = useLocation()
+  const searchParams = new URLSearchParams()
+  searchParams.set("returnTo", `${location.pathname}${location.search}`)
+
+  if (filters) {
+    searchParams.set("filter", JSON.stringify(filters))
+  }
+
   const linkParams = {
     pathname: `/${resource}`,
-    search: filters ? `filter=${JSON.stringify(filters)}` : undefined,
+    search: `?${searchParams.toString()}`,
   }
 
   if (id) linkParams.pathname += `/${id}/show`

package/src/common/AdminModal.tsx

@@ -1,11 +1,13 @@
 import { Dialog, DialogActions, DialogContent, DialogProps, DialogTitle } from "@mui/material"
 import { PropsWithChildren } from "react"
+import { SxProps, Theme } from "@mui/material/styles"
 
-interface IProps {
+interface IProps extends Omit<DialogProps, "title" | "open" | "onClose"> {
   open: boolean
   onClose: () => void
   title?: React.ReactNode
   actions?: React.ReactNode
+  contentSx?: SxProps<Theme>
 }
 
 export function AdminModal({
@@ -14,12 +16,13 @@ export function AdminModal({
   children,
   title,
   actions,
+  contentSx,
   ...props
-}: PropsWithChildren<IProps & DialogProps>) {
+}: PropsWithChildren<IProps>) {
   return (
     <Dialog open={open} onClose={onClose} fullWidth maxWidth="md" {...props}>
       {title && <DialogTitle>{title}</DialogTitle>}
-      <DialogContent>{children}</DialogContent>
+      <DialogContent sx={contentSx}>{children}</DialogContent>
       {actions && <DialogActions>{actions}</DialogActions>}
     </Dialog>
   )

package/src/fields/FKField.tsx

@@ -1,11 +1,23 @@
 import { ReferenceField, TextField, useFieldValue, UseFieldValueOptions } from "react-admin"
+import { useLocation } from "react-router-dom"
 
 export function FKField({ reference, refSource, refKey, link, source, ...props }) {
+  const location = useLocation()
   refKey = refKey || "id"
+  const returnTo = `${location.pathname}${location.search}`
+
+  const resolveLink =
+    link ||
+    ((record) => {
+      const id = record?.[refKey]
+      if (id === undefined || id === null) return false
+      return `/${reference}/${id}/show?returnTo=${encodeURIComponent(returnTo)}`
+    })
+
   return (
     <ReferenceField
       source={source}
-      link={link || "show"}
+      link={resolveLink}
       reference={reference}
       queryOptions={{ meta: { key: refKey } }}
       {...props}

package/src/index.tsx

@@ -37,4 +37,4 @@ export async function initAdmin(prefix = "", containerId: string = "root") {
   )
 }
 
-export const VERSION = "11.8.0"
+export const VERSION = "12.0.0"