@gen-epix/ui 1.14.5 → 1.15.0

package/src/components/form/helpers/GenericForm/GenericForm.tsx

@@ -0,0 +1,187 @@
+import type {
+  FormEventHandler,
+  ReactElement,
+} from 'react';
+import {
+  useMemo,
+  useCallback,
+  Fragment,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import type {
+  FieldValues,
+  Path,
+  UseFormReturn,
+} from 'react-hook-form';
+import { FormProvider } from 'react-hook-form';
+import { Box } from '@mui/material';
+import type { ObjectSchema } from 'yup';
+
+import type { FormFieldDefinition } from '../../../../models/form';
+import { FORM_FIELD_DEFINITION_TYPE } from '../../../../models/form';
+import { FormUtil } from '../../../../utils/FormUtil';
+import { RichTextEditor } from '../../fields/RichTextEditor';
+import { TransferList } from '../../fields/TransferList';
+import type { AutocompleteProps } from '../../fields/Autocomplete';
+import { Autocomplete } from '../../fields/Autocomplete';
+import type { SelectProps } from '../../fields/Select';
+import { Select } from '../../fields/Select';
+import { TextField } from '../../fields/TextField';
+import { NumberField } from '../../fields/NumberField';
+import { DatePicker } from '../../fields/DatePicker';
+import { UploadButton } from '../../fields/UploadButton/UploadButton';
+import { RadioGroup } from '../../fields/RadioGroup';
+import { useIsFormFieldRequiredFromSchema } from '../../../../hooks/useIsFormFieldRequiredFromSchema';
+
+export type GenericFormProps<TFormFields extends FieldValues> = {
+  readonly formFieldDefinitions: FormFieldDefinition<TFormFields>[];
+  readonly formId?: string;
+  readonly onSubmit?: FormEventHandler<HTMLFormElement>;
+  readonly formMethods: UseFormReturn<TFormFields>;
+  readonly renderField?: (definition: FormFieldDefinition<TFormFields>, element: ReactElement) => ReactElement;
+  readonly wrapForm?: (children: ReactElement) => ReactElement;
+  readonly disableAll?: boolean;
+  readonly schema: ObjectSchema<TFormFields, TFormFields>;
+  readonly defaultFormValues?: Partial<TFormFields>;
+};
+
+export const GenericForm = <TFormFields extends FieldValues,>({
+  formFieldDefinitions,
+  formId,
+  onSubmit,
+  formMethods,
+  renderField,
+  wrapForm,
+  disableAll,
+  schema,
+}: GenericFormProps<TFormFields>) => {
+  const { t } = useTranslation();
+
+  const booleanOptions = useMemo(() => FormUtil.createBooleanOptions(t), [t]);
+
+  const isFormFieldRequired = useIsFormFieldRequiredFromSchema(schema, formMethods.getValues);
+
+  const renderFormFieldDefinition = useCallback((formFieldDefinition: FormFieldDefinition<TFormFields>) => {
+    switch (formFieldDefinition.definition) {
+      case FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE:
+        return (
+          <Autocomplete
+            {...formFieldDefinition as AutocompleteProps<TFormFields, Path<TFormFields>, false>}
+            required={isFormFieldRequired(formFieldDefinition.name)}
+            disabled={formFieldDefinition.disabled || disableAll}
+          />
+        );
+      case FORM_FIELD_DEFINITION_TYPE.SELECT:
+        return (
+          <Select
+            {...formFieldDefinition as SelectProps<TFormFields, Path<TFormFields>, false>}
+            required={isFormFieldRequired(formFieldDefinition.name)}
+            disabled={formFieldDefinition.disabled || disableAll}
+          />
+        );
+      case FORM_FIELD_DEFINITION_TYPE.TRANSFER_LIST:
+        return (
+          <TransferList
+            {...formFieldDefinition}
+            required={isFormFieldRequired(formFieldDefinition.name)}
+            disabled={formFieldDefinition.disabled || disableAll}
+          />
+        );
+      case FORM_FIELD_DEFINITION_TYPE.BOOLEAN:
+        return (
+          <Select
+            {...formFieldDefinition}
+            required={isFormFieldRequired(formFieldDefinition.name)}
+            disabled={formFieldDefinition.disabled || disableAll}
+            options={booleanOptions}
+          />
+        );
+      case FORM_FIELD_DEFINITION_TYPE.DATE:
+        return (
+          <DatePicker
+            {...formFieldDefinition}
+            required={isFormFieldRequired(formFieldDefinition.name)}
+            disabled={formFieldDefinition.disabled || disableAll}
+          />
+        );
+      case FORM_FIELD_DEFINITION_TYPE.RICH_TEXT:
+        return (
+          <RichTextEditor
+            {...formFieldDefinition}
+            required={isFormFieldRequired(formFieldDefinition.name)}
+            disabled={formFieldDefinition.disabled || disableAll}
+          />
+        );
+      case FORM_FIELD_DEFINITION_TYPE.FILE:
+        return (
+          <UploadButton
+            {...formFieldDefinition}
+            required={isFormFieldRequired(formFieldDefinition.name)}
+            disabled={formFieldDefinition.disabled || disableAll}
+          />
+        );
+      case FORM_FIELD_DEFINITION_TYPE.RADIO_GROUP:
+        return (
+          <RadioGroup
+            {...formFieldDefinition}
+            required={isFormFieldRequired(formFieldDefinition.name)}
+            disabled={formFieldDefinition.disabled || disableAll}
+          />
+        );
+      case FORM_FIELD_DEFINITION_TYPE.TEXTFIELD:
+        return (
+          <TextField
+            {...formFieldDefinition}
+            required={isFormFieldRequired(formFieldDefinition.name)}
+            disabled={formFieldDefinition.disabled || disableAll}
+          />
+        );
+      case FORM_FIELD_DEFINITION_TYPE.NUMBER:
+        return (
+          <NumberField
+            {...formFieldDefinition}
+            required={isFormFieldRequired(formFieldDefinition.name)}
+            disabled={formFieldDefinition.disabled || disableAll}
+          />
+        );
+      default:
+        throw Error(`Unsupported form field definition: ${formFieldDefinition.definition}`);
+    }
+  }, [booleanOptions, disableAll, isFormFieldRequired]);
+
+
+  const formContent = (
+    <>
+      {formFieldDefinitions.map(formFieldDefinition => {
+        if (renderField) {
+          return (
+            <Fragment key={formFieldDefinition.name}>
+              {renderField(formFieldDefinition, renderFormFieldDefinition(formFieldDefinition))}
+            </Fragment>
+          );
+        }
+        return (
+          <Box
+            key={formFieldDefinition.name}
+            marginY={1}
+          >
+            {renderFormFieldDefinition(formFieldDefinition)}
+          </Box>
+        );
+      })}
+    </>
+  );
+
+  return (
+    <FormProvider {...formMethods}>
+      <Box
+        component={'form'}
+        autoComplete={'off'}
+        id={formId}
+        onSubmit={onSubmit}
+      >
+        {wrapForm ? wrapForm(formContent) : formContent}
+      </Box>
+    </FormProvider>
+  );
+};

package/src/components/form/helpers/GenericForm/index.ts

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

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

@@ -0,0 +1,74 @@
+import {
+  AppBar,
+  Box,
+  Container,
+  Toolbar,
+  Typography,
+  useTheme,
+} from '@mui/material';
+
+import { ConfigManager } from '../../../classes/managers/ConfigManager';
+import { TestIdUtil } from '../../../utils/TestIdUtil';
+
+import { ApplicationBarNavigationMenu } from './ApplicationBarNavigationMenu';
+import { ApplicationBarActions } from './ApplicationBarActions';
+
+export type ApplicationBarProps = {
+  readonly fullWidth?: boolean;
+  readonly fullHeight?: boolean;
+  readonly singleAction?: boolean;
+};
+
+export const ApplicationBar = ({
+  fullWidth,
+  singleAction,
+}: ApplicationBarProps) => {
+  const theme = useTheme();
+
+  return (
+    <AppBar
+      {...TestIdUtil.createAttributes('ApplicationBar')}
+      square
+      position={'static'}
+      sx={{
+        boxShadow: 'none',
+        background: theme['gen-epix'].navbar.background,
+      }}
+    >
+      <Container
+        disableGutters
+        maxWidth={fullWidth ? false : 'xl'}
+      >
+        <Toolbar
+          disableGutters
+          sx={{
+            height: 48,
+            minHeight: '48px !important',
+            justifyContent: singleAction ? 'center' : 'space-between',
+          }}
+        >
+          {singleAction && (
+            <Box marginX={theme.spacing(2)}>
+              <Typography
+                component={'h1'}
+                sx={{
+                  color: theme['gen-epix'].navbar.primaryColor,
+                  fontSize: '1.3rem',
+                }}
+                variant={'body2'}
+              >
+                {ConfigManager.instance.config.applicationName}
+              </Typography>
+            </Box>
+          )}
+          {!singleAction && (
+            <>
+              <ApplicationBarNavigationMenu fullWidth={fullWidth} />
+              <ApplicationBarActions fullWidth={fullWidth} />
+            </>
+          )}
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+};

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

@@ -0,0 +1,124 @@
+import {
+  Box,
+  IconButton,
+  useTheme,
+} from '@mui/material';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { useTranslation } from 'react-i18next';
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useState,
+} from 'react';
+
+import { ConfigManager } from '../../../classes/managers/ConfigManager';
+import { TestIdUtil } from '../../../utils/TestIdUtil';
+
+import { ApplicationBarActionsFeedbackItem } from './ApplicationBarActionsFeedbackItem';
+import { ApplicationBarActionsInfoItem } from './ApplicationBarActionsInfotem';
+import { ApplicationBarActionsNotificationsItem } from './ApplicationBarActionsNotificationsItem';
+import { ApplicationBarActionsOutagesItem } from './ApplicationBarActionsOutagesItem';
+import { ApplicationBarActionsUserItem } from './ApplicationBarActionsUserItem';
+import { ApplicationBarActionsOrganizationSwitcherItem } from './ApplicationBarActionsOrganizationSwitcherItem';
+
+export type ApplicationBarActionsProps = {
+  readonly fullWidth?: boolean;
+};
+
+export const ApplicationBarActions = ({ fullWidth }: ApplicationBarActionsProps) => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+  const environmentMessage = ConfigManager.instance.config.getEnvironmentMessage(t);
+  const navId = useId();
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const onMenuButtonClick = useCallback(() => {
+    setIsMenuOpen(x => !x);
+  }, []);
+
+  useEffect(() => {
+    if (isMenuOpen) {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+          setIsMenuOpen(false);
+        }
+      };
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [isMenuOpen]);
+
+  return (
+    <Box
+      {...TestIdUtil.createAttributes('ApplicationBarActions')}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        paddingRight: 1,
+      }}
+    >
+      <IconButton
+        aria-label={t`Toggle menu`}
+        aria-controls={navId}
+        sx={{
+          color: theme['gen-epix'].navbar.primaryColor,
+          [theme.breakpoints.up('md')]: {
+            display: 'none',
+          },
+        }}
+        onClick={onMenuButtonClick}
+      >
+        <MoreVertIcon />
+      </IconButton>
+      <Box
+        id={navId}
+        sx={{
+          display: 'flex',
+          [theme.breakpoints.down('md')]: {
+            display: isMenuOpen ? 'flex' : 'none',
+            position: 'absolute',
+            alignItems: 'start',
+            flexDirection: 'column',
+            background: theme['gen-epix'].navbar.background,
+            top: theme.spacing(6),
+            right: 0,
+            left: 0,
+            zIndex: theme.zIndex.appBar - 1,
+          },
+        }}
+      >
+        <ApplicationBarActionsFeedbackItem />
+        <ApplicationBarActionsOutagesItem />
+        <ApplicationBarActionsNotificationsItem />
+        <ApplicationBarActionsInfoItem />
+        <ApplicationBarActionsOrganizationSwitcherItem />
+        <ApplicationBarActionsUserItem />
+        {environmentMessage && (
+          <Box
+            {...TestIdUtil.createAttributes('ApplicationBarActions-EnvironmentMessage')}
+            aria-hidden={'true'}
+            sx={{
+              padding: `0 ${theme.spacing(1)} !important`,
+              marginRight: fullWidth ? 0 : 1,
+              fontWeight: 700,
+              textTransform: 'uppercase',
+              color: theme['gen-epix'].navbar.environmentMessageColor,
+              [theme.breakpoints.down('md')]: {
+                visibility: 'hidden',
+                position: 'absolute',
+              },
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            {t('{{environmentMessage}}', { environmentMessage })}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};

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

@@ -0,0 +1,102 @@
+import {
+  Tooltip,
+  IconButton,
+  useTheme,
+  Box,
+} from '@mui/material';
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { Fragment } from 'react/jsx-runtime';
+import ChatIcon from '@mui/icons-material/Chat';
+
+import {
+  UserFeedbackDialog,
+  type UserFeedbackDialogRefMethods,
+} from '../UserFeedbackDialog';
+import { ConfigManager } from '../../../classes/managers/ConfigManager';
+import { UserSettingsManager } from '../../../classes/managers/UserSettingsManager';
+
+const NOW = new Date().getTime();
+
+export const ApplicationBarActionsFeedbackItem = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const userFeedbackDialogRef = useRef<UserFeedbackDialogRefMethods>(null);
+  const [isFeedbackTooltipOpen, setIsFeedbackTooltipOpen] = useState(false);
+  useEffect(() => {
+    if (!UserSettingsManager.instance.showShowUserFeedbackTooltip) {
+      return;
+    }
+    const timeoutMs = Math.max(0, ConfigManager.instance.config.userFeedback.SHOW_USER_FEEDBACK_TOOLTIP_AFTER_MS - (new Date().getTime() - NOW));
+    const handle = setTimeout(() => {
+      setIsFeedbackTooltipOpen(true);
+    }, timeoutMs);
+    return () => {
+      clearTimeout(handle);
+    };
+  }, []);
+
+  const onUserFeedbackMenuIconClick = useCallback(() => {
+    userFeedbackDialogRef.current.open();
+  }, []);
+
+  const onTooltipMouseEnter = useCallback(() => {
+    setIsFeedbackTooltipOpen(false);
+    UserSettingsManager.instance.showShowUserFeedbackTooltip = false;
+  }, []);
+
+  return (
+    <Fragment>
+      <Tooltip
+        arrow
+        color={'secondary'}
+        slotProps={{
+          tooltip: {
+            sx: {
+              backgroundColor: theme.palette.secondary.main,
+              marginRight: `${theme.spacing(0.5)} !important`,
+            },
+          },
+          arrow: {
+            sx: {
+              color: theme.palette.secondary.main,
+            },
+          },
+          popper: {
+            disablePortal: true,
+          },
+        }}
+        open={isFeedbackTooltipOpen}
+        placement={'left'}
+        title={t`Would you like to share your feedback?`}
+        onMouseEnter={onTooltipMouseEnter}
+      >
+        <IconButton
+          aria-label={t`Feedback`}
+          color={'inherit'}
+          onClick={onUserFeedbackMenuIconClick}
+        >
+          <ChatIcon color={'inherit'} />
+          <Box
+            sx={{
+              fontSize: '1.3rem',
+              marginLeft: theme.spacing(1),
+              [theme.breakpoints.up('md')]: {
+                visibility: 'hidden',
+                position: 'absolute',
+              },
+            }}
+          >
+            {t`Feedback`}
+          </Box>
+        </IconButton>
+      </Tooltip>
+      <UserFeedbackDialog ref={userFeedbackDialogRef} />
+    </Fragment>
+  );
+};

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

@@ -0,0 +1,60 @@
+import {
+  Box,
+  IconButton,
+  useTheme,
+} from '@mui/material';
+import { Fragment } from 'react/jsx-runtime';
+import CodeIcon from '@mui/icons-material/Code';
+import {
+  useCallback,
+  useState,
+} from 'react';
+import type { MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { InfoMenu } from './InfoMenu';
+
+export const ApplicationBarActionsInfoItem = () => {
+  const [infoMenuAnchorElement, setInfoMenuAnchorElement] = useState<null | HTMLElement>(null);
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  const onInfoMenuIconClick = useCallback((event: MouseEvent<HTMLElement>): void => {
+    setInfoMenuAnchorElement(event.currentTarget);
+  }, []);
+
+  const onInfoMenuClose = useCallback(() => {
+    setInfoMenuAnchorElement(null);
+  }, []);
+
+  return (
+    <Fragment>
+      <IconButton
+        color={'inherit'}
+        title={'Code information'}
+        onClick={onInfoMenuIconClick}
+      >
+        <CodeIcon color={'inherit'} />
+        <Box
+          sx={{
+            fontSize: '1.3rem',
+            marginLeft: theme.spacing(1),
+            [theme.breakpoints.up('md')]: {
+              visibility: 'hidden',
+              position: 'absolute',
+            },
+          }}
+        >
+          {t`Code information`}
+        </Box>
+      </IconButton>
+      {infoMenuAnchorElement && (
+        <InfoMenu
+          anchorElement={infoMenuAnchorElement}
+          onClose={onInfoMenuClose}
+        />
+      )}
+
+    </Fragment>
+  );
+};

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

@@ -0,0 +1,82 @@
+import {
+  Badge,
+  Box,
+  CircularProgress,
+  IconButton,
+  useTheme,
+} from '@mui/material';
+import {
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+import { Fragment } from 'react/jsx-runtime';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import { useTranslation } from 'react-i18next';
+
+import { NotificationsDrawer } from '../Notifications';
+import { NotificationManager } from '../../../classes/managers/NotificationManager';
+import { useSubscribable } from '../../../hooks/useSubscribable';
+
+
+export const ApplicationBarActionsNotificationsItem = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const notifications = useSubscribable(NotificationManager.instance);
+  const isLoading = useMemo(() => notifications.some(x => x.isLoading), [notifications]);
+  const [open, setOpen] = useState(false);
+
+
+  const onMenuIconClick = useCallback(() => {
+    NotificationManager.instance.hideAllNotifications();
+    setOpen(true);
+  }, []);
+
+  const onDrawerClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return (
+    <Fragment>
+      <IconButton
+        aria-label={t`Notifications`}
+        color={'inherit'}
+        title={t`Notifications`}
+        onClick={onMenuIconClick}
+      >
+        <Badge
+          badgeContent={notifications.length}
+          color={'secondary'}
+          sx={{ '& .MuiBadge-badge': { fontSize: 9, height: 15, minWidth: 15, border: '1px solid white' } }}
+        >
+          <NotificationsIcon color={'inherit'} />
+        </Badge>
+        {isLoading && (
+          <CircularProgress
+            color={'inherit'}
+            size={theme.spacing(3.5)}
+            sx={{
+              position: 'absolute',
+            }}
+          />
+        )}
+        <Box
+          sx={{
+            fontSize: '1.3rem',
+            marginLeft: theme.spacing(1),
+            [theme.breakpoints.up('md')]: {
+              visibility: 'hidden',
+              position: 'absolute',
+            },
+          }}
+        >
+          {t`Notifications`}
+        </Box>
+      </IconButton>
+      <NotificationsDrawer
+        open={open}
+        onDrawerClose={onDrawerClose}
+      />
+    </Fragment>
+  );
+};

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

@@ -0,0 +1,58 @@
+import {
+  Box,
+  IconButton,
+  useTheme,
+} from '@mui/material';
+import {
+  useCallback,
+  useRef,
+} from 'react';
+import { Fragment } from 'react/jsx-runtime';
+import ChangeCircleIcon from '@mui/icons-material/ChangeCircle';
+import { useTranslation } from 'react-i18next';
+
+import { OrganizationSwitcherDialog } from '../OrganizationSwitcherDialog';
+import type { OrganizationSwitcherDialogRefMethods } from '../OrganizationSwitcherDialog';
+import { FeatureFlagsManager } from '../../../classes/managers/FeatureFlagsManager';
+
+
+export const ApplicationBarActionsOrganizationSwitcherItem = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const organizationSwitcherDialogRef = useRef<OrganizationSwitcherDialogRefMethods>(null);
+
+
+  const onMenuIconClick = useCallback(() => {
+    organizationSwitcherDialogRef.current.open();
+  }, []);
+
+  if (!FeatureFlagsManager.instance.featureFlags.update_own_organization) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      <IconButton
+        aria-label={t`Change organization`}
+        color={'inherit'}
+        title={t`Change organization`}
+        onClick={onMenuIconClick}
+      >
+        <ChangeCircleIcon color={'inherit'} />
+        <Box
+          sx={{
+            fontSize: '1.3rem',
+            marginLeft: theme.spacing(1),
+            [theme.breakpoints.up('md')]: {
+              visibility: 'hidden',
+              position: 'absolute',
+            },
+          }}
+        >
+          {t`Change organization`}
+        </Box>
+      </IconButton>
+      <OrganizationSwitcherDialog ref={organizationSwitcherDialogRef} />
+    </Fragment>
+  );
+};