@refinedev/antd 6.0.0 → 6.0.2

package/src/components/buttons/list/index.tsx

@@ -1,24 +1,13 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Button } from "antd";
 import { BarsOutlined } from "@ant-design/icons";
-import {
-  useCan,
-  useNavigation,
-  useTranslate,
-  useUserFriendlyName,
-  useResource,
-  useRouterContext,
-  useRouterType,
-  useLink,
-  pickNotDeprecated,
-  AccessControlContext,
-} from "@refinedev/core";
+import { useListButton } from "@refinedev/core";
 import {
   RefineButtonClassNames,
   RefineButtonTestIds,
 } from "@refinedev/ui-types";
 
-import { ListButtonProps } from "../types";
+import type { ListButtonProps } from "../types";
 
 /**
  * `<ListButton>` is using Ant Design's {@link https://ant.design/components/button/ `<Button>`} component.
@@ -29,7 +18,6 @@ import { ListButtonProps } from "../types";
  */
 export const ListButton: React.FC<ListButtonProps> = ({
   resource: resourceNameFromProps,
-  resourceNameOrRouteName: propResourceNameOrRouteName,
   hideText = false,
   accessControl,
   meta,
@@ -37,63 +25,23 @@ export const ListButton: React.FC<ListButtonProps> = ({
   onClick,
   ...rest
 }) => {
-  const accessControlContext = useContext(AccessControlContext);
-
-  const accessControlEnabled =
-    accessControl?.enabled ??
-    accessControlContext.options.buttons.enableAccessControl;
-
-  const hideIfUnauthorized =
-    accessControl?.hideIfUnauthorized ??
-    accessControlContext.options.buttons.hideIfUnauthorized;
-
-  const { listUrl: generateListUrl } = useNavigation();
-  const routerType = useRouterType();
-  const Link = useLink();
-  const { Link: LegacyLink } = useRouterContext();
-  const getUserFriendlyName = useUserFriendlyName();
-
-  const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
-
-  const translate = useTranslate();
-
-  const { resource, identifier } = useResource(
-    resourceNameFromProps ?? propResourceNameOrRouteName,
-  );
-
-  const { data } = useCan({
-    resource: resource?.name,
-    action: "list",
-    queryOptions: {
-      enabled: accessControlEnabled,
-    },
-    params: {
-      resource,
-    },
+  const { to, label, title, hidden, disabled, LinkComponent } = useListButton({
+    resource: resourceNameFromProps,
+    meta,
+    accessControl,
   });
 
-  const createButtonDisabledTitle = () => {
-    if (data?.can) return "";
-    if (data?.reason) return data.reason;
-
-    return translate(
-      "buttons.notAccessTitle",
-      "You don't have permission to access",
-    );
-  };
-
-  const listUrl = resource ? generateListUrl(resource, meta) : "";
+  const isDisabled = disabled || rest.disabled;
+  const isHidden = hidden || rest.hidden;
 
-  if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
-    return null;
-  }
+  if (isHidden) return null;
 
   return (
-    <ActiveLink
-      to={listUrl}
+    <LinkComponent
+      to={to}
       replace={false}
       onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-        if (data?.can === false) {
+        if (isDisabled) {
           e.preventDefault();
           return;
         }
@@ -105,32 +53,14 @@ export const ListButton: React.FC<ListButtonProps> = ({
     >
       <Button
         icon={<BarsOutlined />}
-        disabled={data?.can === false}
-        title={createButtonDisabledTitle()}
+        disabled={isDisabled}
+        title={title}
         data-testid={RefineButtonTestIds.ListButton}
         className={RefineButtonClassNames.ListButton}
         {...rest}
       >
-        {!hideText &&
-          (children ??
-            translate(
-              `${
-                identifier ??
-                resourceNameFromProps ??
-                propResourceNameOrRouteName
-              }.titles.list`,
-              getUserFriendlyName(
-                resource?.meta?.label ??
-                  resource?.label ??
-                  identifier ??
-                  pickNotDeprecated(
-                    resourceNameFromProps,
-                    propResourceNameOrRouteName,
-                  ),
-                "plural",
-              ),
-            ))}
+        {!hideText && (children ?? label)}
       </Button>
-    </ActiveLink>
+    </LinkComponent>
   );
 };

package/src/components/buttons/refresh/index.tsx

@@ -1,21 +1,13 @@
 import React from "react";
 import { Button } from "antd";
 import { RedoOutlined } from "@ant-design/icons";
-import {
-  useTranslate,
-  useResource,
-  useInvalidate,
-  queryKeys,
-  pickDataProvider,
-} from "@refinedev/core";
+import { useRefreshButton } from "@refinedev/core";
 import {
   RefineButtonClassNames,
   RefineButtonTestIds,
 } from "@refinedev/ui-types";
 
-import { RefreshButtonProps } from "../types";
-
-import { useQueryClient } from "@tanstack/react-query";
+import type { RefreshButtonProps } from "../types";
 
 /**
  * `<RefreshButton>` uses Ant Design's {@link https://ant.design/components/button/ `<Button>`} component
@@ -25,52 +17,27 @@ import { useQueryClient } from "@tanstack/react-query";
  */
 export const RefreshButton: React.FC<RefreshButtonProps> = ({
   resource: resourceNameFromProps,
-  resourceNameOrRouteName: propResourceNameOrRouteName,
   recordItemId,
   hideText = false,
   dataProviderName,
   children,
-  onClick,
-  meta: _meta,
-  metaData: _metaData,
   ...rest
 }) => {
-  const translate = useTranslate();
-
-  const queryClient = useQueryClient();
-  const invalidates = useInvalidate();
-
-  const { resources, identifier, id } = useResource(
-    resourceNameFromProps ?? propResourceNameOrRouteName,
-  );
-
-  const isInvalidating = !!queryClient.isFetching({
-    queryKey: queryKeys(
-      identifier,
-      pickDataProvider(identifier, dataProviderName, resources),
-    ).detail(recordItemId ?? id),
+  const { onClick, label, loading } = useRefreshButton({
+    resource: resourceNameFromProps,
+    id: recordItemId,
+    dataProviderName,
   });
 
-  const handleInvalidate = () => {
-    invalidates({
-      id: recordItemId ?? id,
-      invalidates: ["detail"],
-      dataProviderName,
-      resource: identifier,
-    });
-  };
-
   return (
     <Button
-      onClick={(e) => {
-        onClick ? onClick(e) : handleInvalidate();
-      }}
-      icon={<RedoOutlined spin={isInvalidating} />}
+      onClick={onClick}
+      icon={<RedoOutlined spin={loading} />}
       data-testid={RefineButtonTestIds.RefreshButton}
       className={RefineButtonClassNames.RefreshButton}
       {...rest}
     >
-      {!hideText && (children ?? translate("buttons.refresh", "Refresh"))}
+      {!hideText && (children ?? label)}
     </Button>
   );
 };

package/src/components/buttons/save/index.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { Button } from "antd";
 import { SaveOutlined } from "@ant-design/icons";
-import { useTranslate } from "@refinedev/core";
+import { useSaveButton } from "@refinedev/core";
 import {
   RefineButtonClassNames,
   RefineButtonTestIds,
 } from "@refinedev/ui-types";
 
-import { SaveButtonProps } from "../types";
+import type { SaveButtonProps } from "../types";
 
 /**
  * `<SaveButton>` uses Ant Design's {@link https://ant.design/components/button/ `<Button>`} component.
@@ -20,7 +20,7 @@ export const SaveButton: React.FC<SaveButtonProps> = ({
   children,
   ...rest
 }) => {
-  const translate = useTranslate();
+  const { label } = useSaveButton();
 
   return (
     <Button
@@ -30,7 +30,7 @@ export const SaveButton: React.FC<SaveButtonProps> = ({
       className={RefineButtonClassNames.SaveButton}
       {...rest}
     >
-      {!hideText && (children ?? translate("buttons.save", "Save"))}
+      {!hideText && (children ?? label)}
     </Button>
   );
 };

package/src/components/buttons/show/index.tsx

@@ -1,22 +1,13 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Button } from "antd";
 import { EyeOutlined } from "@ant-design/icons";
-import {
-  useCan,
-  useNavigation,
-  useTranslate,
-  useResource,
-  useRouterContext,
-  useRouterType,
-  useLink,
-  AccessControlContext,
-} from "@refinedev/core";
+import { useShowButton } from "@refinedev/core";
 import {
   RefineButtonClassNames,
   RefineButtonTestIds,
 } from "@refinedev/ui-types";
 
-import { ShowButtonProps } from "../types";
+import type { ShowButtonProps } from "../types";
 
 /**
  * `<ShowButton>` uses Ant Design's {@link https://ant.design/components/button/ `<Button>`} component.
@@ -27,7 +18,6 @@ import { ShowButtonProps } from "../types";
  */
 export const ShowButton: React.FC<ShowButtonProps> = ({
   resource: resourceNameFromProps,
-  resourceNameOrRouteName: propResourceNameOrRouteName,
   recordItemId,
   hideText = false,
   accessControl,
@@ -36,63 +26,24 @@ export const ShowButton: React.FC<ShowButtonProps> = ({
   onClick,
   ...rest
 }) => {
-  const accessControlContext = useContext(AccessControlContext);
-
-  const accessControlEnabled =
-    accessControl?.enabled ??
-    accessControlContext.options.buttons.enableAccessControl;
-
-  const hideIfUnauthorized =
-    accessControl?.hideIfUnauthorized ??
-    accessControlContext.options.buttons.hideIfUnauthorized;
-
-  const { showUrl: generateShowUrl } = useNavigation();
-  const routerType = useRouterType();
-  const Link = useLink();
-  const { Link: LegacyLink } = useRouterContext();
-
-  const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
-
-  const translate = useTranslate();
-
-  const { id, resource } = useResource(
-    resourceNameFromProps ?? propResourceNameOrRouteName,
-  );
-
-  const { data } = useCan({
-    resource: resource?.name,
-    action: "show",
-    params: { id: recordItemId ?? id, resource },
-    queryOptions: {
-      enabled: accessControlEnabled,
-    },
+  const { to, label, title, hidden, disabled, LinkComponent } = useShowButton({
+    resource: resourceNameFromProps,
+    id: recordItemId,
+    accessControl,
+    meta,
   });
 
-  const createButtonDisabledTitle = () => {
-    if (data?.can) return "";
-    if (data?.reason) return data.reason;
-
-    return translate(
-      "buttons.notAccessTitle",
-      "You don't have permission to access",
-    );
-  };
-
-  const showUrl =
-    resource && (recordItemId || id)
-      ? generateShowUrl(resource, recordItemId! ?? id!, meta)
-      : "";
+  const isDisabled = disabled || rest.disabled;
+  const isHidden = hidden || rest.hidden;
 
-  if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
-    return null;
-  }
+  if (isHidden) return null;
 
   return (
-    <ActiveLink
-      to={showUrl}
+    <LinkComponent
+      to={to}
       replace={false}
       onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-        if (data?.can === false) {
+        if (isDisabled) {
           e.preventDefault();
           return;
         }
@@ -103,15 +54,15 @@ export const ShowButton: React.FC<ShowButtonProps> = ({
       }}
     >
       <Button
+        disabled={isDisabled}
         icon={<EyeOutlined />}
-        disabled={data?.can === false}
-        title={createButtonDisabledTitle()}
+        title={title}
         data-testid={RefineButtonTestIds.ShowButton}
         className={RefineButtonClassNames.ShowButton}
         {...rest}
       >
-        {!hideText && (children ?? translate("buttons.show", "Show"))}
+        {!hideText && (children ?? label)}
       </Button>
-    </ActiveLink>
+    </LinkComponent>
   );
 };

package/src/components/buttons/types.ts

@@ -1,5 +1,5 @@
-import { ButtonProps, UploadProps } from "antd";
-import {
+import type { ButtonProps, UploadProps } from "antd";
+import type {
   RefineCloneButtonProps,
   RefineCreateButtonProps,
   RefineDeleteButtonProps,

package/src/components/crud/create/index.tsx

@@ -1,12 +1,10 @@
 import React from "react";
 import { Card, Space, Spin } from "antd";
 import {
-  useNavigation,
   useTranslate,
   useUserFriendlyName,
   useRefineContext,
-  useRouterType,
-  useResource,
+  useResourceParams,
   useBack,
 } from "@refinedev/core";
 
@@ -14,9 +12,9 @@ import {
   Breadcrumb,
   SaveButton,
   PageHeader,
-  SaveButtonProps,
+  type SaveButtonProps,
 } from "@components";
-import { CreateProps } from "../types";
+import type { CreateProps } from "../types";
 
 /**
  * `<Create>` provides us a layout to display the page.
@@ -45,12 +43,12 @@ export const Create: React.FC<CreateProps> = ({
     options: { breadcrumb: globalBreadcrumb } = {},
   } = useRefineContext();
 
-  const routerType = useRouterType();
   const back = useBack();
-  const { goBack } = useNavigation();
   const getUserFriendlyName = useUserFriendlyName();
 
-  const { resource, action, identifier } = useResource(resourceFromProps);
+  const { resource, identifier } = useResourceParams({
+    resource: resourceFromProps,
+  });
 
   const breadcrumb =
     typeof breadcrumbFromProps === "undefined"
@@ -72,34 +70,20 @@ export const Create: React.FC<CreateProps> = ({
   return (
     <div {...(wrapperProps ?? {})}>
       <PageHeader
-        ghost={false}
         backIcon={goBackFromProps}
-        onBack={
-          action !== "list" || typeof action !== "undefined"
-            ? routerType === "legacy"
-              ? goBack
-              : back
-            : undefined
-        }
+        onBack={back}
         title={
           title ??
           translate(
             `${identifier}.titles.create`,
             `Create ${getUserFriendlyName(
-              resource?.meta?.label ??
-                resource?.options?.label ??
-                resource?.label ??
-                identifier,
+              resource?.meta?.label ?? identifier,
               "singular",
             )}`,
           )
         }
         breadcrumb={
-          typeof breadcrumb !== "undefined" ? (
-            <>{breadcrumb}</> ?? undefined
-          ) : (
-            <Breadcrumb />
-          )
+          typeof breadcrumb !== "undefined" ? <>{breadcrumb}</> : <Breadcrumb />
         }
         extra={
           <Space wrap {...(headerButtonProps ?? {})}>
@@ -116,7 +100,7 @@ export const Create: React.FC<CreateProps> = ({
       >
         <Spin spinning={isLoading}>
           <Card
-            bordered={false}
+            variant="borderless"
             actions={[
               <Space
                 key="action-buttons"

package/src/components/crud/edit/index.tsx

@@ -3,13 +3,11 @@ import React from "react";
 import { Card, Space, Spin } from "antd";
 import {
   useMutationMode,
-  useNavigation,
   useTranslate,
   useUserFriendlyName,
   useRefineContext,
-  useRouterType,
   useBack,
-  useResource,
+  useResourceParams,
   useGo,
   useToPath,
 } from "@refinedev/core";
@@ -21,13 +19,13 @@ import {
   SaveButton,
   Breadcrumb,
   PageHeader,
-  ListButtonProps,
-  RefreshButtonProps,
-  DeleteButtonProps,
-  SaveButtonProps,
+  type ListButtonProps,
+  type RefreshButtonProps,
+  type DeleteButtonProps,
+  type SaveButtonProps,
   AutoSaveIndicator,
 } from "@components";
-import { EditProps } from "../types";
+import type { EditProps } from "../types";
 
 /**
  * `<Edit>` provides us a layout for displaying the page.
@@ -64,10 +62,8 @@ export const Edit: React.FC<EditProps> = ({
   const { mutationMode: mutationModeContext } = useMutationMode();
   const mutationMode = mutationModeProp ?? mutationModeContext;
 
-  const routerType = useRouterType();
   const back = useBack();
   const go = useGo();
-  const { goBack, list: legacyGoList } = useNavigation();
   const getUserFriendlyName = useUserFriendlyName();
 
   const {
@@ -75,7 +71,9 @@ export const Edit: React.FC<EditProps> = ({
     action,
     id: idFromParams,
     identifier,
-  } = useResource(resourceFromProps);
+  } = useResourceParams({
+    resource: resourceFromProps,
+  });
 
   const goListPath = useToPath({
     resource,
@@ -91,20 +89,18 @@ export const Edit: React.FC<EditProps> = ({
 
   const hasList = resource?.list && !recordItemId;
   const isDeleteButtonVisible =
-    canDelete ??
-    ((resource?.meta?.canDelete ?? resource?.canDelete) ||
-      deleteButtonPropsFromProps);
+    canDelete ?? (resource?.meta?.canDelete || deleteButtonPropsFromProps);
 
   const listButtonProps: ListButtonProps | undefined = hasList
     ? {
         ...(isLoading ? { disabled: true } : {}),
-        resource: routerType === "legacy" ? resource?.route : identifier,
+        resource: identifier,
       }
     : undefined;
 
   const refreshButtonProps: RefreshButtonProps = {
     ...(isLoading ? { disabled: true } : {}),
-    resource: routerType === "legacy" ? resource?.route : identifier,
+    resource: identifier,
     recordItemId: id,
     dataProviderName,
   };
@@ -112,14 +108,10 @@ export const Edit: React.FC<EditProps> = ({
   const deleteButtonProps: DeleteButtonProps | undefined = isDeleteButtonVisible
     ? {
         ...(isLoading ? { disabled: true } : {}),
-        resource: routerType === "legacy" ? resource?.route : identifier,
+        resource: identifier,
         mutationMode,
         onSuccess: () => {
-          if (routerType === "legacy") {
-            legacyGoList(resource?.route ?? resource?.name ?? "");
-          } else {
-            go({ to: goListPath });
-          }
+          go({ to: goListPath });
         },
         recordItemId: id,
         dataProviderName,
@@ -150,24 +142,16 @@ export const Edit: React.FC<EditProps> = ({
   return (
     <div {...(wrapperProps ?? {})}>
       <PageHeader
-        ghost={false}
         backIcon={goBackFromProps}
         onBack={
-          action !== "list" && typeof action !== "undefined"
-            ? routerType === "legacy"
-              ? goBack
-              : back
-            : undefined
+          action !== "list" && typeof action !== "undefined" ? back : undefined
         }
         title={
           title ??
           translate(
             `${identifier}.titles.edit`,
             `Edit ${getUserFriendlyName(
-              resource?.meta?.label ??
-                resource?.options?.label ??
-                resource?.label ??
-                identifier,
+              resource?.meta?.label ?? identifier,
               "singular",
             )}`,
           )
@@ -186,17 +170,13 @@ export const Edit: React.FC<EditProps> = ({
           </Space>
         }
         breadcrumb={
-          typeof breadcrumb !== "undefined" ? (
-            <>{breadcrumb}</> ?? undefined
-          ) : (
-            <Breadcrumb />
-          )
+          typeof breadcrumb !== "undefined" ? <>{breadcrumb}</> : <Breadcrumb />
         }
         {...(headerProps ?? {})}
       >
         <Spin spinning={isLoading}>
           <Card
-            bordered={false}
+            variant="borderless"
             actions={[
               <Space
                 key="footer-buttons"