diff --git a/packages/admin-next/dashboard/src/components/common/infinite-list/infinite-list.tsx b/packages/admin-next/dashboard/src/components/common/infinite-list/infinite-list.tsx index 6b8b3e5240..49d52642d9 100644 --- a/packages/admin-next/dashboard/src/components/common/infinite-list/infinite-list.tsx +++ b/packages/admin-next/dashboard/src/components/common/infinite-list/infinite-list.tsx @@ -1,15 +1,14 @@ import { QueryKey, useInfiniteQuery } from "@tanstack/react-query" import { ReactNode, useEffect, useMemo, useRef } from "react" -import { Skeleton } from "../skeleton" import { toast } from "@medusajs/ui" import { Spinner } from "@medusajs/icons" -import { useTranslation } from "react-i18next" type InfiniteListProps = { queryKey: QueryKey queryFn: (params: TParams) => Promise queryOptions?: { enabled?: boolean } renderItem: (item: TEntity) => ReactNode + renderEmpty: () => ReactNode responseKey: keyof TResponse pageSize?: number } @@ -23,11 +22,10 @@ export const InfiniteList = < queryFn, queryOptions, renderItem, + renderEmpty, responseKey, pageSize = 20, }: InfiniteListProps) => { - const { t } = useTranslation() - const { data, error, @@ -114,18 +112,22 @@ export const InfiniteList = < }, [error]) if (isPending) { - return + return ( +
+ +
+ ) } return ( -
- {items && - items.map((item) =>
{renderItem(item)}
)} +
+ {items?.length + ? items.map((item) =>
{renderItem(item)}
) + : renderEmpty()} - {(isFetching || !hasNextPage) && ( -
- {isFetching && } - {!hasNextPage &&

{t("general.noMoreData")}

} + {isFetching && ( +
+
)}
diff --git a/packages/admin-next/dashboard/src/components/layout/notifications/notifications.tsx b/packages/admin-next/dashboard/src/components/layout/notifications/notifications.tsx index b0bcf25c3b..1175e99faa 100644 --- a/packages/admin-next/dashboard/src/components/layout/notifications/notifications.tsx +++ b/packages/admin-next/dashboard/src/components/layout/notifications/notifications.tsx @@ -1,17 +1,18 @@ import { ArrowDownTray, BellAlert, + BellAlertDone, InformationCircleSolid, } from "@medusajs/icons" -import { Drawer, Heading, IconButton, Label, Text } from "@medusajs/ui" +import { Drawer, Heading, IconButton, Text } from "@medusajs/ui" import { useEffect, useState } from "react" import { useTranslation } from "react-i18next" import { HttpTypes } from "@medusajs/types" import { formatDistance } from "date-fns" -import { Divider } from "../../common/divider" import { InfiniteList } from "../../common/infinite-list" import { sdk } from "../../../lib/client" import { notificationQueryKeys } from "../../../hooks/api" +import { TFunction } from "i18next" interface NotificationData { title: string @@ -70,6 +71,7 @@ export const Notifications = () => { queryKey={notificationQueryKeys.all} queryFn={(params) => sdk.admin.notification.list(params)} queryOptions={{ enabled: open }} + renderEmpty={() => } renderItem={(notification) => { return ( {
) } + +const NotificationsEmptyState = ({ t }: { t: TFunction }) => { + return ( +
+ + + {t("notifications.emptyState.title")} + + + {t("notifications.emptyState.description")} + +
+ ) +} diff --git a/packages/admin-next/dashboard/src/i18n/translations/en.json b/packages/admin-next/dashboard/src/i18n/translations/en.json index 929f2e331c..fcf93644d0 100644 --- a/packages/admin-next/dashboard/src/i18n/translations/en.json +++ b/packages/admin-next/dashboard/src/i18n/translations/en.json @@ -2112,6 +2112,10 @@ }, "notifications": { "domain": "Notifications", + "emptyState": { + "title": "No notifications", + "description": "You don't have any notifications at the moment, but once you do they will live here." + }, "accessibility": { "description": "notifications about Medusa activities will be listed here." } diff --git a/packages/design-system/icons/src/components/__tests__/bell-alert-done.spec.tsx b/packages/design-system/icons/src/components/__tests__/bell-alert-done.spec.tsx new file mode 100644 index 0000000000..290bf9f3d6 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/bell-alert-done.spec.tsx @@ -0,0 +1,16 @@ +import * as React from "react" +import { cleanup, render, screen } from "@testing-library/react" + +import BellAlertDone from "../bell-alert-done" + +describe("BellAlertDone", () => { + it("should render the icon without errors", async () => { + render() + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) +}) diff --git a/packages/design-system/icons/src/components/bell-alert-done.tsx b/packages/design-system/icons/src/components/bell-alert-done.tsx new file mode 100644 index 0000000000..04596db50e --- /dev/null +++ b/packages/design-system/icons/src/components/bell-alert-done.tsx @@ -0,0 +1,37 @@ +import * as React from "react" +import type { IconProps } from "../types" +const BellAlertDone = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + + + + + ) + } +) +BellAlertDone.displayName = "BellAlertDone" +export default BellAlertDone diff --git a/packages/design-system/icons/src/components/index.ts b/packages/design-system/icons/src/components/index.ts index 911eb29bd1..4cb72ab933 100644 --- a/packages/design-system/icons/src/components/index.ts +++ b/packages/design-system/icons/src/components/index.ts @@ -41,6 +41,7 @@ export { default as BarsThree } from "./bars-three" export { default as Beaker } from "./beaker" export { default as BellAlertSolid } from "./bell-alert-solid" export { default as BellAlert } from "./bell-alert" +export { default as BellAlertDone } from "./bell-alert-done" export { default as BoltSolid } from "./bolt-solid" export { default as Bolt } from "./bolt" export { default as BookOpen } from "./book-open"