diff --git a/client/src/App/App.styles.scss b/client/src/App/App.styles.scss index a2cd5bea6..9ea0a8d24 100644 --- a/client/src/App/App.styles.scss +++ b/client/src/App/App.styles.scss @@ -180,3 +180,13 @@ .muted-button:hover { color: darkgrey; } + +.notification-alert-unordered-list { + cursor: pointer; + padding: 0; + margin: 0; + + .notification-alert-unordered-list-item { + margin-right: 0; + } +} diff --git a/client/src/components/notification-center/notification-center.component.jsx b/client/src/components/notification-center/notification-center.component.jsx index 5311fc78a..246721dc7 100644 --- a/client/src/components/notification-center/notification-center.component.jsx +++ b/client/src/components/notification-center/notification-center.component.jsx @@ -1,6 +1,6 @@ import { Virtuoso } from "react-virtuoso"; -import { Alert, Badge, Button, Tooltip, Typography } from "antd"; -import { EyeFilled, EyeOutlined, CheckCircleFilled, CheckCircleOutlined } from "@ant-design/icons"; +import { Alert, Badge, Button, Space, Spin, Tooltip, Typography } from "antd"; +import { CheckCircleFilled, CheckCircleOutlined, EyeFilled, EyeOutlined } from "@ant-design/icons"; import { useTranslation } from "react-i18next"; import { Link } from "react-router-dom"; import "./notification-center.styles.scss"; @@ -66,7 +66,10 @@ const NotificationCenterComponent = ({ return (
-

{t("notifications.labels.notification-center")}

+ +

{t("notifications.labels.notification-center")}

+ {loading && !error && } +
); }; diff --git a/client/src/contexts/SocketIO/socketContext.jsx b/client/src/contexts/SocketIO/socketContext.jsx index 3a4e8b6e1..2529dba7e 100644 --- a/client/src/contexts/SocketIO/socketContext.jsx +++ b/client/src/contexts/SocketIO/socketContext.jsx @@ -12,13 +12,14 @@ import { MARK_NOTIFICATION_READ } from "../../graphql/notifications.queries.js"; import { gql, useMutation } from "@apollo/client"; +import { useTranslation } from "react-i18next"; const SocketContext = createContext(null); const INITIAL_NOTIFICATIONS = 10; /** - * Socket Provider - Scenario Notifications / Web Socket related items. + * Socket Provider - Scenario Notifications / Web Socket related items * @param children * @param bodyshop * @param navigate @@ -33,6 +34,7 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser, scenarioNot const [isConnected, setIsConnected] = useState(false); const notification = useNotification(); const userAssociationId = bodyshop?.associations?.[0]?.id; + const { t } = useTranslation(); const [markNotificationRead] = useMutation(MARK_NOTIFICATION_READ, { update: (cache, { data: { update_notifications } }) => { @@ -284,19 +286,18 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser, scenarioNot }); notification.info({ - message: `Changes for ${jobRoNumber}:`, + message: t("notifications.labels.notification-popup-title", { ro_number: jobRoNumber }), description: (