@gen-epix/ui 1.15.0 → 1.15.2

package/src/components/ui/Notifications/NotificationsDrawer.tsx

@@ -1,161 +0,0 @@
-import {
-  Drawer,
-  Box,
-  useTheme,
-  Typography,
-  IconButton,
-  Button,
-  Divider,
-} from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import NotificationsIcon from '@mui/icons-material/Notifications';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-
-
-import { NotificationManager } from '../../../classes/managers/NotificationManager';
-import { useSubscribable } from '../../../hooks/useSubscribable';
-
-import { NotificationItem } from './NotificationItem';
-
-export type NotificationsDrawerProps = {
-  readonly onDrawerClose: () => void;
-  readonly open: boolean;
-};
-
-export const NotificationsDrawer = ({ onDrawerClose, open }: NotificationsDrawerProps) => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const notifications = useSubscribable(NotificationManager.instance);
-
-  const onNotificationItemClose = useCallback((key: string) => {
-    NotificationManager.instance.clearNotification(key);
-  }, []);
-
-  const onClearAllButtonClick = useCallback(() => {
-    NotificationManager.instance.clearNotifications();
-    onDrawerClose();
-  }, [onDrawerClose]);
-
-  return (
-    <Drawer
-      anchor={'right'}
-      open={open}
-      onClose={onDrawerClose}
-    >
-      <Box
-        sx={{
-          padding: theme.spacing(2),
-          width: '520px',
-          [theme.breakpoints.up('xl')]: {
-            width: '620px',
-          },
-        }}
-      >
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginBottom: 2,
-          }}
-        >
-          <Typography
-            component={'h6'}
-            variant={'h3'}
-          >
-            {t`Notifications`}
-          </Typography>
-          <IconButton
-            aria-label={t`Close notifications drawer`}
-            onClick={onDrawerClose}
-          >
-            <CloseIcon
-              sx={{
-                color: theme.palette.text.secondary,
-                '&:hover': {
-                  color: theme.palette.text.primary,
-                },
-              }}
-            />
-          </IconButton>
-        </Box>
-        {notifications.length === 0 && (
-          <Box>
-            <Box
-              marginBottom={2}
-              sx={{
-                display: 'flex',
-                justifyContent: 'center',
-              }}
-            >
-              <NotificationsIcon
-                sx={{
-                  fontSize: 100,
-                  color: theme.palette.text.disabled,
-                }}
-              />
-            </Box>
-            <Box
-              sx={{
-                display: 'flex',
-                justifyContent: 'center',
-              }}
-            >
-              <Typography>
-                {t`No new notifications in this session`}
-              </Typography>
-            </Box>
-          </Box>
-        )}
-        {notifications.length > 0 && (
-          <Box>
-            <Box
-              sx={{
-                display: 'flex',
-                justifyContent: 'flex-end',
-              }}
-            >
-              <Button
-                color={'primary'}
-                variant={'outlined'}
-                aria-label={t`Clear all notifications`}
-                onClick={onClearAllButtonClick}
-              >
-                {t`Clear all notifications`}
-              </Button>
-            </Box>
-            <Box
-              marginBottom={2}
-              marginTop={2}
-            >
-              <Divider />
-            </Box>
-            <Box
-              sx={{
-                overflowY: 'hidden',
-              }}
-            >
-              <Box
-                sx={{
-                  overflowY: 'auto',
-                  maxHeight: '100%',
-                }}
-              >
-                {notifications.map(notification => (
-                  <NotificationItem
-                    key={notification.key}
-                    showTimestamp
-                    allowClose={!notification.isLoading}
-                    notification={notification}
-                    onClose={onNotificationItemClose}
-                  />
-                ))}
-              </Box>
-            </Box>
-          </Box>
-        )}
-      </Box>
-    </Drawer>
-  );
-};

package/src/components/ui/Notifications/NotificationsStack.tsx

@@ -1,45 +0,0 @@
-import type { ReactElement } from 'react';
-import { useCallback } from 'react';
-import {
-  Snackbar,
-  Box,
-} from '@mui/material';
-
-import { NotificationManager } from '../../../classes/managers/NotificationManager';
-import { useSubscribable } from '../../../hooks/useSubscribable';
-import { TestIdUtil } from '../../../utils/TestIdUtil';
-
-import { NotificationItem } from './NotificationItem';
-
-export const NotificationsStack = (): ReactElement => {
-  const visibleNotifications = useSubscribable(NotificationManager.instance, {
-    select: (notifications) => notifications.filter(notification => notification.visible),
-  });
-
-  const onNotificationItemClose = useCallback((key: string) => {
-    NotificationManager.instance.hideNotification(key);
-  }, []);
-
-  return (
-    <>
-      {visibleNotifications.length > 0 && (
-        <Snackbar
-          {...TestIdUtil.createAttributes('NotificationsStack')}
-          open
-          anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
-        >
-          <Box>
-            {visibleNotifications.map(notification => (
-              <NotificationItem
-                key={notification.key}
-                allowClose
-                notification={notification}
-                onClose={onNotificationItemClose}
-              />
-            ))}
-          </Box>
-        </Snackbar>
-      )}
-    </>
-  );
-};

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

@@ -1,2 +0,0 @@
-export * from './NotificationsDrawer';
-export * from './NotificationsStack';

package/src/components/ui/OrganizationSwitcherDialog/OrganizationSwitcherDialog.tsx

@@ -1,204 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import {
-  Alert,
-  Box,
-  Typography,
-} from '@mui/material';
-import type { ReactElement } from 'react';
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import { yupResolver } from '@hookform/resolvers/yup';
-import type { Resolver } from 'react-hook-form';
-import {
-  FormProvider,
-  useForm,
-} from 'react-hook-form';
-import {
-  object,
-  string,
-} from 'yup';
-
-import { ResponseHandler } from '../ResponseHandler';
-import { OrganizationApi } from '../../../api';
-import { AuthorizationManager } from '../../../classes/managers/AuthorizationManager';
-import { NotificationManager } from '../../../classes/managers/NotificationManager';
-import { WindowManager } from '../../../classes/managers/WindowManager';
-import { useOrganizationOptionsQuery } from '../../../dataHooks/useOrganizationsQuery';
-import { useArray } from '../../../hooks/useArray';
-import type {
-  WithDialogRenderProps,
-  WithDialogRefMethods,
-} from '../../../hoc/withDialog';
-import { withDialog } from '../../../hoc/withDialog';
-import { TestIdUtil } from '../../../utils/TestIdUtil';
-import { Autocomplete } from '../../form/fields/Autocomplete';
-
-export interface OrganizationSwitcherDialogOpenProps {
-  //
-}
-
-export interface OrganizationSwitcherDialogProps extends WithDialogRenderProps<OrganizationSwitcherDialogOpenProps> {
-  //
-}
-
-export type OrganizationSwitcherDialogRefMethods = WithDialogRefMethods<OrganizationSwitcherDialogProps, OrganizationSwitcherDialogOpenProps>;
-
-type FormFields = {
-  organization_id?: string;
-};
-
-export const OrganizationSwitcherDialog = withDialog<OrganizationSwitcherDialogProps, OrganizationSwitcherDialogOpenProps>((
-  {
-    onTitleChange,
-    onActionsChange,
-    onClose,
-  }: OrganizationSwitcherDialogProps,
-): ReactElement => {
-  const { t } = useTranslation();
-  const organizationOptionsQuery = useOrganizationOptionsQuery();
-  const user = AuthorizationManager.instance.user;
-  const [isChanging, setIsChanging] = useState(false);
-  const [newOrganizationId, setNewOrganizationId] = useState<string>(null);
-
-  const loadables = useArray([organizationOptionsQuery]);
-
-  const schema = useMemo(() => {
-    return object().shape({
-      organization_id: string().uuid4().required(),
-    });
-  }, []);
-
-  const formMethods = useForm<FormFields>({
-    resolver: yupResolver(schema) as Resolver<FormFields>,
-    values: {
-      organization_id: user.organization_id,
-    },
-  });
-  const { handleSubmit } = formMethods;
-
-  const onRefreshPageClick = useCallback(() => {
-    WindowManager.instance.window.location.reload();
-  }, []);
-
-  const onFormSubmit = useCallback((formValues: FormFields): void => {
-    if (formValues.organization_id === user.organization_id) {
-      onClose();
-    }
-    const perform = async () => {
-      const notificationKey = NotificationManager.instance.showNotification({
-        message: t`Changing organization...`,
-        severity: 'info',
-        isLoading: true,
-      });
-      try {
-        setIsChanging(true);
-        await OrganizationApi.instance.updateUserOwnOrganization({
-          organization_id: formValues.organization_id,
-        }, {});
-        setNewOrganizationId(formValues.organization_id);
-        setIsChanging(false);
-        NotificationManager.instance.fulfillNotification(notificationKey, t`Successfully changed organization.`, 'success');
-      } catch (_error: unknown) {
-        NotificationManager.instance.fulfillNotification(notificationKey, t`Could not change organization.`, 'error');
-        onClose();
-      }
-    };
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    perform();
-  }, [onClose, t, user.organization_id]);
-
-  useEffect(() => {
-    onTitleChange(t`Switch organization`);
-  }, [onTitleChange, t]);
-
-  useEffect(() => {
-    if (isChanging) {
-      onActionsChange([]);
-      return;
-    }
-
-    if (newOrganizationId) {
-      onActionsChange([
-        {
-          ...TestIdUtil.createAttributes('OrganizationSwitcherDialog-refresh'),
-          color: 'primary',
-          autoFocus: true,
-          onClick: onRefreshPageClick,
-          variant: 'outlined',
-          label: t`Refresh page`,
-        },
-      ]);
-      return;
-    }
-
-    onActionsChange(
-      [
-        {
-          ...TestIdUtil.createAttributes('OrganizationSwitcherDialog-close'),
-          color: 'primary',
-          autoFocus: true,
-          onClick: onClose,
-          variant: 'outlined',
-          disabled: isChanging,
-          label: t`Cancel`,
-        },
-        {
-          ...TestIdUtil.createAttributes('OrganizationSwitcherDialog-submit'),
-          color: 'secondary',
-          autoFocus: true,
-          onClick: handleSubmit(onFormSubmit),
-          variant: 'contained',
-          disabled: isChanging,
-          label: t`Change`,
-        },
-      ],
-    );
-  }, [handleSubmit, newOrganizationId, isChanging, onActionsChange, onClose, onFormSubmit, onRefreshPageClick, t]);
-
-  return (
-    <ResponseHandler
-      isLoading={isChanging}
-      loadables={loadables}
-    >
-      {newOrganizationId && (
-        <Alert severity={'success'}>
-          {t('Your organization has been changed. You are now a member of "{{organization}}". You will need to refresh the page for changes to take effect.', {
-            organization: organizationOptionsQuery.options.find((option) => option.value === newOrganizationId)?.label,
-          })}
-        </Alert>
-      )}
-      {!newOrganizationId && (
-        <FormProvider {...formMethods}>
-          <form
-            autoComplete={'off'}
-            onSubmit={handleSubmit(onFormSubmit)}
-          >
-            <Box marginBottom={2}>
-              <Typography component={'p'}>
-                {t`For demo purposes, it is possible to switch your organization. Choose your organization from the list below and click 'Change'.`}
-              </Typography>
-            </Box>
-            <Box>
-              <Autocomplete
-                label={t`Organization`}
-                name={'organization_id'}
-                options={organizationOptionsQuery.options}
-              />
-            </Box>
-          </form>
-        </FormProvider>
-      )}
-    </ResponseHandler>
-  );
-}, {
-  testId: 'OrganizationSwitcherDialog',
-  maxWidth: 'md',
-  fullWidth: true,
-  defaultTitle: '',
-  noCloseButton: true,
-  disableBackdropClick: true,
-});

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

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

package/src/components/ui/OutageList/OutageItem.tsx

@@ -1,48 +0,0 @@
-import type { AlertProps } from '@mui/material';
-import {
-  Alert,
-  AlertTitle,
-  Typography,
-  Box,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { format } from 'date-fns';
-
-import type { Outage } from '../../../api';
-import { DATE_FORMAT } from '../../../data/date';
-
-type OutageItemProps = {
-  readonly outage: Outage;
-  readonly severity: AlertProps['severity'];
-  readonly title: string;
-};
-export const OutageItem = ({ outage, severity, title }: OutageItemProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <Alert
-      severity={severity}
-    >
-      <AlertTitle>
-        {title}
-      </AlertTitle>
-      <Box>
-        {outage.description}
-      </Box>
-      <Box>
-        <Typography component={'p'}>
-          {t`Expected start: `}
-          {' '}
-          {outage.active_from ? format(new Date(outage.active_from), DATE_FORMAT.DATE_TIME) : t`Unknown`}
-        </Typography>
-      </Box>
-      <Box>
-        <Typography component={'p'}>
-          {t`Expected end: `}
-          {' '}
-          {outage.active_to ? format(new Date(outage.active_to), DATE_FORMAT.DATE_TIME) : t`Unknown`}
-        </Typography>
-      </Box>
-    </Alert>
-  );
-};

package/src/components/ui/OutageList/OutageList.tsx

@@ -1,54 +0,0 @@
-import {
-  Typography,
-  Box,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-
-import type { Outage } from '../../../api';
-
-import { OutageSection } from './OutageSection';
-
-export type OutageListProps = {
-  readonly visibleOutages: Outage[];
-  readonly activeOutages: Outage[];
-  readonly soonActiveOutages: Outage[];
-};
-export const OutageList = ({ visibleOutages, activeOutages, soonActiveOutages }: OutageListProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <Box>
-      {visibleOutages.length === 0 && activeOutages.length === 0 && soonActiveOutages.length === 0 && (
-        <Box>
-          <Typography component={'p'}>
-            {t`There no current or scheduled outages.`}
-          </Typography>
-        </Box>
-      )}
-      {activeOutages.length > 0 && (
-        <OutageSection
-          itemTitle={t`Active outage`}
-          outages={activeOutages}
-          severity={'error'}
-          title={t`Our platform is experiencing an active outing.`}
-        />
-      )}
-      {soonActiveOutages.length > 0 && (
-        <OutageSection
-          itemTitle={t`Upcoming outage`}
-          outages={soonActiveOutages}
-          severity={'warning'}
-          title={t`Our platform will soon go down for a planned outage.`}
-        />
-      )}
-      {visibleOutages.length > 0 && (
-        <OutageSection
-          itemTitle={t`Planned outage`}
-          outages={visibleOutages}
-          severity={'info'}
-          title={t`There are scheduled outages. Our platform will be disrupted during these times.`}
-        />
-      )}
-    </Box>
-  );
-};

package/src/components/ui/OutageList/OutageSection.tsx

@@ -1,39 +0,0 @@
-import type { AlertProps } from '@mui/material';
-import {
-  Typography,
-  Box,
-} from '@mui/material';
-
-import type { Outage } from '../../../api';
-
-import { OutageItem } from './OutageItem';
-
-type OutageSectionProps = {
-  readonly outages: Outage[];
-  readonly severity: AlertProps['severity'];
-  readonly title: string;
-  readonly itemTitle: string;
-};
-export const OutageSection = ({ outages, severity, title, itemTitle }: OutageSectionProps) => {
-  return (
-    <Box marginBottom={2}>
-      <Box marginBottom={1}>
-        <Typography component={'p'}>
-          {title}
-        </Typography>
-      </Box>
-      {outages.map((outage) => (
-        <Box
-          key={outage.id}
-          marginBottom={1}
-        >
-          <OutageItem
-            outage={outage}
-            severity={severity}
-            title={itemTitle}
-          />
-        </Box>
-      ))}
-    </Box>
-  );
-};

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

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

package/src/components/ui/OutagesDialog/OutagesDialog.tsx

@@ -1,71 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import type { ReactElement } from 'react';
-import { useEffect } from 'react';
-import { useStore } from 'zustand';
-
-import { OutageList } from '../OutageList/OutageList';
-import type {
-  WithDialogRenderProps,
-  WithDialogRefMethods,
-} from '../../../hoc/withDialog';
-import { withDialog } from '../../../hoc/withDialog';
-import { outagesStore } from '../../../stores/outagesStore';
-import { TestIdUtil } from '../../../utils/TestIdUtil';
-
-export interface OutagesDialogOpenProps {
-  //
-}
-
-export interface OutagesDialogProps extends WithDialogRenderProps<OutagesDialogOpenProps> {
-  //
-}
-
-export type OutagesDialogRefMethods = WithDialogRefMethods<OutagesDialogProps, OutagesDialogOpenProps>;
-
-
-export const OutagesDialog = withDialog<OutagesDialogProps, OutagesDialogOpenProps>((
-  {
-    onTitleChange,
-    onActionsChange,
-    onClose,
-  }: OutagesDialogProps,
-): ReactElement => {
-  const { t } = useTranslation();
-  const visibleOutages = useStore(outagesStore, (state) => state.visibleOutages);
-  const activeOutages = useStore(outagesStore, (state) => state.activeOutages);
-  const soonActiveOutages = useStore(outagesStore, (state) => state.soonActiveOutages);
-
-  useEffect(() => {
-    onTitleChange(t`Outages`);
-  }, [onTitleChange, t]);
-
-  useEffect(() => {
-    onActionsChange(
-      [
-        {
-          ...TestIdUtil.createAttributes('OutagesDialog-close'),
-          color: 'secondary',
-          autoFocus: true,
-          onClick: onClose,
-          variant: 'contained',
-          label: t`Close`,
-        },
-      ],
-    );
-  }, [onActionsChange, onClose, t]);
-
-  return (
-    <OutageList
-      activeOutages={activeOutages}
-      soonActiveOutages={soonActiveOutages}
-      visibleOutages={visibleOutages}
-    />
-  );
-}, {
-  testId: 'OutagesDialog',
-  maxWidth: 'md',
-  fullWidth: true,
-  defaultTitle: '',
-  noCloseButton: false,
-  disableBackdropClick: false,
-});

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

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