@gen-epix/ui 1.15.1 → 1.16.0

package/src/components/epi/EpiDashboard/EpiDashboard.tsx

@@ -1,390 +0,0 @@
-import {
-  useTheme,
-  Box,
-  Alert,
-  AlertTitle,
-} from '@mui/material';
-import {
-  useRef,
-  useState,
-  useMemo,
-  useCallback,
-  useEffect,
-  useContext,
-} from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-import { useTranslation } from 'react-i18next';
-import { useStore } from 'zustand';
-import { useShallow } from 'zustand/shallow';
-import InfoIcon from '@mui/icons-material/Info';
-
-import CollectionIcon from '../../../assets/icons/CollectionIcon.svg?react';
-import type { EpiCaseSetInfoDialogRefMethods } from '../EpiCaseSetInfoDialog';
-import { EpiCaseSetInfoDialog } from '../EpiCaseSetInfoDialog';
-import type { EpiCaseTypeInfoDialogRefMethods } from '../EpiCaseTypeInfoDialog';
-import { EpiCaseTypeInfoDialog } from '../EpiCaseTypeInfoDialog';
-import { withEpiDashboardStore } from '../EpiDashboardStoreLoader';
-import {
-  EpiAddCasesToEventDialog,
-  type EpiAddCasesToEventDialogRefMethods,
-} from '../EpiAddCasesToEventDialog';
-import {
-  EpiBulkEditCaseDialog,
-  type EpiBulkEditCaseDialogRefMethods,
-} from '../EpiBulkEditCaseDialog';
-import {
-  EpiCaseInfoDialog,
-  type EpiCaseInfoDialogRefMethods,
-} from '../EpiCaseInfoDialog';
-import {
-  EpiContactDetailsDialog,
-  type EpiContactDetailsDialogRefMethods,
-} from '../EpiContactDetailsDialog';
-import {
-  EpiCreateEventDialog,
-  type EpiCreateEventDialogRefMethods,
-} from '../EpiCreateEventDialog';
-import {
-  EpiRemoveCasesFromEventDialog,
-  type EpiRemoveCasesFromEventDialogRefMethods,
-} from '../EpiRemoveCasesFromEventDialog';
-import {
-  EpiSequenceDownloadDialog,
-  type EpiSequenceDownloadDialogRefMethods,
-} from '../EpiSequenceDownloadDialog';
-import type { CaseSet } from '../../../api';
-import { ConfigManager } from '../../../classes/managers/ConfigManager';
-import { EpiEventBusManager } from '../../../classes/managers/EpiEventBusManager';
-import { KeyboardShortcutManager } from '../../../classes/managers/KeyboardShortcutManager';
-import { Subject } from '../../../classes/Subject';
-import type { EpiLinkedScrollSubjectValue } from '../../../models/epi';
-import { EPI_ZONE } from '../../../models/epi';
-import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
-import { userProfileStore } from '../../../stores/userProfileStore';
-import { DashboardUtil } from '../../../utils/DashboardUtil';
-import { ResponseHandler } from '../../ui/ResponseHandler';
-import {
-  SidebarMenu,
-  SidebarMenuItem,
-} from '../../ui/Sidebar';
-import {
-  TableFiltersSidebarItemIcon,
-  TableFiltersSidebarItem,
-} from '../../ui/Table';
-import { EpiCurve } from '../EpiCurve';
-import { EpiLineList } from '../EpiLineList';
-import { EpiMap } from '../EpiMap';
-import { EpiStratification } from '../EpiStratification';
-import type { EpiTreeRef } from '../EpiTree';
-import { EpiTree } from '../EpiTree';
-import { EpiWidgetUnavailable } from '../EpiWidgetUnavailable';
-import {
-  EpiFindSimilarCasesDialog,
-  type EpiFindSimilarCasesDialogRefMethods,
-} from '../EpiFindSimilarCasesDialog';
-import {
-  EpiRemoveFindSimilarCasesResultDialog,
-  type EpiRemoveFindSimilarCasesResultDialogRefMethods,
-} from '../EpiRemoveFindSimilarCasesResultDialog/EpiRemoveFindSimilarCasesResultDialog';
-
-import {
-  EpiDashboardSettingsSidebarItemIcon,
-  EpiDashboardSettingsSidebarItem,
-} from './EpiDashboardSettingsSidebarItem';
-import { EpiDashboardLayoutRenderer } from './EpiDashboardLayoutRenderer';
-import type { ForwardRefEpiDashboardLayoutRendererRefMethods } from './EpiDashboardLayoutRenderer';
-import {
-  EpiDashboardDownloadSidebarItem,
-  EpiDashboardDownloadSidebarItemIcon,
-} from './EpiDashboardDownloadSidebarItem';
-
-type EpiDashboardProps = {
-  readonly caseSet?: CaseSet;
-  readonly caseTypeId: string;
-};
-
-export const EpiDashboard = withEpiDashboardStore(({ caseSet }: EpiDashboardProps) => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const epiDashboardLayoutRendererRef = useRef<ForwardRefEpiDashboardLayoutRendererRefMethods>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const epiCaseSetInfoDialogRef = useRef<EpiCaseSetInfoDialogRefMethods>(null);
-  const epiCaseTypeInfoDialogRef = useRef<EpiCaseTypeInfoDialogRefMethods>(null);
-  const epiContactDetailsDialogRef = useRef<EpiContactDetailsDialogRefMethods>(null);
-  const epiSequenceDownloadDialogRef = useRef<EpiSequenceDownloadDialogRefMethods>(null);
-  const epiCaseInfoDialogRef = useRef<EpiCaseInfoDialogRefMethods>(null);
-  const epiFindSimilarCasesDialogRef = useRef<EpiFindSimilarCasesDialogRefMethods>(null);
-  const epiCreateEventDialogRef = useRef<EpiCreateEventDialogRefMethods>(null);
-  const epiRemoveCasesFromEventDialogRef = useRef<EpiRemoveCasesFromEventDialogRefMethods>(null);
-  const epiAddCasesToEventDialogRef = useRef<EpiAddCasesToEventDialogRefMethods>(null);
-  const epiBulkEditCaseDialogRef = useRef<EpiBulkEditCaseDialogRefMethods>(null);
-  const epiRemoveFindSimilarCasesResultDialogRef = useRef<EpiRemoveFindSimilarCasesResultDialogRefMethods>(null);
-  const [isFilterSidebarOpen, setIsFilterSidebarOpen] = useState(false);
-  const [isSettingsSidebarOpen, setIsSettingsSidebarOpen] = useState(false);
-  const [isDownloadSidebarOpen, setIsDownloadSidebarOpen] = useState(false);
-  const epiTreeRef = useRef<EpiTreeRef>(null);
-  const linkedScrollSubject = useMemo(() => {
-    return new Subject<EpiLinkedScrollSubjectValue>();
-  }, []);
-  const epiDashboardStore = useContext(EpiDashboardStoreContext);
-  const fetchData = useStore(epiDashboardStore, useShallow((state) => state.fetchData));
-  const dataError = useStore(epiDashboardStore, (state) => state.dataError);
-  const completeCaseType = useStore(epiDashboardStore, (state) => state.completeCaseType);
-  const activeFiltersCount = useStore(epiDashboardStore, (state) => state.filters.filter(f => !f.isInitialFilterValue()).length);
-  const numLayoutZones = useStore(userProfileStore, (state) => Object.keys(state.epiDashboardLayoutUserConfig.zones).length);
-  const numVisibleLayoutZones = useStore(userProfileStore, (state) => DashboardUtil.getEnabledZones(state.epiDashboardLayoutUserConfig).length);
-  const numHiddenLayoutZones = numLayoutZones - numVisibleLayoutZones;
-  const isMaxResultsExceeded = useStore(epiDashboardStore, (state) => state.isMaxResultsExceeded);
-  const isMaxResultsExceededDismissed = useStore(epiDashboardStore, (state) => state.isMaxResultsExceededDismissed);
-
-  const onMaxResultsExceededButtonClose = useCallback(() => {
-    epiDashboardStore.setState({ isMaxResultsExceededDismissed: true });
-  }, [epiDashboardStore]);
-
-  useEffect(() => {
-    const eventBus = EpiEventBusManager.instance;
-    const removers = [
-      eventBus.addEventListener('onEventCreated', () => {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        fetchData();
-      }),
-      eventBus.addEventListener('openAddCasesToEventDialog', (...args) => epiAddCasesToEventDialogRef.current?.open(...args)),
-      eventBus.addEventListener('openCaseInfoDialog', (...args) => epiCaseInfoDialogRef.current?.open(...args)),
-      eventBus.addEventListener('openContactDetailsDialog', (...args) => epiContactDetailsDialogRef.current?.open(...args)),
-      eventBus.addEventListener('openCreateEventDialog', (...args) => epiCreateEventDialogRef.current?.open(...args)),
-      eventBus.addEventListener('openFindSimilarCasesDialog', (...args) => epiFindSimilarCasesDialogRef.current?.open(...args)),
-      eventBus.addEventListener('openRemoveFindSimilarCasesResultDialog', (...args) => epiRemoveFindSimilarCasesResultDialogRef.current?.open(...args)),
-      eventBus.addEventListener('openRemoveCasesFromEventDialog', (...args) => epiRemoveCasesFromEventDialogRef.current?.open(...args)),
-      eventBus.addEventListener('openSequenceDownloadDialog', (...args) => epiSequenceDownloadDialogRef.current?.open(...args)),
-      eventBus.addEventListener('openBulkEditCaseDialog', (...args) => epiBulkEditCaseDialogRef.current?.open(...args)),
-      eventBus.addEventListener('openFiltersMenu', () => setIsFilterSidebarOpen(true)),
-    ];
-    return () => {
-      removers.forEach(callbackfn => callbackfn());
-    };
-  }, [fetchData]);
-
-  useEffect(() => {
-    const removers = [
-      KeyboardShortcutManager.instance.registerShortcut({ key: 'f', modifier: null, callback: () => {
-        setIsFilterSidebarOpen(x => !x);
-      } }),
-      KeyboardShortcutManager.instance.registerShortcut({ key: 's', modifier: null, callback: () => {
-        setIsSettingsSidebarOpen(x => !x);
-      } }),
-      KeyboardShortcutManager.instance.registerShortcut({ key: 'i', modifier: null, callback: () => {
-        epiCaseTypeInfoDialogRef.current.open();
-      } }),
-    ];
-    return () => {
-      removers.forEach(callbackfn => callbackfn());
-    };
-  }, []);
-
-  const onEpiDashboardFilterSidebarClose = useCallback(() => {
-    setIsFilterSidebarOpen(false);
-  }, []);
-
-  const onEpiDashboardOpenFilterSidebarButtonClick = useCallback(() => {
-    setIsFilterSidebarOpen(true);
-  }, []);
-
-  const onEpiDashboardSettingsSidebarClose = useCallback(() => {
-    setIsSettingsSidebarOpen(false);
-  }, []);
-
-  const onEpiDashboardDownloadSidebarClose = useCallback(() => {
-    setIsDownloadSidebarOpen(false);
-  }, []);
-
-  const onEpiDashboardLayoutSelectorSidebarButtonClick = useCallback(() => {
-    setIsSettingsSidebarOpen(true);
-  }, []);
-
-  const onEpiDashboardOpenDownloadButtonClick = useCallback(() => {
-    setIsDownloadSidebarOpen(true);
-  }, []);
-
-  const onEpiDashboardOpenInfoSidebarButtonClick = useCallback(() => {
-    epiCaseTypeInfoDialogRef.current.open();
-  }, []);
-
-  const onEpiDashboardOpenCaseSetDescriptionButtonClick = useCallback(() => {
-    epiCaseSetInfoDialogRef.current.open({
-      caseSetId: caseSet?.id,
-      caseTypeId: completeCaseType?.id,
-    });
-  }, [caseSet?.id, completeCaseType?.id]);
-
-  const onEpiDashboardLayoutSelectorSidebarReset = useCallback(() => {
-    epiDashboardLayoutRendererRef.current?.reset();
-  }, []);
-
-  const onEpiListLink = useCallback(() => {
-    epiTreeRef.current?.link();
-  }, []);
-
-  const shouldShowMaxResultsExceededAlert = useMemo(() => {
-    return !!isMaxResultsExceeded && !isMaxResultsExceededDismissed;
-  }, [isMaxResultsExceededDismissed, isMaxResultsExceeded]);
-
-  return (
-    <Box
-      ref={containerRef}
-      sx={{
-        height: '100%',
-        width: '100%',
-        position: 'relative',
-      }}
-    >
-      <ResponseHandler
-        error={dataError}
-        isLoading={false}
-      >
-
-        {/* Sidebar */}
-        <SidebarMenu>
-          <SidebarMenuItem
-            first
-            badgeColor={'secondary'}
-            badgeContent={activeFiltersCount}
-            icon={<TableFiltersSidebarItemIcon />}
-            testIdAttributes={{ name: 'filters' }}
-            title={t`Open filters`}
-            onClick={onEpiDashboardOpenFilterSidebarButtonClick}
-          />
-          <SidebarMenuItem
-            badgeColor={numHiddenLayoutZones === numLayoutZones ? 'error' : 'secondary'}
-            badgeContent={numHiddenLayoutZones === numLayoutZones ? '!' : numHiddenLayoutZones}
-            icon={<EpiDashboardSettingsSidebarItemIcon />}
-            testIdAttributes={{ name: 'dashboard' }}
-            title={t('Change dashboard layout (hidden zones: {{numHiddenLayoutZones}})', { numHiddenLayoutZones })}
-            onClick={onEpiDashboardLayoutSelectorSidebarButtonClick}
-          />
-          <SidebarMenuItem
-            icon={<InfoIcon />}
-            testIdAttributes={{ name: 'case' }}
-            title={t`Show case type information`}
-            onClick={onEpiDashboardOpenInfoSidebarButtonClick}
-          />
-          {caseSet && (
-            <SidebarMenuItem
-              icon={<CollectionIcon />}
-              testIdAttributes={{ name: 'event' }}
-              title={t`Show event information`}
-              onClick={onEpiDashboardOpenCaseSetDescriptionButtonClick}
-            />
-          )}
-          <SidebarMenuItem
-            icon={<EpiDashboardDownloadSidebarItemIcon />}
-            testIdAttributes={{ name: 'download' }}
-            title={t`Download`}
-            onClick={onEpiDashboardOpenDownloadButtonClick}
-          />
-          <TableFiltersSidebarItem
-            open={isFilterSidebarOpen}
-            onClose={onEpiDashboardFilterSidebarClose}
-          />
-          <EpiDashboardSettingsSidebarItem
-            open={isSettingsSidebarOpen}
-            onClose={onEpiDashboardSettingsSidebarClose}
-            onReset={onEpiDashboardLayoutSelectorSidebarReset}
-          />
-          <EpiCaseTypeInfoDialog
-            ref={epiCaseTypeInfoDialogRef}
-          />
-          {caseSet && (
-            <EpiCaseSetInfoDialog ref={epiCaseSetInfoDialogRef} />
-          )}
-          <EpiDashboardDownloadSidebarItem
-            open={isDownloadSidebarOpen}
-            onClose={onEpiDashboardDownloadSidebarClose}
-          />
-        </SidebarMenu>
-        {/* Content */}
-        <Box
-          sx={{
-            width: '100%',
-            height: '100%',
-            display: 'grid',
-            gridTemplateRows: `${shouldShowMaxResultsExceededAlert ? 'max-content ' : ''}max-content auto`,
-            paddingLeft: theme.spacing(ConfigManager.instance.config.layout.SIDEBAR_MENU_WIDTH + 1),
-          }}
-        >
-          {shouldShowMaxResultsExceededAlert && (
-            <Box>
-              <Alert
-                severity={'warning'}
-                sx={{
-                  width: '100%',
-                }}
-                onClose={onMaxResultsExceededButtonClose}
-              >
-                <AlertTitle>
-                  {t`Maximum number of results exceeded`}
-                </AlertTitle>
-                {t('The maximum number of results for {{caseTypeName}} ({{maxResultsForCaseType}}) has been exceeded. Refine your filters to reduce the number of results.', { maxResultsForCaseType: completeCaseType.read_max_n_cases, caseTypeName: completeCaseType.name })}
-              </Alert>
-            </Box>
-          )}
-          <Box>
-            <EpiStratification />
-          </Box>
-          <Box>
-            <EpiDashboardLayoutRenderer
-              ref={epiDashboardLayoutRendererRef}
-              disabled={isFilterSidebarOpen || isSettingsSidebarOpen}
-              epiCurveWidget={(
-                <ErrorBoundary
-                  fallback={(
-                    <EpiWidgetUnavailable
-                      epiZone={EPI_ZONE.EPI_CURVE}
-                      widgetName={t`epi curve`}
-                    />
-                  )}
-                >
-                  <EpiCurve />
-                </ErrorBoundary>
-              )}
-              lineListWidget={(
-                <EpiLineList
-                  caseSet={caseSet}
-                  linkedScrollSubject={linkedScrollSubject}
-                  onLink={onEpiListLink}
-                />
-              )}
-              mapWidget={(
-                <ErrorBoundary
-                  fallback={(
-                    <EpiWidgetUnavailable
-                      epiZone={EPI_ZONE.MAP}
-                      widgetName={t`map`}
-                    />
-                  )}
-                >
-                  <EpiMap />
-                </ErrorBoundary>
-              )}
-              phylogeneticTreeWidget={(
-                <EpiTree
-                  ref={epiTreeRef}
-                  linkedScrollSubject={linkedScrollSubject}
-                  itemHeight={ConfigManager.instance.config.epiLineList.TABLE_ROW_HEIGHT}
-                />
-              )}
-            />
-          </Box>
-        </Box>
-      </ResponseHandler>
-      <EpiContactDetailsDialog ref={epiContactDetailsDialogRef} />
-      <EpiFindSimilarCasesDialog ref={epiFindSimilarCasesDialogRef} />
-      <EpiRemoveFindSimilarCasesResultDialog ref={epiRemoveFindSimilarCasesResultDialogRef} />
-      <EpiSequenceDownloadDialog ref={epiSequenceDownloadDialogRef} />
-      <EpiCaseInfoDialog ref={epiCaseInfoDialogRef} />
-      <EpiCreateEventDialog ref={epiCreateEventDialogRef} />
-      <EpiRemoveCasesFromEventDialog ref={epiRemoveCasesFromEventDialogRef} />
-      <EpiAddCasesToEventDialog ref={epiAddCasesToEventDialogRef} />
-      <EpiBulkEditCaseDialog ref={epiBulkEditCaseDialogRef} />
-    </Box>
-  );
-});

package/src/components/epi/EpiDashboard/EpiDashboardDownloadSidebarItem.tsx

@@ -1,154 +0,0 @@
-import {
-  Box,
-  Link,
-  Typography,
-  useTheme,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import DownloadIcon from '@mui/icons-material/Download';
-import {
-  Fragment,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
-
-import type { SidebarItemSharedProps } from '../../ui/Sidebar';
-import { SidebarItem } from '../../ui/Sidebar';
-import type {
-  DownloadConfig,
-  DownloadConfigItem,
-  DownloadConfigSection,
-} from '../../../classes/managers/EpiEventBusManager';
-import { EpiEventBusManager } from '../../../classes/managers/EpiEventBusManager';
-import { ConfigManager } from '../../../classes/managers/ConfigManager';
-
-
-export type EpiDashboardDownloadSidebarItemProps = SidebarItemSharedProps;
-
-export const EpiDashboardDownloadSidebarItemIcon = DownloadIcon;
-
-const EpiDashboardDownloadSidebarItemContent = () => {
-  const theme = useTheme();
-  const { t } = useTranslation();
-  const [downloadConfigs, setDownloadConfigs] = useState<DownloadConfig[]>([]);
-
-  useEffect(() => {
-    EpiEventBusManager.instance.addEventListener('onDownloadOptionsChanged', (payload) => {
-      if (!payload?.zone) {
-        return;
-      }
-      setDownloadConfigs(prevDownloadOptions => {
-        if (payload.items === null) {
-          return prevDownloadOptions.filter(item => item.zone !== payload.zone);
-        }
-        return [
-          ...prevDownloadOptions.filter(item => item.zone !== payload.zone),
-          payload,
-        ].sort((a, b) => {
-          return ConfigManager.instance.config.epi.DOWNLOAD_SECTION_ORDER.indexOf(a.zone) - ConfigManager.instance.config.epi.DOWNLOAD_SECTION_ORDER.indexOf(b.zone);
-        });
-      });
-    });
-    EpiEventBusManager.instance.emit('onDownloadOptionsRequested');
-  }, []);
-
-  const renderDownloadItem = useCallback((item: DownloadConfigItem, forceDisabled?: boolean) => {
-    return (
-      <Box
-        key={item.label}
-        sx={{ marginLeft: 1 }}
-      >
-        {(forceDisabled || item.disabled || !item.callback) ? (
-          <Typography>
-            {item.label}
-          </Typography>
-        ) : (
-          <Link
-            tabIndex={0}
-            component={'button'}
-            // eslint-disable-next-line react/jsx-no-bind
-            onClick={() => item.callback()}
-          >
-            {item.label}
-          </Link>
-        )}
-      </Box>
-    );
-  }, []);
-
-  const renderDownloadSection = useCallback((section: DownloadConfigSection) => {
-    return (
-      <Box key={section.label}>
-        <Typography variant={'h6'}>
-          {section.label}
-        </Typography>
-        {section.items.map(item => renderDownloadItem(item, section.disabled))}
-      </Box>
-    );
-  }, [renderDownloadItem]);
-
-  return (
-    <Box
-      sx={{
-        width: theme.spacing(59),
-      }}
-    >
-      {downloadConfigs.map((config) => (
-        <Box
-          key={config.zone}
-          sx={{
-            padding: theme.spacing(1),
-            borderBottom: `1px solid ${theme.palette.divider}`,
-          }}
-        >
-          <Box>
-            <Typography
-              color={config.disabled ? theme.palette.text.disabled : undefined}
-              variant={'h5'}
-            >
-              {config.zoneLabel}
-            </Typography>
-          </Box>
-          {config.disabled && (
-            <Box sx={{ padding: theme.spacing(1) }}>
-              <Typography>
-                {t`No data available for download.`}
-              </Typography>
-            </Box>
-          )}
-          {!config.disabled && config.items.map((item) => {
-            if ('items' in item && item.disabled) {
-              return null;
-            }
-            return (
-              <Fragment key={item.label}>
-                {'items' in item
-                  ? renderDownloadSection(item)
-                  : renderDownloadItem(item)}
-              </Fragment>
-            );
-          })}
-        </Box>
-      ))}
-    </Box>
-  );
-};
-
-export const EpiDashboardDownloadSidebarItem = ({ open, onClose }: EpiDashboardDownloadSidebarItemProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <SidebarItem
-      closeIcon={<EpiDashboardDownloadSidebarItemIcon />}
-      closeIconTooltipText={t`Close download`}
-      open={open}
-      title={t`Download`}
-      width={60}
-      testIdAttributes={{ name: 'EpiDashboardDownloadSidebarItem' }}
-      onClose={onClose}
-    >
-      {open && <EpiDashboardDownloadSidebarItemContent />}
-    </SidebarItem>
-  );
-};

package/src/components/epi/EpiDashboard/EpiDashboardGeneralSettingsForm.tsx

@@ -1,89 +0,0 @@
-import {
-  Box,
-  Button,
-  FormGroup,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import RestartAltIcon from '@mui/icons-material/RestartAlt';
-import {
-  FormProvider,
-  useForm,
-  useWatch,
-} from 'react-hook-form';
-import {
-  useCallback,
-  useEffect,
-} from 'react';
-import { useStore } from 'zustand';
-import noop from 'lodash/noop';
-import { useShallow } from 'zustand/shallow';
-
-import type { EpiDashboardGeneralSettings } from '../../../stores/userProfileStore';
-import { userProfileStore } from '../../../stores/userProfileStore';
-import { Switch } from '../../form/fields/Switch';
-
-export type EpiDashboardGeneralSettingsFormProps = {
-  readonly onReset: () => void;
-};
-
-export const EpiDashboardGeneralSettingsForm = ({ onReset }: EpiDashboardGeneralSettingsFormProps) => {
-  const { t } = useTranslation();
-
-  const resetEpiDashboardGeneralSettings = useStore(userProfileStore, useShallow((state) => state.resetEpiDashboardGeneralSettings));
-  const epiDashboardGeneralSettings = useStore(userProfileStore, useShallow((state) => state.epiDashboardGeneralSettings));
-  const setEpiDashboardGeneralSettings = useStore(userProfileStore, useShallow((state) => state.setEpiDashboardGeneralSettings));
-
-  const formMethods = useForm<EpiDashboardGeneralSettings>({
-    defaultValues: epiDashboardGeneralSettings,
-    values: epiDashboardGeneralSettings,
-  });
-  const { control } = formMethods;
-
-  const formValues = useWatch({ control });
-
-  const onResetButtonClick = useCallback(() => {
-    resetEpiDashboardGeneralSettings();
-    if (onReset) {
-      onReset();
-    }
-  }, [onReset, resetEpiDashboardGeneralSettings]);
-
-  useEffect(() => {
-    setEpiDashboardGeneralSettings(formValues as EpiDashboardGeneralSettings);
-  }, [formValues, setEpiDashboardGeneralSettings]);
-
-  return (
-    <FormProvider {...formMethods}>
-      <form
-        autoComplete={'off'}
-        onSubmit={noop}
-      >
-        <Box marginY={1}>
-          <FormGroup>
-            <Switch<EpiDashboardGeneralSettings>
-              label={t`Enable highlighting across widgets`}
-              name={'isHighlightingEnabled'}
-            />
-          </FormGroup>
-        </Box>
-      </form>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'flex-end',
-        }}
-      >
-        <Box marginX={1}>
-          <Button
-            color={'primary'}
-            startIcon={<RestartAltIcon />}
-            variant={'outlined'}
-            onClick={onResetButtonClick}
-          >
-            {t`Reset general settings`}
-          </Button>
-        </Box>
-      </Box>
-    </FormProvider>
-  );
-};