U4X-373:Add patient flags functionality (#152)

packages/esm-patient-flags-app/jest.config.js

@@ -0,0 +1,8 @@
+const rootConfig = require('../../jest.config.js');
+
+const packageConfig = {
+  ...rootConfig,
+  collectCoverage: false,
+};
+
+module.exports = packageConfig;

packages/esm-patient-flags-app/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@ugandaemr/esm-patient-flags-app",
+  "version": "5.1.0",
+  "description": "Patient flags microfrontend for UgandaEMR",
+  "browser": "dist/esm-patient-flags-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "debug": "npm run serve",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "eslint src --ext ts,tsx",
+    "typescript": "tsc",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
+    "coverage": "yarn test --coverage"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/METS-Programme/esm-ugandaemr-core#readme"
+  },
+  "bugs": {
+    "url": "https://github.com/METS-Programme/esm-ugandaemr-core/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.42.1",
+    "lodash-es": "^4.17.15"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "5.x",
+    "react": "^18.1.0",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x"
+  },
+  "devDependencies": {
+    "webpack": "^5.74.0"
+  }
+}

packages/esm-patient-flags-app/src/config-schema.ts

@@ -0,0 +1,14 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const configSchema = {
+  casualGreeting: {
+    _type: Type.Boolean,
+    _default: false,
+    _description: 'Whether to use a casual greeting (or a formal one).',
+  },
+};
+
+export type Config = {
+  casualGreeting: boolean;
+  whoToGreet: Array<string>;
+};

packages/esm-patient-flags-app/src/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css';
+declare module '*.scss';
+declare module '@carbon/react';
+declare type SideNavProps = object;

packages/esm-patient-flags-app/src/hooks/usePatientFlags.tsx

@@ -0,0 +1,21 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+export interface Result {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export interface Link {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export const usePatientFlags = (patientUuid: string) => {
+  const patientFlagsUrl = `/ws/rest/v1/patientflags/patientflag?patient=${patientUuid}`;
+  const { data, error, isLoading } = useSWR<{ data: { results: Array<Result> } }, Error>(patientFlagsUrl, openmrsFetch);
+  const patientFlags = typeof data?.data === 'string' ? [] : data?.data?.results ?? [];
+  return { patientFlags, isLoading, error };
+};

packages/esm-patient-flags-app/src/index.ts

@@ -0,0 +1,17 @@
+import { defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import patientFlagsComponent from './patient-flags/patient-flags.component';
+
+const moduleName = '@ugandaemr/esm-patient-flags-app';
+
+const options = {
+  featureName: 'patient-flags',
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+export const patientFlag = getSyncLifecycle(patientFlagsComponent, options);
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}

packages/esm-patient-flags-app/src/patient-flags/patient-flags.component.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Tag } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { usePatientFlags } from '../hooks/usePatientFlags';
+import styles from './patient-flags.scss';
+
+interface PatientFlagsProps {
+  patientUuid: string;
+}
+
+const PatientFlags: React.FC<PatientFlagsProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const { patientFlags, error } = usePatientFlags(patientUuid);
+
+  if (error) {
+    return <span>{t('errorPatientFlags', 'Error loading patient flags')}</span>;
+  }
+
+  return (
+    <div className={styles.flagContainer}>
+      {patientFlags.map((patientFlag) => (
+        <Tag className={styles.tag} key={patientFlag} type="magenta">
+          {patientFlag?.display}
+        </Tag>
+      ))}
+    </div>
+  );
+};
+
+export default PatientFlags;

packages/esm-patient-flags-app/src/patient-flags/patient-flags.scss

@@ -0,0 +1,10 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.flagContainer {
+  margin: layout.$spacing-05;
+}
+
+.tag {
+  cursor: pointer;
+}

packages/esm-patient-flags-app/src/patient-flags/patient-flags.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import PatientFlags from './patient-flags.component';
+import { usePatientFlags } from '../hooks/usePatientFlags';
+
+const mockUsePatientFlags = usePatientFlags as jest.Mock;
+
+jest.mock('../hooks/usePatientFlags', () => {
+  const originalModule = jest.requireActual('../hooks/usePatientFlags');
+  return { ...originalModule, usePatientFlags: jest.fn() };
+});
+
+describe('<PatientFlags/>', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  test('should display patient flags', () => {
+    mockUsePatientFlags.mockReturnValue({ isLoading: false, patientFlags: ['hiv', 'cancer'], error: null });
+    render(<PatientFlags patientUuid="some-patient-uuid" />);
+    expect(screen.getByText(/^hiv$/i)).toBeInTheDocument();
+    expect(screen.getByText(/^cancer$/i)).toBeInTheDocument();
+  });
+
+  test("should display error message when there's an error", () => {
+    mockUsePatientFlags.mockReturnValue({ isLoading: false, patientFlags: [], error: 'some-error' });
+    render(<PatientFlags patientUuid="some-patient-uuid" />);
+    expect(screen.getByText(/Error loading patient flags/i)).toBeInTheDocument();
+  });
+});

packages/esm-patient-flags-app/src/routes.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "webservices.rest": "^2.24.0"
+  },
+  "pages": [],
+  "extensions": [
+    {
+      "name": "patient-flag",
+      "slot": "top-of-all-patient-dashboards-slot",
+      "component": "patientFlag",
+      "order": 0,
+      "online": true,
+      "offline": false
+    }
+  ]
+}

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

@@ -0,0 +1,2 @@
+{
+}

packages/esm-patient-flags-app/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.tsx", "src/**/*.outdated.tsx"]
+}

packages/esm-patient-flags-app/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require('openmrs/default-webpack-config');

yarn.lock

@@ -6782,6 +6782,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@ugandaemr/esm-patient-flags-app@workspace:packages/esm-patient-flags-app":
+  version: 0.0.0-use.local
+  resolution: "@ugandaemr/esm-patient-flags-app@workspace:packages/esm-patient-flags-app"
+  dependencies:
+    "@carbon/react": ^1.42.1
+    lodash-es: ^4.17.15
+    webpack: ^5.74.0
+  peerDependencies:
+    "@openmrs/esm-framework": 5.x
+    react: ^18.1.0
+    react-i18next: 11.x
+    react-router-dom: 6.x
+  languageName: unknown
+  linkType: soft
+
 "@ugandaemr/esm-patient-queues-app@workspace:packages/esm-patient-queues-app":
   version: 0.0.0-use.local
   resolution: "@ugandaemr/esm-patient-queues-app@workspace:packages/esm-patient-queues-app"