fix(notification): implement close icon for notificaiton and version …

…popover closes2522
Canadian-Geospatial-Platform · Sep 30, 2024 · b86f296 · b86f296
1 parent f662569
commit b86f296
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 49 deletions.
diff --git a/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx b/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx
@@ -3,11 +3,13 @@ import { useTranslation } from 'react-i18next';
 import { Typography, Box, Link, Theme, SvgIcon, ClickAwayListener, Paper } from '@mui/material';
 
 import { GITHUB_REPO, GEO_URL_TEXT } from '@/core/utils/constant';
-import { GeoCaIcon, IconButton, Popper } from '@/ui';
+import { GeoCaIcon, IconButton, Popper, CloseIcon } from '@/ui';
 import { useGeoViewMapId } from '@/core/stores/geoview-store';
 import { useMapInteraction } from '@/core/stores/store-interface-and-intial-values/map-state';
 import { GitHubIcon } from '@/ui/icons';
 import { handleEscapeKey } from '@/core/utils/utilities';
+import { FocusTrapContainer } from '../../common';
+import { useUIActiveTrapGeoView } from '@/core/stores/store-interface-and-intial-values/ui-state';
 
 // eslint-disable-next-line no-underscore-dangle
 declare const __VERSION__: TypeAppVersion;
@@ -31,6 +33,7 @@ export default function Version(): JSX.Element {
 
   const mapId = useGeoViewMapId();
   const interaction = useMapInteraction();
+  const activeTrapGeoView = useUIActiveTrapGeoView();
 
   const mapElem = document.getElementById(`shell-${mapId}`);
 
@@ -62,12 +65,16 @@ export default function Version(): JSX.Element {
         textDecoration: 'underLine',
       },
     },
+    versionHeading: {
+      display: 'flex',
+      alignItems: 'center',
+      borderBottom: (theme: Theme) => `1px solid ${theme.palette.geoViewColor.bgColor.dark[100]}}`,
+    },
     versionsInfoTitle: {
       fontSize: (theme: Theme) => theme.palette.geoViewFontSize.default,
       fontWeight: '700',
       padding: '20px',
       color: (theme: Theme) => theme.palette.geoViewColor.textColor.main,
-      borderBottom: (theme: Theme) => `1px solid ${theme.palette.geoViewColor.bgColor.dark[100]}}`,
       marginBottom: '10px',
     },
     versionInfoContent: {
@@ -101,30 +108,38 @@ export default function Version(): JSX.Element {
           onClose={handleClickAway}
           container={mapElem}
           handleKeyDown={(key, callBackFn) => handleEscapeKey(key, '', false, callBackFn)}
+          disablePortal
         >
-          <Paper sx={sxClasses.versionInfoPanel}>
-            <Typography sx={sxClasses.versionsInfoTitle} component="h3">
-              {t('appbar.version')}
-            </Typography>
-            <Box sx={sxClasses.versionInfoContent}>
-              <Box sx={{ display: 'flex', flexDirection: 'row', alignContent: 'center', gap: '6px' }}>
-                <SvgIcon viewBox="-4 -2 38 36">
-                  <GeoCaIcon />
-                </SvgIcon>
-                <Link rel="noopener" href={GEO_URL_TEXT.url} target="_black">
-                  {GEO_URL_TEXT.text}
-                </Link>
+          <FocusTrapContainer id={`${mapId}-version`} open={open && activeTrapGeoView}>
+            <Paper sx={sxClasses.versionInfoPanel}>
+              <Box sx={sxClasses.versionHeading}>
+                <Typography sx={sxClasses.versionsInfoTitle} component="h3">
+                  {t('appbar.version')}
+                </Typography>
+                <IconButton onClick={handleClickAway}>
+                  <CloseIcon />
+                </IconButton>
               </Box>
-              <Box sx={{ display: 'flex', flexDirection: 'row', alignContent: 'center', gap: '6px' }}>
-                <GitHubIcon />
-                <Link rel="noopener" href={GITHUB_REPO} target="_black">
-                  {t('appbar.repoLink')}
-                </Link>
+              <Box sx={sxClasses.versionInfoContent}>
+                <Box sx={{ display: 'flex', flexDirection: 'row', alignContent: 'center', gap: '6px' }}>
+                  <SvgIcon viewBox="-4 -2 38 36">
+                    <GeoCaIcon />
+                  </SvgIcon>
+                  <Link rel="noopener" href={GEO_URL_TEXT.url} target="_black">
+                    {GEO_URL_TEXT.text}
+                  </Link>
+                </Box>
+                <Box sx={{ display: 'flex', flexDirection: 'row', alignContent: 'center', gap: '6px' }}>
+                  <GitHubIcon />
+                  <Link rel="noopener" href={GITHUB_REPO} target="_black">
+                    {t('appbar.repoLink')}
+                  </Link>
+                </Box>
+                <Typography component="div">{`v.${__VERSION__.major}.${__VERSION__.minor}.${__VERSION__.patch}`}</Typography>
+                <Typography component="div">{new Date(__VERSION__.timestamp).toLocaleDateString()}</Typography>
               </Box>
-              <Typography component="div">{`v.${__VERSION__.major}.${__VERSION__.minor}.${__VERSION__.patch}`}</Typography>
-              <Typography component="div">{new Date(__VERSION__.timestamp).toLocaleDateString()}</Typography>
-            </Box>
-          </Paper>
+            </Paper>
+          </FocusTrapContainer>
         </Popper>
       </Box>
     </ClickAwayListener>

diff --git a/packages/geoview-core/src/core/components/notifications/notifications-style.ts b/packages/geoview-core/src/core/components/notifications/notifications-style.ts
@@ -20,7 +20,7 @@ export const getSxClasses = (theme: Theme): any => ({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    padding: '20px',
+    padding: '1.25rem 0.25rem 1.25rem 1.25rem',
     borderBottom: `1px solid ${theme.palette.geoViewColor.bgColor.dark[100]}}`,
   },
   notificationsTitle: {

diff --git a/packages/geoview-core/src/core/components/notifications/notifications.tsx b/packages/geoview-core/src/core/components/notifications/notifications.tsx
@@ -27,6 +27,8 @@ import { logger } from '@/core/utils/logger';
 import { useMapInteraction } from '@/core/stores/store-interface-and-intial-values/map-state';
 import { useShake } from '@/core/utils/useSpringAnimations';
 import { handleEscapeKey } from '@/core/utils/utilities';
+import { FocusTrapContainer } from '../common';
+import { useUIActiveTrapGeoView } from '@/core/stores/store-interface-and-intial-values/ui-state';
 
 export type NotificationDetailsType = {
   key: string;
@@ -63,6 +65,8 @@ export default function Notifications(): JSX.Element {
   // get values from the store
   const notifications = useAppNotifications();
   const interaction = useMapInteraction();
+  const activeTrapGeoView = useUIActiveTrapGeoView();
+
   const { removeNotification, removeAllNotifications } = useAppStoreActions();
 
   useEffect(() => {
@@ -175,34 +179,42 @@ export default function Notifications(): JSX.Element {
           placement="right-end"
           onClose={handleClickAway}
           container={mapElem}
+          disablePortal
           handleKeyDown={(key, callBackFn) => handleEscapeKey(key, '', false, callBackFn)}
         >
-          <Paper sx={sxClasses.notificationPanel}>
-            <Box sx={sxClasses.notificationsHeader}>
-              <Typography component="h3" sx={sxClasses.notificationsTitle}>
-                {t('appbar.notifications')}
-              </Typography>
-              <Button
-                type="text"
-                variant="contained"
-                disabled={notifications.length === 0}
-                size="small"
-                onClick={handleRemoveAllNotificationsClick}
-                aria-label={t('appbar.removeAllNotifications') ?? ''}
-              >
-                {t('appbar.removeAllNotifications')}
-              </Button>
-            </Box>
-            <Box sx={sxClasses.notificationsList}>
-              {notifications.length > 0 ? (
-                notifications.map((notification, index) => renderNotification(notification, index))
-              ) : (
-                <Typography component="div" sx={{ padding: '10px 15px' }}>
-                  {t('appbar.no_notifications_available')}
+          <FocusTrapContainer id={`${mapId}-notification`} open={open && activeTrapGeoView}>
+            <Paper sx={sxClasses.notificationPanel}>
+              <Box sx={sxClasses.notificationsHeader}>
+                <Typography component="h3" sx={sxClasses.notificationsTitle}>
+                  {t('appbar.notifications')}
                 </Typography>
-              )}
-            </Box>
-          </Paper>
+                <Box>
+                  <Button
+                    type="text"
+                    variant="contained"
+                    disabled={notifications.length === 0}
+                    size="small"
+                    onClick={handleRemoveAllNotificationsClick}
+                    aria-label={t('appbar.removeAllNotifications') ?? ''}
+                  >
+                    {t('appbar.removeAllNotifications')}
+                  </Button>
+                  <IconButton sx={{ ml: '0.25rem' }} onClick={handleClickAway}>
+                    <CloseIcon />
+                  </IconButton>
+                </Box>
+              </Box>
+              <Box sx={sxClasses.notificationsList}>
+                {notifications.length > 0 ? (
+                  notifications.map((notification, index) => renderNotification(notification, index))
+                ) : (
+                  <Typography component="div" sx={{ padding: '10px 15px' }}>
+                    {t('appbar.no_notifications_available')}
+                  </Typography>
+                )}
+              </Box>
+            </Paper>
+          </FocusTrapContainer>
         </Popper>
       </Box>
     </ClickAwayListener>