Merge pull request #206 from CBIIT/mvp-2

Sync MVP-2 (M2) with MVP-2 (M3)

.env.example

@@ -5,6 +5,7 @@ REACT_APP_NIH_REDIRECT_URL=""
 
 # API URLs
 REACT_APP_BACKEND_API=""
+REACT_APP_DEV_TIER=""
 
 # Optional - Specify default port
 # PORT=3010

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,11 @@
+### Overview
+
+N/A
+
+### Change Details (Specifics)
+
+N/A
+
+### Related Ticket(s)
+
+N/A

.github/workflows/code-certify.yml

@@ -0,0 +1,36 @@
+name: Certify Changes
+
+on:
+  pull_request:
+    branches: "*"
+    paths:
+      - "src/**"
+      - "public/**"
+      - "*.json"
+      - "*.js"
+      - "*.jsx"
+      - "*.ts"
+      - "*.tsx"
+
+permissions:
+  contents: read
+
+jobs:
+  certify:
+    name: Certify Build Changes
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+
+      - name: Install Dependencies
+        run: npm ci --legacy-peer-deps
+
+      - name: Run Typecheck
+        run: npm run check:ci
+
+      - name: Run Jest
+        run: npm run test:ci
+
+      - name: Run Linter
+        run: npm run lint:ci

README.md

@@ -5,14 +5,14 @@
 CRDC Data Hub is a React application designed to provide a user-friendly interface for accessing and managing data using various technologies and tools. This project utilizes TypeScript, React v18, Material-UI v5, ESLint, React Router DOM, GraphQL, and Apollo.
 
 
-
 ## Installation
 
 To run the CRDC Data Hub project locally, follow these steps:
 
 1. Clone the repository
-2. Navigate to the project directory 
+2. Navigate to the project directory
 3. Install the dependencies: `npm install --legacy-peer-deps`
 4. Start the development server: `npm start`
 5. Open your browser and visit `http://localhost:3000` to access the application.
 
+Please see the instructions in [nginx/README.md](./nginx/README.md) for configuring Nginx.

conf/inject.template.js

@@ -1,4 +1,4 @@
-/* eslint-disable */ 
+/* eslint-disable */
 window.injectedEnv = {
     NIH_CLIENT_ID: '${NIH_CLIENT_ID}',
     NIH_AUTHORIZE_URL: '${NIH_AUTHORIZE_URL}',
@@ -22,6 +22,7 @@ window.injectedEnv = {
     REACT_APP_NIH_REDIRECT_URL: '${REACT_APP_NIH_REDIRECT_URL}',
     REACT_APP_BACKEND_PUBLIC_API: '${REACT_APP_BACKEND_PUBLIC_API}',
     REACT_APP_AUTH: '${REACT_APP_AUTH}',
+    REACT_APP_DEV_TIER: '${DEV_TIER}',
     PUBLIC_ACCESS: '${PUBLIC_ACCESS}',
     NODE_LEVEL_ACCESS:'${NODE_LEVEL_ACCESS}',
     NODE_LABEL: '${NODE_LABEL}'

nginx/README.md

@@ -0,0 +1,134 @@
+# NGINX Installation For Mac
+
+Follow this guide to install and configure Nginx for usage with this project. For a understanding of the overall architecture, see the [Deployment Architecture](#deployment-architecture) section.
+
+Install NGINX:
+
+```bash
+brew install nginx
+```
+
+Remove Default NGINX Configuration (Optional)
+
+```bash
+rm /usr/local/etc/nginx/nginx.conf.default
+rm /usr/local/etc/nginx/nginx.conf
+```
+
+Clone Provided Configuration
+
+```bash
+cp ./nginx.conf /usr/local/etc/nginx/
+```
+
+> **Warning**: Do not confuse the [nginx.conf](./nginx.conf) file in this directory with the one in [conf/nginx.conf](../conf/nginx.conf). The latter is used for
+> production deployments.
+
+Start/Restart NGINX
+
+```bash
+brew services restart nginx
+```
+
+# React App Configuration
+
+See the provided [.env](../.env.example) file for the required environment variables. At a minimum, include:
+
+```properties
+# ... other variables
+
+REACT_APP_BACKEND_API="http://localhost:4010/api/graphql"
+
+PORT=3010
+
+# ... other variables
+```
+
+> **Note**: After modifying the .env file, you must completely restart the React app for the changes to take effect.
+
+# Deployment Architecture
+
+## Semi-Hosted Deployment (Recommended)
+
+A deployment architecture diagram is shown below using the frontend deployed locally and the backend deployed on the hosted DEV/DEV2 tiers. This avoids the need to install and configure the entire backend tech stack.
+
+```mermaid
+---
+title: Semi-Hosted Deployment Architecture
+---
+flowchart TD
+    id0["Browser – You"]
+    id1["Nginx – port:4010"]
+    id2["FE – port:3010"]
+    id3["DEV Backend"]
+    id4["DEV AuthZ"]
+    id5["DEV AuthN"]
+
+    id0 <--"https://localhost:4010"--> id1
+    subgraph lh[" "]
+        subgraph nx["Nginx – Reverse Proxy"]
+          id1
+        end
+        subgraph be["DEV/DEV2 Hosted Backend Services"]
+          id1 --"/api/graphql"---> id3
+          id1 --"/api/authn/"---> id4
+          id1 --"/api/authz/"---> id5
+        end
+        subgraph fe["Frontend Services"]
+          id2
+        end
+        id1 <--"*Catch All*"--> fe
+    end
+```
+
+## Local Deployment
+
+An overview of the local deployment architecture is shown below using the following locally hosted tech stack:
+
+- Frontend – <https://github.com/CBIIT/crdc-datahub-ui>
+- Backend – <https://github.com/CBIIT/crdc-datahub-backend>
+- AuthZ – <https://github.com/CBIIT/crdc-datahub-authz>
+- AuthN – <https://github.com/CBIIT/crdc-datahub-authn>
+- MongoDB
+
+Please see the individual repos for installation and configuration instructions.
+
+```mermaid
+---
+title: Local Deployment Architecture
+---
+flowchart TD
+    id0["Browser"]
+    id1["Nginx – port:4010"]
+    id2["FE – port:3010"]
+    id3["BE – port:4020"]
+    id4["AuthZ – port:4030"]
+    id5["AuthN – port:4040"]
+    id6["MongoDB"]
+
+    id0 <--"https://localhost:4010"--> id1
+    subgraph lh[" "]
+        subgraph nx[" "]
+          id1
+        end
+        id1 --"/api/graphql"---> be
+        id1 --"/api/authn/graphql"---> be
+        id1 --"/api/authz/graphql"---> be
+        subgraph be["Backend Services"]
+        direction RL
+          id3
+          id4
+          id5
+          subgraph misc["Misc. Dependencies"]
+            id6
+          end
+          id3-->misc
+          id4-->misc
+          id5-->misc
+        end
+        subgraph fe["Frontend Services"]
+          id2
+        end
+        id1 <--"*Catch All*"--> fe
+    end
+```

nginx/nginx.conf

@@ -0,0 +1,46 @@
+# CRDC-DH NGINX Config
+#
+# Last Modified: October 23, 2023
+# https://github.com/CBIIT/crdc-datahub-ui
+
+# NOTES:
+# - Nginx runs on port 4010
+# - The frontend runs on port 3010
+# - Modify the proxy_pass URL to point to the DEV or DEV2 tiers
+
+worker_processes  1;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    server {
+        listen       0.0.0.0:4010;
+        server_name  localhost;
+
+        # Authn
+        location /api/authn/ {
+            # proxy_pass http://localhost:4030/api/authn/;
+            proxy_pass "https://hub-dev2.datacommons.cancer.gov/api/authn/";
+        }
+
+        # AuthZ
+        location /api/authz/ {
+            # proxy_pass http://localhost:4020/api/authz/;
+            proxy_pass "https://hub-dev2.datacommons.cancer.gov/api/authz/";
+        }
+
+        # Backend
+        location /api/graphql {
+            # proxy_pass http://localhost:4040/api/graphql;
+            proxy_pass "https://hub-dev2.datacommons.cancer.gov/api/graphql";
+        }
+
+        # Frontend
+        location / {
+            allow all;
+            proxy_pass http://localhost:3010/;
+        }
+    }
+}

package.json

@@ -19,9 +19,11 @@
     "@types/jest": "^27.5.2",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
-    "data-model-navigator": "^1.1.2",
+    "data-model-navigator": "1.1.10",
     "dayjs": "^1.11.8",
+    "file-saver": "^2.0.5",
     "graphql": "^16.7.1",
+    "jszip": "^3.10.1",
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
     "react": "^18.2.0",
@@ -45,10 +47,12 @@
     "build": "react-scripts build",
     "postbuild": "rm ./build/models/.gitkeep",
     "test": "TZ=UTC react-scripts test",
+    "test:ci": "TZ=UTC CI=true react-scripts test --passWithNoTests",
     "eject": "react-scripts eject",
     "lint": "eslint . --ignore-path .gitignore",
     "lint:fix": "eslint --fix . --ignore-path .gitignore",
-    "check": "tsc --noEmit"
+    "lint:ci": "eslint . --ignore-path .gitignore --max-warnings 0",
+    "check:ci": "tsc --noEmit"
   },
   "eslintConfig": {
     "extends": [

public/injectEnv.js

@@ -3,4 +3,5 @@ window.injectedEnv = {
   NIH_AUTHORIZE_URL: '',
   NIH_CLIENT_ID: '',
   NIH_REDIRECT_URL: '',
+  REACT_APP_DEV_TIER: ''
 };