ForestGEO Application Rework with NextJS Framework

Introducing NextJS v14 into ForestGEO application: ForestGEO application is moving to NextJS in order to ensure long-term application stability and support and improved baseline application design and mechanics. Changelog: - Some refactoring to existing application introduced by Webstorm IDE (code optimization) --> minor indent changes, etc. only NextJS ForestGEO Application Changes: - New routing structure implemented - NextAuth authentication system implemented --> using Azure AD & Azure App Registration, and NextJS Middleware - Dashboard, File Hub, and Data Hub views implemented - Login splash page implemented (background image carousel implemented) - Azure Storage connection and integration into File Hub implemented (user can view existing files in Azure Storage, upload, and download) - Azure SQL instance connection and data view implemented, placed in Data Hub (data is read-only, but table view and display implemented - File upload system implemented, building on existing application's error validation system and adding additional confirmation dialogs and formatting in order to ensure compliance with error validation system - Properties Hub implemented --> new UI to allow user modification of fixed data attributes (Attributes, Census, Personnel, Quadrats, and Species tables) - Table structure redefined using MUI X Data Grid to allow table editing and CRUD modification (CRUD system implemented and API structure redefined to allow CRUD modifications to Azure SQL tables - Azure SQL database schema redefined per ForestGEO standards and application reconfigured to use new schema
Smithsonian · Dec 13, 2023 · e5de37e · e5de37e
1 parent c6c754f
commit e5de37e
Show file tree

Hide file tree

Showing 134 changed files with 14,168 additions and 521 deletions.
diff --git a/.github/workflows/azure-static-web-apps-agreeable-wave-08a957210.yml b/.github/workflows/azure-static-web-apps-agreeable-wave-08a957210.yml
@@ -5,7 +5,7 @@ on:
     branches:
       - main
   pull_request:
-    types: [opened, synchronize, reopened, closed]
+    types: [ opened, synchronize, reopened, closed ]
     branches:
       - main
 

diff --git a/.github/workflows/frontend.yml b/.github/workflows/frontend.yml
@@ -3,14 +3,14 @@ name: Build and test Frontend
 on:
   pull_request:
     paths:
-    - 'FrontEnd/**'
-    - '.github/**'
+      - 'FrontEnd/**'
+      - '.github/**'
   push:
     branches:
       - main
     paths:
-    - 'FrontEnd/**'
-    - '.github/**'
+      - 'FrontEnd/**'
+      - '.github/**'
 
 jobs:
   build:
@@ -19,44 +19,44 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-latest, windows-latest]
-        node-version: [16.x]
+        os: [ ubuntu-latest, windows-latest ]
+        node-version: [ 16.x ]
 
     steps:
-    - uses: actions/[email protected]
-
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-
-    - name: Install dependencies
-      run: |
-        pwd
-        cd FrontEnd
-        npm install
-
-    - name: Run linter
-      run: |
-        cd FrontEnd
-        npm run lint
-
-    - name: Run type checker
-      run: |
-        cd FrontEnd
-        npm run tsc
-
-    - name: Run tests
-      run: |
-        cd FrontEnd
-        npm test -- --passWithNoTests
-
-    - name: Build FrontEnd
-      run: |
-        cd FrontEnd
-        npm run build
-
-    - name: Build storybook
-      run: |
-        cd FrontEnd
-        npm run build-storybook
+      - uses: actions/[email protected]
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: |
+          pwd
+          cd FrontEnd
+          npm install
+
+      - name: Run linter
+        run: |
+          cd FrontEnd
+          npm run lint
+
+      - name: Run type checker
+        run: |
+          cd FrontEnd
+          npm run tsc
+
+      - name: Run tests
+        run: |
+          cd FrontEnd
+          npm test -- --passWithNoTests
+
+      - name: Build FrontEnd
+        run: |
+          cd FrontEnd
+          npm run build
+
+      - name: Build storybook
+        run: |
+          cd FrontEnd
+          npm run build-storybook
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-/.idea
+/.idea
+**/.DS_Store
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -1,12 +1,12 @@
 {
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Attach to Node Functions",
-            "type": "node",
-            "request": "attach",
-            "port": 9229,
-            "preLaunchTask": "func: host start"
-        }
-    ]
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Attach to Node Functions",
+      "type": "node",
+      "request": "attach",
+      "port": 9229,
+      "preLaunchTask": "func: host start"
+    }
+  ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,8 +1,8 @@
 {
-    "azureFunctions.deploySubpath": "api",
-    "azureFunctions.postDeployTask": "npm install (functions)",
-    "azureFunctions.projectLanguage": "TypeScript",
-    "azureFunctions.projectRuntime": "~4",
-    "debug.internalConsoleOptions": "neverOpen",
-    "azureFunctions.preDeployTask": "npm prune (functions)"
+  "azureFunctions.deploySubpath": "api",
+  "azureFunctions.postDeployTask": "npm install (functions)",
+  "azureFunctions.projectLanguage": "TypeScript",
+  "azureFunctions.projectRuntime": "~4",
+  "debug.internalConsoleOptions": "neverOpen",
+  "azureFunctions.preDeployTask": "npm prune (functions)"
 }
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -1,43 +1,43 @@
 {
-	"version": "2.0.0",
-	"tasks": [
-		{
-			"type": "func",
-			"command": "host start",
-			"problemMatcher": "$func-node-watch",
-			"isBackground": true,
-			"dependsOn": "npm build (functions)",
-			"options": {
-				"cwd": "${workspaceFolder}/api"
-			}
-		},
-		{
-			"type": "shell",
-			"label": "npm build (functions)",
-			"command": "npm run build",
-			"dependsOn": "npm install (functions)",
-			"problemMatcher": "$tsc",
-			"options": {
-				"cwd": "${workspaceFolder}/api"
-			}
-		},
-		{
-			"type": "shell",
-			"label": "npm install (functions)",
-			"command": "npm install",
-			"options": {
-				"cwd": "${workspaceFolder}/api"
-			}
-		},
-		{
-			"type": "shell",
-			"label": "npm prune (functions)",
-			"command": "npm prune --production",
-			"dependsOn": "npm build (functions)",
-			"problemMatcher": [],
-			"options": {
-				"cwd": "${workspaceFolder}/api"
-			}
-		}
-	]
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "func",
+      "command": "host start",
+      "problemMatcher": "$func-node-watch",
+      "isBackground": true,
+      "dependsOn": "npm build (functions)",
+      "options": {
+        "cwd": "${workspaceFolder}/api"
+      }
+    },
+    {
+      "type": "shell",
+      "label": "npm build (functions)",
+      "command": "npm run build",
+      "dependsOn": "npm install (functions)",
+      "problemMatcher": "$tsc",
+      "options": {
+        "cwd": "${workspaceFolder}/api"
+      }
+    },
+    {
+      "type": "shell",
+      "label": "npm install (functions)",
+      "command": "npm install",
+      "options": {
+        "cwd": "${workspaceFolder}/api"
+      }
+    },
+    {
+      "type": "shell",
+      "label": "npm prune (functions)",
+      "command": "npm prune --production",
+      "dependsOn": "npm build (functions)",
+      "problemMatcher": [],
+      "options": {
+        "cwd": "${workspaceFolder}/api"
+      }
+    }
+  ]
 }
diff --git a/BackEnd/README.md b/BackEnd/README.md
@@ -1,26 +1,38 @@
 ## Azure Static Web Apps service
-The project test app is currently deployed using Azure Static Web Apps service
-and can be accessed at 
+
+The project test app is currently deployed using Azure Static Web Apps service and can be accessed
+at
 
 https://agreeable-wave-08a957210.1.azurestaticapps.net/
 
-When we get an update on subscription we can use, the URL will be changed.
-During the deployment process Azure automatically creates GitHub workflow file that defines CI/CD (Continuous integration/deployment). For example, when the code is updated and PR is created, GitHub automatically creates a copy of the app with the updated code and provides URL for that so it is easy to test the changes and compare updated app with the one in production.
-
-### **Useful links:**  
+When we get an update on subscription we can use, the URL will be changed. During the deployment
+process Azure automatically creates GitHub workflow file that defines CI/CD (Continuous
+integration/deployment). For example, when the code is updated and PR is created, GitHub
+automatically creates a copy of the app with the updated code and provides URL for that so it is
+easy to test the changes and compare updated app with the one in production.
+
+### **Useful links:**
+
 [Static Web Apps](https://azure.microsoft.com/en-us/services/app-service/static/#overview)  
 [Quickstart: Building your first static site with Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=vanilla-javascript)
 
 ### **Brief Instruction**
-To deploy an app Azure subscription is required (free limited student subscription available - https://azure.microsoft.com/en-us/free/students/)  
-In the main dashboard search for Static Web Apps resource, click +Create and fill all necessary information, including GitHub repository, branch
-and choose correct build preset (React Framework for ForestGEO project).  
-**Important:** you need to be a repository owner or an administrator to deploy it. The easiest way to test the service is to fork a repository and deploy it.
 
-### Instruction for local development  
+To deploy an app Azure subscription is required (free limited student subscription
+available - https://azure.microsoft.com/en-us/free/students/)  
+In the main dashboard search for Static Web Apps resource, click +Create and fill all necessary
+information, including GitHub repository, branch and choose correct build preset (React Framework
+for ForestGEO project).  
+**Important:** you need to be a repository owner or an administrator to deploy it. The easiest way
+to test the service is to fork a repository and deploy it.
+
+### Instruction for local development
+
 (based on https://docs.microsoft.com/en-us/azure/static-web-apps/local-development)
+
 1. Install necessary packages in Api and FrontEnd folders (e.g. cd /Api && npm install)
-2. Install static-web-apps-cli in the FrontEnd folder (cd /FrontEnd && npm install @azure/static-web-apps-cli)
+2. Install static-web-apps-cli in the FrontEnd folder (cd /FrontEnd && npm install
+   @azure/static-web-apps-cli)
 3. Go to Api folder and execute 'npm run watch' command
 4. In the new terminal execute 'swa start' command
 5. Server should be up and running at http://localhost:4280 
diff --git a/FrontEnd/.prettierrc.json b/FrontEnd/.prettierrc.json
@@ -2,5 +2,5 @@
   "trailingComma": "es5",
   "tabWidth": 2,
   "singleQuote": true,
-  "endOfLine":"auto"
+  "endOfLine": "auto"
 }
diff --git a/FrontEnd/.storybook/preview.js b/FrontEnd/.storybook/preview.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import theme from '../src/theme';
-import { ThemeProvider, StylesProvider } from '@mui/material/styles';
+import {StylesProvider, ThemeProvider} from '@mui/material/styles';
 
 const withThemeProvider = (Story, context) => {
   const ourThemeProvider = (
@@ -13,7 +13,7 @@ const withThemeProvider = (Story, context) => {
   } else {
     const generateClassName = (rule, styleSheet) =>
       `${styleSheet?.options.classNamePrefix}-${rule.key}`;
-
+    
     return (
       <StylesProvider generateClassName={generateClassName}>
         {ourThemeProvider}
@@ -25,7 +25,7 @@ const withThemeProvider = (Story, context) => {
 export const decorators = [withThemeProvider];
 
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
+  actions: {argTypesRegex: '^on[A-Z].*'},
   controls: {
     matchers: {
       color: /(background|color)$/i,

diff --git a/FrontEnd/.vscode/extensions.json b/FrontEnd/.vscode/extensions.json
@@ -1,15 +1,15 @@
 {
-    // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
-    // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
-  
-    // List of extensions which should be recommended for users of this workspace.
-    "recommendations": [
-      // https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
-      "dbaeumer.vscode-eslint",
-      // https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
-      "esbenp.prettier-vscode"
-    ],
-    // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
-    "unwantedRecommendations": []
-  }
+  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": [
+    // https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
+    "dbaeumer.vscode-eslint",
+    // https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
+    "esbenp.prettier-vscode"
+  ],
+  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+  "unwantedRecommendations": []
+}
 
diff --git a/FrontEnd/.vscode/launch.json b/FrontEnd/.vscode/launch.json
@@ -1,15 +1,15 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "edge",
-            "request": "launch",
-            "name": "Launch Edge against localhost",
-            "url": "http://localhost:3000",
-            "webRoot": "${workspaceFolder}"
-        }
-    ]
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "edge",
+      "request": "launch",
+      "name": "Launch Edge against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
 }