(feat) Tweak Test results dashboard sticky header UI

packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.scss

@@ -15,7 +15,9 @@
 }
 
 // See https://zpl.io/lrlmdq0 for the Visits dashboard design
-[data-extension-slot-name='patient-chart-encounters-dashboard-slot'] {
+[data-extension-slot-name='patient-chart-encounters-dashboard-slot'],
+// See https://zpl.io/RmMXrDE for the Test Results dashboard design
+[data-extension-slot-name='patient-chart-test-results-dashboard-slot'] {
   margin: 0 layout.$spacing-05;
 }
 

packages/esm-patient-chart-app/translations/en.json

@@ -106,6 +106,7 @@
   "noObservationsFound": "No observations found",
   "notes": "Notes",
   "notes__lower": "notes",
+  "noVisitTypesToDisplay": "No visit types to display",
   "optional": "optional",
   "orderDurationAndUnit": "for {{duration}} {{durationUnit}}",
   "orderIndefiniteDuration": "Indefinite duration",

packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.extension.tsx

@@ -1,20 +1,20 @@
-import React, { useCallback, useContext, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { type TFunction, useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { ContentSwitcher, Switch, Button } from '@carbon/react';
 import { EmptyState, ErrorState } from '@openmrs/esm-patient-common-lib';
 import { navigate, useConfig, useLayoutType } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../../config-schema';
+import { type viewOpts } from '../../types';
 import { FilterContext, FilterProvider } from '../filter';
 import { useGetManyObstreeData } from '../grouped-timeline';
 import { testResultsBasePath } from '../helpers';
 import PanelView from '../panel-view/panel-view.component';
 import TabletOverlay from '../tablet-overlay';
 import TreeViewWrapper from '../tree-view/tree-view-wrapper.component';
 import Trendline from '../trendline/trendline.component';
-import type { ConfigObject } from '../../config-schema';
 import styles from './results-viewer.scss';
-import { type viewOpts } from '../../types';
 
 type panelOpts = 'tree' | 'panel';
 
@@ -65,6 +65,34 @@ const ResultsViewer: React.FC<ResultsViewerProps> = ({ patientUuid, basePath, lo
   const isExpanded = view === 'full';
   const trendlineView = testUuid && type === 'trendline';
   const responsiveSize = isTablet ? 'lg' : 'md';
+  const [isHeaderVisible, setIsHeaderVisible] = useState(true);
+  const headerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observerCallback: IntersectionObserverCallback = (entries) => {
+      const [entry] = entries;
+      setIsHeaderVisible(entry.isIntersecting);
+    };
+
+    const observerOptions: IntersectionObserverInit = {
+      threshold: 1,
+      rootMargin: '-1px 0px 0px 0px',
+    };
+
+    const observer = new IntersectionObserver(observerCallback, observerOptions);
+
+    const currentHeader = headerRef.current;
+    if (currentHeader) {
+      observer.observe(currentHeader);
+    }
+
+    return () => {
+      if (currentHeader) {
+        observer.unobserve(currentHeader);
+      }
+      observer.disconnect();
+    };
+  }, []);
 
   const navigateBackFromTrendlineView = useCallback(() => {
     navigate({
@@ -75,7 +103,8 @@ const ResultsViewer: React.FC<ResultsViewerProps> = ({ patientUuid, basePath, lo
   if (isTablet) {
     return (
       <div className={styles.resultsContainer}>
-        <div className={styles.resultsHeader}>
+        <div ref={headerRef} className={styles.headerSentinel} />
+        <div className={classNames(styles.resultsHeader, { [styles.resultsHeaderScrolled]: !isHeaderVisible })}>
           <h4 style={{ flexGrow: 1 }}>{`${t('results', 'Results')} ${
             totalResultsCount ? `(${totalResultsCount})` : ''
           }`}</h4>
@@ -123,14 +152,15 @@ const ResultsViewer: React.FC<ResultsViewerProps> = ({ patientUuid, basePath, lo
 
   return (
     <div className={styles.resultsContainer}>
-      <div className={styles.resultsHeader}>
+      <div ref={headerRef} className={styles.headerSentinel} />
+      <div className={classNames(styles.resultsHeader, { [styles.resultsHeaderScrolled]: !isHeaderVisible })}>
         <div className={classNames(styles.leftSection, styles.leftHeaderSection)}>
           <h4>{t('tests', 'Tests')}</h4>
           <Button
             className={styles.button}
             kind="ghost"
             size={isTablet ? 'md' : 'sm'}
-            onClick={resetTree} //TO-DO (undo selections fix)
+            onClick={resetTree} // TODO: Undo selections fix
           >
             <span>{t('reset', 'Reset')}</span>
           </Button>

packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.scss

@@ -1,5 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
+@use '@carbon/colors';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 :global(.omrs-breakpoint-gt-small-desktop .-esm-patient-chart__patient-chart__widthContained___Ow0JH) {
@@ -46,6 +47,23 @@
   position: sticky;
   top: layout.$spacing-09;
   display: flex;
+  transition: border-bottom 0.2s ease-in-out;
+}
+
+.resultsHeaderScrolled {
+  border-bottom: 1px solid colors.$gray-20;
+  width: 100%;
+  left: 0;
+  right: 0;
+}
+
+.headerSentinel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  visibility: hidden;
 }
 
 .leftHeaderSection {