v1.4.5 feature updates (#253)

* #227: added search results new page and navbar searchbar item * #227: added search bar function and re-routing * #227: added search people function and result table UI * #227: added a new user result table * #227: updated React Router Dom and updated map json data * #277: added wrapper function component to support router v6 feature * #227: updated props.history.push from old react router v5 * #248: added warning message box to new users about must-read articles * #227: lifted state query up to App component * #227: fixed people search result rendering issue * #245: added member batch update file upload button * #245: added draft member batch update component * #245: added file upload component to project form * #245: added upload success message * #245: added tab style to update/ batch update * #245: fixed components data passing issue * #245: added list of failed to find users * #245: fixed array concat issue * #245: added remove all members button * #245: added 'don't save' button * #245: moved save/reverse button to the top * #245: added button option for full page spinner component * #245: updated taost message to include project link after project personnel update * #245: lock the project when update is ongoing & show banner message * #245: added full page spinner for locked project" * #245: fixed the full page spinner issue * #245: modified style * #245: fixed a typo * #250: added message box to Sliver Keys tab * #250: added new images to slice builder and viewer * #251: updated protected routes with react router v6 * #245: set limit of 300 entries at max for CSV file upload * #245: added a message box on new project form to inform users of full project features * #245: updated messages * #245: fixed tab header rendering issue * #251: fixed pass state issue for site detail page due to router update * #252: added office hour card to Contact Us page" * #250: added helper text for custom images * #251: fixed url param issue due to router update * #245: updated project user table delete column rendering
fabric-testbed · Apr 20, 2023 · e1c618d · e1c618d
1 parent aab1805
commit e1c618d
Show file tree

Hide file tree

Showing 41 changed files with 1,236 additions and 474 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fabric-portal",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
@@ -13,6 +13,7 @@
     "@testing-library/user-event": "^7.2.1",
     "axios": "^0.21.1",
     "bootstrap": "^4.5.2",
+    "csv": "^6.2.8",
     "cytoscape": "^3.19.0",
     "cytoscape-compound-drag-and-drop": "^1.0.0",
     "cytoscape-cose-bilkent": "^4.1.0",
@@ -36,13 +37,15 @@
     "react-dom": "^16.14.0",
     "react-dropzone": "^14.2.3",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.9.0",
     "react-scripts": "^5.0.0",
     "react-simple-maps": "^2.3.0",
     "react-toastify": "^6.2.0",
     "reactstrap": "^8.6.0",
     "sass": "^1.32.13",
+    "stream": "0.0.2",
     "styled-components": "^5.3.1",
+    "util": "^0.12.5",
     "uuid": "^8.3.2"
   },
   "scripts": {

diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { getWhoAmI } from "./services/peopleService.js";
 import { getCurrentUser } from "./services/peopleService.js";
 import { getActiveMaintenanceNotice } from "./services/announcementService.js";
@@ -19,12 +19,13 @@ import PublicUserProfile from "./components/UserProfile/PublicUserProfile.jsx";
 import SiteDetailPage from "./components/Resource/SiteDetailPage.jsx";
 import NotFound from "./pages/NotFound";
 import Help from "./pages/Help";
+import SearchResults from "./pages/SearchResults.jsx";
 import Header from "./components/Header";
 import Banner from "./components/common/Banner";
 import Footer from "./components/Footer";
 import SessionTimeoutModal from "./components/Modals/SessionTimeoutModal";
 import { toast, ToastContainer } from "react-toastify";
-import ProtectedRoute from "./components/common/ProtectedRoute";
+import ProtectedRoutes from "./components/common/ProtectedRoutes";
 import "./styles/App.scss";
 
 class App extends React.Component {
@@ -33,6 +34,7 @@ class App extends React.Component {
     activeNotices: [],
     showSessionTimeoutModal1: false,
     showSessionTimeoutModal2: false,
+    searchQuery: ""
   };
 
   async componentDidMount() {
@@ -91,12 +93,21 @@ class App extends React.Component {
     this.setState({ userStatus: localStorage.getItem("userStatus") });
   }
 
+  handleQueryChange = (e) => {
+    this.setState({ searchQuery: e.target.value });
+  }
+
   render() {
-    const { showSessionTimeoutModal1, showSessionTimeoutModal2 } = this.state;
+    const { userStatus, searchQuery, 
+      showSessionTimeoutModal1, showSessionTimeoutModal2 } = this.state;
     return (
       <div className="App">
         <Router>
-          <Header userStatus={this.state.userStatus} />
+          <Header
+            userStatus={userStatus}
+            searchQuery={searchQuery}
+            onQueryChange={this.handleQueryChange}
+          />
           { this.state.activeNotices.length > 0 && 
             this.state.activeNotices.map((notice, index) => 
               <Banner
@@ -119,25 +130,33 @@ class App extends React.Component {
               timeLeft={60000}
             />
           }
-          <Switch>
-            <Route path="/" component={Home} exact />
-            <Route path="/login" component={Home} />
-            <Route path="/logout" component={Home} />
-            <Route path="/aup" component={AUP} />
-            <Route path="/sites/:id" component={SiteDetailPage} />
-            <Route path="/cookie-policy" component={CookiePolicy} />
-            <Route path="/privacy-policy" component={PrivacyPolicy} />
-            <Route path="/signup/:id" component={Signup} />
-            <Route path="/resources" component={Resources} />
-            <Route path="/help" component={Help} />
-            <ProtectedRoute path="/slices/:slice_id,:project_id" component={SliceViewer} />
-            <ProtectedRoute path="/new-slice/:project_id" component={NewSliceForm} />
-            <ProtectedRoute path="/projects/:id" component={ProjectForm} />
-            <ProtectedRoute path="/experiments" component={Experiments} />
-            <ProtectedRoute path="/users/:id" component={PublicUserProfile} />
-            <ProtectedRoute path="/user" component={User} />
-            <Route component={NotFound} />
-          </Switch>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/login" element={<Home />} />
+            <Route path="/logout" element={<Home />} />
+            <Route path="/aup" element={<AUP />} />
+            <Route path="/sites/:id" element={<SiteDetailPage />} />
+            <Route path="/cookie-policy" element={<CookiePolicy />} />
+            <Route path="/privacy-policy" element={<PrivacyPolicy />} />
+            <Route path="/signup/:id" element={<Signup />} />
+            <Route path="/resources/:id" element={<Resources />} />
+            <Route path="/help" element={<Help />} />
+            <Route element={<ProtectedRoutes />}>
+                <Route path="/slices/:slice_id/:project_id" element={<SliceViewer />} />
+                <Route path="/new-slice/:project_id" element={<NewSliceForm />} />
+                <Route path="/projects/:id" element={<ProjectForm />} />
+                <Route path="/experiments" element={<Experiments />} />
+                <Route path="/users/:id" element={<PublicUserProfile />} />
+                <Route path="/user" element={<User />} />
+                <Route
+                  path="/search-results"
+                  element={
+                    <SearchResults searchQuery={searchQuery} onQueryChange={this.handleQueryChange}/>
+                  }
+                />
+            </Route>
+            <Route element={<NotFound />} />
+          </Routes>
           <Footer />
           <ToastContainer />
         </Router>

diff --git a/src/components/Experiment/Projects.jsx b/src/components/Experiment/Projects.jsx
@@ -218,11 +218,7 @@ class Projects extends React.Component {
               />
               {projectsCount} results.
             </div>
-            <ProjectsTable
-              projects={projects}
-              type={this.getProjectType()}
-              isFacilityOperator={globalRoles.isFacilityOperator}
-            />
+            <ProjectsTable projects={projects} />
             <Pagination
               itemsCount={projectsCount}
               pageSize={pageSize}