@@ -33,18 +27,8 @@ const MainContentSection = ({
) : null}
- {sidebar && (
-
- {sidebar}
-
- )}
-
- {!isNotificationListHidden && }
+
+
{children}
diff --git a/src/app/base/components/NotificationList/NotificationList.test.tsx b/src/app/base/components/NotificationList/NotificationList.test.tsx
index 81d71e6d17..33b509ffca 100644
--- a/src/app/base/components/NotificationList/NotificationList.test.tsx
+++ b/src/app/base/components/NotificationList/NotificationList.test.tsx
@@ -208,4 +208,26 @@ describe("NotificationList", () => {
).not.toBeInTheDocument();
expect(screen.queryByTestId("notification-count")).not.toBeInTheDocument();
});
+
+ it("applies the correct className when has content", () => {
+ const notificationsWithContent = [
+ notificationFactory({
+ id: 1,
+ category: NotificationCategory.INFO,
+ message: "Informational message",
+ }),
+ ];
+ const stateWithContent = rootStateFactory({
+ notification: notificationStateFactory({
+ items: notificationsWithContent,
+ }),
+ });
+
+ const store = mockStore(stateWithContent);
+ const { container } = renderWithBrowserRouter(
, {
+ route: "/machines",
+ store,
+ });
+ expect(container.firstChild).toHaveClass("u-nudge-down");
+ });
});
diff --git a/src/app/base/components/NotificationList/NotificationList.tsx b/src/app/base/components/NotificationList/NotificationList.tsx
index 7b151dfc62..1d5bc4edea 100644
--- a/src/app/base/components/NotificationList/NotificationList.tsx
+++ b/src/app/base/components/NotificationList/NotificationList.tsx
@@ -2,8 +2,8 @@ import {
Notification,
NotificationSeverity,
} from "@canonical/react-components";
+import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
-import type { Dispatch } from "redux";
import NotificationGroup from "@/app/base/components/NotificationGroup";
import NotificationGroupNotification from "@/app/base/components/NotificationGroup/Notification";
@@ -14,21 +14,28 @@ import type { Message } from "@/app/store/message/types";
import { actions as notificationActions } from "@/app/store/notification";
import notificationSelectors from "@/app/store/notification/selectors";
-const generateMessages = (messages: Message[], dispatch: Dispatch) =>
- messages.map(({ id, message, severity, temporary }) => (
-
dispatch(messageActions.remove(id))}
- severity={severity}
- timeout={temporary ? 5000 : undefined}
- >
- {message}
-
- ));
+const Messages = ({ messages }: { messages: Message[] }) => {
+ const dispatch = useDispatch();
-const NotificationList = (): JSX.Element => {
- const messages = useSelector(messageSelectors.all);
+ return (
+ <>
+ {messages.map(({ id, message, severity, temporary }) => (
+
dispatch(messageActions.remove(id))}
+ severity={severity}
+ timeout={temporary ? 5000 : undefined}
+ >
+ {message}
+
+ ))}
+
+ );
+};
+
+export const useNotifications = () => {
+ useFetchActions([notificationActions.fetch]);
const notifications = {
warnings: {
@@ -49,12 +56,18 @@ const NotificationList = (): JSX.Element => {
},
};
- const dispatch = useDispatch();
+ return notifications;
+};
- useFetchActions([notificationActions.fetch]);
+const NotificationList = (): JSX.Element => {
+ const notifications = useNotifications();
+ const messages = useSelector(messageSelectors.all);
+ const messageCount = useSelector(messageSelectors.count);
+ const notificationCount = useSelector(notificationSelectors.count);
+ const hasContent = messageCount > 0 || notificationCount > 0;
return (
- <>
+
{Object.values(notifications).map((group) => {
const items = group.items;
const severity = group.severity;
@@ -77,8 +90,8 @@ const NotificationList = (): JSX.Element => {
}
return null;
})}
- {generateMessages(messages, dispatch)}
-
+
+
);
};
diff --git a/src/app/base/components/PageContent/PageContent.tsx b/src/app/base/components/PageContent/PageContent.tsx
index 2f601abf7a..86f7d3b040 100644
--- a/src/app/base/components/PageContent/PageContent.tsx
+++ b/src/app/base/components/PageContent/PageContent.tsx
@@ -29,7 +29,6 @@ const PageContent = ({
children,
header,
sidebar,
- isNotificationListHidden = false,
sidePanelContent,
sidePanelTitle,
...props
@@ -70,11 +69,7 @@ const PageContent = ({
) : null}
-
+
{children}
diff --git a/src/app/store/message/selectors.test.ts b/src/app/store/message/selectors.test.ts
index c13212115d..7bc31f401e 100644
--- a/src/app/store/message/selectors.test.ts
+++ b/src/app/store/message/selectors.test.ts
@@ -21,4 +21,18 @@ describe("messages", () => {
expect(items.length).toEqual(1);
expect(items[0].message).toEqual("User added");
});
+
+ it("can get the count of messages", () => {
+ const state = rootStateFactory({
+ message: messageStateFactory({
+ items: [
+ messageFactory({
+ message: "User added",
+ }),
+ ],
+ }),
+ });
+ const count = messages.count(state);
+ expect(count).toEqual(1);
+ });
});
diff --git a/src/app/store/message/selectors.ts b/src/app/store/message/selectors.ts
index e3b62dc8b9..4376ccea4d 100644
--- a/src/app/store/message/selectors.ts
+++ b/src/app/store/message/selectors.ts
@@ -8,6 +8,8 @@ import type { RootState } from "@/app/store/root/types";
*/
const all = (state: RootState): Message[] => state.message.items;
-const messages = { all };
+const count = (state: RootState): number => state.message.items.length;
+
+const messages = { all, count };
export default messages;