@gen-epix/ui 1.14.4 → 1.15.0

package/src/components/ui/ApplicationBar/ApplicationBarActionsOutagesItem.tsx

@@ -0,0 +1,75 @@
+import {
+  Badge,
+  Box,
+  IconButton,
+  useTheme,
+} from '@mui/material';
+import {
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react';
+import { Fragment } from 'react/jsx-runtime';
+import ConstructionIcon from '@mui/icons-material/Construction';
+import { useTranslation } from 'react-i18next';
+import { useStore } from 'zustand';
+
+import {
+  OutagesDialog,
+  type OutagesDialogRefMethods,
+} from '../OutagesDialog';
+import { outagesStore } from '../../../stores/outagesStore';
+
+export const ApplicationBarActionsOutagesItem = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const outagesDialogRef = useRef<OutagesDialogRefMethods>(null);
+  const visibleOutages = useStore(outagesStore, (state) => state.visibleOutages);
+  const activeOutages = useStore(outagesStore, (state) => state.activeOutages);
+  const soonActiveOutages = useStore(outagesStore, (state) => state.soonActiveOutages);
+
+
+  const badgeContent = useMemo<string>(() => {
+    if (activeOutages.length > 0 || visibleOutages.length > 0 || soonActiveOutages.length > 0) {
+      return '!';
+    }
+    return null;
+  }, [activeOutages.length, soonActiveOutages.length, visibleOutages.length]);
+
+  const onMenuIconClick = useCallback(() => {
+    outagesDialogRef.current.open();
+  }, []);
+
+
+  return (
+    <Fragment>
+      <IconButton
+        aria-label={t`Outages`}
+        color={'inherit'}
+        title={t`Outages`}
+        onClick={onMenuIconClick}
+      >
+        <Badge
+          badgeContent={badgeContent}
+          color={'secondary'}
+          sx={{ '& .MuiBadge-badge': { fontSize: 9, height: 15, minWidth: 15, border: '1px solid white' } }}
+        >
+          <ConstructionIcon color={'inherit'} />
+        </Badge>
+        <Box
+          sx={{
+            fontSize: '1.3rem',
+            marginLeft: theme.spacing(1),
+            [theme.breakpoints.up('md')]: {
+              visibility: 'hidden',
+              position: 'absolute',
+            },
+          }}
+        >
+          {t`Outages`}
+        </Box>
+      </IconButton>
+      <OutagesDialog ref={outagesDialogRef} />
+    </Fragment>
+  );
+};

package/src/components/ui/ApplicationBar/ApplicationBarActionsUserItem.tsx

@@ -0,0 +1,60 @@
+import {
+  Box,
+  IconButton,
+  useTheme,
+} from '@mui/material';
+import { Fragment } from 'react/jsx-runtime';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import {
+  useCallback,
+  useState,
+} from 'react';
+import type { MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { UserMenu } from './UserMenu';
+
+export const ApplicationBarActionsUserItem = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const [accountMenuAnchorElement, setAccountMenuAnchorElement] = useState<null | HTMLElement>(null);
+
+  const onAccountMenuIconClick = useCallback((event: MouseEvent<HTMLElement>): void => {
+    setAccountMenuAnchorElement(event.currentTarget);
+  }, []);
+
+  const onAccountMenuClose = useCallback(() => {
+    setAccountMenuAnchorElement(null);
+  }, []);
+
+  return (
+    <Fragment>
+      <IconButton
+        color={'inherit'}
+        title={'Account'}
+        onClick={onAccountMenuIconClick}
+      >
+        <AccountCircleIcon color={'inherit'} />
+        <Box
+          sx={{
+            fontSize: '1.3rem',
+            marginLeft: theme.spacing(1),
+            [theme.breakpoints.up('md')]: {
+              visibility: 'hidden',
+              position: 'absolute',
+            },
+          }}
+        >
+          {t`Account`}
+        </Box>
+      </IconButton>
+      {accountMenuAnchorElement && (
+        <UserMenu
+          anchorElement={accountMenuAnchorElement}
+          onClose={onAccountMenuClose}
+        />
+      )}
+
+    </Fragment>
+  );
+};

package/src/components/ui/ApplicationBar/ApplicationBarNavigationMenu.tsx

@@ -0,0 +1,159 @@
+import {
+  Box,
+  IconButton,
+  styled,
+  useTheme,
+} from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+import { useTranslation } from 'react-i18next';
+import { NavLink as BaseNavLink } from 'react-router-dom';
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+} from 'react';
+
+import { AuthorizationManager } from '../../../classes/managers/AuthorizationManager';
+import type { MyNonIndexRouteObject } from '../../../models/reactRouter';
+import { RouterManager } from '../../../classes/managers/RouterManager';
+
+const NavLink = styled(BaseNavLink)(({ theme }) => ({
+  color: theme.palette.secondary.contrastText,
+  display: 'inline-block',
+  textDecoration: 'none',
+  fontSize: '1.3rem',
+  '&:hover': {
+    textDecoration: 'underline',
+  },
+}));
+
+export type ApplicationBarNavigationMenuProps = {
+  readonly fullWidth?: boolean;
+};
+
+export const ApplicationBarNavigationMenu = ({ fullWidth }: ApplicationBarNavigationMenuProps) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const authorizationManager = useMemo(() => AuthorizationManager.instance, []);
+  const navId = useId();
+
+  const menuItems = useMemo(() => {
+    const rootItem = RouterManager.instance.routes.find(r => r.handle.root);
+    return [rootItem, ...rootItem.children.filter(r => !r.handle.hidden)] as MyNonIndexRouteObject[];
+  }, []);
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  useEffect(() => {
+    if (isMenuOpen) {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+          setIsMenuOpen(false);
+        }
+      };
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [isMenuOpen]);
+
+  const onMenuButtonClick = useCallback(() => {
+    setIsMenuOpen(x => !x);
+  }, []);
+
+  return (
+    <Box
+      sx={{
+        flexGrow: 1,
+      }}
+    >
+      <IconButton
+        aria-label={t`Toggle navigation menu`}
+        aria-controls={navId}
+        sx={{
+          color: theme['gen-epix'].navbar.primaryColor,
+          [theme.breakpoints.up('md')]: {
+            display: 'none',
+          },
+        }}
+        onClick={onMenuButtonClick}
+      >
+        <MenuIcon />
+      </IconButton>
+      <Box
+        component={'nav'}
+        id={navId}
+        sx={{
+          flexGrow: 1,
+          [theme.breakpoints.down('md')]: {
+            display: isMenuOpen ? 'block' : 'none',
+            position: 'absolute',
+            background: theme['gen-epix'].navbar.background,
+            top: 48,
+            left: 0,
+            width: '100%',
+            paddingBottom: 4,
+          },
+        }}
+      >
+        <Box
+          component={'ul'}
+          sx={{
+            padding: 0,
+            margin: 0,
+            display: 'flex',
+            marginLeft: fullWidth ? 0 : 2,
+            [theme.breakpoints.down('md')]: {
+              display: 'block',
+              margin: 0,
+            },
+          }}
+        >
+          {menuItems.filter(menuItem => !menuItem.handle.disabled && authorizationManager.doesUserHavePermissionForRoute(menuItem)).map(menuItem => {
+            return (
+              <Box
+                key={menuItem.path}
+                component={'li'}
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  listStyle: 'none',
+                  padding: `0 ${theme.spacing(1)}`,
+                  fontWeight: 800,
+                  height: 48,
+                  color: theme['gen-epix'].navbar.primaryColor,
+                  '&:has(.active)': {
+                    background: theme['gen-epix'].navbar.activeBackground,
+                    a: {
+                      color: theme['gen-epix'].navbar.activeColor,
+                    },
+                    '& svg': {
+                      color: theme['gen-epix'].navbar.activeColor,
+                    },
+                  },
+                  '& svg': {
+                    marginTop: '6px',
+                  },
+                }}
+              >
+                <NavLink
+                  aria-label={menuItem.handle.title}
+                  to={menuItem.path}
+                  sx={{
+                    padding: `0 ${theme.spacing(1)}`,
+                  }}
+                >
+                  {!!menuItem.handle.icon && menuItem.handle.icon}
+                  {!menuItem.handle.icon && menuItem.handle.title}
+                </NavLink>
+              </Box>
+            );
+          })}
+        </Box>
+      </Box>
+    </Box>
+  );
+};

package/src/components/ui/ApplicationBar/InfoMenu.tsx

@@ -0,0 +1,120 @@
+import type { ReactElement } from 'react';
+import {
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  Popover,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemButton,
+  ListItemIcon,
+} from '@mui/material';
+import CopyrightIcon from '@mui/icons-material/Copyright';
+import { useTranslation } from 'react-i18next';
+
+import type { LicensesDialogRefMethods } from '../LicensesDialog';
+import { LicensesDialog } from '../LicensesDialog';
+import { BackendVersionManager } from '../../../classes/managers/BackendVersionManager';
+import { ConfigManager } from '../../../classes/managers/ConfigManager';
+import { StringUtil } from '../../../utils/StringUtil';
+import { TestIdUtil } from '../../../utils/TestIdUtil';
+
+type InfoMenuProps = {
+  readonly onClose: () => void;
+  readonly anchorElement: HTMLElement;
+};
+
+export const InfoMenu = ({ anchorElement, onClose }: InfoMenuProps): ReactElement => {
+  const popoverId = useMemo(() => StringUtil.createUuid(), []);
+  const licensesDialogRef = useRef<LicensesDialogRefMethods>(null);
+  const isInfoMenuOpen = !!anchorElement;
+  const { t } = useTranslation();
+  const onShowLicenseInformationButtonClick = useCallback(() => {
+    licensesDialogRef.current.open();
+  }, []);
+
+  return (
+    <Popover
+      {...TestIdUtil.createAttributes('InfoMenu')}
+      anchorEl={anchorElement}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+      id={isInfoMenuOpen ? popoverId : undefined}
+      open={isInfoMenuOpen}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
+      onClose={onClose}
+    >
+      <List
+        sx={{
+          width: '100%',
+          minWidth: 200,
+          maxWidth: 300,
+        }}
+      >
+        <ListItem
+          divider
+        >
+          <ListItemText
+            primary={t('Frontend version')}
+            secondary={ConfigManager.instance.config.getSoftwareVersion()}
+            slotProps={{
+              primary: {
+                sx: {
+                  color: 'primary.main',
+                  fontWeight: 'bold',
+                },
+              },
+            }}
+          />
+        </ListItem>
+        <ListItem
+          divider
+        >
+          <ListItemText
+            primary={t('Backend version')}
+            secondary={BackendVersionManager.instance.version}
+            slotProps={{
+              primary: {
+                sx: {
+                  color: 'primary.main',
+                  fontWeight: 'bold',
+                },
+              },
+            }}
+          />
+        </ListItem>
+        <ListItem>
+          <ListItemButton
+            onClick={onShowLicenseInformationButtonClick}
+          >
+            <ListItemIcon>
+              <CopyrightIcon color={'secondary'} />
+            </ListItemIcon>
+            <ListItemText
+              primary={t`Show license information`}
+              slotProps={{
+                primary: {
+                  sx: {
+                    color: 'secondary.main',
+                    fontWeight: 'bold',
+                  },
+                },
+              }}
+            />
+          </ListItemButton>
+          <LicensesDialog
+            ref={licensesDialogRef}
+          />
+        </ListItem>
+      </List>
+    </Popover>
+  );
+};

package/src/components/ui/ApplicationBar/UserMenu.tsx

@@ -0,0 +1,208 @@
+import type { ReactElement } from 'react';
+import {
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  Popover,
+  List,
+  ListItem,
+  Box,
+  ListItemText,
+  ListItemButton,
+  ListItemIcon,
+} from '@mui/material';
+import LogoutIcon from '@mui/icons-material/Logout';
+import KeyIcon from '@mui/icons-material/Key';
+import { useTranslation } from 'react-i18next';
+import { useAuth } from 'react-oidc-context';
+
+import {
+  Confirmation,
+  type ConfirmationRefMethods,
+} from '../Confirmation';
+import { LogLevel } from '../../../api';
+import { AuthorizationManager } from '../../../classes/managers/AuthorizationManager';
+import { LogManager } from '../../../classes/managers/LogManager';
+import { DataUtil } from '../../../utils/DataUtil';
+import { StringUtil } from '../../../utils/StringUtil';
+import { TestIdUtil } from '../../../utils/TestIdUtil';
+import type { MyPermissionsDialogRefMethods } from '../MyPermissionsDialog';
+import { MyPermissionsDialog } from '../MyPermissionsDialog';
+
+import { UserOrganizationAdminMenuItem } from './UserOrganizationAdminMenuItem';
+import { UserOwnOrganizationMenuItem } from './UserOwnOrganizationMenuItem';
+
+type UserMenuProps = {
+  readonly onClose: () => void;
+  readonly anchorElement: HTMLElement;
+};
+
+export const UserMenu = ({ anchorElement, onClose }: UserMenuProps): ReactElement => {
+  const auth = useAuth();
+  const logoutConfirmation = useRef<ConfirmationRefMethods>(null);
+  const popoverId = useMemo(() => StringUtil.createUuid(), []);
+  const isUserMenuOpen = !!anchorElement;
+  const { t } = useTranslation();
+
+  const myPermissionsDialogRef = useRef<MyPermissionsDialogRefMethods>(null);
+
+  const onViewMyPermissionsButtonClick = useCallback(() => {
+    myPermissionsDialogRef.current.open();
+  }, []);
+
+  const onLogoutButtonClick = useCallback(() => {
+    logoutConfirmation.current.open();
+  }, []);
+
+  const onLogoutConfirmationConfirm = useCallback(() => {
+    LogManager.instance.log([{
+      topic: 'USER_LOGOUT',
+      level: LogLevel.TRACE,
+      detail: auth.user,
+    }]);
+    LogManager.instance.flushLog();
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    auth.signoutRedirect();
+  }, [auth]);
+
+  const userName = useMemo(() => {
+    return DataUtil.getUserDisplayValue(AuthorizationManager.instance.user, t);
+  }, [t]);
+
+  const userRoles = useMemo(() => {
+    return AuthorizationManager.instance.user?.roles;
+  }, []);
+
+  return (
+    <Popover
+      {...TestIdUtil.createAttributes('UserMenu')}
+      anchorEl={anchorElement}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+      id={isUserMenuOpen ? popoverId : undefined}
+      open={isUserMenuOpen}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
+      onClose={onClose}
+    >
+      <List
+        sx={{
+          width: '100%',
+          minWidth: 200,
+          maxWidth: 300,
+        }}
+      >
+        <ListItem
+          divider
+        >
+          <ListItemText
+            primary={userName ?? t`Unknown`}
+            slotProps={{
+              primary: {
+                sx: {
+                  fontWeight: 'bold',
+                },
+              },
+            }}
+          />
+        </ListItem>
+        <UserOwnOrganizationMenuItem />
+        <UserOrganizationAdminMenuItem />
+        <ListItem
+          divider
+          sx={{
+            paddingTop: 0,
+          }}
+        >
+          <ListItemText
+            primary={t`My roles`}
+            secondary={(
+              <>
+                {userRoles?.map((role) => (
+                  <Box
+                    key={role}
+                    component={'span'}
+                    mr={1}
+                    sx={{ display: 'inline-block' }}
+                  >
+                    {role}
+                  </Box>
+                ))}
+              </>
+            )}
+            slotProps={{
+              primary: {
+                sx: {
+                  fontWeight: 'bold',
+                },
+              },
+            }}
+          />
+        </ListItem>
+        <ListItem
+          divider
+          alignItems={'center'}
+          sx={{ justifyContent: 'center' }}
+        >
+          <ListItemButton
+            onClick={onViewMyPermissionsButtonClick}
+          >
+            <ListItemIcon>
+              <KeyIcon color={'primary'} />
+            </ListItemIcon>
+            <ListItemText
+              primary={t`My API permissions`}
+              slotProps={{
+                primary: {
+                  sx: {
+                    color: 'primary.main',
+                  },
+                },
+              }}
+            />
+          </ListItemButton>
+          <MyPermissionsDialog
+            ref={myPermissionsDialogRef}
+          />
+        </ListItem>
+        <ListItem
+          alignItems={'center'}
+          sx={{ justifyContent: 'center' }}
+        >
+          <ListItemButton
+            onClick={onLogoutButtonClick}
+          >
+            <ListItemIcon>
+              <LogoutIcon color={'secondary'} />
+            </ListItemIcon>
+            <ListItemText
+              primary={t`Logout`}
+              slotProps={{
+                primary: {
+                  sx: {
+                    color: 'secondary.main',
+                    fontWeight: 'bold',
+                  },
+                },
+              }}
+            />
+          </ListItemButton>
+          <Confirmation
+            ref={logoutConfirmation}
+            body={t`Click the logout button to logout`}
+            cancelLabel={t`Cancel`}
+            confirmLabel={t`Logout`}
+            title={t`Are you sure you want to logout?`}
+            onConfirm={onLogoutConfirmationConfirm}
+          />
+        </ListItem>
+      </List>
+    </Popover>
+  );
+};

package/src/components/ui/ApplicationBar/UserOrganizationAdminMenuItem.tsx

@@ -0,0 +1,69 @@
+import {
+  ListItemText,
+  ListItem,
+  Link,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+import {
+  AbacApi,
+  CommandName,
+  PermissionType,
+} from '../../../api';
+import { QUERY_KEY } from '../../../models/query';
+import { QueryUtil } from '../../../utils/QueryUtil';
+import { withPermissions } from '../../../hoc/withPermissions';
+import { useQueryMemo } from '../../../hooks/useQueryMemo';
+
+export const UserOrganizationAdminMenuItem = withPermissions(() => {
+  const { t } = useTranslation();
+
+  const { isLoading: isOrganizationAdminNameEmailsLoading, error: organizationAdminNameEmailsError, data: organizationAdminNameEmails } = useQueryMemo({
+    queryKey: QueryUtil.getGenericKey(QUERY_KEY.ORGANIZATION_ADMIN_NAME_EMAILS),
+    queryFn: async ({ signal }) => (await AbacApi.instance.retrieveOrganizationAdminNameEmails({ signal })).data,
+    gcTime: 0,
+    staleTime: 0,
+  });
+
+  return (
+    <ListItem
+      alignItems={'center'}
+      sx={{
+        justifyContent: 'center',
+        paddingTop: 0,
+      }}
+    >
+      <ListItemText
+        primary={t`My organizations admins`}
+        secondary={(
+          <>
+            {isOrganizationAdminNameEmailsLoading && t`Loading...`}
+            {organizationAdminNameEmailsError && t`Error`}
+            {organizationAdminNameEmails?.map(admin => (
+              <Link
+                key={admin.id}
+                href={`mailto:${admin.email}`}
+                sx={{
+                  display: 'table',
+                }}
+              >
+                {admin.name ?? admin.email}
+              </Link>
+            ))}
+          </>
+        )}
+        slotProps={{
+          primary: {
+            sx: {
+              fontWeight: 'bold',
+            },
+          },
+        }}
+      />
+    </ListItem>
+  );
+}, {
+  requiredPermissions: [
+    { command_name: CommandName.RetrieveOrganizationAdminNameEmailsCommand, permission_type: PermissionType.EXECUTE },
+  ],
+});