muffin-admin 11.8.0 → 13.0.0

package/src/MuffinResourceEdit.tsx

@@ -1,4 +1,5 @@
-import { PropsWithChildren } from "react"
+import { Box, Typography } from "@mui/material"
+import type { PropsWithChildren } from "react"
 import {
   DeleteButton,
   Edit,
@@ -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

@@ -1,25 +1,25 @@
 import sortBy from "lodash/sortBy"
 import uniq from "lodash/uniq"
-import { PropsWithChildren } from "react"
+import type { PropsWithChildren } from "react"
 import {
   BulkDeleteButton,
   BulkExportButton,
   CreateButton,
   DatagridConfigurable,
   EditButton,
-  ExportButton,
   FilterButton,
   InfiniteList,
   List,
   Pagination,
   SelectColumnsButton,
   TopToolbar,
+  useTranslate,
 } from "react-admin"
 import { buildRA, buildRAComponent } from "./buildRA"
 import { BulkActionButton, ListActionButton } from "./buttons"
 import { HelpLink } from "./common/HelpLink"
 import { useMuffinResourceOpts } from "./hooks"
-import { AdminInput } from "./types"
+import type { AdminInput } from "./types"
 import { buildAdmin, findBuilder, setupAdmin } from "./utils"
 
 export function MuffinList({ children }: PropsWithChildren) {
@@ -76,6 +76,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 +92,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)
@@ -105,7 +118,6 @@ function MuffinListToolbar() {
     list: { create },
   } = useMuffinResourceOpts()
   const actions = baseActions.filter((a) => a.view?.includes("list"))
-  const hasExport = actions.some((a) => a.id === "export")
   return (
     <TopToolbar>
       {help && <HelpLink href={help} />}
@@ -115,7 +127,6 @@ function MuffinListToolbar() {
       {actions.length
         ? actions.map((props) => <ListActionButton key={props.id} {...props} />)
         : null}
-      {!hasExport && <ExportButton />}
     </TopToolbar>
   )
 }

package/src/MuffinResourceShow.tsx

@@ -1,19 +1,86 @@
-import { PropsWithChildren } from "react"
-import { EditButton, ListButton, Show, SimpleShowLayout, TopToolbar } from "react-admin"
+import { Box, Typography } from "@mui/material"
+import type { PropsWithChildren } from "react"
+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/actions/LinkAction.tsx

@@ -1,7 +1,7 @@
 import { useRecordContext, useResourceContext } from "react-admin"
 import LinkButton from "../buttons/LinkButton"
 import { useMuffinAdminOpts } from "../hooks"
-import { AdminShowLink } from "../types"
+import type { AdminShowLink } from "../types"
 
 export function LinkAction({
   field,

package/src/authprovider.ts

@@ -1,107 +1,94 @@
-import Cookies from "js-cookie";
-import { findBuilder, makeRequest, requestHeaders, setupAdmin } from ".";
-import type { AdminOpts } from "./types";
+import Cookies from "js-cookie"
+import type { AdminOpts } from "./types"
+import { findBuilder, makeRequest, requestHeaders, setupAdmin } from "./utils"
 
 setupAdmin(
-	["auth-storage-get"],
-	({ storage, storageName }: AdminOpts["auth"]) =>
-		() =>
-			storage == "localstorage"
-				? localStorage.getItem(storageName)
-				: Cookies.get(storageName),
-);
-
-setupAdmin(
-	["auth-storage-set"],
-	({ storage }) =>
-		(name, value, requestOnly) => {
-			if (storage == "localstorage") {
-				localStorage.setItem(name, value);
-				requestHeaders["Authorization"] = value;
-			} else Cookies.set(name, value);
-		},
-);
+  ["auth-storage-get"],
+  ({ storage, storageName }: AdminOpts["auth"]) =>
+    () =>
+      storage == "localstorage" ? localStorage.getItem(storageName) : Cookies.get(storageName)
+)
+
+setupAdmin(["auth-storage-set"], ({ storage }) => (name, value, _requestOnly) => {
+  if (storage == "localstorage") {
+    localStorage.setItem(name, value)
+    requestHeaders.Authorization = value
+  } else Cookies.set(name, value)
+})
 
 export function MuffinAuthProvider(props: AdminOpts["auth"]) {
-	const {
-		identityURL,
-		authorizeURL,
-		logoutURL,
-		required,
-		storageName,
-		storage,
-	} = props;
-
-	const authGet = findBuilder(["auth-storage-get"])(props);
-	const authSet = findBuilder(["auth-storage-set"])(props);
-
-	// Initialize request headers
-	if (storage == "localstorage") {
-		const token = authGet(storageName);
-		if (token) requestHeaders["Authorization"] = token;
-	}
-
-	const getIdentity = async () => {
-		if (identityURL) {
-			const { json } = await makeRequest(identityURL);
-			return json;
-		}
-	};
-
-	if (required)
-		return {
-			login: async (data) => {
-				if (!authorizeURL) throw { message: "Authorization is not supported" };
-
-				const { json } = await makeRequest(authorizeURL, {
-					data,
-					method: "POST",
-				});
-				authSet(storageName, json);
-			},
-
-			checkError: async (error) => {
-				const { status } = error || {};
-
-				if (status == 401 || status == 403) {
-					// Clean storage
-					authSet(storageName, "");
-
-					throw {
-						message: "Invalid authorization",
-						redirectTo: logoutURL,
-						logoutUser: !logoutURL,
-					};
-				}
-			},
-
-			checkAuth: async () => {
-				const auth = authGet(storageName);
-				if (!auth) throw { message: "Authorization required" };
-
-				if (!identityURL) return auth;
-
-				const user = await getIdentity();
-				if (!user) throw { message: "Authorization required" };
-
-				return user;
-			},
-
-			getAuthorization: () => authGet(storageName),
-
-			logout: async () => {
-				// Clean storage
-				authSet(storageName, "");
-				if (logoutURL) window.location.href = logoutURL;
-			},
-
-			getIdentity,
-
-			getPermissions: async () => {
-				const role = authGet(storageName + "_role");
-				return role || "";
-			},
-		};
+  const { identityURL, authorizeURL, logoutURL, required, storageName, storage } = props
+
+  const authGet = findBuilder(["auth-storage-get"])(props)
+  const authSet = findBuilder(["auth-storage-set"])(props)
+
+  // Initialize request headers
+  if (storage == "localstorage") {
+    const token = authGet(storageName)
+    if (token) requestHeaders.Authorization = token
+  }
+
+  const getIdentity = async () => {
+    if (identityURL) {
+      const { json } = await makeRequest(identityURL)
+      return json
+    }
+  }
+
+  if (required)
+    return {
+      login: async (data) => {
+        if (!authorizeURL) throw { message: "Authorization is not supported" }
+
+        const { json } = await makeRequest(authorizeURL, {
+          data,
+          method: "POST",
+        })
+        authSet(storageName, json)
+      },
+
+      checkError: async (error) => {
+        const { status } = error || {}
+
+        if (status == 401 || status == 403) {
+          // Clean storage
+          authSet(storageName, "")
+
+          throw {
+            message: "Invalid authorization",
+            redirectTo: logoutURL,
+            logoutUser: !logoutURL,
+          }
+        }
+      },
+
+      checkAuth: async () => {
+        const auth = authGet(storageName)
+        if (!auth) throw { message: "Authorization required" }
+
+        if (!identityURL) return auth
+
+        const user = await getIdentity()
+        if (!user) throw { message: "Authorization required" }
+
+        return user
+      },
+
+      getAuthorization: () => authGet(storageName),
+
+      logout: async () => {
+        // Clean storage
+        authSet(storageName, "")
+        if (logoutURL) window.location.href = logoutURL
+      },
+
+      getIdentity,
+
+      getPermissions: async () => {
+        const role = authGet(`${storageName}_role`)
+        return role || ""
+      },
+    }
 }
 
-setupAdmin(["auth-provider"], MuffinAuthProvider);
+setupAdmin(["auth-provider"], MuffinAuthProvider)

package/src/buildRA.tsx

@@ -1,3 +1,4 @@
+import type { ElementType } from "react"
 import {
   ArrayField,
   ArrayInput,
@@ -25,8 +26,8 @@ import {
   ReferenceField,
   ReferenceInput,
   ReferenceManyField,
-  required,
   RichTextField,
+  required,
   SearchInput,
   SelectArrayInput,
   SelectField,
@@ -40,7 +41,7 @@ import { AvatarField, CopyField, EditableBooleanField, FKField, JsonField } from
 import { DateRangeFilter, Filter, SearchFilter } from "./filters"
 import { FKInput, ImgInput, JsonInput, TimestampInput } from "./inputs"
 
-const UI: Record<string, JSX.ElementType> = {
+const UI: Record<string, ElementType> = {
   // Fields
   BooleanField,
   ChipField,
@@ -112,6 +113,6 @@ export function buildRA(items: [string, Record<string, any>][]) {
   return items.map((item) => buildRAComponent(item[0], item[1]))
 }
 
-export function registerUI(name: string, component: JSX.ElementType) {
+export function registerUI(name: string, component: ElementType) {
   UI[name] = component
 }

package/src/buttons/ActionButton.tsx

@@ -1,3 +1,5 @@
+import { Link, Stack } from "@mui/material"
+import { useState } from "react"
 import {
   Button,
   FormGroupsProvider,
@@ -8,15 +10,12 @@ import {
   useTranslate,
 } from "react-admin"
 import { FormProvider } from "react-hook-form"
-
-import { Link, Stack } from "@mui/material"
-import { useState } from "react"
 import { buildRA } from "../buildRA"
 import { AdminModal, PayloadButtons, useConfirmation } from "../common"
 import { HelpLink } from "../common/HelpLink"
 import { useMuffinAdminOpts } from "../hooks"
 import { useAction } from "../hooks/useAction"
-import { AdminAction, AdminPayloadProps } from "../types"
+import type { AdminAction, AdminPayloadProps } from "../types"
 import { buildIcon, findBuilder, prepareFilters, requestHeaders } from "../utils"
 
 export type ActionPayloadProps = {
@@ -160,11 +159,11 @@ export function CommonPayload({
           title={
             help
               ? ((
-                <Stack alignItems="flex-start">
-                  <span>{translate(title, { _: title })}</span>
-                  <HelpLink href={help} style={{ alignSelf: "flex-end" }} />
-                </Stack>
-              ) as any)
+                  <Stack sx={{ alignItems: "flex-start" }}>
+                    <span>{translate(title, { _: title })}</span>
+                    <HelpLink href={help} style={{ alignSelf: "flex-end" }} />
+                  </Stack>
+                ) as any)
               : translate(title, { _: title })
           }
           actions={
@@ -198,7 +197,7 @@ function FileButton({
   const { apiUrl } = useMuffinAdminOpts()
   let url = `${apiUrl}${path}?f`
   if (record) url = url.replace("{id}", record.id as string)
-  const authorization = requestHeaders["Authorization"]
+  const authorization = requestHeaders.Authorization
   if (authorization) url += `&t=${authorization}`
   if (Object.keys(filterValues).length) url += `&where=${prepareFilters(filterValues)}`
 

package/src/buttons/LinkButton.tsx

@@ -1,6 +1,6 @@
 import { Button } from "react-admin"
-import { Link } from "react-router-dom"
-import { AdminShowLink } from "../types"
+import { Link, useLocation } from "react-router-dom"
+import type { AdminShowLink } from "../types"
 import { buildIcon } from "../utils"
 
 const LinkButton = ({
@@ -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`