Bug/hot fixes (#367)

* #365: updated bootstrap 5 data toggle/ dismiss syntax * #365: updated style for maintenance banner close button * #365: conditionally render project topics * #365: updated Project Topics component * #365: solved graph layout import issue by upgrading react-cytoscape * #365: updated bootstrap v5 style variables * #365: updated miscellaneous style issues due to package update
fabric-testbed · Jan 15, 2025 · 819ecd4 · 819ecd4
1 parent 00b2568
commit 819ecd4
Show file tree

Hide file tree

Showing 42 changed files with 307 additions and 413 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.8.0",
+  "version": "1.8.3",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
@@ -42,7 +42,7 @@
     "react-bootstrap": "^2.10.5",
     "react-cookie-consent": "^6.2.1",
     "react-copy-to-clipboard": "^5.0.4",
-    "react-cytoscapejs": "^1.2.1",
+    "react-cytoscapejs": "^2.0.0",
     "react-daterange-picker": "^2.0.1",
     "react-datetime-picker": "^3.5.0",
     "react-dom": "^18.3.1",

diff --git a/src/components/Experiment/Projects.jsx b/src/components/Experiment/Projects.jsx
@@ -235,15 +235,13 @@ class Projects extends React.Component {
               onChange={this.handleInputChange}
               onKeyDown={this.raiseInputKeyDown}
             />
-            <div className="input-group-append">
-              <button
-                className="btn btn-outline-primary"
-                type="button"
-                onClick={this.handleProjectsSearch}
-              >
-                Search
-              </button>
-            </div>
+            <button
+              className="btn btn-outline-primary"
+              type="button"
+              onClick={this.handleProjectsSearch}
+            >
+              Search
+            </button>
           </div>
         } 
         {
@@ -273,15 +271,13 @@ class Projects extends React.Component {
               }
               {
                 filterOption === "description" &&
-                  <div className="input-group-append">
-                    <button
-                      className="btn btn-outline-primary"
-                      type="button"
-                      onClick={this.handleProjectsSearch}
-                    >
-                      Search
-                    </button>
-                  </div>
+                  <button
+                    className="btn btn-outline-primary"
+                    type="button"
+                    onClick={this.handleProjectsSearch}
+                  >
+                    Search
+                  </button>
               }
               {
                 filterOption === "community" &&  

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -302,15 +302,13 @@ const Header = (props) => {
             onChange={props.onQueryChange}
             onKeyDown={raiseInputKeyDown}
           />
-           <div className="input-group-append">
-              <button
-                className="btn btn-sm btn-outline-secondary"
-                type="button"
-                onClick={handleSearch}
-              >
-                  <i className="fa fa-search"></i>
-              </button>
-            </div>
+          <button
+            className="btn btn-sm btn-outline-secondary"
+            type="button"
+            onClick={handleSearch}
+          >
+              <i className="fa fa-search"></i>
+          </button>
          </form>
       }
       { props.userStatus !== "active" ? 

diff --git a/src/components/Home/HomepageCarousel.jsx b/src/components/Home/HomepageCarousel.jsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { getActiveCarouselItems } from "../../services/announcementService";
 import Carousel from 'react-bootstrap/Carousel';
-import Button from 'react-bootstrap/Button';
 import Parser from 'html-react-parser';
 
 class HomepageCarousel extends React.Component {

diff --git a/src/components/Modals/SessionTimeoutModal.jsx b/src/components/Modals/SessionTimeoutModal.jsx
@@ -78,7 +78,7 @@ class SessionTimeoutModal extends Component {
           </Modal.Header>
           <Modal.Body>
             <p id="countdownTimerModal">
-              The current session is about to expire in <span className="text-danger font-weight-bold">
+              The current session is about to expire in <span className="text-danger fw-bold">
               {this.parseTimeStr(minutes, seconds)}</span>.
               Please save your work to prevent loss of data.
             </p>

diff --git a/src/components/Project/Community/CommunityTags.jsx b/src/components/Project/Community/CommunityTags.jsx
@@ -40,8 +40,8 @@ class Community extends React.Component {
     const { domain_options, subdomain_options, selected_domain, selected_subdomain } = this.state;
     const { communities, canUpdate } = this.props;
     return (
-      <div>
-        <h5 className="mt-2">Community</h5>
+      <div className="mt-2 mb-3">
+        <h5>Community</h5>
         <Form>
         {
           canUpdate &&         
@@ -98,7 +98,7 @@ class Community extends React.Component {
                 communities.map((community, index) => 
                 <li
                   key={`community-to-add-${index}`}
-                  className="me-2 my-2"
+                  className="me-2"
                 >
                   {community}
                   {

diff --git a/src/components/Project/Community/Funding.jsx b/src/components/Project/Community/Funding.jsx
@@ -84,11 +84,11 @@ class Funding extends React.Component {
       award_amount, agency_options, directorate_options, agency_other } = this.state;
     const { fundings, canUpdate } = this.props;
     return (
-      <div className="pt-2">
-        <h5 className="mt-2">Funding Information</h5>
+      <div className="mt-2 mb-3">
+        <h5>Funding Information</h5>
         <Form>
         {
-          canUpdate &&         
+          canUpdate &&
           <Row>
             <Col xs={2}>
               <Form.Group controlId="fundingAgencySelect">
@@ -181,7 +181,7 @@ class Funding extends React.Component {
                 fundings.map((funding, index) => 
                 <li
                   key={`funding-to-add-${index}`}
-                  className="me-2 my-2"
+                  className="me-2"
                 >
                   { this.parseFundingStr(funding) }
                   {

diff --git a/src/components/Project/Community/ProjectTopics.jsx b/src/components/Project/Community/ProjectTopics.jsx
@@ -1,44 +1,89 @@
 import React from "react";
 
 class ProjectTopics extends React.Component {
-  constructor() {
-    super();
-  }
-  
-  removeTag = (i) => {
-    const newTags = [ ...this.state.tags ];
+  state = {
+    input: "",
+  };
+
+  raiseRemoveTag = (i) => {
+    const newTags = [...this.props.tags];
     newTags.splice(i, 1);
-    this.setState({ tags: newTags });
-  }
+    this.props.onTagChange(newTags);
+  };
 
-  inputKeyDown = (e) => {
+  raiseInputKeyDown = (e) => {
     const val = e.target.value;
-    if (e.key === 'Enter' && val) {
-      if (this.state.tags.find(tag => tag.toLowerCase() === val.toLowerCase())) {
+    if ((e.key === "Enter" || e.key ===",") && val) {
+      if (
+        this.props.tags.find((tag) => tag.toLowerCase() === val.toLowerCase())
+      ) {
         return;
       }
-      this.setState({ tags: [...this.state.tags, val]});
-      this.tagInput.value = null;
-    } else if (e.key === 'Backspace' && !val) {
-      this.removeTag(this.state.tags.length - 1);
+      e.preventDefault();
+      const newTags = [...this.props.tags];
+      newTags.push(val);
+      this.props.onTagChange(newTags);
+      this.setState({ input: "" });
+    } else if (e.key === "Backspace" && !val) {
+      this.raiseRemoveTag(this.props.tags.length - 1);
     }
-  }
+  };
 
-  render() {
-    const { tags } = this.props.topics;
+  updateInput = (e) => {
+    this.setState({ input: e.target.value });
+  };
 
+  render() {
+    const { name, label, tags, disabled } = this.props;
     return (
-      <div className="input-tag">
-        <ul className="input-tag__tags">
-          { tags.map((tag, i) => (
-            <li key={tag}>
-              {tag}
-              <button type="button" onClick={() => { this.removeTag(i); }}>+</button>
-            </li>
-          ))}
-          <li className="input-tag__tags__input"><input type="text" onKeyDown={this.inputKeyDown} ref={c => { this.tagInput = c; }} /></li>
-        </ul>
-      </div>
+      <div className="form-group mt-2 mb-3">
+        <h5 htmlFor={name}>{label}</h5>
+         { !disabled ?
+          <div className="input-tag form-control">
+            <ul className="input-tag__tags">
+              { 
+                tags.length > 0 && tags.map((tag, i) => (
+                  <li key={tag}>
+                    {tag}
+                    <i
+                      className="fa fa-times ms-2"
+                      onClick={() => {
+                        this.raiseRemoveTag(i);
+                      }}
+                    ></i>
+                  </li>
+                ))
+              }
+              <li className="input-tag__tags__input">
+                <input
+                  type="text"
+                  value={this.state.input}
+                  onChange={(e) => this.updateInput(e)}
+                  onKeyDown={this.raiseInputKeyDown}
+                />
+              </li>
+            </ul>
+          </div> :
+           <ul className="input-tag__tags">
+           {
+             tags.length > 0 && tags.map((tag, i) => (
+               <li key={tag}>
+                 {tag}
+               </li>
+             ))
+           }
+           {
+            tags.length === 0 && 
+            <div
+              className="alert alert-primary mb-2" 
+              role="alert"
+            >
+              This project has no project topic added yet.
+            </div>
+           }
+           </ul>
+          }
+      </div> 
     );
   }
 }

diff --git a/src/components/Project/Personnel/AddPersonnel.jsx b/src/components/Project/Personnel/AddPersonnel.jsx
@@ -148,7 +148,7 @@ class AddPersonnel extends Component {
 
     return (
       <div className="card mt-3">
-        <div className="card-header" data-toggle="collapse" data-target="#collapseOne" aria-controls="collapseOne" id="headingOne">
+        <div className="card-header" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-controls="collapseOne" id="headingOne">
           <h6 className="mb-0">
             Add {personnelType}
           </h6>

diff --git a/src/components/Project/ProjectBasicInfoTable.jsx b/src/components/Project/ProjectBasicInfoTable.jsx
@@ -5,7 +5,7 @@ import CopyButton from "../common/CopyButton";
 import toLocaleTime from "../../utils/toLocaleTime";
 import utcToLocalTimeParser from "../../utils/utcToLocalTimeParser.js";
 import CalendarDateTime from "../common/CalendarDateTime.jsx";
-import InputTag from "../common/Form/InputTag.jsx";
+import ProjectTopics from "./Community/ProjectTopics.jsx";
 import Funding from "./Community/Funding.jsx";
 import CommunityTags from "./Community/CommunityTags.jsx";
 import { toast } from "react-toastify";
@@ -105,11 +105,11 @@ class ProjectBasicInfoTable extends Component {
           canUpdate={canUpdate}
           onCommunityUpdate={this.props.onCommunityUpdate}
         />
-        <InputTag 
+        <ProjectTopics
           name={"topics"}
           label={"Project Topics"}
           tags={topics}
-          disabled={false}
+          disabled={!canUpdate}
           onTagChange={this.props.onTagChange}
         />
         {