Merge pull request #2 from jabahum/main

ft : add app menu items

.eslintrc

@@ -1,13 +1,9 @@
 {
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
-  "root": true,
-  "extends": [
-    "eslint:recommended",
-    "plugin:prettier/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "ts-react-important-stuff"
+  "plugins": [
+    "@typescript-eslint"
   ],
+  "extends": ["ts-react-important-stuff", "plugin:prettier/recommended"],
   "rules": {
     "no-restricted-imports": [
       "error",

package.json

@@ -1,13 +1,13 @@
 {
-  "name": "@ugandaemr/esm-menu-app",
+  "name": "@ugandaemr/esm-primary-navigation-app",
   "version": "1.0.0",
   "license": "MPL-2.0",
-  "description": "A frontend module for managing apps built on OpenMRS 3.x",
-  "browser": "dist/esm-menu-app.js",
+  "description": "A template for creating frontend modules for UgandaEMR",
+  "browser": "dist/esm-ugandaemr-primary-navigation-app.js",
   "main": "src/index.ts",
   "source": true,
   "scripts": {
-    "start": "openmrs develop --backend http://167.71.32.250:8080",
+    "start": "openmrs develop",
     "serve": "webpack serve --mode=development",
     "build": "webpack --mode production",
     "analyze": "webpack --mode=production --env analyze=true",
@@ -46,19 +46,21 @@
   "dependencies": {
     "@carbon/react": "^1.33.1",
     "lodash-es": "^4.17.21",
-    "react-image-annotate": "^1.8.0"
+    "react-image-annotate": "^1.8.0",
+    "single-spa": "^5.9.2"
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "*",
     "dayjs": "1.x",
     "react": "18.x",
     "react-i18next": "11.x",
     "react-router-dom": "6.x",
-    "rxjs": "6.x"
+    "rxjs": "6.x",
+    "single-spa": "5.x"
   },
   "devDependencies": {
-    "@openmrs/esm-framework": "next",
-    "@openmrs/esm-styleguide": "next",
+    "@openmrs/esm-framework": "^5.1.0",
+    "@openmrs/webpack-config": "^5.1.0",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.68",
     "@swc/jest": "^0.2.26",

src/__mocks__/mock-session.ts

@@ -0,0 +1,23 @@
+export const mockSession = {
+  authenticated: true,
+  user: {
+    uuid: "82f18b44-6814-11e8-923f-e9a88dcb533f",
+    display: "admin",
+    username: "",
+    systemId: "admin",
+    userProperties: {
+      defaultLocale: "en",
+      loginAttempts: "0",
+    },
+    person: {
+      uuid: "5f87c042-6814-11e8-923f-e9a88dcb533f",
+      display: "Super User",
+    },
+    privileges: [],
+  },
+  locale: "en",
+  allowedLocales: ["en", "es", "fr", "km"],
+  sessionLocation: {
+    display: "Unknown Location",
+  },
+};

src/__mocks__/mock-user.ts

@@ -0,0 +1,23 @@
+export const mockUser = {
+  authenticated: true,
+  user: {
+    uuid: "uuid",
+    display: "admin",
+    person: { uuid: "uuid", display: "Test User" },
+    privileges: [],
+    roles: [{ uuid: "uuid", display: "System Developer" }],
+    username: "testuser",
+    userProperties: {
+      defaultLocale: "fr",
+    },
+  },
+};
+
+export const mockLoggedInUser = {
+  uuid: "uuid",
+  username: "Dr Healther Morgan",
+  userProperties: {},
+  person: {
+    display: "Dr Healther Morgan",
+  },
+};

src/__mocks__/openmrs-esm-framework.mock.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { of } from "rxjs";
+
+export const useLayoutType = jest.fn(() => "tablet");
+
+export function openmrsFetch() {
+  return new Promise(() => {
+    console.info("testing");
+  });
+}
+
+export function useOnClickOutside() {
+  return React.useRef();
+}
+
+export function getCurrentUser() {
+  return of({ authenticated: false });
+}
+
+export function createErrorHandler() {
+  return true;
+}
+
+export function refetchCurrentUser() {
+  return Promise.resolve({});
+}
+
+export const ComponentContext = React.createContext(null);
+
+export const openmrsComponentDecorator = jest
+  .fn()
+  .mockImplementation(() => (component) => component);
+
+export const Extension = jest.fn().mockImplementation((props: any) => {
+  return <slot />;
+});
+
+export const ExtensionSlot = ({ children }) => <>{children}</>;

src/components/app-search-bar/app-search-bar.component.tsx

@@ -0,0 +1,141 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Search } from "@carbon/react";
+import styles from "./app-search-bar.scss";
+import MenuItems from "../../menu/menu.component";
+import {
+  Analytics,
+  DocumentAdd,
+  DocumentImport,
+  Events,
+  VolumeFileStorage,
+  HospitalBed,
+  Medication,
+  User,
+  Report,
+  UserActivity,
+} from "@carbon/react/icons";
+
+interface AppSearchBarProps {
+  onChange?: (searchTerm) => void;
+  onClear: () => void;
+  onSubmit: (searchTerm) => void;
+  small?: boolean;
+}
+
+const AppSearchBar = React.forwardRef<
+  HTMLInputElement,
+  React.PropsWithChildren<AppSearchBarProps>
+>(({ onChange, onClear, onSubmit, small }, ref) => {
+  const { t } = useTranslation();
+
+  // items
+  const openmrsSpaBase = window["getOpenmrsSpaBase"]();
+
+  const initialItems = useMemo(() => {
+    const items = [
+      {
+        app: "Data Visualiser",
+        link: `${openmrsSpaBase}data-visualiser`,
+        icon: <Analytics size={24} />,
+      },
+      {
+        app: "Dispensing ",
+        link: `${openmrsSpaBase}dispensing`,
+        icon: <Medication size={24} />,
+      },
+      {
+        app: "Stock Management ",
+        link: `${openmrsSpaBase}stock-management`,
+        icon: <Report size={24} />,
+      },
+      {
+        app: "Bed Management ",
+        link: `${openmrsSpaBase}bed-management`,
+        icon: <HospitalBed size={24} />,
+      },
+      {
+        app: "Form Builder ",
+        link: `${openmrsSpaBase}form-builder`,
+        icon: <DocumentAdd size={24} />,
+      },
+      {
+        app: "Form Render Test ",
+        link: `${openmrsSpaBase}form-render-test`,
+        icon: <DocumentImport size={24} />,
+      },
+      {
+        app: "Legacy Admin ",
+        link: `/openmrs/admin/index.htm`,
+        icon: <User size={24} />,
+      },
+      {
+        app: "Cohort Builder ",
+        link: `${openmrsSpaBase}cohort-builder`,
+        icon: <Events size={24} />,
+      },
+      {
+        app: "Theatre ",
+        link: `${openmrsSpaBase}theatre`,
+        icon: <UserActivity size={24} />,
+      },
+      {
+        app: "System Info ",
+        link: `${openmrsSpaBase}about`,
+        icon: <VolumeFileStorage size={24} />,
+      },
+    ];
+
+    return items;
+  }, [openmrsSpaBase]);
+
+  const [searchTerm, setSearchTerm] = useState("");
+  const [items, setItems] = useState(initialItems);
+
+  const handleChange = useCallback(
+    (val) => {
+      if (typeof onChange === "function") {
+        onChange(val);
+      }
+      setSearchTerm(val);
+      const filteredItems = initialItems.filter((item) =>
+        item.app.toLowerCase().includes(val)
+      );
+      setItems(filteredItems);
+    },
+    [initialItems, onChange]
+  );
+
+  const handleSubmit = (evt) => {
+    evt.preventDefault();
+    onSubmit(searchTerm);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit} className={styles.searchArea}>
+        <Search
+          autoFocus
+          className={styles.appSearchInput}
+          closeButtonLabelText={t("clearSearch", "Clear")}
+          labelText=""
+          onChange={(event) => handleChange(event.target.value)}
+          onClear={onClear}
+          placeholder={t(
+            "searchForApp",
+            "Search for a application or module by name"
+          )}
+          size={small ? "sm" : "lg"}
+          value={searchTerm}
+          ref={ref}
+          data-testid="appSearchBar"
+        />
+      </form>
+      <div className={styles.searchItems}>
+        <MenuItems items={items} />
+      </div>
+    </>
+  );
+});
+
+export default AppSearchBar;

src/components/app-search-bar/app-search-bar.scss

@@ -0,0 +1,18 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.searchArea {
+  width: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.appSearchInput {
+  border: none;
+}
+
+.searchItems {
+  display: flex;
+}