Create shared resource (#1887)

* working

* add shared dir

* moved shared resources folder

* webpack test

* test

* test

* test

* test

* test

* Update docker-compose.yml

* Update buildContainers.yaml

* test

* another test

* remove symlinks if needed

* tests

* tests

* fix lighthouse

* remove symlinks from lighthouse

* update readme

* fix package

* Update Dockerfile

* Update package.json

.github/workflows/buildContainers.yaml

@@ -28,6 +28,16 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
 
+      - name: Remove symlinks (if needed)
+        if: ${{ matrix.container-to-build == 'ecr-viewer' }}
+        working-directory: ./containers/${{matrix.container-to-build}}/src/app/shared
+        run: rm -rf ./*
+
+      - name: Copy shared-resources (if needed)
+        if: ${{ matrix.container-to-build == 'ecr-viewer' }}
+        working-directory: ./containers/${{matrix.container-to-build}}
+        run: cp -r ../../shared-resources/src/ ./src/app/shared/
+
       - name: Target branch in requirements.txt
         working-directory: ./containers/${{matrix.container-to-build}}
         run: |

.github/workflows/lighthouse.yaml

@@ -25,6 +25,14 @@ jobs:
         with:
           node-version: "18"
 
+      - name: Remove symlinks
+        working-directory: ./containers/ecr-viewer/src/app/shared
+        run: rm -rf ./*
+
+      - name: Copy shared-resources (if needed)
+        working-directory: ./containers/ecr-viewer
+        run: cp -r ../../shared-resources/src/ ./src/app/shared/
+
       - name: Change to the correct directory
         run: cd containers/ecr-viewer
 

.github/workflows/test.yaml

@@ -211,6 +211,12 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: 18 # Adjust the Node.js version as needed
+      - name: Remove symlinks
+        working-directory: ./containers/ecr-viewer/src/app/shared
+        run: rm -rf ./*
+      - name: Copy shared-resources
+        working-directory: ./containers/ecr-viewer
+        run: cp -r ../../shared-resources/src/ ./src/app/shared/
       - name: Install dependencies
         working-directory: ./containers/ecr-viewer # Navigate to your Node.js app directory
         run: npm install
@@ -240,6 +246,12 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: 18 # Adjust the Node.js version as needed
+      - name: Remove symlinks
+        working-directory: ./containers/ecr-viewer/src/app/shared
+        run: rm -rf ./*
+      - name: Copy shared-resources
+        working-directory: ./containers/ecr-viewer
+        run: cp -r ../../shared-resources/src/ ./src/app/shared/
       - name: Install dependencies
         working-directory: ./containers/ecr-viewer # Navigate to your Node.js app directory
         run: npm install

containers/ecr-viewer/Dockerfile

@@ -68,4 +68,4 @@ ENV OTEL_EXPORTER_OTLP_TRACES_ENDPOINT=http://otel-collector:4318/v1/traces
 
 # server.js is created by next build from the standalone output
 # https://nextjs.org/docs/pages/api-reference/next-config-js/output
-CMD ["node", "server.js"]
+CMD ["node", "server.js"]

containers/ecr-viewer/package.json

@@ -5,7 +5,8 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "local-dev": "npm run setup-local-env && docker compose up db -d && docker-compose logs && export DATABASE_URL=postgres://postgres:pw@localhost:5432/ecr_viewer_db && npm run dev",
+    "local-dev": "npm run check-shared-resources && npm run setup-local-env && docker compose up db -d && docker-compose logs && export DATABASE_URL=postgres://postgres:pw@localhost:5432/ecr_viewer_db && npm run dev",
+    "check-shared-resources": "if [ ! -d ../../shared-resources/node_modules ]; then (cd ../../shared-resources && npm install) fi",
     "setup-local-env": "./setup-env.sh",
     "build": "next build",
     "start": "next start",

containers/ecr-viewer/src/app/shared/src

@@ -0,0 +1 @@
+../../../../../shared-resources/src/

containers/ecr-viewer/src/app/view-data/components/AccordionContainer.tsx → containers/ecr-viewer/src/app/view-data/components/AccordionContent.tsx

@@ -7,9 +7,7 @@ import EncounterDetails from "./Encounter";
 import ClinicalInfo from "./ClinicalInfo";
 import { Bundle } from "fhir/r4";
 import React, { ReactNode } from "react";
-import { Accordion } from "@trussworks/react-uswds";
 import LabInfo from "@/app/view-data/components/LabInfo";
-import { formatString } from "@/app/services/formatService";
 import { evaluateEcrMetadata } from "../../services/ecrMetadataService";
 import { evaluateLabInfoData } from "@/app/services/labsService";
 import {
@@ -19,6 +17,7 @@ import {
   evaluateProviderData,
 } from "@/app/services/evaluateFhirDataService";
 import { evaluateClinicalData } from "./common";
+import AccordionContainer from "@/app/shared/src/accordion/AccordionContainer";
 
 type AccordionContainerProps = {
   children?: ReactNode;
@@ -33,7 +32,7 @@ type AccordionContainerProps = {
  * @param props.fhirPathMappings - The path mappings used to extract information from the FHIR bundle.
  * @returns The JSX element representing the accordion container.
  */
-const AccordionContainer: React.FC<AccordionContainerProps> = ({
+const AccordionContent: React.FC<AccordionContainerProps> = ({
   fhirBundle,
   fhirPathMappings,
 }) => {
@@ -142,20 +141,6 @@ const AccordionContainer: React.FC<AccordionContainerProps> = ({
     },
   ];
 
-  //Add id, adjust title
-  accordionItems.forEach((item, index) => {
-    let formattedTitle = formatString(item["title"]);
-    item["id"] = `${formattedTitle}_${index + 1}`;
-    item["title"] = <span id={formattedTitle}>{item["title"]}</span>;
-    accordionItems[index] = item;
-  });
-
-  return (
-    <Accordion
-      className="info-container"
-      items={accordionItems}
-      multiselectable={true}
-    />
-  );
+  return <AccordionContainer accordionItems={accordionItems} />;
 };
-export default AccordionContainer;
+export default AccordionContent;

containers/ecr-viewer/src/app/view-data/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import AccordionContainer from "@/app/view-data/components/AccordionContainer";
+import AccordionContent from "@/app/view-data/components/AccordionContent";
 import { useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { Bundle } from "fhir/r4";
@@ -132,7 +132,7 @@ const ECRViewerPage: React.FC = () => {
                         </Grid>
                       </Grid>
                     </GridContainer>
-                    <AccordionContainer
+                    <AccordionContent
                       fhirPathMappings={mappings}
                       fhirBundle={fhirBundle}
                     />

shared-resources/.gitignore

@@ -0,0 +1,3 @@
+./node_modules
+.next/
+.env.local

shared-resources/README.md

@@ -0,0 +1,35 @@
+# Shared Modules for PHDI Containers
+
+This folder contains shared modules that can be used across PHDI Next.js projects. Follow the instructions below to integrate these shared modules into other containers.
+
+## Step 1: Sym link the folder to your container
+
+From the repo you want to sym link to
+
+Example:
+```
+ln -s ../../../../../shared-resources/src/ ./src/app/shared/
+```
+
+## Step 2: Install local requirements for shared-resources
+In the shared resources folder run:
+```
+npm install
+```
+
+## Step 3: Update various build commands
+Certain github build commands will need to be updated.
+
+In order for docker to work, the files need to be located in the repo they are being used in. See these examples from build container.
+
+```
+- name: Remove symlinks (if needed)
+  if: ${{ matrix.container-to-build == 'ecr-viewer' }}
+  working-directory: ./containers/${{matrix.container-to-build}}/src/app/shared
+  run: rm -rf ./*
+
+- name: Copy shared-resources (if needed)
+  if: ${{ matrix.container-to-build == 'ecr-viewer' }}
+  working-directory: ./containers/${{matrix.container-to-build}}
+  run: cp -r ../../shared-resources/src/ ./src/app/shared/
+```

shared-resources/jest.config.js

@@ -0,0 +1,15 @@
+const nextJest = require("next/jest");
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: "./",
+});
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+  testEnvironment: "jest-environment-jsdom",
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);

shared-resources/jest.setup.ts

@@ -0,0 +1,6 @@
+import "@testing-library/jest-dom";
+import { toHaveNoViolations } from "jest-axe";
+import * as matchers from "jest-extended";
+
+expect.extend(toHaveNoViolations);
+expect.extend(matchers);