@gen-epix/ui 1.15.1 → 1.15.2

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

@@ -1,75 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,159 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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

@@ -1,208 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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 },
-  ],
-});