@gen-epix/ui 1.14.4 → 1.15.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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