fix(general): enhancements and bug fixes (#4018)

platform/app/src/routes/WorkList/WorkList.tsx

@@ -534,7 +534,7 @@ function WorkList({
         showPatientInfo={PatientInfoVisibility.DISABLED}
       />
       <InvestigationalUseDialog dialogConfiguration={appConfig?.investigationalUseDialog} />
-      <div className="ohif-scrollbar flex grow flex-col overflow-y-auto">
+      <div className="ohif-scrollbar ohif-scrollbar-stable-gutter flex grow flex-col overflow-y-auto">
         <StudyListFilter
           numOfStudies={pageNumber * resultsPerPage > 100 ? 101 : numOfStudies}
           filtersMeta={filtersMeta}

platform/core/src/services/UIViewportDialogService/index.js

@@ -26,7 +26,7 @@ const serviceImplementation = {
  *
  * @param {ViewportDialogProps} props { content, contentProps, viewportId }
  */
-function _show({ viewportId, id, type, message, actions, onSubmit, onOutsideClick }) {
+function _show({ viewportId, id, type, message, actions, onSubmit, onOutsideClick, onKeyPress }) {
   return serviceImplementation._show({
     viewportId,
     id,
@@ -35,6 +35,7 @@ function _show({ viewportId, id, type, message, actions, onSubmit, onOutsideClic
     actions,
     onSubmit,
     onOutsideClick,
+    onKeyPress,
   });
 }
 

platform/ui/src/assets/styles/styles.css

@@ -4,6 +4,10 @@
   overflow-y: auto;
 }
 
+.ohif-scrollbar-stable-gutter {
+  scrollbar-gutter: stable;
+}
+
 .study-min-height {
   min-height: 450px;
 }

platform/ui/src/components/Notification/Notification.tsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import Button, { ButtonEnums } from '../Button';
 import Icon from '../Icon';
 
-const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick }) => {
+const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick, onKeyPress }) => {
   const notificationRef = useRef(null);
 
   useEffect(() => {
@@ -29,6 +29,10 @@ const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick })
     };
   }, [onOutsideClick]);
 
+  useEffect(() => {
+    notificationRef.current.focus();
+  }, []);
+
   const iconsByType = {
     error: {
       icon: 'info',
@@ -64,6 +68,8 @@ const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick })
       ref={notificationRef}
       className="border-customblue-10 bg-customblue-400 mx-2 mt-2 flex flex-col rounded-md border-2 p-2"
       data-cy={id}
+      onKeyDown={onKeyPress}
+      tabIndex={0}
     >
       <div className="flex grow items-center">
         <Icon
@@ -112,6 +118,7 @@ Notification.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   /** Can be used as a callback to dismiss the notification for clicks that occur outside of it */
   onOutsideClick: PropTypes.func,
+  onKeyPress: PropTypes.func,
 };
 
 export default Notification;

platform/ui/src/contextProviders/ViewportDialogProvider.tsx

@@ -17,6 +17,9 @@ const DEFAULT_STATE = {
   onDismiss: () => {
     console.log('dismiss? -1');
   },
+  onKeyPress: () => {
+    console.log('key pressed?');
+  },
 };
 
 const ViewportDialogContext = createContext(null);