Merge pull request #294 from oss-slu/FRONTEND-REFACTOR

Frontend refactor. Solves #179 and advances #249

Author: CharlieWells13

frontend/.dockerignore

@@ -17,4 +17,11 @@ Thumbs.db
 .gitignore
 
 # Secrets
-.env
+.env
+
+# Dev files
+cypress/
+.eslintrc.json
+.prettierrc
+craco.config.js
+cypress.config.js

frontend/DroneWorld

@@ -17,7 +17,7 @@ module.exports = defineConfig({
     env: {
       BACKEND_URL: backendUrl,
     },
-    setupNodeEvents(on, config) {
+    setupNodeEvents(on) {
       on('task', {
         verifyLocalMockReportFromTimestamp({ uiTimestamp }) {
           const match = (uiTimestamp || '').match(

frontend/babel.config.js

@@ -1,5 +1,12 @@
 // Cypress Test for E2E Frontend Flow
 describe('DroneWorld Application Flow', () => {
+  it('should handle direct /dashboard access without route state', () => {
+    cy.visit('/dashboard');
+    cy.contains('No Report Selected').should('be.visible');
+    cy.contains('button', 'Go to Reports').click();
+    cy.url().should('include', '/reports');
+  });
+
   it('should complete the full scenario configuration flow', () => {
     const backendUrl = Cypress.env('BACKEND_URL');
     const finalBackendUrl = backendUrl || 'http://localhost:5000';
@@ -20,6 +27,7 @@ describe('DroneWorld Application Flow', () => {
     cy.intercept('GET', `${finalBackendUrl}/list-reports`).as('listReports');
     cy.intercept('GET', `${finalBackendUrl}/currentRunning`).as('getBackendStatus');
     cy.intercept('POST', `${finalBackendUrl}/addTask`).as('addTask');
+    cy.intercept('POST', `${finalBackendUrl}/list-folder-contents/*`).as('listFolderContents');
 
     // Step 1: Visit the landing page
     cy.visit('/');
@@ -109,5 +117,25 @@ describe('DroneWorld Application Flow', () => {
     cy.contains('[role="tooltip"]', 'Download report (.zip)').should('be.visible');
     cy.get('@downloadButton').click();
     cy.get('@windowOpen').should('have.been.called');
+
+    // Step 11: Preview the newest batch report and verify dashboard navigation/rendering
+    cy.get('@latestBatchTitle')
+      .closest('.MuiCard-root')
+      .within(() => {
+        cy.contains('button', 'Preview').should('be.visible').click();
+      });
+
+    cy.wait('@listFolderContents').then(({ response }) => {
+      expect(response, 'list-folder-contents response').to.exist;
+      expect(response.statusCode).to.eq(200);
+    });
+
+    cy.url().should('include', '/dashboard');
+    cy.contains(/Detailed Report/, { timeout: 10000 }).should('be.visible');
+    cy.contains('Interactable HTMLs').should('be.visible');
+
+    // Step 12: Use dashboard Back action and verify return to reports
+    cy.contains('Back').should('be.visible').click();
+    cy.url().should('include', '/reports');
   });
 });

frontend/cypress.config.js

@@ -4,36 +4,25 @@
   "private": true,
   "dependencies": {
     "@craco/craco": "^7.1.0",
-    "@date-io/date-fns": "2.16.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@mdi/js": "^7.4.47",
-    "@mdi/react": "^1.6.1",
     "@mui/icons-material": "^5.11.0",
     "@mui/lab": "5.0.0-alpha.118",
     "@mui/material": "^5.11.5",
     "@mui/styles": "^5.11.2",
     "@mui/system": "5.15.20",
     "@mui/x-date-pickers": "5.0.17",
     "@react-google-maps/api": "2.18.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/user-event": "^13.5.0",
-    "axios": "^1.2.3",
     "cesium": "^1.126.0",
     "craco-cesium": "^1.2.0",
-    "date-fns": "2.29.3",
     "dayjs": "^1.11.7",
-    "html-webpack-plugin": "^5.6.0",
-    "install": "^0.13.0",
+    "html-webpack-plugin": "^5.6.6",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.0.5",
     "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",
-    "redux": "^4.2.0",
-    "resium": "^1.17.3",
-    "web-vitals": "^2.1.4"
+    "resium": "^1.17.3"
   },
   "scripts": {
     "start": "craco start",
@@ -74,13 +63,13 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^16.1.0",
-    "babel-jest": "^29.7.0",
     "cypress": "^15.5.0",
+    "dotenv": "^10.0.0",
     "eslint": "^8.32.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-react": "^7.32.1",
-    "jest": "^27.5.1",
     "prettier": "2.8.3"
   }
 }

frontend/cypress/e2e/app.cy.js

@@ -5,7 +5,7 @@ import Home from './pages/Home';
 import Wizard from './pages/Wizard';
 import FuzzyDashboard from './components/FuzzyDashboard';
 import ReportDashboard from './components/ReportDashboard';
-import LandingPage from './LandingPage';
+import LandingPage from './pages/LandingPage';
 import AboutUs from './pages/AboutUs';
 import Stream from './pages/Stream';
 import NavigationBar from './pages/NavigationBar';
@@ -24,8 +24,6 @@ function App() {
             <Route exact path='/simulation' element={<Wizard />} />
             <Route exact path='/dashboard' element={<FuzzyDashboard />} />
             <Route exact path='/reports' element={<ReportDashboard />} />
-            {/* Backwards compatibility for old deep links */}
-            <Route exact path='/report-dashboard' element={<ReportDashboard />} />
             <Route exact path='/' element={<LandingPage />} />
             <Route exact path='/aboutus' element={<AboutUs />} />
             <Route exact path='/stream' element={<Stream />} />

frontend/package.json

@@ -40,7 +40,7 @@ export default function DroneConfiguration(droneData) {
   const { mainJson, setMainJson } = useMainJson();
   const { name = "", id = "", droneObject = {}, resetName = () => {}, droneJson = () => {} } = droneData || {};
 
-  const [selectedLoc, setSelectedLoc] = React.useState('GeoLocation');
+  const [selectedLoc] = React.useState('GeoLocation');
   const [selectedModel, setSelectedModel] = React.useState('');
   const [selectedDroneType, setselectedDroneType] = React.useState(droneTypes[1].value);
   const [snackBarState, setSnackBarState] = React.useState({ open: false });
@@ -68,7 +68,6 @@ export default function DroneConfiguration(droneData) {
         param: []
       }
     };
-    //return { ...defaults, ...(droneData?.getDroneBasedOnIndex?.(id) || {}), ...droneObject };
     const mergedDrone = { ...defaults, ...(droneData?.getDroneBasedOnIndex?.(id) || {}), ...droneObject };
     if (mergedDrone.MissionValue == null) {
       mergedDrone.MissionValue = mergedDrone.Mission?.name ?? defaults.Mission.name;
@@ -133,8 +132,6 @@ export default function DroneConfiguration(droneData) {
 
 
   const handleMissionChange = (event) => {
-    //setDrone(prevState => ({
-    //  ...prevState,
     const missionName = event.target.value;
     setDrone(prevState => {
       const updatedDrone = {
@@ -157,8 +154,6 @@ export default function DroneConfiguration(droneData) {
       ...currentDrone,
       MissionValue: missionName,
       Mission: {
-        //...prevState.Mission,
-        //name: event.target.value
         ...(currentDrone.Mission || {}),
         name: missionName,
         param: Array.isArray(currentDrone?.Mission?.param) ? currentDrone.Mission.param : []
@@ -337,4 +332,4 @@ export default function DroneConfiguration(droneData) {
       </Box>
     </div>
   );
-}
+}