Merge branch 'main' into fix/O3-4329

openmrs · Jan 15, 2025 · 37475a0 · 37475a0
2 parents 8f40195 + e60cbf9
commit 37475a0
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 42 deletions.
diff --git a/packages/esm-patient-tests-app/src/test-results/results-viewer/results-viewer.extension.tsx b/packages/esm-patient-tests-app/src/test-results/results-viewer/results-viewer.extension.tsx
@@ -4,7 +4,7 @@ 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 { navigate, RenewIcon, useConfig, useLayoutType } from '@openmrs/esm-framework';
 import { type ConfigObject } from '../../config-schema';
 import { type viewOpts } from '../../types';
 import { FilterContext, FilterProvider } from '../filter';
@@ -109,7 +109,8 @@ const ResultsViewer: React.FC<ResultsViewerProps> = ({ patientUuid, basePath, lo
             totalResultsCount ? `(${totalResultsCount})` : ''
           }`}</h4>
           <div className={styles.leftHeaderActions}>
-            <p>{t('view', 'View')}: </p>
+            <RefreshDataButton isTablet={isTablet} t={t} />
+            <span className={styles.contentSwitcherLabel}>{t('view', 'View')}: </span>
             <ContentSwitcher
               selectedIndex={['panel', 'tree'].indexOf(selectedSection)}
               onChange={({ name }: { name: panelOpts }) => setSelectedSection(name)}
@@ -152,15 +153,15 @@ const ResultsViewer: React.FC<ResultsViewerProps> = ({ patientUuid, basePath, lo
 
   return (
     <div className={styles.resultsContainer}>
-      <div ref={headerRef} className={styles.headerSentinel} />
+      <div className={styles.headerSentinel} ref={headerRef} />
       <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} // TODO: Undo selections fix
+            size={isTablet ? 'md' : 'sm'}
           >
             <span>{t('reset', 'Reset')}</span>
           </Button>
@@ -170,16 +171,19 @@ const ResultsViewer: React.FC<ResultsViewerProps> = ({ patientUuid, basePath, lo
             <h4 className={styles.viewOptionsText}>{`${t('results', 'Results')} ${
               totalResultsCount ? `(${totalResultsCount})` : ''
             }`}</h4>
-            <p className={styles.viewOptionsSubHeading}>{t('view', 'View')}: </p>
-            <ContentSwitcher
-              className={styles.viewOptionsSwitcher}
-              onChange={({ name }: { name: viewOpts }) => setView(name)}
-              selectedIndex={isExpanded ? 1 : 0}
-              size={responsiveSize}
-            >
-              <Switch name="individual-test" text={t('individualTests', 'Individual tests')} disabled={loading} />
-              <Switch name="over-time" text={t('overTime', 'Over time')} disabled={loading} />
-            </ContentSwitcher>
+            <div className={styles.buttonsContainer}>
+              <RefreshDataButton isTablet={isTablet} t={t} />
+              <span className={styles.contentSwitcherLabel}>{t('view', 'View')}: </span>
+              <ContentSwitcher
+                className={styles.viewOptionsSwitcher}
+                onChange={({ name }: { name: viewOpts }) => setView(name)}
+                selectedIndex={isExpanded ? 1 : 0}
+                size={responsiveSize}
+              >
+                <Switch name="individual-test" text={t('individualTests', 'Individual tests')} disabled={loading} />
+                <Switch name="over-time" text={t('overTime', 'Over time')} disabled={loading} />
+              </ContentSwitcher>
+            </div>
           </div>
         </div>
       </div>
@@ -197,4 +201,18 @@ const ResultsViewer: React.FC<ResultsViewerProps> = ({ patientUuid, basePath, lo
   );
 };
 
+function RefreshDataButton({ isTablet, t }: RefreshDataButtonProps) {
+  return (
+    <Button
+      className={styles.button}
+      kind="ghost"
+      onClick={() => window.location.reload()}
+      renderIcon={RenewIcon}
+      size={isTablet ? 'md' : 'sm'}
+    >
+      <span>{t('refreshData', 'Refresh data')}</span>
+    </Button>
+  );
+}
+
 export default RoutedResultsViewer;
diff --git a/packages/esm-patient-tests-app/src/test-results/results-viewer/results-viewer.scss b/packages/esm-patient-tests-app/src/test-results/results-viewer/results-viewer.scss
@@ -1,24 +1,16 @@
+@use '@carbon/colors';
 @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) {
-  max-width: 150rem;
-}
-
 @media (min-width: 1200px) {
   :global(.-esm-patient-chart__patient-chart__widthContained___Ow0JH) {
     max-width: 150rem;
   }
 }
 
-:global(.cds--data-table td, .cds--data-table th) {
-  vertical-align: top;
-}
-
-:global(.cds--data-table--md td) {
-  padding-top: 0.1rem;
+:global(.omrs-breakpoint-gt-small-desktop .-esm-patient-chart__patient-chart__widthContained___Ow0JH) {
+  max-width: 150rem;
 }
 
 .resultsContainer {
@@ -27,6 +19,14 @@
   position: relative;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   background-color: $ui-01;
+
+  :global(.cds--data-table td, .cds--data-table th) {
+    vertical-align: top;
+  }
+
+  :global(.cds--data-table--md td) {
+    padding-top: 0.1rem;
+  }
 }
 
 .flex {
@@ -83,9 +83,9 @@
   justify-self: start;
 }
 
-.viewOptionsSubHeading {
+.contentSwitcherLabel {
   white-space: nowrap;
-  align-self: center;
+  @include type.type-style('body-01');
 }
 
 .viewOptionsSwitcher {
@@ -184,21 +184,6 @@
   margin-bottom: layout.$spacing-07;
 }
 
-.button {
-  align-items: center;
-  margin-left: layout.$spacing-05;
-
-  svg {
-    order: 1;
-    margin-right: layout.$spacing-03;
-    margin-left: 0 !important;
-  }
-
-  span {
-    order: 2;
-  }
-}
-
 .border {
   border: 1px solid $ui-03;
   border-bottom: none;
@@ -209,3 +194,18 @@
     margin-top: layout.$spacing-05;
   }
 }
+
+.buttonsContainer {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+}
+
+.button {
+  align-items: center;
+  margin-right: layout.$spacing-03;
+
+  svg {
+    fill: colors.$blue-60 !important;
+  }
+}
diff --git a/packages/esm-patient-tests-app/translations/en.json b/packages/esm-patient-tests-app/translations/en.json
@@ -60,6 +60,7 @@
   "recentTestResults": "recent test results",
   "referenceNumber": "Reference number",
   "referenceRange": "Reference range",
+  "refreshData": "Refresh data",
   "removeFromBasket": "Remove from basket",
   "reset": "Reset",
   "resetTreeText": "Reset tree",