@gen-epix/ui 1.14.4 → 1.15.0

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

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

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

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