@refinedev/core 4.47.2 → 4.49.0

package/src/hooks/breadcrumb/index.ts

@@ -1,135 +1,129 @@
 import React, { useContext } from "react";
+
 import warnOnce from "warn-once";
 
-import { useRefineContext, useResource, useTranslate } from "@hooks";
-import { TranslationContext } from "@contexts/translation";
+import { I18nContext } from "@contexts/i18n";
+import { useRouterType } from "@contexts/router/picker";
 import { pickNotDeprecated } from "@definitions";
-
-import { IResourceItem } from "../../interfaces";
-import { useRouterType } from "@contexts/router-picker";
 import { getActionRoutesFromResource } from "@definitions/helpers/router";
-import { pickResource } from "../../definitions/helpers/pick-resource/index";
 import { composeRoute } from "@definitions/helpers/router/compose-route";
+import { useRefineContext, useResource, useTranslate } from "@hooks";
 import { useParsed } from "@hooks/router/use-parsed";
 
+import { IResourceItem } from "../../contexts/resource/types";
+import { pickResource } from "../../definitions/helpers/pick-resource/index";
+
 export type BreadcrumbsType = {
-    label: string;
-    href?: string;
-    icon?: React.ReactNode;
+  label: string;
+  href?: string;
+  icon?: React.ReactNode;
 };
 
 type UseBreadcrumbReturnType = {
-    breadcrumbs: BreadcrumbsType[];
+  breadcrumbs: BreadcrumbsType[];
 };
 
 type UseBreadcrumbProps = {
-    /**
-     * Additional params to be used in the route generation process.
-     */
-    meta?: Record<string, string | number>;
+  /**
+   * Additional params to be used in the route generation process.
+   */
+  meta?: Record<string, string | number>;
 };
 
 export const useBreadcrumb = ({
-    meta: metaFromProps = {},
+  meta: metaFromProps = {},
 }: UseBreadcrumbProps = {}): UseBreadcrumbReturnType => {
-    const routerType = useRouterType();
-    const { i18nProvider } = useContext(TranslationContext);
-    const parsed = useParsed();
-    const translate = useTranslate();
-    const { resources, resource, action } = useResource();
-    const {
-        options: { textTransformers },
-    } = useRefineContext();
-
-    const breadcrumbs: BreadcrumbsType[] = [];
-
-    if (!resource?.name) {
-        return { breadcrumbs };
+  const routerType = useRouterType();
+  const { i18nProvider } = useContext(I18nContext);
+  const parsed = useParsed();
+  const translate = useTranslate();
+  const { resources, resource, action } = useResource();
+  const {
+    options: { textTransformers },
+  } = useRefineContext();
+
+  const breadcrumbs: BreadcrumbsType[] = [];
+
+  if (!resource?.name) {
+    return { breadcrumbs };
+  }
+
+  const addBreadcrumb = (parentName: string | IResourceItem) => {
+    const parentResource =
+      typeof parentName === "string"
+        ? pickResource(parentName, resources, routerType === "legacy") ?? {
+            name: parentName,
+          }
+        : parentName;
+
+    if (parentResource) {
+      const grandParentName = pickNotDeprecated(
+        parentResource?.meta?.parent,
+        parentResource?.parentName,
+      );
+      if (grandParentName) {
+        addBreadcrumb(grandParentName);
+      }
+      const listActionOfResource = getActionRoutesFromResource(
+        parentResource,
+        resources,
+        routerType === "legacy",
+      ).find((r) => r.action === "list");
+
+      const hrefRaw = listActionOfResource?.resource?.list
+        ? listActionOfResource?.route
+        : undefined;
+
+      const href = hrefRaw
+        ? routerType === "legacy"
+          ? hrefRaw
+          : composeRoute(hrefRaw, parentResource?.meta, parsed, metaFromProps)
+        : undefined;
+
+      breadcrumbs.push({
+        label:
+          pickNotDeprecated(
+            parentResource.meta?.label,
+            parentResource.options?.label,
+          ) ??
+          translate(
+            `${parentResource.name}.${parentResource.name}`,
+            textTransformers.humanize(parentResource.name),
+          ),
+        href: href,
+        icon: pickNotDeprecated(
+          parentResource.meta?.icon,
+          parentResource.options?.icon,
+          parentResource.icon,
+        ),
+      });
     }
-
-    const addBreadcrumb = (parentName: string | IResourceItem) => {
-        const parentResource =
-            typeof parentName === "string"
-                ? pickResource(
-                      parentName,
-                      resources,
-                      routerType === "legacy",
-                  ) ?? { name: parentName }
-                : parentName;
-
-        if (parentResource) {
-            const grandParentName = pickNotDeprecated(
-                parentResource?.meta?.parent,
-                parentResource?.parentName,
-            );
-            if (grandParentName) {
-                addBreadcrumb(grandParentName);
-            }
-            const listActionOfResource = getActionRoutesFromResource(
-                parentResource,
-                resources,
-                routerType === "legacy",
-            ).find((r) => r.action === "list");
-
-            const hrefRaw = listActionOfResource?.resource?.list
-                ? listActionOfResource?.route
-                : undefined;
-
-            const href = hrefRaw
-                ? routerType === "legacy"
-                    ? hrefRaw
-                    : composeRoute(
-                          hrefRaw,
-                          parentResource?.meta,
-                          parsed,
-                          metaFromProps,
-                      )
-                : undefined;
-
-            breadcrumbs.push({
-                label:
-                    pickNotDeprecated(
-                        parentResource.meta?.label,
-                        parentResource.options?.label,
-                    ) ??
-                    translate(
-                        `${parentResource.name}.${parentResource.name}`,
-                        textTransformers.humanize(parentResource.name),
-                    ),
-                href: href,
-                icon: pickNotDeprecated(
-                    parentResource.meta?.icon,
-                    parentResource.options?.icon,
-                    parentResource.icon,
-                ),
-            });
-        }
-    };
-
-    addBreadcrumb(resource);
-
-    if (action && action !== "list") {
-        const key = `actions.${action}`;
-        const actionLabel = translate(key);
-        if (typeof i18nProvider !== "undefined" && actionLabel === key) {
-            warnOnce(
-                true,
-                `[useBreadcrumb]: Breadcrumb missing translate key for the "${action}" action. Please add "actions.${action}" key to your translation file.\nFor more information, see https://refine.dev/docs/api-reference/core/hooks/useBreadcrumb/#i18n-support`,
-            );
-            breadcrumbs.push({
-                label: translate(
-                    `buttons.${action}`,
-                    textTransformers.humanize(action),
-                ),
-            });
-        } else {
-            breadcrumbs.push({
-                label: translate(key, textTransformers.humanize(action)),
-            });
-        }
+  };
+
+  addBreadcrumb(resource);
+
+  if (action && action !== "list") {
+    const key = `actions.${action}`;
+    const actionLabel = translate(key);
+    if (typeof i18nProvider !== "undefined" && actionLabel === key) {
+      warnOnce(
+        true,
+        `[useBreadcrumb]: Breadcrumb missing translate key for the "${action}" action. Please add "actions.${action}" key to your translation file.\nFor more information, see https://refine.dev/docs/api-reference/core/hooks/useBreadcrumb/#i18n-support`,
+      );
+      breadcrumbs.push({
+        label: translate(
+          `buttons.${action}`,
+          textTransformers.humanize(action),
+        ),
+      });
+    } else {
+      breadcrumbs.push({
+        label: translate(key, textTransformers.humanize(action)),
+      });
     }
+  }
 
-    return {
-        breadcrumbs,
-    };
+  return {
+    breadcrumbs,
+  };
 };

package/src/hooks/button/actionable-button/index.tsx

@@ -0,0 +1,26 @@
+import { useRefineOptions } from "../../use-refine-options";
+import { useTranslate } from "../../i18n";
+
+export type ActionableButtonProps = {
+  type: "save" | "export" | "import";
+};
+
+export type ActionableButtonValues = {
+  label: string;
+};
+
+export function useActionableButton({
+  type,
+}: ActionableButtonProps): ActionableButtonValues {
+  const translate = useTranslate();
+  const {
+    textTransformers: { humanize },
+  } = useRefineOptions();
+
+  const key = `buttons.${type}`;
+  const fallback = humanize(type);
+
+  const label = translate(key, fallback);
+
+  return { label };
+}

package/src/hooks/button/button-can-access/index.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+
+import { AccessControlContext } from "../../../contexts/accessControl";
+import { useCan } from "../../accessControl";
+import { useTranslate } from "../../i18n";
+
+import type { CanReturnType } from "../../../contexts/accessControl/types";
+import type { IResourceItem } from "../../../contexts/resource/types";
+import type { Action } from "../../../contexts/router/types";
+import type { BaseKey } from "../../../contexts/data/types";
+
+type ButtonCanAccessProps = {
+  action: Action | "delete";
+  resource?: IResourceItem;
+  id?: BaseKey;
+  accessControl?: {
+    enabled?: boolean;
+    hideIfUnauthorized?: boolean;
+  };
+};
+
+type ButtonCanAccessValues = {
+  title: string;
+  hidden: boolean;
+  disabled: boolean;
+  canAccess: CanReturnType | undefined;
+};
+
+export const useButtonCanAccess = (
+  props: ButtonCanAccessProps,
+): ButtonCanAccessValues => {
+  const translate = useTranslate();
+  const accessControlContext = React.useContext(AccessControlContext);
+
+  const accessControlEnabled =
+    props.accessControl?.enabled ??
+    accessControlContext.options.buttons.enableAccessControl;
+
+  const hideIfUnauthorized =
+    props.accessControl?.hideIfUnauthorized ??
+    accessControlContext.options.buttons.hideIfUnauthorized;
+
+  const { data: canAccess } = useCan({
+    resource: props.resource?.name,
+    action: props.action === "clone" ? "create" : props.action,
+    params: { id: props.id, resource: props.resource },
+    queryOptions: {
+      enabled: accessControlEnabled,
+    },
+  });
+
+  const title = React.useMemo(() => {
+    if (canAccess?.can) return "";
+    if (canAccess?.reason) return canAccess.reason;
+
+    return translate(
+      "buttons.notAccessTitle",
+      "You don't have permission to access",
+    );
+  }, [canAccess?.can, canAccess?.reason, translate]);
+
+  const hidden = accessControlEnabled && hideIfUnauthorized && !canAccess?.can;
+
+  const disabled = canAccess?.can === false;
+
+  return {
+    title,
+    hidden,
+    disabled,
+    canAccess,
+  };
+};

package/src/hooks/button/delete-button/index.tsx

@@ -0,0 +1,101 @@
+import { useTranslate } from "../../i18n";
+import { useDelete } from "../../data/useDelete";
+import { useButtonCanAccess } from "../button-can-access";
+import { useResourceParams } from "../../use-resource-params";
+import { useMutationMode, useWarnAboutChange } from "../../refine";
+
+import type { BaseKey, DeleteOneResponse } from "../../../contexts/data/types";
+import type { CanReturnType } from "../../../contexts/accessControl/types";
+import type { DeleteParams } from "../../data/useDelete";
+
+export type DeleteButtonProps = {
+  resource?: string;
+  id?: BaseKey;
+  dataProviderName?: string;
+  meta?: Record<string, unknown>;
+  accessControl?: {
+    enabled?: boolean;
+    hideIfUnauthorized?: boolean;
+  };
+  onSuccess?: (value: DeleteOneResponse) => void;
+} & Pick<
+  DeleteParams<any, any, any>,
+  "mutationMode" | "successNotification" | "errorNotification" | "invalidates"
+>;
+
+export type DeleteButtonValues = {
+  label: string;
+  title: string;
+  hidden: boolean;
+  loading: boolean;
+  disabled: boolean;
+  canAccess: CanReturnType | undefined;
+  confirmOkLabel: string;
+  cancelLabel: string;
+  confirmTitle: string;
+  onConfirm: () => void;
+};
+
+export function useDeleteButton(props: DeleteButtonProps): DeleteButtonValues {
+  const translate = useTranslate();
+  const { mutate, isLoading, variables } = useDelete();
+  const { setWarnWhen } = useWarnAboutChange();
+  const { mutationMode } = useMutationMode(props.mutationMode);
+
+  const { id, resource, identifier } = useResourceParams({
+    resource: props.resource,
+    id: props.id,
+  });
+
+  const { title, disabled, hidden, canAccess } = useButtonCanAccess({
+    action: "delete",
+    accessControl: props.accessControl,
+    id,
+    resource,
+  });
+
+  const label = translate("buttons.delete", "Delete");
+
+  const confirmOkLabel = translate("buttons.delete", "Delete");
+
+  const confirmTitle = translate("buttons.confirm", "Are you sure?");
+
+  const cancelLabel = translate("buttons.cancel", "Cancel");
+
+  const loading = id === variables?.id && isLoading;
+
+  const onConfirm = () => {
+    if (id && identifier) {
+      setWarnWhen(false);
+      mutate(
+        {
+          id,
+          resource: identifier,
+          mutationMode,
+          successNotification: props.successNotification,
+          errorNotification: props.errorNotification,
+          meta: props.meta,
+          metaData: props.meta,
+          dataProviderName: props.dataProviderName,
+          invalidates: props.invalidates,
+        },
+        {
+          onSuccess: props.onSuccess,
+        },
+      );
+    }
+  };
+
+  return {
+    label,
+    title,
+    hidden,
+    disabled,
+    canAccess,
+    loading,
+    confirmOkLabel,
+    cancelLabel,
+    confirmTitle,
+    onConfirm,
+  };
+}

package/src/hooks/button/index.tsx

@@ -0,0 +1,35 @@
+import { useActionableButton } from "./actionable-button";
+import { useNavigationButton } from "./navigation-button";
+
+import type { NavigationButtonProps } from "./navigation-button";
+import type { Prettify } from "../../contexts/data/types";
+
+export { useDeleteButton } from "./delete-button";
+
+export { useRefreshButton } from "./refresh-button";
+
+export const useShowButton = (
+  props: Prettify<Omit<NavigationButtonProps, "action">>,
+) => useNavigationButton({ ...props, action: "show" });
+
+export const useEditButton = (
+  props: Prettify<Omit<NavigationButtonProps, "action">>,
+) => useNavigationButton({ ...props, action: "edit" });
+
+export const useCloneButton = (
+  props: Prettify<Omit<NavigationButtonProps, "action">>,
+) => useNavigationButton({ ...props, action: "clone" });
+
+export const useCreateButton = (
+  props: Prettify<Omit<NavigationButtonProps, "action" | "id">>,
+) => useNavigationButton({ ...props, action: "create" });
+
+export const useListButton = (
+  props: Prettify<Omit<NavigationButtonProps, "action" | "id">>,
+) => useNavigationButton({ ...props, action: "list" });
+
+export const useSaveButton = () => useActionableButton({ type: "save" });
+
+export const useExportButton = () => useActionableButton({ type: "export" });
+
+export const useImportButton = () => useActionableButton({ type: "import" });

package/src/hooks/button/navigation-button/index.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+
+import { useUserFriendlyName } from "../../../definitions/helpers/useUserFriendlyName";
+import { useRouterType } from "../../../contexts/router/picker";
+import { useResourceParams } from "../../use-resource-params";
+import { useRefineOptions } from "../../use-refine-options";
+import { useButtonCanAccess } from "../button-can-access";
+import { useRouterContext } from "../../legacy-router";
+import { useNavigation } from "../../navigation";
+import { useTranslate } from "../../i18n";
+import { useLink } from "../../router";
+
+import type { BaseKey } from "../../../contexts/data/types";
+import type { Action } from "../../../contexts/router/types";
+import type { CanReturnType } from "../../../contexts/accessControl/types";
+
+export type NavigationButtonProps = {
+  action: Action;
+  id?: BaseKey;
+  resource?: string;
+  meta?: Record<string, unknown>;
+  accessControl?: {
+    enabled?: boolean;
+    hideIfUnauthorized?: boolean;
+  };
+};
+
+export type NavigationButtonValues = {
+  to: string;
+  label: string;
+  disabled: boolean;
+  title: string;
+  hidden: boolean;
+  canAccess: CanReturnType | undefined;
+  LinkComponent: React.ComponentType<
+    React.PropsWithChildren<{
+      // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+      [prop: string]: any;
+      to: string;
+    }>
+  >;
+};
+
+export function useNavigationButton(
+  props: NavigationButtonProps,
+): NavigationButtonValues {
+  const navigation = useNavigation();
+  const routerType = useRouterType();
+  const Link = useLink();
+  const { Link: LegacyLink } = useRouterContext();
+  const translate = useTranslate();
+  const getUserFriendlyName = useUserFriendlyName();
+  const {
+    textTransformers: { humanize },
+  } = useRefineOptions();
+
+  const { id, resource, identifier } = useResourceParams({
+    resource: props.resource,
+    id: props.action === "create" ? undefined : props.id,
+  });
+
+  const { canAccess, title, hidden, disabled } = useButtonCanAccess({
+    action: props.action,
+    accessControl: props.accessControl,
+    id,
+    resource,
+  });
+
+  const LinkComponent = routerType === "legacy" ? LegacyLink : Link;
+
+  const to = React.useMemo(() => {
+    if (!resource) return "";
+    switch (props.action) {
+      case "create":
+      case "list":
+        return navigation[`${props.action}Url`](resource, props.meta);
+      default:
+        if (!id) return "";
+        return navigation[`${props.action}Url`](resource, id, props.meta);
+    }
+  }, [resource, id, props.meta, navigation[`${props.action}Url`]]);
+
+  const label =
+    props.action === "list"
+      ? translate(
+          `${identifier ?? props.resource}.titles.list`,
+          getUserFriendlyName(
+            resource?.meta?.label ??
+              resource?.label ??
+              identifier ??
+              props.resource,
+            "plural",
+          ),
+        )
+      : translate(`buttons.${props.action}`, humanize(props.action));
+
+  return {
+    to,
+    label,
+    title,
+    disabled,
+    hidden,
+    canAccess,
+    LinkComponent,
+  };
+}

package/src/hooks/button/refresh-button/index.tsx

@@ -0,0 +1,65 @@
+import { useQueryClient } from "@tanstack/react-query";
+
+import { useTranslate } from "../../i18n";
+import { useInvalidate } from "../../invalidate";
+import { useResourceParams } from "../../use-resource-params";
+import { useResource } from "../../resource";
+import { useKeys } from "../../useKeys";
+import { pickDataProvider } from "../../../definitions";
+
+import type { BaseKey } from "../../../contexts/data/types";
+
+export type RefreshButtonProps = {
+  resource?: string;
+  id?: BaseKey;
+  dataProviderName?: string;
+  meta?: Record<string, unknown>;
+};
+
+export type RefreshButtonValues = {
+  onClick: () => void;
+  label: string;
+  loading: boolean;
+};
+
+export function useRefreshButton(
+  props: RefreshButtonProps,
+): RefreshButtonValues {
+  const translate = useTranslate();
+  const { keys, preferLegacyKeys } = useKeys();
+
+  const queryClient = useQueryClient();
+  const invalidates = useInvalidate();
+
+  const { identifier, id } = useResourceParams({
+    resource: props.resource,
+    id: props.id,
+  });
+
+  const { resources } = useResource();
+
+  const loading = !!queryClient.isFetching({
+    queryKey: keys()
+      .data(pickDataProvider(identifier, props.dataProviderName, resources))
+      .resource(identifier)
+      .action("one")
+      .get(preferLegacyKeys),
+  });
+
+  const onClick = () => {
+    invalidates({
+      id,
+      invalidates: ["detail"],
+      dataProviderName: props.dataProviderName,
+      resource: identifier,
+    });
+  };
+
+  const label = translate("buttons.refresh", "Refresh");
+
+  return {
+    onClick,
+    label,
+    loading,
+  };
+}

package/src/hooks/data/useApiUrl.ts

@@ -2,14 +2,13 @@ import { pickNotDeprecated } from "@definitions/index";
 import { useDataProvider, useResource } from "@hooks";
 
 export const useApiUrl = (dataProviderName?: string): string => {
-    const dataProvider = useDataProvider();
-    const { resource } = useResource();
+  const dataProvider = useDataProvider();
+  const { resource } = useResource();
 
-    const { getApiUrl } = dataProvider(
-        dataProviderName ??
-            pickNotDeprecated(resource?.meta, resource?.options)
-                ?.dataProviderName,
-    );
+  const { getApiUrl } = dataProvider(
+    dataProviderName ??
+      pickNotDeprecated(resource?.meta, resource?.options)?.dataProviderName,
+  );
 
-    return getApiUrl();
+  return getApiUrl();
 };