@nocobase/portal-template-default 1.0.1 → 1.0.3

package/src/App.tsx

@@ -5,18 +5,7 @@ import routerProvider, {
   CatchAllNavigate,
   UnsavedChangesNotifier,
 } from "@refinedev/react-router";
-import {
-  BlogPostList,
-  BlogPostCreate,
-  BlogPostEdit,
-  BlogPostShow,
-} from "./pages/blog-posts";
-import {
-  CategoryList,
-  CategoryCreate,
-  CategoryEdit,
-  CategoryShow,
-} from "./pages/categories";
+import { UserCreate, UserEdit, UserList, UserShow } from "./pages/users";
 import { dataProvider } from "./providers/data";
 import { Login } from "./pages/login";
 import { Register } from "./pages/register";
@@ -31,6 +20,7 @@ import { TooltipProvider } from "./components/ui/tooltip";
 import { BrandLogo } from "./components/app-shell/brand";
 import {
   AppExtensionProviders,
+  extensionI18nProvider,
   extensionResources,
   extensionRouteElements,
 } from "./app/extensions";
@@ -40,38 +30,25 @@ import { accessControlProvider } from "./providers/access-control";
 import { AclBootstrap } from "./components/access-control/acl-bootstrap";
 import { ResourceAccessGuard } from "./components/access-control/resource-access-guard";
 import { NavigateToAccessibleResource } from "./components/access-control/navigate-to-accessible-resource";
-import { FileText, Tags } from "lucide-react";
+import { UsersRound } from "lucide-react";
 
 const coreResources: ResourceProps[] = [
   {
-    name: "blog_posts",
-    list: "/blog-posts",
-    create: "/blog-posts/create",
-    edit: "/blog-posts/edit/:id",
-    show: "/blog-posts/show/:id",
+    name: "users",
+    list: "/users",
+    create: "/users/create",
+    edit: "/users/edit/:id",
+    show: "/users/show/:id",
     meta: {
-      label: "Blog posts",
-      icon: <FileText />,
+      label: "Users",
+      singularLabel: "User",
+      i18nKey: "resources.users",
+      i18nSingularKey: "resources.user",
+      i18nOptions: { ns: "app" },
+      descriptionI18nKey: "resources.users.description",
+      icon: <UsersRound />,
       description:
-        "Create and publish content on a reliable NocoBase data foundation.",
-      canCreate: true,
-      canDelete: true,
-      acl: {
-        type: "collection",
-      },
-    },
-  },
-  {
-    name: "categories",
-    list: "/categories",
-    create: "/categories/create",
-    edit: "/categories/edit/:id",
-    show: "/categories/show/:id",
-    meta: {
-      label: "Categories",
-      icon: <Tags />,
-      description:
-        "Organize reusable structures while NocoBase keeps the underlying data consistent.",
+        "Manage the people who can sign in and work in this NocoBase application.",
       canCreate: true,
       canDelete: true,
       acl: {
@@ -94,6 +71,7 @@ function App() {
             routerProvider={routerProvider}
             authProvider={authProvider}
             accessControlProvider={accessControlProvider}
+            i18nProvider={extensionI18nProvider}
             resources={[...coreResources, ...extensionResources]}
             options={{
               syncWithLocation: true,
@@ -122,74 +100,37 @@ function App() {
                   </Authenticated>
                 }
               >
-                <Route
-                  index
-                  element={<NavigateToAccessibleResource />}
-                />
-                <Route path="/blog-posts">
-                  <Route
-                    index
-                    element={
-                      <ResourceAccessGuard resource="blog_posts" action="list">
-                        <BlogPostList />
-                      </ResourceAccessGuard>
-                    }
-                  />
-                  <Route
-                    path="create"
-                    element={
-                      <ResourceAccessGuard resource="blog_posts" action="create">
-                        <BlogPostCreate />
-                      </ResourceAccessGuard>
-                    }
-                  />
-                  <Route
-                    path="edit/:id"
-                    element={
-                      <ResourceAccessGuard resource="blog_posts" action="edit">
-                        <BlogPostEdit />
-                      </ResourceAccessGuard>
-                    }
-                  />
-                  <Route
-                    path="show/:id"
-                    element={
-                      <ResourceAccessGuard resource="blog_posts" action="show">
-                        <BlogPostShow />
-                      </ResourceAccessGuard>
-                    }
-                  />
-                </Route>
-                <Route path="/categories">
+                <Route index element={<NavigateToAccessibleResource />} />
+                <Route path="/users">
                   <Route
                     index
                     element={
-                      <ResourceAccessGuard resource="categories" action="list">
-                        <CategoryList />
+                      <ResourceAccessGuard resource="users" action="list">
+                        <UserList />
                       </ResourceAccessGuard>
                     }
                   />
                   <Route
                     path="create"
                     element={
-                      <ResourceAccessGuard resource="categories" action="create">
-                        <CategoryCreate />
+                      <ResourceAccessGuard resource="users" action="create">
+                        <UserCreate />
                       </ResourceAccessGuard>
                     }
                   />
                   <Route
                     path="edit/:id"
                     element={
-                      <ResourceAccessGuard resource="categories" action="edit">
-                        <CategoryEdit />
+                      <ResourceAccessGuard resource="users" action="edit">
+                        <UserEdit />
                       </ResourceAccessGuard>
                     }
                   />
                   <Route
                     path="show/:id"
                     element={
-                      <ResourceAccessGuard resource="categories" action="show">
-                        <CategoryShow />
+                      <ResourceAccessGuard resource="users" action="show">
+                        <UserShow />
                       </ResourceAccessGuard>
                     }
                   />

package/src/app/extension.ts

@@ -1,4 +1,4 @@
-import type { ResourceProps } from "@refinedev/core";
+import type { I18nProvider, ResourceProps } from "@refinedev/core";
 import type { ComponentType, PropsWithChildren, ReactElement } from "react";
 
 export type AppExtension = {
@@ -6,4 +6,6 @@ export type AppExtension = {
   resources?: ResourceProps[];
   routes?: ReactElement;
   Provider?: ComponentType<PropsWithChildren>;
+  UserMenuItems?: ComponentType;
+  i18nProvider?: I18nProvider;
 };

package/src/app/extensions.tsx

@@ -18,6 +18,27 @@ export const extensionRouteElements = appExtensions
   .map((extension) => extension.routes)
   .filter((routes): routes is NonNullable<typeof routes> => Boolean(routes));
 
+const i18nExtensions = appExtensions.filter(
+  (extension) => extension.i18nProvider
+);
+
+if (i18nExtensions.length > 1) {
+  console.warn(
+    `Multiple app extensions provide i18nProvider (${i18nExtensions
+      .map((extension) => extension.id)
+      .join(", ")}). Using ${i18nExtensions[0].id}.`
+  );
+}
+
+export const extensionI18nProvider = i18nExtensions[0]?.i18nProvider;
+
+export const extensionUserMenuItems = appExtensions
+  .filter((extension) => extension.UserMenuItems)
+  .map((extension) => ({
+    id: extension.id,
+    Component: extension.UserMenuItems!,
+  }));
+
 export function AppExtensionProviders({ children }: PropsWithChildren) {
   return appExtensions.reduceRight<ReactNode>((content, extension) => {
     const Provider = extension.Provider;

package/src/components/access-control/acl-gate.tsx

@@ -1,7 +1,8 @@
-import { Loader2, RotateCcw } from "lucide-react";
+import { RotateCcw } from "lucide-react";
 import type { PropsWithChildren } from "react";
 
 import { Button } from "@/components/ui/button";
+import { LoadingState } from "@/components/app-shell/loading-state";
 import { loadAcl, useAclSnapshot } from "@/lib/nocobase/acl";
 
 export function AclGate({ children }: PropsWithChildren) {
@@ -21,9 +22,7 @@ export function AclGate({ children }: PropsWithChildren) {
           <Button
             className="mt-5"
             variant="outline"
-            onClick={() =>
-              void loadAcl({ force: true }).catch(() => undefined)
-            }
+            onClick={() => void loadAcl({ force: true }).catch(() => undefined)}
           >
             <RotateCcw />
             Retry
@@ -33,10 +32,5 @@ export function AclGate({ children }: PropsWithChildren) {
     );
   }
 
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-background">
-      <Loader2 className="size-7 animate-spin text-muted-foreground" />
-      <span className="sr-only">Loading permissions…</span>
-    </div>
-  );
+  return <LoadingState className="min-h-screen bg-background" />;
 }

package/src/components/app-shell/breadcrumb.tsx

@@ -7,6 +7,8 @@ import {
   useBreadcrumb,
   useLink,
   useResourceParams,
+  useTranslate,
+  useUserFriendlyName,
 } from "@refinedev/core";
 import {
   BreadcrumbSeparator as ShadcnBreadcrumbSeparator,
@@ -15,11 +17,15 @@ import {
   BreadcrumbPage as ShadcnBreadcrumbPage,
   Breadcrumb as ShadcnBreadcrumb,
 } from "@/components/ui/breadcrumb";
+import { resolveTranslatableText } from "@/lib/i18n";
+import { getResourceLabel } from "@/components/resources/resource-label";
 
 export function Breadcrumb() {
   const Link = useLink();
   const { breadcrumbs } = useBreadcrumb();
   const { resources } = useResourceParams();
+  const translate = useTranslate();
+  const getUserFriendlyName = useUserFriendlyName();
   const rootRouteResource = matchResourceFromRoute("/", resources);
 
   const breadCrumbItems = useMemo(() => {
@@ -42,15 +48,45 @@ export function Breadcrumb() {
     });
 
     for (const { label, href } of breadcrumbs) {
+      const matchingResource = resources.find((resource) => {
+        const metaLabel = resource.meta?.label;
+        return (
+          label === metaLabel ||
+          label === resource.name ||
+          (href &&
+            [resource.list, resource.create, resource.edit, resource.show].some(
+              (route) => typeof route === "string" && route === href
+            ))
+        );
+      });
+      const displayLabel = matchingResource
+        ? getResourceLabel(
+            matchingResource,
+            "plural",
+            translate,
+            getUserFriendlyName
+          )
+        : resolveTranslatableText(label);
       list.push({
-        key: `breadcrumb-item-${label}`,
+        key: `breadcrumb-item-${displayLabel}`,
         href: href ?? "",
-        Component: href ? <Link to={href}>{label}</Link> : <span>{label}</span>,
+        Component: href ? (
+          <Link to={href}>{displayLabel}</Link>
+        ) : (
+          <span>{displayLabel}</span>
+        ),
       });
     }
 
     return list;
-  }, [breadcrumbs, Link, rootRouteResource]);
+  }, [
+    breadcrumbs,
+    getUserFriendlyName,
+    Link,
+    resources,
+    rootRouteResource,
+    translate,
+  ]);
 
   return (
     <ShadcnBreadcrumb>

package/src/components/app-shell/document-title-handler.tsx

@@ -1,19 +1,14 @@
 import type { Action, IResourceItem } from "@refinedev/core";
-import {
-  useParsed,
-  useTranslate,
-  useUserFriendlyName,
-} from "@refinedev/core";
+import { useParsed, useTranslate } from "@refinedev/core";
 import { useLayoutEffect } from "react";
 import { useLocation } from "react-router";
+import { useResourceLabel } from "@/components/resources/resource-label";
 
 export type ActionPrefixContext = {
   id?: string;
 };
 
-export type ActionPrefix =
-  | string
-  | ((context: ActionPrefixContext) => string);
+export type ActionPrefix = string | ((context: ActionPrefixContext) => string);
 
 export type DocumentTitleContext = {
   action?: Action;
@@ -85,19 +80,14 @@ export function DocumentTitleHandler({
   const location = useLocation();
   const { action, id, params, pathname, resource } = useParsed();
   const translate = useTranslate();
-  const getUserFriendlyName = useUserFriendlyName();
+  const identifier = resource?.identifier ?? resource?.name;
+  const resourceNameFallback = useResourceLabel(
+    resource,
+    action === "list" ? "plural" : "singular",
+    identifier
+  );
 
   useLayoutEffect(() => {
-    const identifier = resource?.identifier ?? resource?.name;
-    const resourceNameFallback =
-      resource?.meta?.label ??
-      (identifier
-        ? getUserFriendlyName(
-            identifier,
-            action === "list" ? "plural" : "singular"
-          )
-        : undefined);
-
     const resourceName = resource?.name
       ? safeTranslate(
           translate,
@@ -155,12 +145,13 @@ export function DocumentTitleHandler({
     appName,
     defaultTitle,
     formatTitle,
-    getUserFriendlyName,
     id,
+    identifier,
     location,
     params,
     pathname,
     resource,
+    resourceNameFallback,
     separator,
     translate,
   ]);

package/src/components/app-shell/header.tsx

@@ -1,4 +1,8 @@
-import { useActiveAuthProvider, useLogout } from "@refinedev/core";
+import {
+  useActiveAuthProvider,
+  useLogout,
+  useTranslate,
+} from "@refinedev/core";
 import {
   DropdownMenu,
   DropdownMenuItem,
@@ -13,6 +17,7 @@ import { useSidebar, SidebarTrigger } from "@/components/ui/sidebar";
 import { LogOutIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Brand } from "@/components/app-shell/brand";
+import { extensionUserMenuItems } from "@/app/extensions";
 
 export const Header = () => {
   const { isMobile } = useSidebar();
@@ -21,6 +26,8 @@ export const Header = () => {
 };
 
 function DesktopHeader() {
+  const translate = useTranslate();
+
   return (
     <header
       className={cn(
@@ -44,7 +51,7 @@ function DesktopHeader() {
         <SidebarTrigger className="size-9 rounded-xl text-muted-foreground hover:text-foreground" />
         <div className="hidden h-5 w-px bg-border sm:block" />
         <span className="hidden text-sm font-medium text-muted-foreground sm:block">
-          AI application workspace
+          {translate("shell.workspace", "AI application workspace")}
         </span>
       </div>
       <div className="flex items-center gap-2">
@@ -94,6 +101,7 @@ function MobileHeader() {
 
 const UserDropdown = () => {
   const { mutate: logout, isPending: isLoggingOut } = useLogout();
+  const translate = useTranslate();
 
   const authProvider = useActiveAuthProvider();
 
@@ -110,6 +118,9 @@ const UserDropdown = () => {
         <div className="px-2 py-2">
           <UserInfo />
         </div>
+        {extensionUserMenuItems.map(({ id, Component }) => (
+          <Component key={id} />
+        ))}
         <DropdownMenuSeparator />
         <DropdownMenuItem
           className="mt-1 min-h-9 cursor-pointer gap-2 px-2 text-muted-foreground focus:text-foreground"
@@ -118,7 +129,11 @@ const UserDropdown = () => {
           }}
         >
           <LogOutIcon />
-          <span>{isLoggingOut ? "Signing out..." : "Sign out"}</span>
+          <span>
+            {isLoggingOut
+              ? translate("auth.signingOut", "Signing out...")
+              : translate("auth.signOut", "Sign out")}
+          </span>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

package/src/components/app-shell/loading-overlay.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import * as React from "react";
-import { Loader2 } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { LoadingState } from "@/components/app-shell/loading-state";
 
 interface LoadingOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
   loading?: boolean;
@@ -25,9 +25,7 @@ export const LoadingOverlay = React.forwardRef<
           className
         )}
       >
-        <div className="flex flex-col items-center gap-2">
-          <Loader2 className="h-8 w-8 animate-spin text-primary" />
-        </div>
+        <LoadingState />
       </div>
     </div>
   );

package/src/components/app-shell/loading-state.tsx

@@ -0,0 +1,15 @@
+import { Loader2 } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+export function LoadingState({ className }: { className?: string }) {
+  return (
+    <div
+      role="status"
+      className={cn("flex items-center justify-center", className)}
+    >
+      <Loader2 className="size-7 animate-spin text-primary" />
+      <span className="sr-only">Loading</span>
+    </div>
+  );
+}