Convert dashboard to functional (#534)

* Convert Dashboard to functional component it would be shorter to list what didn't change. Everything changes? useEffect replacing compnentDidMount No more weird handling of filter values, let API filtering do it's job Cleaned up small behaviors around button enabling State use makes way more sense now dashboard_id is sanely synced when direct navigation via URL don't wait for promise repsonse to set modal open state
ibutsu · Jan 9, 2025 · 326b0cc · 326b0cc
1 parent 7214327
commit 326b0cc
Show file tree

Hide file tree

Showing 8 changed files with 451 additions and 579 deletions.
diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
@@ -21,8 +21,8 @@ const compat = new FlatCompat({
 
 export default [
     {
-        files: ['src/*', 'cypress/*'],
-        ignores: ['node_modules/*'],
+        files: ['src/*', 'cypress/*', 'bin/*'],
+        ignores: ['node_modules/*', 'build/*'],
     },
     ...compat.extends(
         'eslint:recommended',

diff --git a/frontend/src/app.js b/frontend/src/app.js
@@ -5,7 +5,7 @@ import ElementWrapper from './components/elementWrapper';
 
 import { Navigate, Route, Routes } from 'react-router-dom';
 
-import { Dashboard } from './dashboard';
+import Dashboard from './dashboard';
 import { ReportBuilder } from './report-builder';
 import { RunList } from './run-list';
 import { Run } from './run';
@@ -48,12 +48,12 @@ export class App extends React.Component {
           <Route
             path="dashboard/:dashboard_id"
             element={
-              <ElementWrapper routeElement={Dashboard} eventEmitter={this.eventEmitter} />
+              <Dashboard />
             }
           />
           <Route
             path="dashboard/*"
-            element={<ElementWrapper routeElement={Dashboard} eventEmitter={this.eventEmitter} />}
+            element={<Dashboard />}
           />
 
 

diff --git a/frontend/src/components/ibutsu-header.js b/frontend/src/components/ibutsu-header.js
@@ -217,7 +217,12 @@ export class IbutsuHeader extends React.Component {
   }
 
   onProjectSelect = (_event, value) => {
-    const { primaryObject, setPrimaryObject, setPrimaryType } = this.context;
+    const {
+      primaryObject,
+      setPrimaryObject,
+      setPrimaryType,
+      setDefaultDashboard,
+    } = this.context;
     if (primaryObject?.id === value?.id) {
       this.setState({
         isProjectSelectorOpen: false,
@@ -227,8 +232,10 @@ export class IbutsuHeader extends React.Component {
       return;
     }
     // update context
-    setPrimaryObject(value)
-    setPrimaryType('project')
+    setPrimaryObject(value);
+    setPrimaryType('project');
+    setDefaultDashboard(value.default_dashboard_id);
+
     // update state
     this.setState({
       selectedProject: value,

diff --git a/frontend/src/components/sidebar.js b/frontend/src/components/sidebar.js
@@ -45,7 +45,7 @@ const IbutsuSidebar = (props) => {
             });
             setViews(data.widgets)})
         .catch(error => console.log(error));
-        }
+    }
 
     const { primaryType, primaryObject } = context;
     if ( primaryType == 'project' && primaryObject  ) {

diff --git a/frontend/src/components/user-dropdown.js b/frontend/src/components/user-dropdown.js
@@ -49,9 +49,8 @@ export class UserDropdown extends React.Component {
   };
 
   logout = () => {
-    const { setPrimaryObject, setActiveDashboard } = this.context;
+    const { setPrimaryObject } = this.context;
     setPrimaryObject();
-    setActiveDashboard();
     AuthService.logout();
     window.location = '/';
   }