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

package/src/flags/flags-list.component.tsx

@@ -0,0 +1,68 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Tag } from '@carbon/react';
+import { type ConfigObject, EditIcon, launchWorkspace2, useConfig } from '@openmrs/esm-framework';
+import { type FlagWithPriority, usePatientFlags } from './hooks/usePatientFlags';
+import styles from './flags-list.scss';
+
+interface FlagsListProps {
+  patientUuid: string;
+}
+
+const FlagsList: React.FC<FlagsListProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const { flags, isLoading, error } = usePatientFlags(patientUuid);
+  const filteredFlags = flags.filter((flag) => !flag.voided);
+  const config = useConfig<ConfigObject>();
+
+  const handleClickEditFlags = useCallback(() => launchWorkspace2('patient-flags-workspace'), []);
+
+  if (!isLoading && !error) {
+    return (
+      <div className={styles.container}>
+        <ul className={styles.flagsList}>
+          {filteredFlags.map((flag) => (
+            <li key={flag.uuid}>
+              <Flag flag={flag} />
+            </li>
+          ))}
+        </ul>
+        {config.allowFlagDeletion && filteredFlags.length > 0 ? (
+          <Button
+            className={styles.actionButton}
+            hasIconOnly
+            kind="ghost"
+            size="sm"
+            renderIcon={EditIcon}
+            onClick={handleClickEditFlags}
+            iconDescription={t('editFlags', 'Edit flags')}
+          />
+        ) : null}
+      </div>
+    );
+  }
+  return null;
+};
+
+interface FlagProps {
+  flag: FlagWithPriority;
+}
+
+const Flag: React.FC<FlagProps> = ({ flag }) => {
+  const priorityName = flag.flagDefinition?.priority?.name?.toLowerCase() ?? '';
+  const isInfoFlag = priorityName === 'info';
+  const isRiskFlag = priorityName === 'risk';
+
+  return (
+    <Tag
+      key={flag.uuid}
+      className={isInfoFlag ? styles.infoFlagTag : isRiskFlag ? styles.flagTag : undefined}
+      type={isRiskFlag ? 'high-contrast' : undefined}
+    >
+      {isRiskFlag && <span className={styles.flagIcon}>&#128681;</span>}
+      {flag.message}
+    </Tag>
+  );
+};
+
+export default FlagsList;

package/src/flags/flags-list.scss

@@ -1,175 +1,71 @@
+@use '@openmrs/esm-styleguide/src/vars' as *;
 @use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
 
-.listWrapper {
-  margin: layout.$spacing-05;
-}
-
-.flagTile {
+.container {
   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;
+  flex-flow: row wrap;
   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;
+  justify-content: flex-end;
+  gap: layout.$spacing-03;
 }
 
-.secondRow {
-  font-size: 0.875rem;
+.flagsList {
   display: flex;
+  flex-flow: row wrap;
+  column-gap: layout.$spacing-02;
+  row-gap: layout.$spacing-03;
   align-items: center;
+  flex: 1;
+  margin: 0;
+  margin-right: auto;
+  padding: 0;
+  list-style: none;
 }
 
-.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;
+.actionButton {
+  max-height: layout.$spacing-08;
+  flex-shrink: 0;
+  align-self: center;
+  svg {
+    fill: $interactive-01 !important;
   }
 }
 
-.flagsHeaderInfo {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.resultsCount {
-  @include type.type-style('label-01');
-}
-
-.button {
-  height: layout.$spacing-10;
-  display: flex;
-  align-content: flex-start;
-  align-items: baseline;
-  min-width: 50%;
-}
-
-.formWrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: calc(100vh - layout.$spacing-12);
-  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;
+.flagIcon {
+  margin-right: layout.$spacing-02;
 }
 
-.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;
+.flagTag {
+  padding: 0 layout.$spacing-03;
+  span {
+    display: flex;
+    align-items: center;
   }
 }
 
-.emptyState {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: layout.$spacing-05;
-  text-align: center;
+.infoFlagTag {
+  padding: 0 layout.$spacing-03;
+  background-color: colors.$orange-20;
+  color: #934412;
 }
 
-.tile {
-  margin: auto;
-  width: 18.75rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+.tooltipPadding {
+  padding: layout.$spacing-02;
 }
 
 .content {
-  max-width: layout.$spacing-13;
-  @include type.type-style('heading-compact-02');
-  margin-bottom: layout.$spacing-05;
-}
+  p {
+    @include type.type-style('body-01');
+  }
 
-.helper {
-  @include type.type-style('body-compact-01');
-}
+  .title {
+    @include type.type-style('heading-compact-01');
+  }
 
-.loader {
-  display: flex;
-  justify-content: center;
-  background-color: colors.$gray-10;
-  min-height: layout.$spacing-09;
+  .message {
+    margin-top: layout.$spacing-03;
+    color: colors.$gray-30;
+  }
 }

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

@@ -1,12 +1,18 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { screen, render } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, launchWorkspace2, useConfig } from '@openmrs/esm-framework';
 import { mockPatient } from 'tools';
 import { mockPatientFlags } from '__mocks__';
+import { type ConfigObject, configSchema } from '../config-schema';
 import { usePatientFlags } from './hooks/usePatientFlags';
-import FlagsList from './patient-flags.workspace';
+import FlagsList from './flags-list.component';
 
-const mockUsePatientFlags = usePatientFlags as jest.Mock;
+type FlagWithPriority = ReturnType<typeof usePatientFlags>['flags'][0];
+
+const mockUsePatientFlags = jest.mocked(usePatientFlags);
+const mockLaunchWorkspace = jest.mocked(launchWorkspace2);
+const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 
 jest.mock('./hooks/usePatientFlags', () => {
   const originalModule = jest.requireActual('./hooks/usePatientFlags');
@@ -17,77 +23,53 @@ jest.mock('./hooks/usePatientFlags', () => {
   };
 });
 
-it('renders an Edit form that enables users to toggle flags on or off', async () => {
-  mockUsePatientFlags.mockReturnValue({
-    flags: mockPatientFlags,
-    isLoading: false,
-    error: null,
-  });
+describe('flags list', () => {
+  it('flags list displays flags and edit button', async () => {
+    const user = userEvent.setup();
 
-  render(
-    <FlagsList
-      closeWorkspace={jest.fn()}
-      groupProps={{
-        patientUuid: mockPatient.id,
-        patient: mockPatient,
-        visitContext: null,
-        mutateVisitContext: null,
-      }}
-      workspaceProps={{}}
-      windowProps={{}}
-      workspaceName=""
-      launchChildWorkspace={null}
-      windowName={''}
-      isRootWorkspace={false}
-    />,
-  );
+    mockUseConfig.mockReturnValue(getDefaultsFromConfigSchema(configSchema));
+    mockUsePatientFlags.mockReturnValue({
+      error: null,
+      flags: mockPatientFlags as FlagWithPriority[],
+      isLoading: false,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
 
-  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 });
+    render(<FlagsList patientUuid={mockPatient.id} />);
 
-  expect(searchbox).toBeInTheDocument();
-  expect(clearSearchInputButton).toBeInTheDocument();
-  expect(discardButton).toBeInTheDocument();
-  expect(saveButton).toBeInTheDocument();
-  expect(screen.getByText(/future appointment/i)).toBeInTheDocument();
-  expect(screen.getByText(/needs follow up/i)).toBeInTheDocument();
-  expect(screen.getByText(/social/i)).toBeInTheDocument();
-});
+    const flags = screen.getAllByRole('listitem');
+    expect(flags).toHaveLength(3);
+    expect(screen.getByText(/patient needs to be followed up/i)).toBeInTheDocument();
+    expect(screen.getByText(/diagnosis for the patient is unknown/i)).toBeInTheDocument();
+    expect(screen.getByText(/patient has a future appointment scheduled/i)).toBeInTheDocument();
+
+    const editButton = screen.getByRole('button', { name: /edit flags/i });
+    expect(editButton).toBeInTheDocument();
 
-it('sorts by active and retired correctly via controlled dropdown', async () => {
-  mockUsePatientFlags.mockReturnValue({
-    flags: mockPatientFlags,
-    isLoading: false,
-    error: null,
+    await user.click(editButton);
+
+    expect(mockLaunchWorkspace).toHaveBeenCalledWith('patient-flags-workspace');
   });
 
-  render(
-    <FlagsList
-      closeWorkspace={jest.fn()}
-      groupProps={{
-        patientUuid: mockPatient.id,
-        patient: mockPatient,
-        visitContext: null,
-        mutateVisitContext: null,
-      }}
-      workspaceProps={{}}
-      windowProps={{}}
-      workspaceName=""
-      launchChildWorkspace={null}
-      windowName={''}
-      isRootWorkspace={false}
-    />,
-  );
+  it('hides the Edit button when allowFlagDeletion config is false', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      allowFlagDeletion: false,
+    });
+    mockUsePatientFlags.mockReturnValue({
+      error: null,
+      flags: mockPatientFlags as FlagWithPriority[],
+      isLoading: false,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
+
+    render(<FlagsList patientUuid={mockPatient.id} />);
 
-  const user = userEvent.setup();
-  const sortDropdown = screen.getByRole('combobox');
-  expect(sortDropdown).toBeInTheDocument();
+    const flags = screen.getAllByRole('listitem');
+    expect(flags).toHaveLength(3);
 
-  // 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));
+    expect(screen.queryByRole('button', { name: /edit flags/i })).not.toBeInTheDocument();
+  });
 });

package/src/flags/flags-risk-count-extension/extension-config-schema.ts

@@ -0,0 +1,17 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const riskCountExtensionConfigSchema = {
+  hideOnPages: {
+    _type: Type.Array,
+    _default: ['Patient Summary'],
+    _description:
+      'List of page names where the risk count badge should not be displayed. Matches against the last segment of the URL path (e.g., "Patient Summary", "Vitals", "Medications").',
+    _elements: {
+      _type: Type.String,
+    },
+  },
+};
+
+export interface FlagsRiskCountExtensionConfig {
+  hideOnPages: Array<string>;
+}

package/src/flags/flags-risk-count-extension/flags-risk-count.extension.tsx

@@ -0,0 +1,84 @@
+import React, { useState, useMemo } from 'react';
+import { Button, InlineLoading, Tag } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { ArrowRightIcon, CloseIcon, useConfig } from '@openmrs/esm-framework';
+import { useCurrentPath, usePatientFlags } from '../hooks/usePatientFlags';
+import FlagsList from '../flags-list.component';
+import styles from './flags-risk-count.scss';
+import { type FlagsRiskCountExtensionConfig } from './extension-config-schema';
+
+interface FlagsRiskCountExtensionProps {
+  patientUuid: string;
+}
+
+const FlagsRiskCountExtension: React.FC<FlagsRiskCountExtensionProps> = ({ patientUuid }) => {
+  const path = useCurrentPath();
+  const { t } = useTranslation();
+  const { flags, isLoading, error } = usePatientFlags(patientUuid);
+  const filteredFlags = flags.filter((f) => !f.voided);
+  const config = useConfig<FlagsRiskCountExtensionConfig>();
+
+  const riskFlags = useMemo(() => {
+    return filteredFlags.filter((f) => f.flagDefinition?.priority?.name?.toLowerCase() === 'risk');
+  }, [filteredFlags]);
+
+  const [showFlagsList, setShowFlagsList] = useState(false);
+
+  const lastSegment = decodeURI(path).split('/').filter(Boolean).pop();
+  if (lastSegment && config.hideOnPages.includes(lastSegment)) {
+    return null;
+  }
+
+  if (isLoading) {
+    return <InlineLoading className={styles.loader} description={`${t('loading', 'Loading')} ...`} />;
+  }
+
+  if (error) {
+    return <div>{error.message}</div>;
+  }
+
+  if (riskFlags.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={styles.flagSummary}>
+      <Tag
+        className={styles.flagsCountTag}
+        type={showFlagsList ? 'outline' : 'high-contrast'}
+        onClick={() => setShowFlagsList(!showFlagsList)}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setShowFlagsList(!showFlagsList);
+          }
+        }}
+      >
+        <span className={styles.flagIcon}>&#128681;</span>
+        {t('flagCount', '{{count}} risk flags', { count: riskFlags.length })}
+        {!showFlagsList && <ArrowRightIcon className={styles.arrowInTag} size={16} />}
+      </Tag>
+      {showFlagsList && (
+        <>
+          <ArrowRightIcon className={styles.arrow} size={16} />
+          <div className={styles.flagsListContainer}>
+            <FlagsList patientUuid={patientUuid} />
+          </div>
+          <Button
+            className={styles.actionButton}
+            hasIconOnly
+            iconDescription={t('closeFlagsList', 'Close flags list')}
+            kind="ghost"
+            size="sm"
+            renderIcon={CloseIcon}
+            onClick={() => setShowFlagsList(false)}
+          />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default FlagsRiskCountExtension;

package/src/flags/{flags-highlight-bar.scss → flags-risk-count-extension/flags-risk-count.scss}

@@ -2,8 +2,10 @@
 @use '@carbon/layout';
 
 .flagSummary {
-  padding: layout.$spacing-03;
-  border-bottom: 1px solid colors.$gray-20;
+  padding: layout.$spacing-01;
+  display: flex;
+  flex-direction: row; /* needed if attaching extension outside highlights bar */
+  align-items: center;
 }
 
 .flagIcon {
@@ -15,9 +17,11 @@
   fill: currentColor;
 }
 
-.flagsHighlightTag {
+.flagsCountTag {
+  margin: layout.$spacing-02 0;
   padding: 0 layout.$spacing-03;
   border: none;
+  cursor: pointer;
   span {
     display: flex;
     justify-content: space-between;
@@ -25,9 +29,14 @@
   }
 }
 
-.highlightBarContainer {
+.arrowInTag {
+  margin-left: layout.$spacing-03;
+  fill: currentColor;
+}
+
+.flagsListContainer {
   padding-left: layout.$spacing-03;
-  border-bottom: 1px solid colors.$gray-20;
+  flex-grow: 1;
 }
 
 .loader {

package/src/flags/flags-risk-count-extension/flags-risk-count.test.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, launchWorkspace2, useConfig } from '@openmrs/esm-framework';
+import { mockPatient } from 'tools';
+import { mockPatientFlags } from '__mocks__';
+import { configSchema } from '../../config-schema';
+import { riskCountExtensionConfigSchema } from './extension-config-schema';
+import { useCurrentPath, usePatientFlags } from '../hooks/usePatientFlags';
+import FlagsRiskCountExtension from './flags-risk-count.extension';
+import { type ConfigObject } from '../../config-schema';
+import { type FlagsRiskCountExtensionConfig } from './extension-config-schema';
+
+const mockUsePatientFlags = jest.mocked(usePatientFlags);
+const mockUseCurrentPath = jest.mocked(useCurrentPath);
+const mockLaunchWorkspace = jest.mocked(launchWorkspace2);
+const mockUseConfig = jest.mocked(useConfig);
+
+jest.mock('../hooks/usePatientFlags', () => {
+  const originalModule = jest.requireActual('../hooks/usePatientFlags');
+
+  return {
+    ...originalModule,
+    usePatientFlags: jest.fn(),
+    useCurrentPath: jest.fn(),
+  };
+});
+
+beforeEach(() => {
+  mockUseCurrentPath.mockReturnValue('/patient/123/chart');
+  mockUseConfig.mockReturnValue({
+    ...getDefaultsFromConfigSchema<ConfigObject>(configSchema),
+    ...getDefaultsFromConfigSchema<FlagsRiskCountExtensionConfig>(riskCountExtensionConfigSchema),
+  });
+});
+
+describe('flags risk count', () => {
+  it('displays a single clickable tag', async () => {
+    const user = userEvent.setup();
+
+    mockUsePatientFlags.mockReturnValue({
+      flags: mockPatientFlags,
+      error: null,
+      isLoading: false,
+      isValidating: false,
+      mutate: jest.fn(),
+    } as unknown as ReturnType<typeof usePatientFlags>);
+
+    render(<FlagsRiskCountExtension patientUuid={mockPatient.id} />);
+
+    const riskFlag = screen.getByRole('button', { name: /risk flag/i });
+    expect(riskFlag).toBeInTheDocument();
+    expect(screen.getByText('🚩')).toBeInTheDocument();
+    expect(screen.getByText(/risk flag/)).toBeInTheDocument();
+
+    await user.click(riskFlag);
+
+    const flags = screen.getAllByRole('listitem');
+    expect(flags).toHaveLength(3);
+    expect(screen.getByText(/patient needs to be followed up/i)).toBeInTheDocument();
+    expect(screen.getByText(/diagnosis for the patient is unknown/i)).toBeInTheDocument();
+    expect(screen.getByText(/patient has a future appointment scheduled/i)).toBeInTheDocument();
+
+    const editButton = screen.getByRole('button', { name: /edit flags/i });
+    expect(editButton).toBeInTheDocument();
+
+    await user.click(editButton);
+
+    expect(mockLaunchWorkspace).toHaveBeenCalledWith('patient-flags-workspace');
+
+    const closeButton = screen.getByRole('button', { name: /close flags list/i });
+
+    await user.click(closeButton);
+
+    expect(screen.queryAllByRole('listitem')).toHaveLength(0);
+  });
+
+  it('respects the hideOnPages config', () => {
+    mockUseCurrentPath.mockReturnValue('/patient/123/FooBarBaz');
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema<ConfigObject>(configSchema),
+      ...getDefaultsFromConfigSchema<FlagsRiskCountExtensionConfig>(riskCountExtensionConfigSchema),
+      hideOnPages: ['FooBarBaz'],
+    });
+
+    mockUsePatientFlags.mockReturnValue({
+      flags: mockPatientFlags,
+      error: null,
+      isLoading: false,
+      isValidating: false,
+      mutate: jest.fn(),
+    } as unknown as ReturnType<typeof usePatientFlags>);
+
+    render(<FlagsRiskCountExtension patientUuid={mockPatient.id} />);
+
+    // No flags risk count should be shown on the FooBarBaz route
+    expect(screen.queryByText(/risk flags/i)).not.toBeInTheDocument();
+  });
+});