@openmrs/esm-patient-flags-app 11.3.1-pre.9537 → 11.3.1-pre.9541

package/src/flags/flags-workspace/flags-workspace.scss

@@ -0,0 +1,167 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.listWrapper {
+  margin: layout.$spacing-05;
+}
+
+.flagTile {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border: 1px solid #ededed;
+  background-color: colors.$gray-10;
+  padding: layout.$spacing-03;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .flagTile {
+    margin-bottom: layout.$spacing-03;
+  }
+}
+
+:global(.omrs-breakpoint-gt-tablet) {
+  .flagTile {
+    margin-bottom: layout.$spacing-02;
+  }
+}
+
+.flagHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: layout.$spacing-03;
+  font-size: 0.875rem;
+}
+
+.titleAndType {
+  display: flex;
+  align-items: baseline;
+}
+
+.flagTitle {
+  @include type.type-style('body-01');
+  color: colors.$gray-100;
+  margin-right: layout.$spacing-02;
+}
+
+.type {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  margin-left: layout.$spacing-02;
+}
+
+.secondRow {
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+}
+
+.metadata {
+  display: flex;
+  flex-direction: column;
+}
+
+.label {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-02;
+}
+
+.value {
+  @include type.type-style('body-01');
+}
+
+.flagToggle {
+  :global(.cds--toggle__switch--checked) {
+    background-color: colors.$green-50;
+  }
+}
+
+.flagsHeaderInfo {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.resultsCount {
+  @include type.type-style('label-01');
+}
+
+.formWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  background-color: colors.$white;
+}
+
+.button {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.tabletButtonSet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: colors.$white;
+}
+
+.desktopButtonSet {
+  padding: 0;
+}
+
+.emptyText {
+  color: colors.$gray-70;
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+.sortDropdown {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-100;
+  gap: 0;
+
+  :global(.cds--dropdown--inline .cds--list-box__menu) {
+    min-width: layout.$spacing-13;
+    max-width: 12rem;
+    left: -4.375rem;
+  }
+}
+
+.emptyState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: layout.$spacing-05;
+  text-align: center;
+}
+
+.tile {
+  margin: auto;
+  width: 18.75rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.content {
+  max-width: layout.$spacing-13;
+  @include type.type-style('heading-compact-02');
+  margin-bottom: layout.$spacing-05;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+}
+
+.loader {
+  display: flex;
+  justify-content: center;
+  background-color: colors.$gray-10;
+  min-height: layout.$spacing-09;
+}

package/src/flags/flags-workspace/flags-workspace.test.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { mockPatient } from 'tools';
+import { mockPatientFlags } from '__mocks__';
+import { usePatientFlags } from '../hooks/usePatientFlags';
+import FlagsWorkspace from './flags.workspace';
+
+const mockUsePatientFlags = usePatientFlags as jest.Mock;
+
+jest.mock('../hooks/usePatientFlags', () => {
+  const originalModule = jest.requireActual('../hooks/usePatientFlags');
+
+  return {
+    ...originalModule,
+    usePatientFlags: jest.fn(),
+  };
+});
+
+it('renders an Edit form that enables users to toggle flags on or off', async () => {
+  mockUsePatientFlags.mockReturnValue({
+    flags: mockPatientFlags,
+    isLoading: false,
+    error: null,
+    isValidating: false,
+    mutate: jest.fn(),
+  });
+
+  render(
+    <FlagsWorkspace
+      closeWorkspace={jest.fn()}
+      groupProps={{
+        patientUuid: mockPatient.id,
+        patient: mockPatient,
+        visitContext: null,
+        mutateVisitContext: null,
+      }}
+      workspaceProps={{}}
+      windowProps={{}}
+      workspaceName=""
+      launchChildWorkspace={null}
+      windowName={''}
+      isRootWorkspace={false}
+    />,
+  );
+
+  const searchbox = screen.getByRole('searchbox', { name: /search for a flag/i });
+  const clearSearchInputButton = screen.getByRole('button', { name: /clear search input/i });
+  const discardButton = screen.getByRole('button', { name: /discard/i });
+  const saveButton = screen.getByRole('button', { name: /save & close/i });
+
+  expect(searchbox).toBeInTheDocument();
+  expect(clearSearchInputButton).toBeInTheDocument();
+  expect(discardButton).toBeInTheDocument();
+  expect(saveButton).toBeInTheDocument();
+  expect(screen.getByText(/patient has a future appointment scheduled/i)).toBeInTheDocument();
+  expect(screen.getByText(/patient needs to be followed up/i)).toBeInTheDocument();
+  expect(screen.getByText(/social/i)).toBeInTheDocument();
+});
+
+it('sorts by active and retired correctly via controlled dropdown', async () => {
+  mockUsePatientFlags.mockReturnValue({
+    flags: mockPatientFlags,
+    isLoading: false,
+    error: null,
+    isValidating: false,
+    mutate: jest.fn(),
+  });
+
+  render(
+    <FlagsWorkspace
+      closeWorkspace={jest.fn()}
+      groupProps={{
+        patientUuid: mockPatient.id,
+        patient: mockPatient,
+        visitContext: null,
+        mutateVisitContext: null,
+      }}
+      workspaceProps={{}}
+      windowProps={{}}
+      workspaceName=""
+      launchChildWorkspace={null}
+      windowName={''}
+      isRootWorkspace={false}
+    />,
+  );
+
+  const user = userEvent.setup();
+  const sortDropdown = screen.getByRole('combobox');
+  expect(sortDropdown).toBeInTheDocument();
+
+  // select "Retired first" then "Active first" to exercise both flows
+  await user.click(sortDropdown);
+  await user.click(screen.getByText(/Retired first/i));
+  await user.click(sortDropdown);
+  await user.click(screen.getByText(/Active first/i));
+});

package/src/flags/flags-workspace/flags.workspace.tsx

@@ -0,0 +1,255 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { orderBy } from 'lodash-es';
+import { useTranslation } from 'react-i18next';
+import { Button, ButtonSet, Dropdown, Form, InlineLoading, Search, Tile, Toggle, Stack } from '@carbon/react';
+import { type PatientWorkspace2DefinitionProps } from '@openmrs/esm-patient-common-lib';
+import {
+  useLayoutType,
+  showSnackbar,
+  parseDate,
+  formatDate,
+  ResponsiveWrapper,
+  Workspace2,
+} from '@openmrs/esm-framework';
+import { usePatientFlags, enablePatientFlag, disablePatientFlag } from '../hooks/usePatientFlags';
+import { getFlagType } from '../utils';
+import styles from './flags-workspace.scss';
+
+type SortKey = 'alpha' | 'active' | 'retired';
+
+const FlagsWorkspace: React.FC<PatientWorkspace2DefinitionProps<{}, {}>> = ({
+  closeWorkspace,
+  groupProps: { patientUuid },
+}) => {
+  const { t } = useTranslation();
+  const { flags, isLoading, error, mutate } = usePatientFlags(patientUuid);
+  const isTablet = useLayoutType() === 'tablet';
+  const [isSaving, setIsSaving] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [sortBy, setSortBy] = useState<SortKey>('alpha');
+  // Track pending changes: Map of flagUuid -> desired active state
+  const [pendingActiveStates, setPendingActiveStates] = useState<Map<string, boolean>>(new Map());
+
+  const hasUnsavedChanges = pendingActiveStates.size > 0;
+
+  const sortItems = useMemo(
+    () => [
+      { id: 'alpha' as const, label: t('alphabetically', 'A - Z') },
+      { id: 'active' as const, label: t('activeFirst', 'Active first') },
+      { id: 'retired' as const, label: t('retiredFirst', 'Retired first') },
+    ],
+    [t],
+  );
+
+  const sortedRows = useMemo(() => {
+    if (!sortBy) {
+      return flags;
+    }
+    if (sortBy === 'active') {
+      return orderBy(flags, [(item) => Number(item.voided)], ['asc']);
+    }
+    if (sortBy === 'retired') {
+      return orderBy(flags, [(item) => Number(item.voided)], ['desc']);
+    }
+    return orderBy(flags, [(f) => f.message], ['asc']);
+  }, [sortBy, flags]);
+
+  const searchResults = useMemo(() => {
+    const query = searchTerm.trim().toLowerCase();
+    if (query) {
+      return sortedRows.filter((f) => f.message.toLowerCase().includes(query));
+    }
+    return sortedRows;
+  }, [searchTerm, sortedRows]);
+
+  const handleSortByChange = ({ selectedItem }) => setSortBy(selectedItem?.id as SortKey);
+
+  // Get the effective active state for a flag (considering pending changes)
+  const isActive = useCallback(
+    (flagUuid: string, originallyActive: boolean) => {
+      return pendingActiveStates.has(flagUuid) ? pendingActiveStates.get(flagUuid) : originallyActive;
+    },
+    [pendingActiveStates],
+  );
+
+  const handleToggle = useCallback((flagUuid: string, originallyActive: boolean, isNowActive: boolean) => {
+    setPendingActiveStates((prev) => {
+      const next = new Map(prev);
+      if (isNowActive === originallyActive) {
+        next.delete(flagUuid);
+      } else {
+        next.set(flagUuid, isNowActive);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    if (pendingActiveStates.size === 0) {
+      closeWorkspace({ discardUnsavedChanges: true });
+      return;
+    }
+
+    setIsSaving(true);
+    const promises: Promise<{ flagUuid: string; success: boolean }>[] = [];
+
+    pendingActiveStates.forEach((active, flagUuid) => {
+      const promise = (active ? enablePatientFlag(flagUuid) : disablePatientFlag(flagUuid))
+        .then((res) => ({ flagUuid, success: res.ok }))
+        .catch(() => ({ flagUuid, success: false }));
+      promises.push(promise);
+    });
+
+    const results = await Promise.all(promises);
+    const failures = results.filter((r) => !r.success);
+
+    if (failures.length === 0) {
+      showSnackbar({
+        isLowContrast: true,
+        kind: 'success',
+        subtitle: t('flagsUpdatedSuccessfully', 'Flags updated successfully'),
+        title: t('flagsUpdated', 'Flags updated'),
+      });
+      mutate();
+      closeWorkspace({ discardUnsavedChanges: true });
+    } else {
+      showSnackbar({
+        isLowContrast: false,
+        kind: 'error',
+        subtitle: t('flagsUpdateError', 'Some flags failed to update'),
+        title: t('updateError', 'Update error'),
+      });
+      // Clear successful changes from pending, keep failures
+      setPendingActiveStates((prev) => {
+        const next = new Map(prev);
+        results.filter((r) => r.success).forEach((r) => next.delete(r.flagUuid));
+        return next;
+      });
+      mutate();
+    }
+
+    setIsSaving(false);
+  }, [pendingActiveStates, closeWorkspace, mutate, t]);
+
+  if (isLoading) {
+    return <InlineLoading className={styles.loading} description={`${t('loading', 'Loading')} ...`} />;
+  }
+
+  if (error) {
+    return <div>{error.message}</div>;
+  }
+
+  return (
+    <Workspace2 title={t('editPatientFlags', 'Edit patient flags')} hasUnsavedChanges={hasUnsavedChanges}>
+      <Form className={styles.formWrapper}>
+        {/* The <div> below is required to maintain the page layout styling */}
+        <div>
+          <ResponsiveWrapper>
+            <Search
+              labelText={t('searchForAFlag', 'Search for a flag')}
+              placeholder={t('searchForAFlag', 'Search for a flag')}
+              value={searchTerm}
+              size={isTablet ? 'lg' : 'md'}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </ResponsiveWrapper>
+          <Stack gap={4}>
+            <div className={styles.listWrapper}>
+              <div className={styles.flagsHeaderInfo}>
+                {searchResults.length > 0 ? (
+                  <>
+                    <span className={styles.resultsCount}>
+                      {t('matchesForSearchTerm', '{{count}} flags', {
+                        count: searchResults.length,
+                      })}
+                    </span>
+                    <Dropdown
+                      className={styles.sortDropdown}
+                      id="sortBy"
+                      label=""
+                      type="inline"
+                      items={sortItems}
+                      itemToString={(item) => item?.label ?? ''}
+                      selectedItem={sortItems.find((item) => item.id === sortBy)}
+                      onChange={handleSortByChange}
+                      titleText={t('sortBy', 'Sort by')}
+                    />
+                  </>
+                ) : null}
+              </div>
+              {searchResults.length > 0
+                ? searchResults.map((result) => {
+                    const originallyActive = !result.voided;
+                    const active = isActive(result.uuid, originallyActive);
+                    return (
+                      <div className={styles.flagTile} key={result.uuid}>
+                        <div className={styles.flagHeader}>
+                          <div className={styles.titleAndType}>
+                            <div className={styles.flagTitle}>{result.message}</div>&middot;
+                            <span className={styles.type}>
+                              {(() => {
+                                const typeLabel = getFlagType(result.tags);
+                                return typeLabel ? t(typeLabel, typeLabel) : t('clinical', 'Clinical');
+                              })()}
+                            </span>
+                          </div>
+                          <Toggle
+                            className={styles.flagToggle}
+                            toggled={active}
+                            id={result.uuid}
+                            labelA=""
+                            labelB=""
+                            onToggle={(isNowActive) => handleToggle(result.uuid, originallyActive, isNowActive)}
+                            size="sm"
+                          />
+                        </div>
+                        {active && (
+                          <div className={styles.secondRow}>
+                            <div className={styles.metadata}>
+                              <span className={styles.label}>{t('assigned', 'Assigned')}</span>
+                              <span className={styles.value}>
+                                {formatDate(parseDate(result.auditInfo?.dateCreated), { time: false })}
+                              </span>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })
+                : null}
+
+              {searchResults.length === 0 ? (
+                <div className={styles.emptyState}>
+                  <Tile className={styles.tile}>
+                    <p className={styles.content}>{t('noFlagsFound', 'Sorry, no flags found matching your search')}</p>
+                    <p className={styles.helper}>
+                      <Button
+                        kind="ghost"
+                        size="sm"
+                        onClick={() => {
+                          setSearchTerm('');
+                        }}
+                      >
+                        {t('clearSearch', 'Clear search')}
+                      </Button>
+                    </p>
+                  </Tile>
+                </div>
+              ) : null}
+            </div>
+          </Stack>
+        </div>
+        <ButtonSet className={isTablet ? styles.tabletButtonSet : styles.desktopButtonSet}>
+          <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
+            {t('discard', 'Discard')}
+          </Button>
+          <Button className={styles.button} disabled={isSaving} kind="primary" type="button" onClick={handleSave}>
+            {isSaving ? t('saving', 'Saving...') : t('saveAndClose', 'Save & close')}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
+  );
+};
+
+export default FlagsWorkspace;

package/src/flags/hooks/usePatientFlags.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import useSWR from 'swr';
 import { openmrsFetch, restBaseUrl, type FetchResponse } from '@openmrs/esm-framework';
 
-interface FlagFetchResponse {
+export interface FlagFetchResponse {
   uuid: string;
   message: string;
   voided: boolean;
@@ -12,23 +12,23 @@ interface FlagFetchResponse {
   auditInfo: { dateCreated: string };
 }
 
-interface FlagDefinition {
+export interface FlagDefinition {
   uuid: string;
   display: string;
   priority: { uuid: string; name: string };
   tags: Array<{ uuid: string; display: string }>;
 }
 
-interface FlagsFetchResponse {
+export interface FlagsFetchResponse {
   results: Array<FlagFetchResponse>;
 }
 
-interface FlagDefinitionsFetchResponse {
+export interface FlagDefinitionsFetchResponse {
   results: Array<FlagDefinition>;
 }
 
-interface FlagWithPriority extends FlagFetchResponse {
-  flagWithPriority?: FlagDefinition;
+export interface FlagWithPriority extends FlagFetchResponse {
+  flagDefinition?: FlagDefinition;
 }
 
 /**
@@ -44,6 +44,7 @@ export function usePatientFlags(patientUuid: string) {
     data: patientFlagsData,
     error: patientFlagsError,
     isLoading: isLoadingPatientFlags,
+    mutate,
   } = useSWR<FetchResponse<FlagsFetchResponse>, Error>(patientUuid ? patientFlagsUrl : null, openmrsFetch);
 
   const patientFlags = patientFlagsData?.data?.results ?? [];
@@ -60,17 +61,24 @@ export function usePatientFlags(patientUuid: string) {
   const flagDefinitions = flagDefinitionsData?.data?.results ?? [];
 
   // Merge patient flags with flag definitions to get priority information
-  const flagsWithPriority: FlagWithPriority[] = patientFlags.map((pf) => ({
-    ...pf,
-    flagWithPriority: flagDefinitions.find((f) => f.uuid === pf.flag.uuid),
-  }));
+  const flagsWithPriority: FlagWithPriority[] = patientFlags.map((pf) => {
+    const flagDefinition = flagDefinitions.find((f) => f.uuid === pf.flag.uuid);
+    if (!flagDefinition) {
+      console.warn(`Flag definition not found for flag ${pf.flag.display}. Tag will be missing priority information.`);
+      return pf;
+    }
+    return {
+      ...pf,
+      flagDefinition,
+    };
+  });
 
   const result = {
     flags: flagsWithPriority,
     error: patientFlagsError || flagDefinitionsError,
     isLoading: isLoadingPatientFlags || isLoadingFlagDefinitions,
     isValidating: false,
-    mutate: () => {},
+    mutate,
   };
 
   return result;

package/src/index.ts

@@ -1,5 +1,6 @@
-import { defineConfigSchema, getAsyncLifecycle } from '@openmrs/esm-framework';
+import { defineConfigSchema, defineExtensionConfigSchema, getAsyncLifecycle } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
+import { riskCountExtensionConfigSchema } from './flags/flags-risk-count-extension/extension-config-schema';
 
 const moduleName = '@openmrs/esm-patient-flags-app';
 
@@ -7,19 +8,23 @@ export const importTranslation = require.context('../translations', false, /.jso
 
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
+  defineExtensionConfigSchema('patient-flags-risk-count', riskCountExtensionConfigSchema);
 }
 
-export const flagTags = getAsyncLifecycle(() => import('./flags/flags-highlight-bar.component'), {
-  featureName: 'patient-flag-tags',
-  moduleName,
-});
+export const flagsRiskCountExtension = getAsyncLifecycle(
+  () => import('./flags/flags-risk-count-extension/flags-risk-count.extension'),
+  {
+    featureName: 'patient-flags-risk-count',
+    moduleName,
+  },
+);
 
-export const flagsOverview = getAsyncLifecycle(() => import('./flags/flags.component'), {
+export const flagsListExtension = getAsyncLifecycle(() => import('./flags/flags-list-extension/flags-list.extension'), {
   featureName: 'patient-flags-overview',
   moduleName,
 });
 
-export const patientFlagsWorkspace = getAsyncLifecycle(() => import('./flags/patient-flags.workspace'), {
+export const patientFlagsWorkspace = getAsyncLifecycle(() => import('./flags/flags-workspace/flags.workspace'), {
   featureName: 'patient-flags-workspace',
   moduleName,
 });

package/src/routes.json

@@ -5,16 +5,19 @@
   },
   "extensions": [
     {
-      "name": "patient-flag-tags",
-      "slot": "patient-highlights-bar-slot",
-      "component": "flagTags",
+      "name": "patient-flags-risk-count",
+      "slot": "patient-info-slot",
+      "component": "flagsRiskCountExtension",
       "order": 0,
-      "featureFlag": "patient-flags"
+      "featureFlag": "patient-flags",
+      "meta": {
+        "fullWidth": true
+      }
     },
     {
-      "name": "patient-flags-overview",
+      "name": "patient-flags-list",
       "slot": "patient-chart-summary-dashboard-slot",
-      "component": "flagsOverview",
+      "component": "flagsListExtension",
       "order": 0,
       "featureFlag": "patient-flags",
       "meta": {
@@ -29,11 +32,17 @@
       "description": "Visual components that enable healthcare providers to see relevant patient information with a glance in the Patient chart. Flags are displayed in the Patient Summary, just below the patient banner, and can link users to other areas of the chart to perform relevant actions during a visit."
     }
   ],
-  "workspaces": [
+  "workspaces2": [
     {
       "name": "patient-flags-workspace",
-      "title": "editPatientFlags",
-      "component": "patientFlagsWorkspace"
+      "component": "patientFlagsWorkspace",
+      "window": "patient-flags"
+    }
+  ],
+  "workspaceWindows2": [
+    {
+      "name": "patient-flags",
+      "group": "patient-chart"
     }
   ]
 }