@refinedev/core 4.47.2 → 4.49.0

package/src/components/pages/login/index.tsx

@@ -3,8 +3,8 @@ import React, { useState } from "react";
 import { useLogin, useTranslate } from "@hooks";
 import { useActiveAuthProvider } from "@definitions/helpers";
 export interface ILoginForm {
-    username: string;
-    password: string;
+  username: string;
+  password: string;
 }
 
 /**
@@ -14,78 +14,64 @@ export interface ILoginForm {
  * @see {@link https://refine.dev/docs/api-reference/core/components/refine-config/#loginpage} for more details.
  */
 export const LoginPage: React.FC = () => {
-    const [username, setUsername] = useState("");
-    const [password, setPassword] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
 
-    const translate = useTranslate();
+  const translate = useTranslate();
 
-    const authProvider = useActiveAuthProvider();
-    const { mutate: login } = useLogin<ILoginForm>({
-        v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
-    });
+  const authProvider = useActiveAuthProvider();
+  const { mutate: login } = useLogin<ILoginForm>({
+    v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
+  });
 
-    return (
-        <>
-            <h1>{translate("pages.login.title", "Sign in your account")}</h1>
-            <form
-                onSubmit={(e) => {
-                    e.preventDefault();
-                    login({ username, password });
-                }}
-            >
-                <table>
-                    <tbody>
-                        <tr>
-                            <td>
-                                {translate(
-                                    "pages.login.username",
-                                    undefined,
-                                    "username",
-                                )}
-                                :
-                            </td>
-                            <td>
-                                <input
-                                    type="text"
-                                    size={20}
-                                    autoCorrect="off"
-                                    spellCheck={false}
-                                    autoCapitalize="off"
-                                    autoFocus
-                                    required
-                                    value={username}
-                                    onChange={(e) =>
-                                        setUsername(e.target.value)
-                                    }
-                                />
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                {translate(
-                                    "pages.login.password",
-                                    undefined,
-                                    "password",
-                                )}
-                                :
-                            </td>
-                            <td>
-                                <input
-                                    type="password"
-                                    required
-                                    size={20}
-                                    value={password}
-                                    onChange={(e) =>
-                                        setPassword(e.target.value)
-                                    }
-                                />
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-                <br />
-                <input type="submit" value="login" />
-            </form>
-        </>
-    );
+  return (
+    <>
+      <h1>{translate("pages.login.title", "Sign in your account")}</h1>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          login({ username, password });
+        }}
+      >
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                {translate("pages.login.username", undefined, "username")}:
+              </td>
+              <td>
+                <input
+                  type="text"
+                  size={20}
+                  autoCorrect="off"
+                  spellCheck={false}
+                  autoCapitalize="off"
+                  autoFocus
+                  required
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                {translate("pages.login.password", undefined, "password")}:
+              </td>
+              <td>
+                <input
+                  type="password"
+                  required
+                  size={20}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <br />
+        <input type="submit" value="login" />
+      </form>
+    </>
+  );
 };

package/src/components/pages/ready/index.tsx

@@ -6,33 +6,25 @@ import React from "react";
  * @deprecated `ReadyPage` is deprecated and will be removed in the next major release.
  */
 export const ReadyPage: React.FC = () => {
-    return (
-        <>
-            <h1>Welcome on board</h1>
-            <p>Your configuration is completed.</p>
-            <p>
-                Now you can get started by adding your resources to the{" "}
-                <code>`resources`</code> property of <code>{"`<Refine>`"}</code>
-            </p>
-            <div style={{ display: "flex", gap: 8 }}>
-                <a href="https://refine.dev" target="_blank" rel="noreferrer">
-                    <button>Documentation</button>
-                </a>
-                <a
-                    href="https://refine.dev/examples"
-                    target="_blank"
-                    rel="noreferrer"
-                >
-                    <button>Examples</button>
-                </a>
-                <a
-                    href="https://discord.gg/refine"
-                    target="_blank"
-                    rel="noreferrer"
-                >
-                    <button>Community</button>
-                </a>
-            </div>
-        </>
-    );
+  return (
+    <>
+      <h1>Welcome on board</h1>
+      <p>Your configuration is completed.</p>
+      <p>
+        Now you can get started by adding your resources to the{" "}
+        <code>`resources`</code> property of <code>{"`<Refine>`"}</code>
+      </p>
+      <div style={{ display: "flex", gap: 8 }}>
+        <a href="https://refine.dev" target="_blank" rel="noreferrer">
+          <button>Documentation</button>
+        </a>
+        <a href="https://refine.dev/examples" target="_blank" rel="noreferrer">
+          <button>Examples</button>
+        </a>
+        <a href="https://discord.gg/refine" target="_blank" rel="noreferrer">
+          <button>Community</button>
+        </a>
+      </div>
+    </>
+  );
 };

package/src/components/pages/welcome/index.tsx

@@ -4,12 +4,12 @@ import { useRefineContext } from "@hooks/refine";
 import { ConfigErrorPage } from "../config-error";
 
 export const WelcomePage = () => {
-    const { __initialized } = useRefineContext();
+  const { __initialized } = useRefineContext();
 
-    return (
-        <>
-            <ConfigSuccessPage />
-            {!__initialized && <ConfigErrorPage />}
-        </>
-    );
+  return (
+    <>
+      <ConfigSuccessPage />
+      {!__initialized && <ConfigErrorPage />}
+    </>
+  );
 };

package/src/components/routeChangeHandler/index.tsx

@@ -3,14 +3,14 @@ import { useRouterContext } from "@hooks";
 import { useLegacyAuthContext } from "@contexts/auth";
 
 export const RouteChangeHandler: React.FC = () => {
-    const { useLocation } = useRouterContext();
+  const { useLocation } = useRouterContext();
 
-    const { checkAuth } = useLegacyAuthContext();
-    const location = useLocation();
+  const { checkAuth } = useLegacyAuthContext();
+  const location = useLocation();
 
-    useEffect(() => {
-        checkAuth?.().catch(() => false);
-    }, [location?.pathname]);
+  useEffect(() => {
+    checkAuth?.().catch(() => false);
+  }, [location?.pathname]);
 
-    return null;
+  return null;
 };

package/src/components/telemetry/index.tsx

@@ -2,57 +2,57 @@ import React from "react";
 
 import { useTelemetryData } from "@hooks/useTelemetryData";
 
-import { ITelemetryData } from "../../interfaces/telemetry";
+import { ITelemetryData } from "./types";
 
 const encode = (payload: ITelemetryData): string | undefined => {
-    try {
-        const stringifiedPayload = JSON.stringify(payload || {});
+  try {
+    const stringifiedPayload = JSON.stringify(payload || {});
 
-        if (typeof btoa !== "undefined") {
-            return btoa(stringifiedPayload);
-        }
-
-        return Buffer.from(stringifiedPayload).toString("base64");
-    } catch (err) {
-        return undefined;
+    if (typeof btoa !== "undefined") {
+      return btoa(stringifiedPayload);
     }
+
+    return Buffer.from(stringifiedPayload).toString("base64");
+  } catch (err) {
+    return undefined;
+  }
 };
 
 const throughImage = (src: string) => {
-    const img = new Image();
+  const img = new Image();
 
-    img.src = src;
+  img.src = src;
 };
 
 const throughFetch = (src: string) => {
-    fetch(src);
+  fetch(src);
 };
 
 const transport = (src: string) => {
-    if (typeof Image !== "undefined") {
-        throughImage(src);
-    } else if (typeof fetch !== "undefined") {
-        throughFetch(src);
-    }
+  if (typeof Image !== "undefined") {
+    throughImage(src);
+  } else if (typeof fetch !== "undefined") {
+    throughFetch(src);
+  }
 };
 
 export const Telemetry: React.FC<{}> = () => {
-    const payload = useTelemetryData();
-    const sent = React.useRef(false);
+  const payload = useTelemetryData();
+  const sent = React.useRef(false);
 
-    React.useEffect(() => {
-        if (sent.current) {
-            return;
-        }
-        const encoded = encode(payload);
+  React.useEffect(() => {
+    if (sent.current) {
+      return;
+    }
+    const encoded = encode(payload);
 
-        if (!encoded) {
-            return;
-        }
+    if (!encoded) {
+      return;
+    }
 
-        transport(`https://telemetry.refine.dev/telemetry?payload=${encoded}`);
-        sent.current = true;
-    }, []);
+    transport(`https://telemetry.refine.dev/telemetry?payload=${encoded}`);
+    sent.current = true;
+  }, []);
 
-    return null;
+  return null;
 };

package/src/components/telemetry/types.ts

@@ -0,0 +1,15 @@
+export type ITelemetryData = {
+  providers: {
+    auth?: boolean;
+    data?: boolean;
+    router?: boolean;
+    notification?: boolean;
+    live?: boolean;
+    auditLog?: boolean;
+    i18n?: boolean;
+    accessControl?: boolean;
+  };
+  version: string;
+  resourceCount: number;
+  projectId?: string;
+};

package/src/components/undoableQueue/index.tsx

@@ -1,68 +1,70 @@
 import React, { useEffect, useState } from "react";
 
-import { ActionTypes } from "@contexts/undoableQueue";
 import { useCancelNotification, useNotification, useTranslate } from "@hooks";
-import { IUndoableQueue } from "../../interfaces";
 
 import { userFriendlySecond } from "@definitions/helpers";
+import {
+  ActionTypes,
+  IUndoableQueue,
+} from "../../contexts/undoableQueue/types";
 
 export const UndoableQueue: React.FC<{
-    notification: IUndoableQueue;
+  notification: IUndoableQueue;
 }> = ({ notification }) => {
-    const translate = useTranslate();
+  const translate = useTranslate();
 
-    const { notificationDispatch } = useCancelNotification();
-    const { open } = useNotification();
+  const { notificationDispatch } = useCancelNotification();
+  const { open } = useNotification();
 
-    const [timeoutId, setTimeoutId] = useState<number | undefined>();
+  const [timeoutId, setTimeoutId] = useState<number | undefined>();
 
-    const cancelNotification = () => {
-        if (notification.isRunning === true) {
-            if (notification.seconds === 0) {
-                notification.doMutation();
-            }
-            if (!notification.isSilent) {
-                open?.({
-                    key: `${notification.id}-${notification.resource}-notification`,
-                    type: "progress",
-                    message: translate(
-                        "notifications.undoable",
-                        {
-                            seconds: userFriendlySecond(notification.seconds),
-                        },
-                        `You have ${userFriendlySecond(
-                            notification.seconds,
-                        )} seconds to undo`,
-                    ),
-                    cancelMutation: notification.cancelMutation,
-                    undoableTimeout: userFriendlySecond(notification.seconds),
-                });
-            }
+  const cancelNotification = () => {
+    if (notification.isRunning === true) {
+      if (notification.seconds === 0) {
+        notification.doMutation();
+      }
+      if (!notification.isSilent) {
+        open?.({
+          key: `${notification.id}-${notification.resource}-notification`,
+          type: "progress",
+          message: translate(
+            "notifications.undoable",
+            {
+              seconds: userFriendlySecond(notification.seconds),
+            },
+            `You have ${userFriendlySecond(
+              notification.seconds,
+            )} seconds to undo`,
+          ),
+          cancelMutation: notification.cancelMutation,
+          undoableTimeout: userFriendlySecond(notification.seconds),
+        });
+      }
 
-            if (notification.seconds > 0) {
-                if (timeoutId) {
-                    clearTimeout(timeoutId);
-                }
+      if (notification.seconds > 0) {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
 
-                const newTimeoutId = setTimeout(() => {
-                    notificationDispatch({
-                        type: ActionTypes.DECREASE_NOTIFICATION_SECOND,
-                        payload: {
-                            id: notification.id,
-                            seconds: notification.seconds,
-                            resource: notification.resource,
-                        },
-                    });
-                }, 1000) as unknown as number;
+        const newTimeoutId = setTimeout(() => {
+          notificationDispatch({
+            type: ActionTypes.DECREASE_NOTIFICATION_SECOND,
+            payload: {
+              id: notification.id,
+              seconds: notification.seconds,
+              resource: notification.resource,
+            },
+          });
+        }, 1000) as unknown as number;
 
-                setTimeoutId(newTimeoutId);
-            }
-        }
-    };
+        setTimeoutId(newTimeoutId);
+      }
+    }
+  };
 
-    useEffect(() => {
-        cancelNotification();
-    }, [notification]);
+  useEffect(() => {
+    cancelNotification();
+  }, [notification]);
 
-    return null;
+  return null;
 };

package/src/contexts/accessControl/index.tsx

@@ -1,50 +1,46 @@
-import React from "react";
+import React, { PropsWithChildren } from "react";
 
 import {
-    IAccessControlContext,
-    IAccessControlContextReturnType,
-} from "./IAccessControlContext";
+  IAccessControlContext,
+  IAccessControlContextReturnType,
+} from "./types";
 
 /** @deprecated default value for access control context has no use and is an empty object. */
-export const defaultAccessControlContext: IAccessControlContext = {};
+export const defaultAccessControlContext = {} as IAccessControlContext;
 
 export const AccessControlContext =
-    React.createContext<IAccessControlContextReturnType>({
-        options: {
-            buttons: { enableAccessControl: true, hideIfUnauthorized: false },
-        },
-    });
-
-export { IAccessControlContext };
+  React.createContext<IAccessControlContextReturnType>({
+    options: {
+      buttons: { enableAccessControl: true, hideIfUnauthorized: false },
+    },
+  });
 
 export const AccessControlContextProvider: React.FC<
-    IAccessControlContext & {
-        children?: React.ReactNode;
-    }
+  PropsWithChildren<IAccessControlContext>
 > = ({ can, children, options }) => {
-    return (
-        <AccessControlContext.Provider
-            value={{
-                can,
-                options: options
-                    ? {
-                          ...options,
-                          buttons: {
-                              enableAccessControl: true,
-                              hideIfUnauthorized: false,
-                              ...options.buttons,
-                          },
-                      }
-                    : {
-                          buttons: {
-                              enableAccessControl: true,
-                              hideIfUnauthorized: false,
-                          },
-                          queryOptions: undefined,
-                      },
-            }}
-        >
-            {children}
-        </AccessControlContext.Provider>
-    );
+  return (
+    <AccessControlContext.Provider
+      value={{
+        can,
+        options: options
+          ? {
+              ...options,
+              buttons: {
+                enableAccessControl: true,
+                hideIfUnauthorized: false,
+                ...options.buttons,
+              },
+            }
+          : {
+              buttons: {
+                enableAccessControl: true,
+                hideIfUnauthorized: false,
+              },
+              queryOptions: undefined,
+            },
+      }}
+    >
+      {children}
+    </AccessControlContext.Provider>
+  );
 };

package/src/contexts/accessControl/types.ts

@@ -0,0 +1,93 @@
+/**
+ * @author aliemir
+ *
+ * `AccessControlProvider` interface, used to define the access control bindings of refine.
+ *
+ * Currently, there's no change in the interface, but only in the `params.resource` property.
+ *
+ * This also had `{ children?: ITreeMenu[] }` type extension but we can remove it now.
+ *
+ * There's an error behind this extension, since we're using `Tanstack Query` to check the `can` function,
+ * params are stringified and Nodes can't be stringified properly, which throws an error.
+ *
+ * These kinds of errors should be handled by the user of the `can` function, not by the `can` function itself.
+ *
+ * In this case, its the `CanAccess` component, which wraps the `can` function and is used in the `Sider` components.
+ * `Sider` should sanitize the `params.resource` property and remove the `children` property (if exists).
+ *
+ * This may also apply to `resource.icon` property.
+ *
+ */
+import { UseQueryOptions } from "@tanstack/react-query";
+
+import { BaseKey } from "../data/types";
+import { IResourceItem, ITreeMenu } from "../resource/types";
+
+export type CanResponse = {
+  can: boolean;
+  reason?: string;
+  [key: string]: unknown;
+};
+
+export type CanParams = {
+  /**
+   * Resource name for API data interactions
+   */
+  resource?: string;
+  /**
+   * Intended action on resource
+   */
+  action: string;
+  /**
+   * Parameters associated with the resource
+   * @type {
+   *   resource?: [IResourceItem](https://refine.dev/docs/api-reference/core/interfaceReferences/#canparams),
+   *   id?: [BaseKey](https://refine.dev/docs/api-reference/core/interfaceReferences/#basekey), [key: string]: any
+   * }
+   */
+  params?: {
+    resource?: IResourceItem & { children?: ITreeMenu[] };
+    id?: BaseKey;
+    [key: string]: any;
+  };
+};
+
+export type CanReturnType = {
+  can: boolean;
+  reason?: string;
+};
+
+export type CanFunction = ({
+  resource,
+  action,
+  params,
+}: CanParams) => Promise<CanReturnType>;
+
+type AccessControlOptions = {
+  buttons?: {
+    enableAccessControl?: boolean;
+    hideIfUnauthorized?: boolean;
+  };
+  queryOptions?: UseQueryOptions<CanReturnType>;
+};
+
+export interface IAccessControlContext {
+  can?: CanFunction;
+  options?: AccessControlOptions;
+}
+
+export type IAccessControlContextReturnType = {
+  can?: CanFunction;
+  options: {
+    buttons: {
+      enableAccessControl: boolean;
+      hideIfUnauthorized: boolean;
+    };
+    queryOptions?: UseQueryOptions<CanReturnType>;
+  };
+};
+
+export type AccessControlProvider = {
+  can: CanFunction;
+  options?: AccessControlOptions;
+};