(feat) O3-4166 - add option to hide links in vitals header (#2090)

* (feat) O3-4166 - add option to hide links in vitals header * add tests
openmrs · Nov 6, 2024 · 1a707e5 · 1a707e5
1 parent 7122212
commit 1a707e5
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 23 deletions.
diff --git a/packages/esm-patient-vitals-app/src/vitals-and-biometrics-header/vitals-header.component.tsx b/packages/esm-patient-vitals-app/src/vitals-and-biometrics-header/vitals-header.component.tsx
@@ -24,9 +24,14 @@ import styles from './vitals-header.scss';
 
 interface VitalsHeaderProps {
   patientUuid: string;
+
+  /**
+   * This is useful for extensions slots using the Vitals Header
+   */
+  hideLinks?: boolean;
 }
 
-const VitalsHeader: React.FC<VitalsHeaderProps> = ({ patientUuid }) => {
+const VitalsHeader: React.FC<VitalsHeaderProps> = ({ patientUuid, hideLinks = false }) => {
   const { t } = useTranslation();
   const config = useConfig<ConfigObject>();
   const { data: conceptUnits, conceptMetadata } = useVitalsConceptMetadata();
@@ -102,30 +107,34 @@ const VitalsHeader: React.FC<VitalsHeaderProps> = ({ patientUuid }) => {
                 <span className={styles.overdueIndicator}>{overdueVitalsTagContent}</span>
               </Tag>
             ) : null}
-            <ConfigurableLink
-              className={styles.link}
-              to={`\${openmrsSpaBase}/patient/${patientUuid}/chart/Vitals & Biometrics`}
-            >
-              {t('vitalsHistory', 'Vitals history')}
-            </ConfigurableLink>
+            {!hideLinks && (
+              <ConfigurableLink
+                className={styles.link}
+                to={`\${openmrsSpaBase}/patient/${patientUuid}/chart/Vitals & Biometrics`}
+              >
+                {t('vitalsHistory', 'Vitals history')}
+              </ConfigurableLink>
+            )}
           </div>
           {isValidating ? (
             <div className={styles.backgroundDataFetchingIndicator}>
               <span>{isValidating ? <InlineLoading /> : null}</span>
             </div>
           ) : null}
-          <div className={styles.buttonContainer}>
-            <Button
-              className={styles.recordVitalsButton}
-              data-openmrs-role="Record Vitals"
-              kind="ghost"
-              onClick={launchVitalsAndBiometricsForm}
-              size="sm"
-            >
-              {t('recordVitals', 'Record vitals')}
-              <ArrowRight size={16} className={styles.recordVitalsIconButton} />
-            </Button>
-          </div>
+          {!hideLinks && (
+            <div className={styles.buttonContainer}>
+              <Button
+                className={styles.recordVitalsButton}
+                data-openmrs-role="Record Vitals"
+                kind="ghost"
+                onClick={launchVitalsAndBiometricsForm}
+                size="sm"
+              >
+                {t('recordVitals', 'Record vitals')}
+                <ArrowRight size={16} className={styles.recordVitalsIconButton} />
+              </Button>
+            </div>
+          )}
         </div>
         <div
           className={classNames(styles.rowContainer, {
@@ -210,10 +219,12 @@ const VitalsHeader: React.FC<VitalsHeaderProps> = ({ patientUuid }) => {
         <span className={styles.bodyText}>{t('noDataRecorded', 'No data has been recorded for this patient')}</span>
       </div>
 
-      <Button className={styles.recordVitalsButton} kind="ghost" onClick={launchVitalsAndBiometricsForm} size="sm">
-        {t('recordVitals', 'Record vitals')}
-        <ArrowRight size={16} className={styles.recordVitalsIconButton} />
-      </Button>
+      {!hideLinks && (
+        <Button className={styles.recordVitalsButton} kind="ghost" onClick={launchVitalsAndBiometricsForm} size="sm">
+          {t('recordVitals', 'Record vitals')}
+          <ArrowRight size={16} className={styles.recordVitalsIconButton} />
+        </Button>
+      )}
     </div>
   );
 };

diff --git a/packages/esm-patient-vitals-app/src/vitals-and-biometrics-header/vitals-header.test.tsx b/packages/esm-patient-vitals-app/src/vitals-and-biometrics-header/vitals-header.test.tsx
@@ -190,4 +190,47 @@ describe('VitalsHeader', () => {
       workspaceTitle: 'Triage',
     });
   });
+
+  it('should show links in vitals header by default', async () => {
+    const fiveDaysAgo = dayjs().subtract(5, 'days').toISOString();
+    const vitalsData = [
+      {
+        ...formattedVitals[0],
+        date: fiveDaysAgo,
+      },
+    ];
+
+    mockUseVitalsAndBiometrics.mockReturnValue({
+      data: vitalsData,
+    } as ReturnType<typeof useVitalsAndBiometrics>);
+    renderWithSwr(<VitalsHeader {...testProps} />);
+
+    await waitForLoadingToFinish();
+
+    expect(screen.getByRole('link', { name: /vitals history/i })).toBeInTheDocument();
+
+    // TODO: I don't know why this doesn't work:
+    // screen.getByRole('button', {name: /record vitals/i})
+    expect(screen.getByText(/record vitals/i)).toBeInTheDocument();
+  });
+
+  it('should show not links in vitals header when hideLinks is true', async () => {
+    const fiveDaysAgo = dayjs().subtract(5, 'days').toISOString();
+    const vitalsData = [
+      {
+        ...formattedVitals[0],
+        date: fiveDaysAgo,
+      },
+    ];
+
+    mockUseVitalsAndBiometrics.mockReturnValue({
+      data: vitalsData,
+    } as ReturnType<typeof useVitalsAndBiometrics>);
+    renderWithSwr(<VitalsHeader {...{ ...testProps, hideLinks: true }} />);
+
+    await waitForLoadingToFinish();
+
+    expect(screen.queryByRole('link', { name: /vitals history/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /record vitals/i })).not.toBeInTheDocument();
+  });
 });