@gen-epix/ui 1.15.0 → 1.15.2

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

@@ -1,54 +0,0 @@
-import {
-  ListItemText,
-  ListItem,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useMemo } from 'react';
-
-import {
-  CommandName,
-  PermissionType,
-} from '../../../api';
-import { withPermissions } from '../../../hoc/withPermissions';
-import { AuthorizationManager } from '../../../classes/managers/AuthorizationManager';
-import { useOrganizationMapQuery } from '../../../dataHooks/useOrganizationsQuery';
-
-export const UserOwnOrganizationMenuItem = withPermissions(() => {
-  const { t } = useTranslation();
-
-  const organizationMapQuery = useOrganizationMapQuery();
-
-  const userOrganization = useMemo(() => {
-    if (organizationMapQuery.isLoading) {
-      return t`Loading...`;
-    }
-    if (organizationMapQuery.error) {
-      return t`Error`;
-    }
-    return organizationMapQuery.map.get(AuthorizationManager.instance.user?.organization_id ?? '')?.name ?? t`Unknown`;
-  }, [organizationMapQuery, t]);
-
-  return (
-    <ListItem
-      sx={{
-        paddingBottom: 0,
-      }}
-    >
-      <ListItemText
-        primary={t`My organization`}
-        secondary={userOrganization ?? t`Unknown`}
-        slotProps={{
-          primary: {
-            sx: {
-              fontWeight: 'bold',
-            },
-          },
-        }}
-      />
-    </ListItem>
-  );
-}, {
-  requiredPermissions: [
-    { command_name: CommandName.RetrieveOrganizationAdminNameEmailsCommand, permission_type: PermissionType.EXECUTE },
-  ],
-});

package/src/components/ui/ApplicationBar/index.ts

@@ -1 +0,0 @@
-export * from './ApplicationBar';

package/src/components/ui/ApplicationFooter/ApplicationFooter.tsx

@@ -1,121 +0,0 @@
-import {
-  useTheme,
-  Box,
-  Container,
-  IconButton,
-} from '@mui/material';
-import MenuIcon from '@mui/icons-material/Menu';
-import {
-  useCallback,
-  useState,
-  useId,
-  useEffect,
-  useMemo,
-} from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { ConfigManager } from '../../../classes/managers/ConfigManager';
-
-import { ApplicationFooterLink } from './ApplicationFooterLink';
-import { ApplicationFooterLinkSection } from './ApplicationFooterLinkSection';
-
-export type ApplicationFooterProps = {
-  readonly fullWidth?: boolean;
-};
-
-export const ApplicationFooter = ({ fullWidth }: ApplicationFooterProps) => {
-  const theme = useTheme();
-  const navId = useId();
-  const { t } = useTranslation();
-
-  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);
-  }, []);
-
-  const footer = useMemo(() => ConfigManager.instance.config.createFooter(t), [t]);
-
-  return (
-    <Box
-      component={'footer'}
-      sx={{
-        background: theme['gen-epix'].footer.background,
-        [theme.breakpoints.up('md')]: {
-          paddingBottom: theme.spacing(1),
-        },
-        position: 'relative',
-      }}
-    >
-      <IconButton
-        aria-label={t`Toggle footer menu`}
-        aria-controls={navId}
-        sx={{
-          color: theme.palette.primary.contrastText,
-          [theme.breakpoints.up('md')]: {
-            display: 'none',
-          },
-        }}
-        onClick={onMenuButtonClick}
-      >
-        <MenuIcon />
-      </IconButton>
-      <Container
-        maxWidth={fullWidth ? false : 'xl'}
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(1, 1fr)',
-          [theme.breakpoints.up('sm')]: {
-            gridTemplateColumns: 'repeat(2, 1fr)',
-          },
-          [theme.breakpoints.up('md')]: {
-            gridTemplateColumns: `repeat(${footer.sections.length}, 1fr)`,
-          },
-          paddingLeft: '0 !important',
-          paddingRight: '0 !important',
-          [theme.breakpoints.down('md')]: {
-            display: isMenuOpen ? 'block' : 'none',
-            position: 'absolute',
-            background: theme['gen-epix'].footer.background,
-            bottom: theme.spacing(5),
-            left: 0,
-            width: '100%',
-            zIndex: theme.zIndex.appBar - 1,
-          },
-        }}
-      >
-        {footer.sections.map((section) => (
-          <ApplicationFooterLinkSection
-            key={section.header}
-            header={section.header}
-          >
-            {section.items.map((item) => (
-              <ApplicationFooterLink
-                key={item.label}
-                href={item.href}
-                marginBottom={0.5}
-                onClick={item.onClick}
-              >
-                {item.label}
-              </ApplicationFooterLink>
-            ))}
-          </ApplicationFooterLinkSection>
-        ))}
-      </Container>
-    </Box>
-  );
-};

package/src/components/ui/ApplicationFooter/ApplicationFooterLink.tsx

@@ -1,48 +0,0 @@
-import type { BoxProps } from '@mui/material';
-import {
-  Box,
-  Link,
-  useTheme,
-} from '@mui/material';
-import type { PropsWithChildren } from 'react';
-
-export type ApplicationFooterLinkProps = PropsWithChildren<{
-  readonly href?: string;
-  readonly onClick?: () => void;
-}> & BoxProps<'li'>;
-
-export const ApplicationFooterLink = ({ href, onClick, children, ...boxProps }: ApplicationFooterLinkProps) => {
-  const theme = useTheme();
-
-  return (
-    <Box
-      component={'li'}
-      {...boxProps}
-    >
-      {href && (
-        <Link
-          href={href}
-          rel={'noreferrer'}
-          sx={{
-            color: theme['gen-epix'].footer.color,
-          }}
-          target={'_blank'}
-          onClick={onClick}
-        >
-          {children}
-        </Link>
-      )}
-      {!href && (
-        <Link
-          component={'button'}
-          sx={{
-            color: theme['gen-epix'].footer.color,
-          }}
-          onClick={onClick}
-        >
-          {children}
-        </Link>
-      )}
-    </Box>
-  );
-};

package/src/components/ui/ApplicationFooter/ApplicationFooterLinkSection.tsx

@@ -1,56 +0,0 @@
-import {
-  Box,
-  Typography,
-  useTheme,
-} from '@mui/material';
-import { Children } from 'react';
-import type {
-  PropsWithChildren,
-  ReactElement,
-} from 'react';
-
-import { ApplicationFooterLink } from './ApplicationFooterLink';
-
-export type ApplicationFooterLinkSectionProps = PropsWithChildren<{
-  readonly header: string;
-}>;
-
-export const ApplicationFooterLinkSection = ({ header, children }: ApplicationFooterLinkSectionProps) => {
-  const theme = useTheme();
-
-  Children.forEach(children, (child) => {
-    if ((child as ReactElement)?.type !== ApplicationFooterLink) {
-      throw Error('ApplicationFooterLinkSection only accepts ApplicationFooterLink as children');
-    }
-  });
-
-  return (
-    <Box
-      padding={2}
-    >
-      <Typography
-        component={'h2'}
-        sx={{
-          color: theme['gen-epix'].footer.color,
-          borderBottom: `1px solid ${theme['gen-epix'].footer.sectionBorderColor}`,
-          marginBottom: theme.spacing(1),
-          paddingBottom: theme.spacing(1),
-          fontWeight: 500,
-        }}
-        variant={'h4'}
-      >
-        {header}
-      </Typography>
-      <Box
-        component={'ul'}
-        sx={{
-          listStyle: 'none',
-          padding: 0,
-          margin: 0,
-        }}
-      >
-        {children}
-      </Box>
-    </Box>
-  );
-};

package/src/components/ui/ApplicationFooter/index.ts

@@ -1 +0,0 @@
-export * from './ApplicationFooter';

package/src/components/ui/AuthenticationWrapper/AuthenticationWrapper.tsx

@@ -1,208 +0,0 @@
-import {
-  Box,
-  Button,
-  Typography,
-} from '@mui/material';
-import {
-  useCallback,
-  type PropsWithChildren,
-  useRef,
-  useState,
-  useEffect,
-  useMemo,
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import { useAuth } from 'react-oidc-context';
-
-import { PageContainer } from '../PageContainer';
-import type { ConsentDialogRefMethods } from '../ConsentDialog';
-import { ConsentDialog } from '../ConsentDialog';
-import { Spinner } from '../Spinner';
-import { LogLevel } from '../../../api';
-import { AuthenticationManager } from '../../../classes/managers/AuthenticationManager';
-import { ConfigManager } from '../../../classes/managers/ConfigManager';
-import { LogManager } from '../../../classes/managers/LogManager';
-import { WindowManager } from '../../../classes/managers/WindowManager';
-import { useSubscribable } from '../../../hooks/useSubscribable';
-import { TestIdUtil } from '../../../utils/TestIdUtil';
-import type { AuthState } from '../../../models/auth';
-
-export const AuthenticationWrapper = ({ children }: PropsWithChildren) => {
-  const { t } = useTranslation();
-  const auth = useAuth();
-  const consentDialogRef = useRef<ConsentDialogRefMethods>(null);
-  const [hasGivenConsent, setHasGivenConsent] = useState<boolean>(
-    !ConfigManager.instance.config.consentDialog.getShouldShow(),
-  );
-
-  const oidcConfiguration = useSubscribable(AuthenticationManager.instance);
-  const AfterLoginElement =
-    ConfigManager.instance.config.login?.AfterLoginElement;
-
-  useEffect(() => {
-    AuthenticationManager.instance.authContextProps = auth;
-  }, [auth]);
-
-  useEffect(() => {
-    if (auth.isAuthenticated && !hasGivenConsent) {
-      consentDialogRef.current.open();
-    }
-  }, [auth.isAuthenticated, hasGivenConsent]);
-
-  const onConsentDialogConsent = useCallback(() => {
-    LogManager.instance.log([
-      {
-        topic: 'CONSENT',
-        level: LogLevel.INFO,
-      },
-    ]);
-    setHasGivenConsent(true);
-    consentDialogRef.current.close();
-  }, []);
-
-  const login = useCallback(() => {
-    const perform = async () => {
-      const { hash, pathname, search } = WindowManager.instance.window.location;
-
-      const state: AuthState = {
-        preLoginLocation: {
-          hash,
-          pathname,
-          search,
-        },
-      };
-      await auth.signinRedirect({
-        state,
-      });
-    };
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    perform();
-  }, [auth]);
-
-  const onLoginButtonClick = useCallback(() => {
-    login();
-  }, [login]);
-
-  const onChangeLoginProviderButtonClick = useCallback(() => {
-    AuthenticationManager.clearStaleState();
-    AuthenticationManager.instance.next(undefined);
-  }, []);
-
-  const loginElement = useMemo(
-    () => (
-      <>
-        <Box
-          marginY={2}
-          sx={{ textAlign: 'center' }}
-        >
-          <Button
-            color={'primary'}
-            variant={'contained'}
-            data-name={oidcConfiguration.name}
-            onClick={onLoginButtonClick}
-          >
-            {oidcConfiguration.label}
-          </Button>
-        </Box>
-        <Box
-          marginY={2}
-          sx={{ textAlign: 'center' }}
-        >
-          <Button
-            color={'primary'}
-            variant={'outlined'}
-            onClick={onChangeLoginProviderButtonClick}
-          >
-            {t`Choose a different identity provider`}
-          </Button>
-        </Box>
-        {AfterLoginElement && <AfterLoginElement />}
-      </>
-    ), [oidcConfiguration, onChangeLoginProviderButtonClick, onLoginButtonClick, t, AfterLoginElement],
-  );
-
-  if (auth.activeNavigator || auth.isLoading) {
-    return (
-      <PageContainer
-        ignorePageEvent
-        singleAction
-        testIdAttributes={TestIdUtil.createAttributes('RedirectingPage')}
-        title={t`Redirecting`}
-      >
-        <Spinner label={t`Redirecting`} />
-      </PageContainer>
-    );
-  }
-
-  if (auth.error) {
-    AuthenticationManager.clearStaleState();
-    LogManager.instance.log([
-      {
-        detail: {
-          error: auth.error,
-        },
-        level: LogLevel.ERROR,
-        topic: 'Authentication Error',
-      },
-    ]);
-
-    return (
-      <PageContainer
-        singleAction
-        testIdAttributes={TestIdUtil.createAttributes(
-          'LoginPageSessionExpired',
-        )}
-        title={t`Login`}
-      >
-        <Typography
-          sx={{ textAlign: 'center' }}
-          component={'p'}
-        >
-          {t`We could not log you in, or your session has expired.`}
-        </Typography>
-        {loginElement}
-      </PageContainer>
-    );
-  }
-
-  if (!auth.isAuthenticated) {
-    if (
-      AuthenticationManager.instance.getUserManagerSettingsCreatedAt() &&
-      new Date().getTime() -
-        AuthenticationManager.instance.getUserManagerSettingsCreatedAt() <
-        AuthenticationManager.autoLoginSkew
-    ) {
-      login();
-      return;
-    }
-    return (
-      <PageContainer
-        singleAction
-        testIdAttributes={TestIdUtil.createAttributes('LoginPage')}
-        title={t`Login`}
-      >
-        <Box
-          marginY={2}
-          sx={{ textAlign: 'center' }}
-        >
-          <Typography component={'p'}>
-            {t`You need to login to access this application.`}
-          </Typography>
-        </Box>
-        {loginElement}
-      </PageContainer>
-    );
-  }
-
-  return (
-    <>
-      {children}
-      {ConfigManager.instance.config.consentDialog.getShouldShow() && (
-        <ConsentDialog
-          ref={consentDialogRef}
-          onConsent={onConsentDialogConsent}
-        />
-      )}
-    </>
-  );
-};

package/src/components/ui/AuthenticationWrapper/index.ts

@@ -1 +0,0 @@
-export * from './AuthenticationWrapper';

package/src/components/ui/AuthorizationWrapper/AuthorizationWrapper.tsx

@@ -1,75 +0,0 @@
-import {
-  useMemo,
-  type ReactNode,
-  type PropsWithChildren,
-} from 'react';
-import {
-  useMatches,
-  type UIMatch,
-} from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import last from 'lodash/last';
-
-import { ResponseHandler } from '../ResponseHandler';
-import { PageContainer } from '../PageContainer';
-import { OrganizationApi } from '../../../api';
-import { AuthorizationManager } from '../../../classes/managers/AuthorizationManager';
-import { QUERY_KEY } from '../../../models/query';
-import type { MyNonIndexRouteObject } from '../../../models/reactRouter';
-import { QueryUtil } from '../../../utils/QueryUtil';
-import { TestIdUtil } from '../../../utils/TestIdUtil';
-import { useArray } from '../../../hooks/useArray';
-import { useQueryMemo } from '../../../hooks/useQueryMemo';
-
-export const AuthorizationWrapper = ({ children }: PropsWithChildren): ReactNode => {
-  const { t } = useTranslation();
-  const matches = (useMatches() as UIMatch<unknown, MyNonIndexRouteObject['handle']>[]);
-
-  const requiresUserProfile = useMemo(() => last(matches).handle.requiresUserProfile, [matches]);
-
-  const userQuery = useQueryMemo({
-    queryKey: QueryUtil.getGenericKey(QUERY_KEY.USER_ME),
-    queryFn: async ({ signal }) => (await OrganizationApi.instance.userMeGetOne({ signal })).data,
-    gcTime: Infinity,
-    staleTime: Infinity,
-    enabled: requiresUserProfile,
-  });
-  const userPermissionsQuery = useQueryMemo({
-    queryKey: QueryUtil.getGenericKey(QUERY_KEY.USER_PERMISSIONS),
-    queryFn: async ({ signal }) => (await OrganizationApi.instance.userMeRetrievePermissions({ signal })).data,
-    gcTime: Infinity,
-    staleTime: Infinity,
-    enabled: requiresUserProfile,
-  });
-
-  const loadables = useArray([
-    userQuery,
-    userPermissionsQuery,
-  ]);
-
-
-  if (userQuery.data) {
-    AuthorizationManager.instance.user = userQuery.data;
-  }
-  if (userPermissionsQuery.data) {
-    AuthorizationManager.instance.apiPermissions = userPermissionsQuery.data;
-  }
-
-  if (requiresUserProfile && (loadables.some((l) => l.isLoading) || loadables.some((l) => l.isError))) {
-    return (
-      <PageContainer
-        ignorePageEvent
-        singleAction
-        testIdAttributes={TestIdUtil.createAttributes('LoadingUserDataPage')}
-        title={t`Loading user data`}
-      >
-        <ResponseHandler
-          loadables={loadables}
-          loadingMessage={t`Loading user data`}
-        />
-      </PageContainer>
-    );
-  }
-
-  return children;
-};

package/src/components/ui/AuthorizationWrapper/index.ts

@@ -1 +0,0 @@
-export * from './AuthorizationWrapper';

package/src/components/ui/Breadcrumbs/Breadcrumbs.tsx

@@ -1,92 +0,0 @@
-import type { UIMatch } from 'react-router-dom';
-import { useMatches } from 'react-router-dom';
-import {
-  Link,
-  Breadcrumbs as MuiBreadcrumbs,
-  Typography,
-  useTheme,
-} from '@mui/material';
-import type {
-  MouseEvent,
-  ReactElement,
-} from 'react';
-import {
-  useCallback,
-  useMemo,
-} from 'react';
-
-import { BreadcrumbManager } from '../../../classes/managers/BreadcrumbManager';
-import { RouterManager } from '../../../classes/managers/RouterManager';
-import { useSubscribable } from '../../../hooks/useSubscribable';
-import type { MyNonIndexRouteObject } from '../../../models/reactRouter';
-import { TestIdUtil } from '../../../utils/TestIdUtil';
-
-type BreadcrumbProps = {
-  readonly item: UIMatch<unknown, MyNonIndexRouteObject['handle']>;
-  readonly isLast: boolean;
-};
-
-const Breadcrumb = ({ item, isLast }: BreadcrumbProps): ReactElement => {
-  const breadcrumbsTitles = useSubscribable(BreadcrumbManager.instance);
-
-  const title = useMemo(() => {
-    if (breadcrumbsTitles[item.handle.title]) {
-      return breadcrumbsTitles[item.handle.title];
-    }
-    return item.handle.title;
-  }, [breadcrumbsTitles, item.handle.title]);
-
-  const onLinkClick = useCallback(async (event: MouseEvent) => {
-    event.preventDefault();
-    await RouterManager.instance.router.navigate(item.pathname);
-  }, [item.pathname]);
-
-  if (!isLast) {
-    return (
-      <Link
-        color={'inherit'}
-        href={item.pathname}
-        underline={'hover'}
-        onClick={onLinkClick}
-      >
-        {title}
-      </Link>
-
-    );
-  }
-  return (
-    <Typography
-      color={'textPrimary'}
-      component={'h1'}
-    >
-      {title}
-    </Typography>
-  );
-};
-
-export const Breadcrumbs = () => {
-  const matches = (useMatches() as UIMatch<unknown, MyNonIndexRouteObject['handle']>[])
-    // remove hidden routes
-    .filter((match) => !match.handle.hidden)
-    // remove equal routes (must be in separate filter)
-    .filter((match, index, originalMatches) => !originalMatches.slice(index + 1).find(m => m.pathname === `${match.pathname}/`));
-  const theme = useTheme();
-
-  return (
-    <MuiBreadcrumbs
-      aria-label={'breadcrumbs'}
-      {...TestIdUtil.createAttributes('Breadcrumbs')}
-      sx={{
-        height: theme.spacing(3),
-      }}
-    >
-      {matches.map((match, index) => (
-        <Breadcrumb
-          key={match.id}
-          isLast={index === matches.length - 1}
-          item={match}
-        />
-      ))}
-    </MuiBreadcrumbs>
-  );
-};

package/src/components/ui/Breadcrumbs/index.ts

@@ -1 +0,0 @@
-export * from './Breadcrumbs';

package/src/components/ui/Confirmation/Confirmation.tsx

@@ -1,10 +0,0 @@
-import { withDialog } from '../../../hoc/withDialog';
-
-import type { ConfirmationProps } from './ConfirmationRender';
-import { ConfirmationRender } from './ConfirmationRender';
-
-export const Confirmation = withDialog<ConfirmationProps, unknown>(ConfirmationRender, {
-  testId: 'Confirmation',
-  fullWidth: true,
-  maxWidth: 'sm',
-});