From da05c7be5cefdcc7c8fcfff9d6e7fd8c1a3aa90c Mon Sep 17 00:00:00 2001 From: Mateusz Kwasniewski Date: Tue, 22 Apr 2025 15:03:15 +0200 Subject: [PATCH] chore: remove disable notifications UI (#9814) --- .../Notifications/EmptyNotifications.tsx | 30 -- .../common/Notifications/Notification.tsx | 166 ----------- .../common/Notifications/Notifications.tsx | 259 ------------------ .../Notifications/NotificationsHeader.tsx | 25 -- .../Notifications/NotificationsList.tsx | 17 -- frontend/src/component/menu/Header/Header.tsx | 9 - frontend/src/interfaces/uiConfig.ts | 1 - src/lib/types/experimental.ts | 5 - 8 files changed, 512 deletions(-) delete mode 100644 frontend/src/component/common/Notifications/EmptyNotifications.tsx delete mode 100644 frontend/src/component/common/Notifications/Notification.tsx delete mode 100644 frontend/src/component/common/Notifications/Notifications.tsx delete mode 100644 frontend/src/component/common/Notifications/NotificationsHeader.tsx delete mode 100644 frontend/src/component/common/Notifications/NotificationsList.tsx diff --git a/frontend/src/component/common/Notifications/EmptyNotifications.tsx b/frontend/src/component/common/Notifications/EmptyNotifications.tsx deleted file mode 100644 index 4a80443ace..0000000000 --- a/frontend/src/component/common/Notifications/EmptyNotifications.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Box, Typography, styled } from '@mui/material'; -import NotificationsIcon from '@mui/icons-material/Notifications'; - -const StyledBox = styled(Box)(() => ({ - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - flexDirection: 'column', - minHeight: '150px', -})); - -const StyledNotificationsIcon = styled(NotificationsIcon)(({ theme }) => ({ - height: '30px', - width: '30px', - color: theme.palette.neutral.main, - marginBottom: theme.spacing(1), -})); - -interface IEmptyNotificationsProps { - text: string; -} - -export const EmptyNotifications = ({ text }: IEmptyNotificationsProps) => { - return ( - - - {text} - - ); -}; diff --git a/frontend/src/component/common/Notifications/Notification.tsx b/frontend/src/component/common/Notifications/Notification.tsx deleted file mode 100644 index 6797105cad..0000000000 --- a/frontend/src/component/common/Notifications/Notification.tsx +++ /dev/null @@ -1,166 +0,0 @@ -import { - Box, - Typography, - styled, - Avatar, - ListItemButton, - useTheme, -} from '@mui/material'; -import type { - NotificationsSchemaItem, - NotificationsSchemaItemNotificationType, -} from 'openapi'; -import { ReactComponent as ChangesAppliedIcon } from 'assets/icons/merge.svg'; -import { TimeAgo } from 'component/common/TimeAgo/TimeAgo'; -import ToggleOffOutlined from '@mui/icons-material/ToggleOffOutlined'; -import { flexRow } from 'themes/themeStyles'; - -const StyledContainerBox = styled(Box, { - shouldForwardProp: (prop) => prop !== 'readAt', -})<{ readAt: boolean }>(({ theme, readAt }) => ({ - padding: theme.spacing(0.5), - marginRight: theme.spacing(1.5), - backgroundColor: readAt - ? theme.palette.neutral.light - : theme.palette.secondary.light, - width: '30px', - height: '30px', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - borderRadius: `${theme.shape.borderRadius}px`, - top: 3, - left: 7, -})); - -const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({ - position: 'relative', - cursor: 'pointer', - padding: theme.spacing(2.5, 2, 3, 2), - borderRadius: theme.shape.borderRadiusMedium, - width: '100%', - '&:after': { - content: '""', - width: `calc(100% - ${theme.spacing(4)})`, - height: '1px', - position: 'absolute', - bottom: 0, - backgroundColor: theme.palette.divider, - }, -})); - -const StyledNotificationMessageBox = styled(Box)(({ theme }) => ({ - display: 'flex', - flexDirection: 'column', - width: '100%', -})); - -const StyledSecondaryInfoBox = styled(Box)(({ theme }) => ({ - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - margin: theme.spacing(1, 0, 0, 5.25), -})); - -const StyledMessageTypography = styled(Typography, { - shouldForwardProp: (prop) => prop !== 'readAt', -})<{ readAt: boolean }>(({ theme, readAt }) => ({ - display: 'flex', - alignItems: 'center', - fontSize: theme.fontSizes.smallBody, - fontWeight: readAt ? 'normal' : 'bold', - textDecoration: 'none', - color: 'inherit', - wordBreak: 'break-all', -})); - -const StyledTimeAgoTypography = styled(Typography)(({ theme }) => ({ - fontSize: theme.fontSizes.smallerBody, - color: theme.palette.neutral.main, -})); - -const StyledUserContainer = styled(Box)(({ theme }) => ({ - ...flexRow, -})); - -const StyledAvatar = styled(Avatar)(({ theme }) => ({ - width: '18px', - height: '18px', -})); - -const StyledCreatedBy = styled(Typography)(({ theme }) => ({ - fontSize: theme.fontSizes.smallBody, - color: theme.palette.neutral.main, - marginLeft: theme.spacing(1), -})); - -interface INotificationProps { - notification: NotificationsSchemaItem; - onNotificationClick: (notification: NotificationsSchemaItem) => void; -} - -export const Notification = ({ - notification, - onNotificationClick, -}: INotificationProps) => { - const theme = useTheme(); - const { readAt } = notification; - - const resolveIcon = (type: NotificationsSchemaItemNotificationType) => { - if (type === 'change-request') { - return ( - - - - ); - } - - if (type === 'toggle') { - return ( - - ({ - height: '20px', - width: '20px', - color: readAt - ? theme.palette.neutral.main - : theme.palette.primary.main, - })} - /> - - ); - } - }; - - return ( - onNotificationClick(notification)}> - - - {resolveIcon(notification.notificationType)}{' '} - {notification.message} - - - - - - Created by {notification.createdBy.username} - - - - - - - - - - ); -}; diff --git a/frontend/src/component/common/Notifications/Notifications.tsx b/frontend/src/component/common/Notifications/Notifications.tsx deleted file mode 100644 index be4f734ec8..0000000000 --- a/frontend/src/component/common/Notifications/Notifications.tsx +++ /dev/null @@ -1,259 +0,0 @@ -import { type KeyboardEvent, useState } from 'react'; -import { - Paper, - Typography, - Box, - IconButton, - styled, - ClickAwayListener, - Button, - Switch, - Tooltip, -} from '@mui/material'; -import { useNotifications } from 'hooks/api/getters/useNotifications/useNotifications'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import NotificationsIcon from '@mui/icons-material/Notifications'; -import { NotificationsHeader } from './NotificationsHeader'; -import { NotificationsList } from './NotificationsList'; -import { Notification } from './Notification'; -import { EmptyNotifications } from './EmptyNotifications'; -import type { NotificationsSchemaItem } from 'openapi'; -import { useNavigate } from 'react-router-dom'; -import { useNotificationsApi } from 'hooks/api/actions/useNotificationsApi/useNotificationsApi'; -import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; -import { flexRow } from 'themes/themeStyles'; -import { Feedback } from 'component/common/Feedback/Feedback'; - -const StyledPrimaryContainerBox = styled(Box)(() => ({ - position: 'relative', -})); - -const StyledInnerContainerBox = styled(Box)(({ theme }) => ({ - backgroundColor: theme.palette.background.elevation1, - display: 'flex', - justifyContent: 'center', -})); - -const StyledTypography = styled(Typography)(({ theme }) => ({ - fontWeight: 'bold', - fontSize: theme.fontSizes.smallBody, - color: theme.palette.primary.main, - textAlign: 'center', -})); - -const StyledPaper = styled(Paper)(({ theme }) => ({ - width: '420px', - boxShadow: theme.boxShadows.popup, - borderRadius: `${theme.shape.borderRadiusLarge}px`, - position: 'absolute', - right: -100, - top: 60, - maxHeight: '80vh', - overflowY: 'auto', -})); - -const StyledDotBox = styled(Box)(({ theme }) => ({ - backgroundColor: theme.palette.primary.main, - borderRadius: '100%', - width: '7px', - height: '7px', - position: 'absolute', - top: 11, - right: 11, -})); - -const StyledHeaderBox = styled(Box)(() => ({ - ...flexRow, -})); - -const StyledHeaderTypography = styled(Typography)(({ theme }) => ({ - fontSize: theme.fontSizes.smallBody, -})); - -const StyledIconButton = styled(IconButton)(({ theme }) => ({ - '&:focus-visible': { - outlineStyle: 'solid', - outlineWidth: 2, - outlineColor: theme.palette.primary.main, - borderRadius: '100%', - }, -})); - -export const Notifications = () => { - const [showNotifications, setShowNotifications] = useState(false); - const { notifications, refetchNotifications } = useNotifications({ - refreshInterval: 15000, - }); - const navigate = useNavigate(); - const { markAsRead } = useNotificationsApi(); - const { uiConfig } = useUiConfig(); - const { trackEvent } = usePlausibleTracker(); - const [showUnread, setShowUnread] = useState(false); - - const onNotificationClick = async ( - notification: NotificationsSchemaItem, - ) => { - if (notification.link) { - navigate(notification.link); - } - - if (uiConfig?.flags?.T) { - trackEvent('notifications', { - props: { eventType: notification.notificationType }, - }); - } - - setShowNotifications(false); - - try { - await markAsRead({ - notifications: [notification.id], - }); - refetchNotifications(); - } catch (e) { - // No need to display this in the UI. Minor inconvinence if this call fails. - console.error('Error marking notification as read: ', e); - } - }; - - const onMarkAllAsRead = async () => { - try { - if (notifications && notifications.length > 0) { - await markAsRead({ - notifications: notifications.map( - (notification) => notification.id, - ), - }); - refetchNotifications(); - } - } catch (e) { - // No need to display this in the UI. Minor inconvinence if this call fails. - console.error('Error marking all notification as read: ', e); - } - }; - - const onKeyDown = (event: KeyboardEvent) => { - if (event.key === 'Escape') { - setShowNotifications(false); - } - }; - - const unreadNotifications = notifications?.filter( - (notification) => notification.readAt === null, - ); - - const hasUnreadNotifications = Boolean( - unreadNotifications && unreadNotifications.length > 0, - ); - - const filterUnread = (notification: NotificationsSchemaItem) => { - if (showUnread) { - return !notification.readAt; - } - - return true; - }; - - const notificationComponents = notifications - ?.filter(filterUnread) - .map((notification) => ( - - )); - - const shouldShowFeedback = Boolean( - notifications && notifications.length > 0 && !showUnread, - ); - - return ( - - - setShowNotifications(!showNotifications)} - data-testid='NOTIFICATIONS_BUTTON' - size='large' - > - } - /> - - - - - setShowNotifications(false)} - > - - - - - Show only unread - - - setShowUnread(!showUnread) - } - checked={showUnread} - /> - - - - - - } - />{' '} - - } - /> - - {notificationComponents} - - - -
- - } - /> - - - } - /> - - ); -}; diff --git a/frontend/src/component/common/Notifications/NotificationsHeader.tsx b/frontend/src/component/common/Notifications/NotificationsHeader.tsx deleted file mode 100644 index efbd67e3d0..0000000000 --- a/frontend/src/component/common/Notifications/NotificationsHeader.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Typography, styled, Box } from '@mui/material'; -import type React from 'react'; -import type { FC } from 'react'; - -const StyledOuterContainerBox = styled(Box)(({ theme }) => ({ - padding: theme.spacing(1, 1.5, 1, 3), - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - position: 'relative', - boxShadow: theme.boxShadows.separator, -})); - -export const NotificationsHeader: FC<{ children?: React.ReactNode }> = ({ - children, -}) => { - return ( - <> - - Notifications - {children} - - - ); -}; diff --git a/frontend/src/component/common/Notifications/NotificationsList.tsx b/frontend/src/component/common/Notifications/NotificationsList.tsx deleted file mode 100644 index 7a63aef7ba..0000000000 --- a/frontend/src/component/common/Notifications/NotificationsList.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { List, styled } from '@mui/material'; -import type React from 'react'; -import type { FC } from 'react'; - -const StyledListContainer = styled(List)(({ theme }) => ({ - padding: theme.spacing(1, 1, 3, 1), -})); - -export const NotificationsList: FC<{ children?: React.ReactNode }> = ({ - children, -}) => { - return ( - - {children} - - ); -}; diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx index 1fcdb65718..0ec868f34b 100644 --- a/frontend/src/component/menu/Header/Header.tsx +++ b/frontend/src/component/menu/Header/Header.tsx @@ -15,13 +15,10 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit import MenuBookIcon from '@mui/icons-material/MenuBook'; import { DrawerMenu } from './DrawerMenu/DrawerMenu'; -import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined'; import LightModeOutlined from '@mui/icons-material/LightModeOutlined'; import { useThemeMode } from 'hooks/useThemeMode'; -import { Notifications } from 'component/common/Notifications/Notifications'; import InviteLinkButton from './InviteLink/InviteLinkButton/InviteLinkButton'; -import { useUiFlag } from 'hooks/useUiFlag'; import { CommandBar } from 'component/commandBar/CommandBar'; const HeaderComponent = styled(AppBar)(({ theme }) => ({ @@ -81,8 +78,6 @@ const Header = () => { const { onSetThemeMode, themeMode } = useThemeMode(); const theme = useTheme(); - const disableNotifications = useUiFlag('disableNotifications'); - const { isOss } = useUiConfig(); const smallScreen = useMediaQuery(theme.breakpoints.down('lg')); const [openDrawer, setOpenDrawer] = useState(false); const toggleDrawer = () => setOpenDrawer((prev) => !prev); @@ -148,10 +143,6 @@ const Header = () => { /> - } - />