@gen-epix/ui 1.15.1 → 1.15.2

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

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

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

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

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

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

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

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

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

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