Hotfixes (#215)

* #198: added user guide section by section to slice builder steps' header * 214: updated the signup step 1 to highlight alert info * #214: updated the signup step 1 to highlight alert info * #212: removed loading spinner when error occurs * #198: added helper text to slice builder * #213: updated role-based projects/ project form * #212: removed loading spinner if error occurs * #213: reversed FO's full access to project management * #213: reversed FO's limited access to project management
fabric-testbed · Sep 7, 2022 · 6a3fb39 · 6a3fb39
1 parent 41ad66f
commit 6a3fb39
Show file tree

Hide file tree

Showing 23 changed files with 218 additions and 91 deletions.
diff --git a/src/components/Experiment/Slices.jsx b/src/components/Experiment/Slices.jsx
@@ -16,9 +16,9 @@ import _ from "lodash";
 
 class Slices extends React.Component {
   jupyterLinkMap =  {
-    "alpha": portalData.jupyterHubLinkAlpha,
-    "beta": portalData.jupyterHubLinkBeta,
-    "production": portalData.jupyterHubLinkProduction,
+    "alpha": portalData.jupyterHubLinks.alpha,
+    "beta": portalData.jupyterHubLinks.beta,
+    "production": portalData.jupyterHubLinks.production
   }
 
   state = {
@@ -54,8 +54,9 @@ class Slices extends React.Component {
         // the token has been stored in the browser and is ready to be used.
           try {
             const { data: res } = await getSlices();
-            this.setState({ slices: res.data, showSpinner: false, });
+            this.setState({ slices: res.data, showSpinner: false });
           } catch (err) {
+            this.setState({ showSpinner: false });
             toast.error("Failed to load slices. Please re-login and try.");
             if (err.response.status === 401) {
               // 401 Error: Provided token is not valid.
@@ -184,11 +185,11 @@ class Slices extends React.Component {
               </p>
               <p>
                 <ul>
-                  <li><a href="https://learn.fabric-testbed.net/knowledge-base/portal-slice-builder-user-guide/" target="_blank" rel="noreferrer">Portal Slice Builder User Guide</a></li>
-                  <li><a href="https://learn.fabric-testbed.net/knowledge-base/quick-start-guide/#3-start-an-your-first-experiment" target="_blank" rel="noreferrer">Start Your First Experiment</a></li>
-                  <li><a href="https://learn.fabric-testbed.net/knowledge-base/install-the-python-api/" target="_blank" rel="noreferrer">Install the FABRIC Python API</a></li>
-                  <li><a href="https://learn.fabric-testbed.net/knowledge-base/fabrictestbed-slice_manager/" target="_blank" rel="noreferrer">Slice Manager</a></li>
-                  <li><a href="https://learn.fabric-testbed.net/knowledge-base/slice-editor/" target="_blank" rel="noreferrer">Slice Editor</a></li>
+                  <li><a href={portalData.learnArticles.guideToSliceBuilder} target="_blank" rel="noreferrer">Portal Slice Builder User Guide</a></li>
+                  <li><a href={portalData.learnArticles.guideToStartExperiment} target="_blank" rel="noreferrer">Start Your First Experiment</a></li>
+                  <li><a href={portalData.learnArticles.guideToInstallPythonAPI} target="_blank" rel="noreferrer">Install the FABRIC Python API</a></li>
+                  <li><a href={portalData.learnArticles.guideToSliceManager} target="_blank" rel="noreferrer">Slice Manager</a></li>
+                  <li><a href={portalData.learnArticles.guideToSliceEditor} target="_blank" rel="noreferrer">Slice Editor</a></li>
                 </ul>
               </p>
             </div>

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -20,7 +20,7 @@ class Footer extends React.Component {
           <ul>
             <li><b>Useful Links</b></li>
             <li>
-              <a href={portalData.fabricWebsiteLink} target="_blank" rel="noopener noreferrer">FABRIC Website</a>
+              <a href={portalData.fabricSocialLinks.website} target="_blank" rel="noopener noreferrer">FABRIC Website</a>
             </li>
             <li>
               <Link to="/aup">Acceptable Use Policy</Link>
@@ -33,7 +33,7 @@ class Footer extends React.Component {
           <ul>
             <li><b>Help &amp; Support</b></li>
             <li><a href={portalData.knowledgeBaseLink} target="_blank" rel="noopener noreferrer">Knowledge Base</a></li>
-            <li><a href={portalData.knowledgeBaseFAQLink} target="_blank" rel="noopener noreferrer">FAQ</a></li>
+            <li><a href={portalData.learnArticles.faq} target="_blank" rel="noopener noreferrer">FAQ</a></li>
             <li>
               <Link to="/help">Contact Us</Link>
             </li>
@@ -45,13 +45,13 @@ class Footer extends React.Component {
               <li><b>Social</b></li>
               <li>
                 <div className="d-flex flex-row justify-content-between w-75 footer-social-icons">
-                  <a href={portalData.fabricTwitterLink} target="_blank" rel="noopener noreferrer">
+                  <a href={portalData.fabricSocialLinks.twitter} target="_blank" rel="noopener noreferrer">
                     <FontAwesomeIcon icon={faTwitter} />
                   </a>
-                  <a href={portalData.fabricGithubLink} target="_blank" rel="noopener noreferrer">
+                  <a href={portalData.fabricSocialLinks.github} target="_blank" rel="noopener noreferrer">
                     <FontAwesomeIcon icon={faGithub} />
                   </a>
-                  <a href={portalData.fabricYoutubeLink} target="_blank" rel="noopener noreferrer">
+                  <a href={portalData.fabricSocialLinks.youtube} target="_blank" rel="noopener noreferrer">
                     <FontAwesomeIcon icon={faYoutube} />
                   </a>
                   <a href="mailto:[email protected]">

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -13,9 +13,9 @@ import logo from "../imgs/fabric-brand.png";
 
 class Header extends React.Component {
   jupyterLinkMap =  {
-    "alpha": portalData.jupyterHubLinkAlpha,
-    "beta": portalData.jupyterHubLinkBeta,
-    "production": portalData.jupyterHubLinkProduction,
+    "alpha": portalData.jupyterHubLinks.alpha,
+    "beta": portalData.jupyterHubLinks.beta,
+    "production": portalData.jupyterHubLinks.production
   }
 
   state = {

diff --git a/src/components/Home/FacilityUpdates.jsx b/src/components/Home/FacilityUpdates.jsx
@@ -22,6 +22,7 @@ class FacilityUpdates extends React.Component {
       })
       this.setState({ updates, showSpinner: false });
     } catch (err) {
+      this.setState({ showSpinner: false });
       toast.error("Failed to load facility updates. Please reload this page.");
     }
   }

diff --git a/src/components/Project/ProjectBasicInfoTable.jsx b/src/components/Project/ProjectBasicInfoTable.jsx
@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import DeleteModal from "../common/DeleteModal";
 import CopyButton from "../common/CopyButton";
 import toLocaleTime from "../../utils/toLocaleTime";
+import { default as portalData } from "../../services/portalData.json";
 
 class ProjectBasicInfoTable extends Component {
   renderTags(tags) {
@@ -31,7 +32,9 @@ class ProjectBasicInfoTable extends Component {
             </tr>
             <tr>
               <td>
-                Project Permissions <a href="https://learn.fabric-testbed.net/knowledge-base/fabric-user-roles-and-project-permissions/#project-permissions" target="_blank" rel="noreferrer" className="ml-1">
+                Project Permissions <a
+                href={`${portalData.learnArticles.guideToProjectPermissions}#project-permissions`}
+                target="_blank" rel="noreferrer" className="ml-1">
                   <i className="fa fa-question-circle mx-2"></i>
                 </a>
               </td>

diff --git a/src/components/Project/ProjectProfile.jsx b/src/components/Project/ProjectProfile.jsx
@@ -3,6 +3,7 @@ import CopyButton from "../common/CopyButton";
 import toLocaleTime from "../../utils/toLocaleTime";
 import _ from "lodash";
 import { Link } from "react-router-dom";
+import { default as portalData } from "../../services/portalData.json";
 
 class ProjectProfile extends Component {
   state = {
@@ -56,7 +57,9 @@ class ProjectProfile extends Component {
             </tr>
             <tr>
               <td>
-              Project Permissions <a href="https://learn.fabric-testbed.net/knowledge-base/fabric-user-roles-and-project-permissions/#project-permissions" target="_blank" rel="noreferrer" className="ml-1">
+                Project Permissions <a
+                href={`${portalData.learnArticles.guideToProjectPermissions}#project-permissions`} 
+                target="_blank" rel="noreferrer" className="ml-1">
                   <i className="fa fa-question-circle mx-2"></i>
                 </a>
               </td>

diff --git a/src/components/Signup/Step1.jsx b/src/components/Signup/Step1.jsx
@@ -14,16 +14,17 @@ const Step1 = () => {
         </p>
         <ul>
           <li>Click the <b>Proceed</b> button below and you will be redirected to a <a href="https://www.cilogon.org/" target="_blank" rel="noreferrer"><b>CI Logon</b></a> page, where you can select your institution and login using your <i>institutional username and password</i>. </li>
-          <ul className="my-2">
-            <li>Please note that ORCID listed as the first available provider does not work well, please choose your institution from the list instead.</li>
-          </ul>
-          <li>After logging in you will be redirected to an enrollment page in FABRIC’s <a href="https://www.incommon.org/software/comanage/" target="_blank" rel="noreferrer"><b>COmanage</b></a> which will display your name, email and institution. Please verify those and <b>you will be redirected back to this site for more instructions.</b></li>
+          <li>After logging in you will be redirected to an enrollment page in FABRIC's <a href="https://www.incommon.org/software/comanage/" target="_blank" rel="noreferrer"><b>COmanage</b></a> which will display your name, email and institution. Please verify those and <b>you will be redirected back to this site for more instructions.</b></li>
         </ul>
         <p>
           Please note: you will <b>always</b> use your institutional credentials to login to FABRIC portal via your institution's Identity Provider - <b>we do not and will never store your password or login information</b>. Any password changes that you go through with your institutional account will also affect how you login to the FABRIC portal.
         </p>
       </div>
       <div className="text-center">
+      <div className="alert alert-warning" role="alert">
+        <i className="fa fa-exclamation-triangle mr-2"></i> Please <b>choose your institution</b> and <b> NOT use the ORCID</b> option from the CILogon page.
+        <br></br>(<b>Note</b>: the list may take a moment to populate beyond the default of ORCID).
+      </div>
         <a href={portalData.selfEnrollRequest.link}>
           <button
             className="btn btn-primary mt-2"

diff --git a/src/components/SliceViewer/ProjectTags.jsx b/src/components/SliceViewer/ProjectTags.jsx
@@ -3,6 +3,7 @@ import SpinnerWithText from "../../components/common/SpinnerWithText";
 import { getProjects, getProjectById } from "../../services/projectService.js";
 import { toast } from "react-toastify";
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { default as portalData } from "../../services/portalData.json";
 
 export default class SideLinks extends Component { 
   state = {
@@ -62,6 +63,7 @@ export default class SideLinks extends Component {
       const project = res.results[0];
       this.setState({ tags: project.tags, showSpinner: false});
     } catch (err) {
+      this.setState({ showSpinner: false });
       toast.error("Failed to load the permissions of this project. Please re-select a project.");
     }
   }
@@ -78,7 +80,7 @@ export default class SideLinks extends Component {
       <label htmlFor="projectSelect" className="slice-form-label">
         Project
         <a
-          href="https://learn.fabric-testbed.net/knowledge-base/fabric-user-roles-and-project-permissions/#project-permissions"
+          href={`${portalData.learnArticles.guideToProjectPermissions}#project-permissions`}
           target="_blank"
           rel="noreferrer"
         >

diff --git a/src/components/SliceViewer/SideLinks.jsx b/src/components/SliceViewer/SideLinks.jsx
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import ServiceTypeTable from './ServiceTypeTable';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import validator from  "../../utils/sliceValidator";
+import { default as portalData } from "../../services/portalData.json";
 
 export default class SideLinks extends Component { 
   state = {
@@ -57,6 +59,11 @@ export default class SideLinks extends Component {
   render() {
     const { intro, linkType, linkName } = this.state;
     const validationResult = validator.validateNetworkService(this.state.linkType, this.props.selectedCPs, this.state.linkName, this.props.nodes);
+    const renderTooltip = (id, content) => (
+      <Tooltip id={id}>
+        {content}
+      </Tooltip>
+    );
 
     return(
       <div>
@@ -72,7 +79,16 @@ export default class SideLinks extends Component {
         <form>
           <div className="form-row">
             <div className="form-group slice-builder-form-group col-md-6">
-              <label htmlFor="inputComponent" className="slice-builder-label">Service Type</label>
+              <label htmlFor="inputComponent" className="slice-builder-label">
+                Service Type
+                <OverlayTrigger
+                  placement="right"
+                  delay={{ show: 100, hide: 300 }}
+                  overlay={renderTooltip("network-service-tooltip", portalData.helperText.networkServiceDescription)}
+                >
+                  <i className="fa fa-question-circle text-secondary ml-2"></i>
+                </OverlayTrigger>
+              </label>
               <select
                 className="form-control form-control-sm"
                 id="componentSelect"

diff --git a/src/components/SliceViewer/SideNodes.jsx b/src/components/SliceViewer/SideNodes.jsx
@@ -1,9 +1,11 @@
 import React from 'react';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import SiteResourceTable from './SiteResourceTable';
 import SingleComponent from './SingleComponent';
 import _ from "lodash";
 import validator from  "../../utils/sliceValidator";
 import { sitesNameMapping }  from "../../data/sites";
+import { default as portalData } from "../../services/portalData.json";
 
 class SideNodes extends React.Component {
   state = {
@@ -138,6 +140,11 @@ class SideNodes extends React.Component {
   render() {
     const { selectedSite, nodeName, imageType, selectedImageRef, core, ram, disk, nodeComponents } = this.state;
     const validationResult = validator.validateNodeComponents(selectedSite, nodeName, this.props.nodes, core, ram, disk, nodeComponents);
+    const renderTooltip = (id, content) => (
+      <Tooltip id={id}>
+        {content}
+      </Tooltip>
+    );
 
     return(
       <div>
@@ -168,7 +175,16 @@ class SideNodes extends React.Component {
             <div className="bg-light">
               <div className="form-row">
                 <div className="form-group slice-builder-form-group col-md-3">
-                  <label htmlFor="inputState" className="slice-builder-label">Site</label>
+                  <label htmlFor="inputState" className="slice-builder-label">
+                    Site
+                    <OverlayTrigger
+                      placement="right"
+                      delay={{ show: 100, hide: 300 }}
+                      overlay={renderTooltip("site-tooltip", portalData.helperText.sitesDescription)}
+                    >
+                      <i className="fa fa-question-circle text-secondary ml-2"></i>
+                    </OverlayTrigger>
+                  </label>
                   <select
                     className="form-control form-control-sm"
                     id="siteNameSelect"
@@ -185,7 +201,16 @@ class SideNodes extends React.Component {
                   </select>
                 </div>
                 <div className="form-group slice-builder-form-group col-md-3">
-                  <label htmlFor="NodeType" className="slice-builder-label">Node Type</label>
+                  <label htmlFor="NodeType" className="slice-builder-label">
+                    Node Type
+                    <OverlayTrigger
+                      placement="right"
+                      delay={{ show: 100, hide: 300 }}
+                      overlay={renderTooltip("node-tooltip", portalData.helperText.nodeDescription)}
+                    >
+                      <i className="fa fa-question-circle text-secondary ml-2"></i>
+                    </OverlayTrigger>
+                  </label>
                   <select
                     className="form-control form-control-sm"
                     id="nodeTypeSelect"

diff --git a/src/components/SliceViewer/SingleComponent.jsx b/src/components/SliceViewer/SingleComponent.jsx
@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import validator from  "../../utils/sliceValidator";
+import { default as portalData } from "../../services/portalData.json";
 
 export default class SingleComponent extends Component { 
   state = {
@@ -52,6 +54,11 @@ export default class SingleComponent extends Component {
   render() {
     const { componentTypeModel, componentType, componentName, componentModel, modelDetails } = this.state;
     const validationResult = validator.validateSingleComponent(componentType, componentName, componentModel, this.props.addedComponents);
+    const renderTooltip = (id, content) => (
+      <Tooltip id={id}>
+        {content}
+      </Tooltip>
+    );
 
     return(
       <div>
@@ -60,7 +67,16 @@ export default class SingleComponent extends Component {
           <div>
             <div className="form-row">
               <div className="form-group slice-builder-form-group col-md-4">
-                <label htmlFor="inputComponent" className="slice-builder-label">Component Type</label>
+                <label htmlFor="inputComponent" className="slice-builder-label">
+                  Component Type
+                  <OverlayTrigger
+                    placement="right"
+                    delay={{ show: 100, hide: 300 }}
+                    overlay={renderTooltip("component-tooltip", portalData.helperText.componentDescription)}
+                  >
+                    <i className="fa fa-question-circle text-secondary ml-2"></i>
+                  </OverlayTrigger>
+                </label>
                 <select
                   className="form-control form-control-sm"
                   id="componentSelect"

diff --git a/src/components/SshKey/GenerateKey.jsx b/src/components/SshKey/GenerateKey.jsx
@@ -33,6 +33,7 @@ class GenerateKey extends Form {
       this.setState({ generatedKey: res.results[0], showKeySpinner: false });
       localStorage.setItem("sshKeyType", data.keyType);
     } catch (err) {
+      this.setState({ showKeySpinner: false });
       toast.error("Failed to generate ssh key pairs.");
     } 
   };

diff --git a/src/components/UserProfile/GlobalRoles.jsx b/src/components/UserProfile/GlobalRoles.jsx
@@ -45,7 +45,7 @@ class GlobalRoles extends React.Component {
                 <OverlayTrigger
                   placement="right"
                   delay={{ show: 100, hide: 300 }}
-                  overlay={renderTooltip("pl-tooltip", portalData.projectLeadDescription)}
+                  overlay={renderTooltip("pl-tooltip", portalData.helperText.projectLeadDescription)}
                 >
                   <i className="fa fa-question-circle text-secondary ml-2"></i>
                 </OverlayTrigger>
@@ -60,7 +60,7 @@ class GlobalRoles extends React.Component {
                 <OverlayTrigger
                   placement="right"
                   delay={{ show: 100, hide: 300 }}
-                  overlay={renderTooltip("fo-tooltip", portalData.facilityOperatorDescription)}
+                  overlay={renderTooltip("fo-tooltip", portalData.helperText.facilityOperatorDescription)}
                 >
                   <i className="fa fa-question-circle text-secondary ml-2"></i>
                 </OverlayTrigger>
@@ -107,7 +107,7 @@ class GlobalRoles extends React.Component {
             type="button"
             className="btn btn-sm btn-outline-primary"
             onClick={() => window.open(
-              `${portalData.jiraProjectLeadLink}?email=${user.email}`,
+              `${portalData.jiraLinks.projectLeadRequest}?email=${user.email}`,
               "_blank")
             }
           >

diff --git a/src/components/UserProfile/MyProfile.jsx b/src/components/UserProfile/MyProfile.jsx
@@ -57,6 +57,7 @@ class MyProfile extends Form {
       this.setState({ data: profile, user: updatedUser, showSpinner: false });
       toast.success("You've successfully updated profile.");
     } catch (err) {
+      this.setState({ showSpinner: false });
       toast.error("Failed to update user profile. Please try again.");
     }
   };

diff --git a/src/components/UserProfile/MyRoles.jsx b/src/components/UserProfile/MyRoles.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import GlobalRoles from "./GlobalRoles";
 import ProjectRoles from "./ProjectRoles";
+import { default as portalData } from "../../services/portalData.json";
 
 class MyRoles extends React.Component {
   render() {
@@ -20,7 +21,7 @@ class MyRoles extends React.Component {
         <div className="alert alert-primary my-2" role="alert">
           Please consult &nbsp;
           <a
-            href="https://learn.fabric-testbed.net/knowledge-base/fabric-user-roles-and-project-permissions/"
+            href={portalData.learnArticles.guideToProjectPermissions}
             target="_blank"
             rel="noreferrer"
           >