chore: Clean up unused files, imports, and work on getting end-to-end tests and unit tests running (#2272)

platform/ui/src/components/Button/Button.jsx

@@ -92,6 +92,7 @@ const Button = ({
   fullWidth = defaults.fullWidth,
   startIcon: startIconProp,
   endIcon: endIconProp,
+  name,
   className,
   onClick,
   /** TODO: All possible props should be explicitly defined -- avoid spreading props  */
@@ -135,6 +136,7 @@ const Button = ({
       ref={buttonElement}
       onClick={handleOnClick}
       type={type}
+      data-cy={`${name}-btn`}
       {...rest}
     >
       {startIcon}
@@ -161,6 +163,7 @@ Button.propTypes = {
   fullWidth: PropTypes.bool,
   disabled: PropTypes.bool,
   type: PropTypes.string,
+  name: PropTypes.string,
   startIcon: PropTypes.node,
   endIcon: PropTypes.node,
   className: PropTypes.string,

platform/ui/src/components/DateRange/DateRange.jsx

@@ -46,7 +46,7 @@ const renderYearsOptions = () => {
 };
 
 const DateRange = (props) => {
-  const { onChange, startDate, endDate } = props;
+  const { id, onChange, startDate, endDate } = props;
   const [focusedInput, setFocusedInput] = useState(null);
   const renderYearsOptionsCallback = useCallback(renderYearsOptions, []);
 
@@ -129,9 +129,9 @@ const DateRange = (props) => {
     <DateRangePicker
       /** REQUIRED */
       startDate={parsedStartDate}
-      startDateId={'startDateId'}
+      startDateId={`date-range-${id}-start-date`}
       endDate={parsedEndDate}
-      endDateId={'endDateId'}
+      endDateId={`date-range-${id}-end-date`}
       onDatesChange={({ startDate: newStartDate, endDate: newEndDate }) => {
         onChange({
           startDate: newStartDate ? newStartDate.format('YYYYMMDD') : undefined,
@@ -159,11 +159,13 @@ const DateRange = (props) => {
 };
 
 DateRange.defaultProps = {
+  id: '',
   startDate: null,
   endDate: null,
 };
 
 DateRange.propTypes = {
+  id: PropTypes.string,
   /** YYYYMMDD (19921022) */
   startDate: PropTypes.string,
   /** YYYYMMDD (19921022) */

platform/ui/src/components/Dialog/Footer.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 

platform/ui/src/components/Dropdown/Dropdown.jsx

@@ -4,11 +4,11 @@ import classnames from 'classnames';
 
 import { Icon, Typography } from '../';
 
-const Dropdown = ({ children, showDropdownIcon, list }) => {
+const Dropdown = ({ id, children, showDropdownIcon, list }) => {
   const [open, setOpen] = useState(false);
   const element = useRef(null);
 
-  const DropdownItem = useCallback(({ title, icon, onClick }) => {
+  const DropdownItem = useCallback(({ id, title, icon, onClick }) => {
     return (
       <div
         key={title}
@@ -19,6 +19,7 @@ const Dropdown = ({ children, showDropdownIcon, list }) => {
           setOpen(false);
           onClick();
         }}
+        data-cy={id}
       >
         {!!icon && <Icon name={icon} className="text-white w-4 mr-2" />}
         <Typography>{title}</Typography>
@@ -31,6 +32,7 @@ const Dropdown = ({ children, showDropdownIcon, list }) => {
   };
 
   DropdownItem.propTypes = {
+    id: PropTypes.string,
     title: PropTypes.string.isRequired,
     icon: PropTypes.string,
     onClick: PropTypes.func.isRequired,
@@ -67,9 +69,11 @@ const Dropdown = ({ children, showDropdownIcon, list }) => {
             'scale-100': open,
           }
         )}
+        data-cy={`${id}-dropdown`}
       >
         {list.map((item, idx) => (
           <DropdownItem
+            id={item.id}
             title={item.title}
             icon={item.icon}
             onClick={item.onClick}
@@ -104,6 +108,7 @@ Dropdown.defaultProps = {
 };
 
 Dropdown.propTypes = {
+  id: PropTypes.string,
   children: PropTypes.node.isRequired,
   showDropdownIcon: PropTypes.bool,
   /** Items to render in the select's drop down */

platform/ui/src/components/Header/Header.jsx

@@ -10,6 +10,8 @@ function Header({ children, menuOptions, isReturnEnabled, isSticky }) {
   const { t } = useTranslation();
   const history = useHistory();
 
+  // TODO: this should be passed in as a prop instead and the react-router-dom
+  // dependency should be dropped
   const onReturnHandler = () => {
     if (isReturnEnabled) {
       history.push('/');
@@ -35,8 +37,9 @@ function Header({ children, menuOptions, isReturnEnabled, isSticky }) {
           <span className="mr-3 text-lg text-common-light">
             {t('Header:INVESTIGATIONAL USE ONLY')}
           </span>
-          <Dropdown showDropdownIcon={false} list={menuOptions}>
+          <Dropdown id="options" showDropdownIcon={false} list={menuOptions}>
             <IconButton
+              id={"options-settings-icon"}
               variant="text"
               color="inherit"
               size="initial"
@@ -45,6 +48,7 @@ function Header({ children, menuOptions, isReturnEnabled, isSticky }) {
               <Icon name="settings" />
             </IconButton>
             <IconButton
+              id={"options-chevron-down-icon"}
               variant="text"
               color="inherit"
               size="initial"

platform/ui/src/components/HotkeyField/HotkeyField.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { hotkeys } from '@ohif/core';
-import { Input } from '@ohif/ui';
+//import { hotkeys } from '@ohif/core';
+import Input from '../Input';
 
-import { getKeys, formatKeysForInput } from './utils';
+//import { getKeys, formatKeysForInput } from './utils';
+import { formatKeysForInput } from './utils';
 
 /**
  * HotkeyField
@@ -24,16 +25,16 @@ const HotkeyField = ({ disabled, keys, onChange, className, modifierKeys }) => {
     event.stopPropagation();
     event.preventDefault();
 
-    hotkeys.record(sequence => {
+    /*hotkeys.record(sequence => {
       const keys = getKeys({ sequence, modifierKeys });
       hotkeys.unpause();
       onChange(keys);
-    });
+    });*/
   };
 
   const onFocus = () => {
-    hotkeys.pause();
-    hotkeys.startRecording();
+    /*hotkeys.pause();
+    hotkeys.startRecording();*/
   };
 
   return (

platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.jsx

@@ -19,7 +19,7 @@ const HotkeysPreferences = ({ disabled, hotkeyDefinitions, errors: controlledErr
   const splitedHotkeys = splitHotkeyDefinitionsAndCreateTuples(visibleHotkeys);
 
   if (!Object.keys(hotkeyDefinitions).length) {
-    return 'No hotkeys definitions';
+    return 'No hotkey definitions';
   }
 
   const onHotkeyChangeHandler = (id, definition) => {

platform/ui/src/components/HotkeysPreferences/hotkeysConfig.js

@@ -1,7 +1,3 @@
-const range = (start, end) => {
-  return new Array(end - start).fill().map((d, i) => i + start);
-};
-
 export const MODIFIER_KEYS = ['ctrl', 'alt', 'shift'];
 
 export const DISALLOWED_COMBINATIONS = {

platform/ui/src/components/IconButton/IconButton.jsx

@@ -88,6 +88,8 @@ const IconButton = ({
   fullWidth,
   onClick,
   className,
+  name,
+  id,
   ...rest
 }) => {
   const buttonElement = useRef(null);
@@ -96,7 +98,6 @@ const IconButton = ({
     buttonElement.current.blur();
     onClick(e);
   };
-
   return (
     <button
       className={classnames(
@@ -114,6 +115,7 @@ const IconButton = ({
       ref={buttonElement}
       onClick={handleOnClick}
       type={type}
+      data-cy={id}
       {...rest}
     >
       {React.cloneElement(children, {
@@ -136,7 +138,7 @@ IconButton.defaultProps = {
 
 IconButton.propTypes = {
   children: PropTypes.node.isRequired,
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'initial']),
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'initial', 'toolbar']),
   rounded: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
   variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
   color: PropTypes.oneOf([
@@ -150,6 +152,7 @@ IconButton.propTypes = {
   fullWidth: PropTypes.bool,
   disabled: PropTypes.bool,
   type: PropTypes.string,
+  id: PropTypes.string,
   className: PropTypes.node,
   onClick: PropTypes.func,
 };

platform/ui/src/components/Input/Input.jsx

@@ -12,6 +12,7 @@ const transparentClasses = {
 };
 
 const Input = ({
+  id,
   label,
   containerClassName = '',
   labelClassName = '',
@@ -32,6 +33,7 @@ const Input = ({
     <div className={classnames('flex flex-col flex-1', containerClassName)}>
       <Label className={labelClassName} text={label}></Label>
       <input
+        data-cy={`input-${id}`}
         className={classnames(
           label && 'mt-2',
           className,

platform/ui/src/components/InputDateRange/InputDateRange.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { DateRange, InputLabelWrapper } from '../';
 
 const InputDateRange = ({
+  id,
   label,
   isSortable,
   sortDirection,
@@ -27,6 +28,7 @@ const InputDateRange = ({
     >
       <div className="relative">
         <DateRange
+          id={id}
           startDate={startDate}
           endDate={endDate}
           onChange={onChange}
@@ -44,6 +46,7 @@ InputDateRange.defaultProps = {
 };
 
 InputDateRange.propTypes = {
+  id: PropTypes.string,
   label: PropTypes.string.isRequired,
   isSortable: PropTypes.bool.isRequired,
   sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none'])

platform/ui/src/components/InputGroup/InputGroup.jsx

@@ -15,12 +15,12 @@ const InputGroup = ({
   onValuesChange,
   sorting,
   onSortingChange,
-  isSortingEnable,
+  isSortingEnabled,
 }) => {
   const { sortBy, sortDirection } = sorting;
 
   const handleFilterLabelClick = name => {
-    if (isSortingEnable) {
+    if (isSortingEnabled) {
       let _sortDirection = 'descending';
       if (sortBy === name) {
         if (sortDirection === 'ascending') {
@@ -44,7 +44,7 @@ const InputGroup = ({
     isSortable,
     inputType,
   }) => {
-    const _isSortable = isSortable && isSortingEnable;
+    const _isSortable = isSortable && isSortingEnabled;
     const _sortDirection = sortBy !== name ? 'none' : sortDirection;
 
     const onLabelClick = () => {
@@ -72,6 +72,7 @@ const InputGroup = ({
       case 'Text':
         return (
           <InputText
+            id={name}
             key={name}
             label={displayName}
             isSortable={_isSortable}
@@ -84,6 +85,7 @@ const InputGroup = ({
       case 'MultiSelect':
         return (
           <InputMultiSelect
+            id={name}
             key={name}
             label={displayName}
             isSortable={_isSortable}
@@ -97,6 +99,7 @@ const InputGroup = ({
       case 'DateRange':
         return (
           <InputDateRange
+            id={name}
             key={name}
             label={displayName}
             isSortable={_isSortable}
@@ -166,7 +169,7 @@ InputGroup.propTypes = {
     sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none']),
   }).isRequired,
   onSortingChange: PropTypes.func.isRequired,
-  isSortingEnable: PropTypes.bool.isRequired,
+  isSortingEnabled: PropTypes.bool.isRequired,
 };
 
 export default InputGroup;

platform/ui/src/components/InputMultiSelect/InputMultiSelect.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { Select, InputLabelWrapper } from '../';
 
 const InputMultiSelect = ({
+  id,
   label,
   isSortable,
   sortDirection,
@@ -21,6 +22,7 @@ const InputMultiSelect = ({
       onLabelClick={onLabelClick}
     >
       <Select
+        id={id}
         placeholder={placeholder}
         className="mt-2"
         options={options}
@@ -54,6 +56,7 @@ InputMultiSelect.defaultProps = {
 };
 
 InputMultiSelect.propTypes = {
+  id: PropTypes.string,
   label: PropTypes.string.isRequired,
   isSortable: PropTypes.bool.isRequired,
   sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none'])

platform/ui/src/components/InputText/InputText.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { Input, InputLabelWrapper } from '../';
 
 const InputText = ({
+  id,
   label,
   isSortable,
   sortDirection,
@@ -19,6 +20,7 @@ const InputText = ({
       onLabelClick={onLabelClick}
     >
       <Input
+        id={id}
         className="border-primary-main mt-2 bg-black"
         type="text"
         containerClassName="mr-2"
@@ -39,6 +41,7 @@ InputText.defaultProps = {
 };
 
 InputText.propTypes = {
+  id: PropTypes.string,
   label: PropTypes.string.isRequired,
   isSortable: PropTypes.bool,
   sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none']),

platform/ui/src/components/ListMenu/ListMenu.jsx

@@ -16,7 +16,7 @@ const ListMenu = ({ items = [], renderer, onClick }) => {
     };
 
     return (
-      <div className={classnames(flex, theme, 'cursor-pointer')} onClick={onClickHandler}>
+      <div className={classnames(flex, theme, 'cursor-pointer')} onClick={onClickHandler} data-cy={item.id}>
         {renderer && renderer({ ...item, index, isSelected })}
       </div>
     );

platform/ui/src/components/MeasurementTable/MeasurementItem.js

@@ -37,12 +37,13 @@ const MeasurementItem = ({
       onClick={onClickHandler}
       role="button"
       tabIndex="0"
+      data-cy={"measurement-item"}
     >
       <div
         className={classnames(
           'text-center w-6 py-1 text-base transition duration-300',
           {
-            'bg-primary-light text-black': isActive,
+            'bg-primary-light text-black active': isActive,
             'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
           }
         )}

platform/ui/src/components/MeasurementTable/MeasurementTable.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 
 import MeasurementItem from './MeasurementItem';
 

platform/ui/src/components/Modal/Modal.jsx

@@ -7,7 +7,9 @@ import './Modal.css';
 import { Typography, Icon } from '../../components';
 import { useModal } from '../../contextProviders';
 
-if (typeof document !== 'undefined') ReactModal.setAppElement(document.getElementById('root'));
+if (typeof document !== 'undefined') {
+  ReactModal.setAppElement(document.getElementById('root'));
+}
 
 const Modal = ({
   closeButton,
@@ -35,7 +37,6 @@ const Modal = ({
           </Typography>
           {closeButton && (
             <Icon
-              data-cy="close-button"
               onClick={onClose}
               name="close"
               className="cursor-pointer text-primary-active w-6 h-6"

platform/ui/src/components/Notification/Notification.jsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { Button, Icon } from '../';
 
-const Notification = ({ type, message, actions, onSubmit, onOutsideClick }) => {
+const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick }) => {
   const notificationRef = useRef(null);
 
   useEffect(() => {
@@ -57,6 +57,7 @@ const Notification = ({ type, message, actions, onSubmit, onOutsideClick }) => {
     <div
       ref={notificationRef}
       className="flex flex-col p-2 mx-2 mt-2 rounded bg-common-bright"
+      data-cy={id}
     >
       <div className="flex flex-grow">
         <Icon name={icon} className={classnames('w-5', color)} />
@@ -69,6 +70,7 @@ const Notification = ({ type, message, actions, onSubmit, onOutsideClick }) => {
 
           return (
             <Button
+              data-cy={action.id}
               key={index}
               className={classnames({ 'ml-2': !isFirst })}
               color={isPrimary ? 'primary' : undefined}

platform/ui/src/components/Select/Select.jsx

@@ -33,6 +33,7 @@ const Option = props => {
 };
 
 const Select = ({
+  id,
   className,
   closeMenuOnSelect,
   hideSelectedOptions,
@@ -64,6 +65,7 @@ const Select = ({
 
   return (
     <ReactSelect
+      inputId={`input-${id}`}
       className={classnames(
         className,
         'flex flex-col flex-1 customSelect__wrapper'

platform/ui/src/components/SidePanel/SidePanel.jsx

@@ -93,6 +93,7 @@ const SidePanel = ({
             minWidth: `${collapsedWidth}px`,
             width: `${collapsedWidth}px`,
           }}
+          name={childComponent.name}
           className="flex flex-col text-xs px-1 py-1 text-white border-transparent border-b"
         >
           <Icon
@@ -126,6 +127,7 @@ const SidePanel = ({
               onClick={() => {
                 setComponentOpen(null);
               }}
+              name={childComponent.name}
               className="flex flex-row items-center px-3 h-12 relative w-full"
             >
               <Icon

platform/ui/src/components/SplitButton/SplitButton.jsx

@@ -31,7 +31,7 @@ const classes = {
     classNames(
       baseClasses.Primary,
       primary.isActive && !isExpanded
-        ? 'bg-primary-light rounded-tr-md rounded-br-md'
+        ? 'bg-primary-light rounded-tr-md rounded-br-md active'
         : isExpanded
         ? 'bg-primary-dark'
         : 'bg-secondary-dark hover:bg-primary-dark'
@@ -83,7 +83,7 @@ const SplitButton = ({
   renderer,
   onInteraction,
 }) => {
-  const { primaryToolId, toggles, groups } = bState;
+  const { primaryToolId, toggles } = bState;
   /* Bubbles up individual item clicks */
   const getSplitButtonItems = items =>
     items.map((item, index) => ({
@@ -165,6 +165,8 @@ const SplitButton = ({
                 ...state,
                 primary: { isActive: isPrimaryActive },
               })}
+              data-tool={state.primary.id}
+              data-cy={`${groupId}-split-button-primary`}
             >
               <Tooltip
                 isDisabled={!state.primary.tooltip}
@@ -196,6 +198,7 @@ const SplitButton = ({
                 primary: { isActive: isPrimaryActive },
               })}
               onClick={onSecondaryClickHandler}
+              data-cy={`${groupId}-split-button-secondary`}
             >
               <Tooltip
                 isDisabled={state.isExpanded || !secondary.tooltip}
@@ -214,7 +217,10 @@ const SplitButton = ({
           </div>
         </div>
         {/* EXPANDED LIST OF OPTIONS */}
-        <div className={classes.Content({ ...state })}>
+        <div
+          className={classes.Content({ ...state })}
+          data-cy={`${groupId}-list-menu`}
+        >
           <ListMenu items={state.items} renderer={renderer} />
         </div>
       </div>

platform/ui/src/components/StudyBrowser/StudyBrowser.jsx

@@ -54,6 +54,7 @@ const StudyBrowser = ({
               onClick={() => {
                 onClickStudy(studyInstanceUid);
               }}
+              data-cy="thumbnail-list"
             />
             {isExpanded && displaySets && (
               <ThumbnailList
@@ -72,7 +73,7 @@ const StudyBrowser = ({
 
   return (
     <React.Fragment>
-      <div className="flex flex-row items-center justify-center h-16 p-4 border-b w-100 border-secondary-light bg-primary-dark">
+      <div className="flex flex-row items-center justify-center h-16 p-4 border-b w-100 border-secondary-light bg-primary-dark" data-cy={"studyBrowser-panel"}>
         <ButtonGroup
           variant="outlined"
           color="inherit"

platform/ui/src/components/StudyListFilter/StudyListFilter.jsx

@@ -19,7 +19,7 @@ const StudyListFilter = ({
       ...sortingValues,
     });
   };
-  const isSortingEnable = numOfStudies > 0 && numOfStudies <= 100;
+  const isSortingEnabled = numOfStudies > 0 && numOfStudies <= 100;
 
   return (
     <React.Fragment>
@@ -45,7 +45,7 @@ const StudyListFilter = ({
                     Clear filters
                   </Button>
                 )}
-                <Typography variant="h4" className="mr-2">
+                <Typography variant="h4" className="mr-2" data-cy={"num-studies"}>
                   {numOfStudies > 100 ? '>100' : numOfStudies}
                 </Typography>
                 <Typography
@@ -70,7 +70,7 @@ const StudyListFilter = ({
             onValuesChange={onChange}
             sorting={filterSorting}
             onSortingChange={setFilterSorting}
-            isSortingEnable={isSortingEnable}
+            isSortingEnabled={isSortingEnabled}
           />
         </div>
         {numOfStudies > 100 && (

platform/ui/src/components/StudyListPagination/StudyListPagination.js

@@ -18,7 +18,7 @@ const StudyListPagination = ({
     { value: '50', label: '50' },
     { value: '100', label: '100' },
   ];
-  const [selectedRange, setSelectedRange] = useState(ranges.find(r => r.value == perPage));
+  const [selectedRange, setSelectedRange] = useState(ranges.find(r => r.value === perPage));
   const onSelectedRange = (selectedRange) => {
     setSelectedRange(selectedRange);
     onChangePerPage(selectedRange.value);
@@ -30,6 +30,7 @@ const StudyListPagination = ({
         <div className="flex justify-between">
           <div className="flex items-center">
             <Select
+              id={"rows-per-page"}
               className="relative mr-3 w-16 border-primary-main"
               options={ranges}
               value={selectedRange}

platform/ui/src/components/StudyListTable/StudyListTable.js

@@ -8,7 +8,7 @@ const StudyListTable = ({ tableDataSource }) => {
     <div className="bg-black">
       <div className="container m-auto relative">
         <table className="w-full text-white">
-          <tbody>
+          <tbody data-cy="study-list-results">
             {tableDataSource.map((tableData, i) => {
               return <StudyListTableRow tableData={tableData} key={i} />;
             })}

platform/ui/src/components/StudyListTable/StudyListTableRow.js

@@ -35,7 +35,7 @@ const StudyListTableRow = props => {
                   onClick={onClickRow}
                 >
                   {row.map((cell, index) => {
-                    const { content, title, gridCol, name } = cell;
+                    const { content, title, gridCol } = cell;
 
                     return (
                       <td

platform/ui/src/components/Thumbnail/Thumbnail.jsx

@@ -37,6 +37,7 @@ const Thumbnail = ({
         'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none select-none group'
       )}
       id={`thumbnail-${displaySetInstanceUID}`}
+      data-cy={`study-browser-thumbnail`}
       onClick={onClick}
       onDoubleClick={onDoubleClick}
       role="button"

platform/ui/src/components/ToolbarButton/ToolbarButton.jsx

@@ -18,7 +18,7 @@ const ToolbarButton = ({
   bState = {},
   //
 }) => {
-  const { primaryToolId, toggles, groups } = bState;
+  const { primaryToolId } = bState;
   const isActive = _isActive || (type === 'tool' && id === primaryToolId);
   const classes = {
     type: {
@@ -30,6 +30,8 @@ const ToolbarButton = ({
         : 'text-white hover:bg-secondary-dark hover:text-white focus:bg-secondary-dark focus:text-white',
     },
   };
+
+  const activeClass = isActive ? 'active' : '';
   const shouldShowDropdown = !!isActive && !!dropdownContent;
 
   return (
@@ -42,7 +44,7 @@ const ToolbarButton = ({
         <IconButton
           variant={isActive ? 'contained' : 'text'}
           size="toolbar"
-          className={classnames('mx-1', classes.type[type])}
+          className={classnames('mx-1', activeClass, classes.type[type])}
           onClick={() => {
             onInteraction({
               itemId: id,
@@ -51,7 +53,9 @@ const ToolbarButton = ({
               commandOptions: commandOptions,
             });
           }}
+          name={label}
           key={id}
+          id={id}
         >
           <Icon name={icon} />
         </IconButton>

platform/ui/src/components/UserPreferences/UserPreferences.jsx

@@ -1,21 +1,18 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Select, Typography, Button, HotkeysPreferences } from '@ohif/ui';
-import i18n from '@ohif/i18n';
 import { useTranslation } from 'react-i18next';
-const { availableLanguages, defaultLanguage, currentLanguage } = i18n;
 
-const UserPreferences = ({ disabled, hotkeyDefinitions, hotkeyDefaults, onCancel, onSubmit, onReset }) => {
+const UserPreferences = ({ availableLanguages, defaultLanguage, currentLanguage, disabled, hotkeyDefinitions, hotkeyDefaults, onCancel, onSubmit, onReset }) => {
   const { t } = useTranslation('UserPreferencesModal');
   const [state, setState] = useState({
     isDisabled: disabled,
     hotkeyErrors: {},
     hotkeyDefinitions,
-    language: currentLanguage()
+    language: currentLanguage
   });
 
   const onSubmitHandler = () => {
-    i18n.changeLanguage(state.language.value);
     onSubmit(state);
   };
 

platform/ui/src/components/Viewport/Viewport.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ViewportActionBar, Notification, Button } from '../';
+import { ViewportActionBar, Notification } from '../';
 
 const Viewport = ({ viewportIndex, onSeriesChange, studyData, children }) => {
   return (

platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx

@@ -170,7 +170,12 @@ const ViewportActionBar = ({
           }}
           onClick={() => {
             if (state === 3) {
-              onPillClick?.();
+              // TODO: Gatsby build failing due
+              //       to ESLint's "no-unused-expressions"
+              //onPillClick?.();
+              if (onPillClick) {
+                onPillClick();
+              }
             }
           }}
         >

platform/ui/src/components/ViewportActionBar/ViewportActionBar.mdx

@@ -19,6 +19,7 @@ import { ViewportActionBar } from '@ohif/ui';
 
 ## Basic usage
 
+<>
 <Playground>
   <div className="p-4 h-64">
     <ViewportActionBar
@@ -127,6 +128,7 @@ import { ViewportActionBar } from '@ohif/ui';
     />
   </div>
 </Playground>
+</>
 
 ## Properties
 

platform/ui/src/contextProviders/DialogProvider.jsx

@@ -245,7 +245,7 @@ const DialogProvider = ({ children, service }) => {
 
       if (typeof onClickOutside === 'function') {
         result = (
-          <OutsideAlerter onClickOutside={onClickOutside}>
+          <OutsideAlerter key={id} onClickOutside={onClickOutside}>
             {result}
           </OutsideAlerter>
         );

platform/ui/src/gatsby-theme-docz/wrapper.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import './tailwind.css';