Merge branch 'main' of https://github.com/CMSgov/bluebutton-sample-client-python-react into feature/c4dic

Author: jimmyfagan

.github/pull_request_template.md

@@ -5,32 +5,16 @@ This PR template is here to help ensure you're setup for success:
 -->
 
 **JIRA Ticket:**
-[SOMEPROJECT-42](https://jira.cms.gov/browse/SOMEPROJECT-42)
+[BB2-XXXX](https://jira.cms.gov/browse/BB2-XXXX)
 
-**User Story or Bug Summary:**
-
-<!-- Please copy-paste the brief user story or bug description that this PR is intended to address. -->
 
 ### What Does This PR Do?
-
 <!--
 Add detailed description & discussion of changes here.
-The contents of this section should be used as your commit message (unless you merge the PR via a merge commit, of course).
-
-Please follow standard Git commit message guidelines:
-* First line should be a capitalized, short (50 chars or less) summary.
-* The rest of the message should be in standard Markdown format, wrapped to 72 characters.
-* Describe your changes in imperative mood, e.g. "make xyzzy do frotz" instead of "[This patch] makes xyzzy do frotz" or "[I] changed xyzzy to do frotz", as if you are giving orders to the codebase to change its behavior.
-* List all relevant Jira issue keys, one per line at the end of the message, per: <https://confluence.atlassian.com/jirasoftwarecloud/processing-issues-with-smart-commits-788960027.html>.
-
-Reference: <https://git-scm.com/book/en/v2/Distributed-Git-Contributing-to-a-Project>.
 -->
 
 ### What Should Reviewers Watch For?
-
 <!--
-Add some items to the following list, or remove the entire section if it doesn't apply for some reason.
-
 Common items include:
 * Is this likely to address the goals expressed in the user story?
 * Are any additional documentation updates needed?
@@ -40,6 +24,11 @@ Common items include:
 * Can you find any bugs if you run the code locally and test it manually?
 -->
 
-If you're reviewing this PR, please check these things, in particular:
+If you're reviewing this PR, please check for these things in particular:
+<!-- Add some items here -->
+
+### Validation
 
-- TODO
+<!--
+Have you fully verified and tested these changes? Is the acceptance criteria met? Please provide reproducible testing instructions, code snippets, or screenshots as applicable.
+-->

.github/workflows/ci.yaml

@@ -0,0 +1,32 @@
+name: CI for Node.js React Sample App
+on: [push]
+jobs:
+  build:
+      runs-on: ubuntu-latest
+      steps:
+        - uses: actions/checkout@v4
+        
+        - uses: actions/setup-node@v4
+          with:
+            node-version: 20
+
+        - uses: actions/setup-python@v5
+          with:
+            python-version: 3.9
+
+        - name: Install client
+          run: yarn --cwd client install
+
+        - name: Lint client source
+          run: yarn --cwd client lint
+
+        - name: Install server (Python) and lint
+          run: |
+            cd server
+            python -m venv bb2_venv
+            . ./bb2_venv/bin/activate
+            pip install pipenv flake8
+            pip install cms-bluebutton-sdk
+            pipenv lock
+            pipenv install --system --deploy --ignore-pipfile
+            flake8 --exclude bb2_venv --max-line-length 130

README-bb2-dev.md

@@ -28,6 +28,21 @@ Note: --abort-on-container-exit will abort client and server containers when sel
 
 Note: You may need to clean up already existing Docker containers, if you are having issues or have changed your configuration file.
 
+## Use default data sets
+
+Instead of using the BB2 API to retrieve data from a BB2 server every time you run the
+sample client, you can alternatively pre-populate json content to be loaded. To do so,
+replace the json files in `server/default_datasets/Dataset 1` with your desired default
+data, and then in `client/src/components/patientData.tsx`, update the 
+`useDefaultDataButton` const to `true`. 
+
+Then on the landing page of the sample client, in addition to the normal button
+`Authorize` which can be used to query a BB2 server, there will also be a
+`Load default data` button which can be used to load the data from the json files.
+
+This is useful when developing front-end content since it shortens the amount of time
+it takes to load sample data.
+
 ## Visual trouble shoot
 
 Install VNC viewer and point browser to http://localhost:5900 to monitor web UI interactions

README.md

@@ -24,18 +24,28 @@ Running the Back-end & Front-end
 ---------------
 
 Once Docker and Python are Installed then do the following:
-    
+
+```    
     cp server/sample-bluebutton-config.json server/.bluebutton-config.json
+```
 
 Make sure to replace the client_id and client_secret variables within the config file with
 the ones you were provided, for your application, when you created your Blue Button Sandbox account,
 the supported environments are SANDBOX or PRODUCTION.
 
+```
     docker-compose up -d
+```
 
 This single command will create the docker container with all the necessary packages, configuration, and code to 
 run both the front and back ends of this sample application.
 
+To run the front-end (client component listening on port 3000) in preview mode, set environment variable BB2_APP_LAUNCH=preview when launch docker-compose:
+
+```
+   BB2_APP_LAUNCH=preview docker-compose up -d
+```
+
 To see the application in action open your browser and enter the following URL:
 
 http://localhost:3000
@@ -64,7 +74,7 @@ Please review our SDK documentation for more information and additional features
 
 Debugging server component
 --------------------------
-debugpy remote debugging enabled on port 5678 for server in docker compose, developer can attach to server from IDE e.g. vscode.
+debugpy remote debugging enabled on port 10678 for server in docker compose, developer can attach to server from IDE e.g. vscode.
 
 Error Responses and handling:
 -----------------------------

client/.eslintrc

@@ -0,0 +1,5 @@
+{
+    "extends": [
+      "react-app"
+    ]
+  }

client/Dockerfile

@@ -1,4 +1,8 @@
-FROM node:20-slim
+FROM node:22
+
+ARG BB2-APP_LAUNCH
+
+ENV BB2_APP_LAUNCH=${BB2_APP_LAUNCH:-"start"}
 
 LABEL version="1.1"
 LABEL description="Demo of a Medicare claims data sample app"
@@ -13,7 +17,9 @@ RUN apt-get install python3 -y
 RUN apt-get install python3-pip -y
 
 RUN yarn install
+# comment build out if not going to use preview to save build time
+RUN yarn build
 
 EXPOSE 3000
 
-CMD ["yarn","start"]
+CMD ["sh", "-c", "yarn $BB2_APP_LAUNCH"]

client/README.md

@@ -1,6 +1,7 @@
-# Getting Started with Create React App
+# Getting Started with Vite
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+This project was created with build tool [Vite](https://v2.vitejs.dev/).
+Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects.
 
 ## Available Scripts
 
@@ -14,11 +15,6 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
-### `yarn test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
 ### `yarn build`
 
 Builds the app for production to the `build` folder.\
@@ -27,20 +23,20 @@ It correctly bundles React in production mode and optimizes the build for the be
 The build is minified and the filenames include the hashes.\
 Your app is ready to be deployed!
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+### `yarn preview`
 
-### `yarn eject`
+Locally preview the production build. Do not use this as a production server as it's not designed for it.
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+## Learn More
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+You can learn more in the [Vite documentation: Getting Started](https://v2.vitejs.dev/guide/).
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+To learn React, check out the [React documentation](https://reactjs.org/).
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+### `yarn test`
 
-## Learn More
+Run vitest based test (need spinning up the app to pass the tests)
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+### `yarn coverage`
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+Run vitest based test with coverage (need spinning up the app to pass the tests)

client/eslint.config.mjs

@@ -0,0 +1,17 @@
+import { fixupConfigRules } from "@eslint/compat";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default [{
+    ignores: [],
+}, ...fixupConfigRules(compat.extends("react-app"))];

client/eslintrc.json

@@ -0,0 +1,25 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "@typescript-eslint/no-explicit-any": "off"
+    }
+}

client/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Blue Button 2.0 Sample App"
+    />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Medicare claims data sample app</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>