@stack-spot/portal-components 2.26.0 → 2.27.0

package/src/components/notification/NotificationComponent.tsx

@@ -1,340 +1,340 @@
-import { Box, Button, Flex, IconBox, Text } from '@citric/core'
-import { Bell, TimesMini } from '@citric/icons'
-import { IconButton } from '@citric/ui'
-import { listToClass, theme } from '@stack-spot/portal-theme'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { ReactElement, useLayoutEffect, useRef, useState } from 'react'
-import styled from 'styled-components'
-import { AsyncContent, ErrorProps } from '../AsyncContent'
-import { InfiniteScroll } from '../InfiniteScroll'
-import { ScrollView } from '../ScrollView'
-import { StatusCircle } from '../StatusCircle'
-import { NotificationItem } from './NotificationItem'
-import { GetTenantNotificationsResponse, NotificationTypeFilters, UnreadType } from './types'
-
-interface Props {
-  hasUnreadNotification?: boolean,
-}
-
-const ANIMATION_DURATION_MS = 300
-const MAX_HEIGHT_TRANSITION = `max-height ease-in ${ANIMATION_DURATION_MS / 1000}s`
-
-const NotificationsComponent = styled.div<{ $scroll?: boolean }>`
-  max-height: 0;
-  z-index: 2;
-  visibility: hidden;
-  position: absolute;
-  top: calc(var(--header-height) + 4px);
-  right: -270%;
-  opacity: 0;
-  width: 400px;
-  transition: ${MAX_HEIGHT_TRANSITION}, opacity ${ANIMATION_DURATION_MS}ms ease-in-out, visibility 0s ${ANIMATION_DURATION_MS}ms;
-
-  &.visible {
-    visibility: visible;
-    min-height: 400px;
-    opacity: 1;
-    transition: ${MAX_HEIGHT_TRANSITION}, opacity ${ANIMATION_DURATION_MS}ms ease-in-out;
-  }
-
-  .content {
-    border-radius: 4px;
-    border: 1px solid ${theme.color.light[400]};
-    box-shadow: 4px 4px 48px ${theme.color.danger.contrastText};
-    background-color: ${theme.color.light[300]};
-    overflow-y: ${({ $scroll }) => ($scroll ? 'auto' : 'hidden')};
-    overflow-x: hidden;
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    border-width: 8px 32px;
-    border-style: solid;
-    border-color: transparent;
-    bottom: 100%;
-    left: 74%;
-    margin-left: -5px;
-    transform: rotate(180deg);
-    border-top-color: ${theme.color.light[400]};
-  }
-`
-
-const Overlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: ${theme.color.primary.contrastText};
-  opacity: 0.6;
-  z-index: 1;
-`
-
-const StyledBox = styled(Box)`
-  width: 100%;
-  > div:first-child{
-    width: 100%;
-  }
-`
-
-interface NotificationsFilterProps {
-  type?: NotificationTypeFilters,
-  onChangeFilterType: (type?: NotificationTypeFilters) => void,
-}
-
-interface NotificationFilterButtonProps extends NotificationsFilterProps {
-  ariaLabel: string,
-  label: string,
-  enumType: NotificationTypeFilters,
-}
-
-/**
- * NotificationFilterButton component that renders a button to be used in quick filters for notifications.
- *
- * @param props the component's props {@link NotificationFilterButtonProps}.
- */
-const NotificationFilterButton = (props: NotificationFilterButtonProps) => {
-  const { type, onChangeFilterType, ariaLabel, label, enumType } = props
-  return (<Button
-    appearance="text"
-    role="button"
-    aria-label={ariaLabel}
-    aria-pressed={type === enumType}
-    onClick={() => onChangeFilterType(enumType)}
-    sx={{ borderColor: type === enumType ? 'primary' : 'transparent' }}
-  >
-    <Text colorScheme="inverse" appearance="microtext1">
-      {label}
-    </Text>
-  </Button>
-  )
-}
-
-/**
- * NotificationsFilter component that renders the filter options for notifications.
- *
- * @param props the component's props {@link NotificationsFilterProps}.
- */
-const NotificationsFilter = ({ type, onChangeFilterType }: NotificationsFilterProps) => {
-  const t = useTranslate(dictionary)
-
-  return (<Flex alignItems="center" sx={{ gap: '4px' }} my="5">
-    <Button
-      aria-pressed={!type}
-      appearance="text"
-      role="button"
-      aria-label={t.filterAll}
-      onClick={() => onChangeFilterType()}
-      sx={{ borderColor: !type ? 'primary' : 'transparent' }}
-    >
-      <Text colorScheme="inverse" appearance="microtext1">
-        {t.all}
-      </Text>
-    </Button>
-    <NotificationFilterButton
-      type={type} onChangeFilterType={onChangeFilterType}
-      ariaLabel={t.filterUnread} label={t.unread} enumType={UnreadType.Unread}
-    />
-    <NotificationFilterButton
-      type={type} onChangeFilterType={onChangeFilterType}
-      ariaLabel={t.filterHigh} label={t.high} enumType={'HIGH'}
-    />
-    <NotificationFilterButton
-      type={type} onChangeFilterType={onChangeFilterType}
-      ariaLabel={t.filterMedium} label={t.medium} enumType={'MEDIUM'}
-    />
-    <NotificationFilterButton
-      type={type} onChangeFilterType={onChangeFilterType}
-      ariaLabel={t.filterLow} label={t.low} enumType={'LOW'}
-    />
-  </Flex>)
-}
-
-interface Props {
-  onMarkAsReadUnread: (notificationId: string, read: boolean, type: 'callToAction' | 'icon') => void,
-  notifications?: GetTenantNotificationsResponse[],
-  isLoading: boolean,
-  error?: any,
-  onClickViewNotifications: () => void,
-  onClickViewAll: () => void,
-  errorDetails: ErrorProps,
-  fetchNextPage: () => void,
-  hasNextPage: boolean,
-  type?: NotificationTypeFilters,
-  onUpdateType: (updatedType?: NotificationTypeFilters) => void,
-  placeholderComponent: ReactElement,
-  isSummary: boolean,
-}
-
-// fixme: remove this component in the next major
-/**
- * NotificationComponent component that renders the notifications panel.
- * It renders the notification icon and when clicked the notification modal is opened.
- *
- * @param props the component's props {@link Props}.
- * @deprecated this functionality has been moved to the Layout library. This is now a property of the Header.
- */
-export const NotificationComponent = ({
-  hasUnreadNotification, onMarkAsReadUnread, notifications, isLoading, error,
-  type, onUpdateType,
-  onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage,
-  placeholderComponent, isSummary = false,
-}: Props) => {
-  const t = useTranslate(dictionary)
-  const [visible, setVisible] = useState(false)
-  const seeAllButtonRef = useRef<HTMLButtonElement>(null)
-
-  const updateType = (updatedType?: NotificationTypeFilters) => {
-    onUpdateType(updatedType)
-  }
-
-  useLayoutEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        const focusedElement = document.activeElement
-        const notificationItems = document.querySelectorAll('[id^="notificationItem-"]')
-        let isFocusedOnNotificationItem = false
-
-        notificationItems.forEach((item) => {
-          if (item.contains(focusedElement)) {
-            isFocusedOnNotificationItem = true
-          }
-        })
-
-        if (isFocusedOnNotificationItem) {
-          seeAllButtonRef?.current?.focus()
-        } else {
-          setVisible(false)
-        }
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [])
-
-  return (<Flex sx={{ position: 'relative' }}>
-    <IconButton aria-label={t.openNotifications} onClick={() => {
-      onClickViewNotifications()
-      setVisible(!visible)
-    }} sx={{ border: 'none', bg: 'transparent' }} aria-expanded={visible}>
-      <IconBox size="md"
-        className="notificationsTour" >
-        <Bell />
-      </IconBox>
-    </IconButton>
-    {hasUnreadNotification && <Box sx={{ position: 'absolute', right: '2px' }} aria-label={t.hasUnread}>
-      <StatusCircle status={'danger'} />
-    </Box>}
-
-    {visible && <Overlay onClick={() => setVisible(false)} />}
-
-    <NotificationsComponent
-      className={listToClass(['notification-list', visible ? 'visible' : undefined])}
-      $scroll={true}
-      aria-hidden={!visible}
-    >
-      <Flex className="content" p={5} flexDirection="column" justifyContent="space-between">
-        <Flex w="100%">
-          <Flex justifyContent="space-between" w="100%" >
-            <Text appearance="h4">
-              {t.notifications}
-            </Text>
-            <IconButton onClick={() => setVisible(false)} aria-label={t.close}>
-              <IconBox size="xs">
-                <TimesMini />
-              </IconBox>
-            </IconButton>
-          </Flex>
-
-          <NotificationsFilter type={type} onChangeFilterType={updateType} />
-          <AsyncContent error={error} errorDetails={errorDetails} loading={isLoading}>
-            {notifications?.length ? <StyledBox>
-              <ScrollView id="scrollableNotifications" direction="vertical" style={{ maxHeight: 'calc(100vh - 300px)' }}>
-                <InfiniteScroll
-                  dataLength={notifications?.length || 0}
-                  next={fetchNextPage}
-                  hasMore={hasNextPage}
-                  scrollableTarget="scrollableNotifications"
-                >
-                  <Flex sx={{ gap: '4px' }} mr="3" flexDirection="column">
-                    {notifications?.map((item, index) => (
-                      <NotificationItem
-                        key={item.id}
-                        notification={item}
-                        id={`notificationItem-${index}`}
-                        isSummary={isSummary}
-                        onClickMarkReadUnread={(read, type) => onMarkAsReadUnread(item.id, read, type)}
-                      />
-                    ))}
-                  </Flex>
-                </InfiniteScroll>
-              </ScrollView>
-            </StyledBox>
-              :
-              <>
-                {placeholderComponent}
-              </>
-            }
-          </AsyncContent>
-        </Flex>
-
-        <Flex w="100%" pt={3}>
-          <Button
-            ref={seeAllButtonRef}
-            size="sm"
-            sx={{ width: '100%' }} colorScheme="inverse" appearance="text"
-            onClick={() => {
-              setVisible(false)
-              onClickViewAll()
-            }}>
-            <Text appearance="microtext1">
-              {t.viewAll}
-            </Text>
-          </Button>
-        </Flex>
-      </Flex>
-    </NotificationsComponent>
-  </Flex >)
-}
-
-const dictionary = {
-  en: {
-    notifications: 'Notifications',
-    all: 'All',
-    filterAll: 'Filter all notifications',
-    filterUnread: 'Filter unread notifications',
-    filterHigh: 'Filter high notifications',
-    filterMedium: 'Filter medium notifications',
-    filterLow: 'Filter low notifications',
-    unread: 'Unread',
-    high: 'High',
-    medium: 'Medium',
-    low: 'Low',
-    viewAll: 'View all notifications',
-    openNotifications: 'View notifications',
-    hasUnread: 'Has Unread notifications',
-    close: 'Close',
-  },
-  pt: {
-    notifications: 'Notificações',
-    all: 'Todos',
-    filterAll: 'Filtrar todas as notificações ',
-    filterUnread: 'Filtrar notificações não lidas',
-    filterHigh: 'Filtrar notificações criticidade alta',
-    filterMedium: 'Filtrar notificações criticidade média',
-    filterLow: 'Filtrar notificações criticidade baixa',
-    unread: 'Não lidas',
-    high: 'Alto',
-    medium: 'Médio',
-    low: 'Baixo',
-    viewAll: 'Ver todas as notificações',
-    openNotifications: 'Visualizar notificações',
-    hasUnread: 'Existem notificações não lidas',
-    close: 'Fechar',
-  },
-} satisfies Dictionary
+import { Box, Button, Flex, IconBox, Text } from '@citric/core'
+import { Bell, TimesMini } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { listToClass, theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { ReactElement, useLayoutEffect, useRef, useState } from 'react'
+import styled from 'styled-components'
+import { AsyncContent, ErrorProps } from '../AsyncContent'
+import { InfiniteScroll } from '../InfiniteScroll'
+import { ScrollView } from '../ScrollView'
+import { StatusCircle } from '../StatusCircle'
+import { NotificationItem } from './NotificationItem'
+import { GetTenantNotificationsResponse, NotificationTypeFilters, UnreadType } from './types'
+
+interface Props {
+  hasUnreadNotification?: boolean,
+}
+
+const ANIMATION_DURATION_MS = 300
+const MAX_HEIGHT_TRANSITION = `max-height ease-in ${ANIMATION_DURATION_MS / 1000}s`
+
+const NotificationsComponent = styled.div<{ $scroll?: boolean }>`
+  max-height: 0;
+  z-index: 2;
+  visibility: hidden;
+  position: absolute;
+  top: calc(var(--header-height) + 4px);
+  right: -270%;
+  opacity: 0;
+  width: 400px;
+  transition: ${MAX_HEIGHT_TRANSITION}, opacity ${ANIMATION_DURATION_MS}ms ease-in-out, visibility 0s ${ANIMATION_DURATION_MS}ms;
+
+  &.visible {
+    visibility: visible;
+    min-height: 400px;
+    opacity: 1;
+    transition: ${MAX_HEIGHT_TRANSITION}, opacity ${ANIMATION_DURATION_MS}ms ease-in-out;
+  }
+
+  .content {
+    border-radius: 4px;
+    border: 1px solid ${theme.color.light[400]};
+    box-shadow: 4px 4px 48px ${theme.color.danger.contrastText};
+    background-color: ${theme.color.light[300]};
+    overflow-y: ${({ $scroll }) => ($scroll ? 'auto' : 'hidden')};
+    overflow-x: hidden;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    border-width: 8px 32px;
+    border-style: solid;
+    border-color: transparent;
+    bottom: 100%;
+    left: 74%;
+    margin-left: -5px;
+    transform: rotate(180deg);
+    border-top-color: ${theme.color.light[400]};
+  }
+`
+
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: ${theme.color.primary.contrastText};
+  opacity: 0.6;
+  z-index: 1;
+`
+
+const StyledBox = styled(Box)`
+  width: 100%;
+  > div:first-child{
+    width: 100%;
+  }
+`
+
+interface NotificationsFilterProps {
+  type?: NotificationTypeFilters,
+  onChangeFilterType: (type?: NotificationTypeFilters) => void,
+}
+
+interface NotificationFilterButtonProps extends NotificationsFilterProps {
+  ariaLabel: string,
+  label: string,
+  enumType: NotificationTypeFilters,
+}
+
+/**
+ * NotificationFilterButton component that renders a button to be used in quick filters for notifications.
+ *
+ * @param props the component's props {@link NotificationFilterButtonProps}.
+ */
+const NotificationFilterButton = (props: NotificationFilterButtonProps) => {
+  const { type, onChangeFilterType, ariaLabel, label, enumType } = props
+  return (<Button
+    appearance="text"
+    role="button"
+    aria-label={ariaLabel}
+    aria-pressed={type === enumType}
+    onClick={() => onChangeFilterType(enumType)}
+    sx={{ borderColor: type === enumType ? 'primary' : 'transparent' }}
+  >
+    <Text colorScheme="inverse" appearance="microtext1">
+      {label}
+    </Text>
+  </Button>
+  )
+}
+
+/**
+ * NotificationsFilter component that renders the filter options for notifications.
+ *
+ * @param props the component's props {@link NotificationsFilterProps}.
+ */
+const NotificationsFilter = ({ type, onChangeFilterType }: NotificationsFilterProps) => {
+  const t = useTranslate(dictionary)
+
+  return (<Flex alignItems="center" sx={{ gap: '4px' }} my="5">
+    <Button
+      aria-pressed={!type}
+      appearance="text"
+      role="button"
+      aria-label={t.filterAll}
+      onClick={() => onChangeFilterType()}
+      sx={{ borderColor: !type ? 'primary' : 'transparent' }}
+    >
+      <Text colorScheme="inverse" appearance="microtext1">
+        {t.all}
+      </Text>
+    </Button>
+    <NotificationFilterButton
+      type={type} onChangeFilterType={onChangeFilterType}
+      ariaLabel={t.filterUnread} label={t.unread} enumType={UnreadType.Unread}
+    />
+    <NotificationFilterButton
+      type={type} onChangeFilterType={onChangeFilterType}
+      ariaLabel={t.filterHigh} label={t.high} enumType={'HIGH'}
+    />
+    <NotificationFilterButton
+      type={type} onChangeFilterType={onChangeFilterType}
+      ariaLabel={t.filterMedium} label={t.medium} enumType={'MEDIUM'}
+    />
+    <NotificationFilterButton
+      type={type} onChangeFilterType={onChangeFilterType}
+      ariaLabel={t.filterLow} label={t.low} enumType={'LOW'}
+    />
+  </Flex>)
+}
+
+interface Props {
+  onMarkAsReadUnread: (notificationId: string, read: boolean, type: 'callToAction' | 'icon') => void,
+  notifications?: GetTenantNotificationsResponse[],
+  isLoading: boolean,
+  error?: any,
+  onClickViewNotifications: () => void,
+  onClickViewAll: () => void,
+  errorDetails: ErrorProps,
+  fetchNextPage: () => void,
+  hasNextPage: boolean,
+  type?: NotificationTypeFilters,
+  onUpdateType: (updatedType?: NotificationTypeFilters) => void,
+  placeholderComponent: ReactElement,
+  isSummary: boolean,
+}
+
+// fixme: remove this component in the next major
+/**
+ * NotificationComponent component that renders the notifications panel.
+ * It renders the notification icon and when clicked the notification modal is opened.
+ *
+ * @param props the component's props {@link Props}.
+ * @deprecated this functionality has been moved to the Layout library. This is now a property of the Header.
+ */
+export const NotificationComponent = ({
+  hasUnreadNotification, onMarkAsReadUnread, notifications, isLoading, error,
+  type, onUpdateType,
+  onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage,
+  placeholderComponent, isSummary = false,
+}: Props) => {
+  const t = useTranslate(dictionary)
+  const [visible, setVisible] = useState(false)
+  const seeAllButtonRef = useRef<HTMLButtonElement>(null)
+
+  const updateType = (updatedType?: NotificationTypeFilters) => {
+    onUpdateType(updatedType)
+  }
+
+  useLayoutEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        const focusedElement = document.activeElement
+        const notificationItems = document.querySelectorAll('[id^="notificationItem-"]')
+        let isFocusedOnNotificationItem = false
+
+        notificationItems.forEach((item) => {
+          if (item.contains(focusedElement)) {
+            isFocusedOnNotificationItem = true
+          }
+        })
+
+        if (isFocusedOnNotificationItem) {
+          seeAllButtonRef?.current?.focus()
+        } else {
+          setVisible(false)
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [])
+
+  return (<Flex sx={{ position: 'relative' }}>
+    <IconButton aria-label={t.openNotifications} onClick={() => {
+      onClickViewNotifications()
+      setVisible(!visible)
+    }} sx={{ border: 'none', bg: 'transparent' }} aria-expanded={visible}>
+      <IconBox size="md"
+        className="notificationsTour" >
+        <Bell />
+      </IconBox>
+    </IconButton>
+    {hasUnreadNotification && <Box sx={{ position: 'absolute', right: '2px' }} aria-label={t.hasUnread}>
+      <StatusCircle status={'danger'} />
+    </Box>}
+
+    {visible && <Overlay onClick={() => setVisible(false)} />}
+
+    <NotificationsComponent
+      className={listToClass(['notification-list', visible ? 'visible' : undefined])}
+      $scroll={true}
+      aria-hidden={!visible}
+    >
+      <Flex className="content" p={5} flexDirection="column" justifyContent="space-between">
+        <Flex w="100%">
+          <Flex justifyContent="space-between" w="100%" >
+            <Text appearance="h4">
+              {t.notifications}
+            </Text>
+            <IconButton onClick={() => setVisible(false)} aria-label={t.close}>
+              <IconBox size="xs">
+                <TimesMini />
+              </IconBox>
+            </IconButton>
+          </Flex>
+
+          <NotificationsFilter type={type} onChangeFilterType={updateType} />
+          <AsyncContent error={error} errorDetails={errorDetails} loading={isLoading}>
+            {notifications?.length ? <StyledBox>
+              <ScrollView id="scrollableNotifications" direction="vertical" style={{ maxHeight: 'calc(100vh - 300px)' }}>
+                <InfiniteScroll
+                  dataLength={notifications?.length || 0}
+                  next={fetchNextPage}
+                  hasMore={hasNextPage}
+                  scrollableTarget="scrollableNotifications"
+                >
+                  <Flex sx={{ gap: '4px' }} mr="3" flexDirection="column">
+                    {notifications?.map((item, index) => (
+                      <NotificationItem
+                        key={item.id}
+                        notification={item}
+                        id={`notificationItem-${index}`}
+                        isSummary={isSummary}
+                        onClickMarkReadUnread={(read, type) => onMarkAsReadUnread(item.id, read, type)}
+                      />
+                    ))}
+                  </Flex>
+                </InfiniteScroll>
+              </ScrollView>
+            </StyledBox>
+              :
+              <>
+                {placeholderComponent}
+              </>
+            }
+          </AsyncContent>
+        </Flex>
+
+        <Flex w="100%" pt={3}>
+          <Button
+            ref={seeAllButtonRef}
+            size="sm"
+            sx={{ width: '100%' }} colorScheme="inverse" appearance="text"
+            onClick={() => {
+              setVisible(false)
+              onClickViewAll()
+            }}>
+            <Text appearance="microtext1">
+              {t.viewAll}
+            </Text>
+          </Button>
+        </Flex>
+      </Flex>
+    </NotificationsComponent>
+  </Flex >)
+}
+
+const dictionary = {
+  en: {
+    notifications: 'Notifications',
+    all: 'All',
+    filterAll: 'Filter all notifications',
+    filterUnread: 'Filter unread notifications',
+    filterHigh: 'Filter high notifications',
+    filterMedium: 'Filter medium notifications',
+    filterLow: 'Filter low notifications',
+    unread: 'Unread',
+    high: 'High',
+    medium: 'Medium',
+    low: 'Low',
+    viewAll: 'View all notifications',
+    openNotifications: 'View notifications',
+    hasUnread: 'Has Unread notifications',
+    close: 'Close',
+  },
+  pt: {
+    notifications: 'Notificações',
+    all: 'Todos',
+    filterAll: 'Filtrar todas as notificações ',
+    filterUnread: 'Filtrar notificações não lidas',
+    filterHigh: 'Filtrar notificações criticidade alta',
+    filterMedium: 'Filtrar notificações criticidade média',
+    filterLow: 'Filtrar notificações criticidade baixa',
+    unread: 'Não lidas',
+    high: 'Alto',
+    medium: 'Médio',
+    low: 'Baixo',
+    viewAll: 'Ver todas as notificações',
+    openNotifications: 'Visualizar notificações',
+    hasUnread: 'Existem notificações não lidas',
+    close: 'Fechar',
+  },
+} satisfies Dictionary