From 6a3fb390b29f4525a461b6b6de3b15ab76e4b104 Mon Sep 17 00:00:00 2001
From: Yaxue Guo <37635744+yaxue1123@users.noreply.github.com>
Date: Wed, 7 Sep 2022 13:18:04 -0400
Subject: [PATCH] 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
---
 src/components/Experiment/Slices.jsx          | 19 +++---
 src/components/Footer.jsx                     | 10 +--
 src/components/Header.jsx                     |  6 +-
 src/components/Home/FacilityUpdates.jsx       |  1 +
 .../Project/ProjectBasicInfoTable.jsx         |  5 +-
 src/components/Project/ProjectProfile.jsx     |  5 +-
 src/components/Signup/Step1.jsx               |  9 +--
 src/components/SliceViewer/ProjectTags.jsx    |  4 +-
 src/components/SliceViewer/SideLinks.jsx      | 18 +++++-
 src/components/SliceViewer/SideNodes.jsx      | 29 ++++++++-
 .../SliceViewer/SingleComponent.jsx           | 18 +++++-
 src/components/SshKey/GenerateKey.jsx         |  1 +
 src/components/UserProfile/GlobalRoles.jsx    |  6 +-
 src/components/UserProfile/MyProfile.jsx      |  1 +
 src/components/UserProfile/MyRoles.jsx        |  3 +-
 src/components/UserProfile/ProjectRoles.jsx   |  1 +
 src/pages/Help.jsx                            |  4 +-
 src/pages/NewSliceForm.jsx                    | 46 +++++++++++---
 src/pages/ProjectForm.jsx                     | 33 +++++-----
 src/pages/Projects.jsx                        | 22 +++----
 src/pages/SliceViewer.jsx                     |  4 +-
 src/pages/User.jsx                            |  1 +
 src/services/portalData.json                  | 63 +++++++++++++------
 23 files changed, 218 insertions(+), 91 deletions(-)

diff --git a/src/components/Experiment/Slices.jsx b/src/components/Experiment/Slices.jsx
index ed392fcd..deb2dd13 100644
--- 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
index 0f8a38ba..3ab47c1e 100644
--- 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:info@fabric-testbed.net">
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 3ffbca0c..93a52494 100644
--- 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
index ac0a0d30..05fb3b90 100644
--- 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
index ec33eb2d..cc154d62 100644
--- 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
index eeb7e582..60e5764c 100644
--- 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
index f48553d2..13efdf05 100644
--- 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
index db1d3bf5..50ea6b9d 100644
--- 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
index b4045e7e..58a9a8b4 100644
--- 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
index 19ec29e9..60735c55 100644
--- 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
index 3536a545..ea599231 100644
--- 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
index e970114d..1f2adf8f 100644
--- 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
index 3f389faf..5cbbc410 100644
--- 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
index 2c842ec5..6bd6cd72 100644
--- 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
index 7633cc35..62754e45 100644
--- 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"
           >
diff --git a/src/components/UserProfile/ProjectRoles.jsx b/src/components/UserProfile/ProjectRoles.jsx
index c0e0207c..24f8a8d3 100644
--- a/src/components/UserProfile/ProjectRoles.jsx
+++ b/src/components/UserProfile/ProjectRoles.jsx
@@ -27,6 +27,7 @@ class ProjectRoles extends React.Component {
       const projectsCount = res.total;
       this.setState({ projects, projectsCount, showSpinner: false });
     } catch (err) { 
+      this.setState({ showSpinner: false });
       toast.error("Failed to load user's projects'. Please re-login.");
     }
   }
diff --git a/src/pages/Help.jsx b/src/pages/Help.jsx
index 5d30900c..cec52ce3 100644
--- a/src/pages/Help.jsx
+++ b/src/pages/Help.jsx
@@ -36,9 +36,9 @@ export default class Help extends React.Component{
               <h5 className="card-title">Account Issues</h5>
                 <p>
                   If you are having problems with enrolling or logging into your FABRIC account 
-                  or logging into your experiment's resources via bastion hosts, please use our <a href={portalData.jiraAccountIssueLink} target="_blank" rel="noopener noreferrer">FABRIC Account Help Portal</a> or email us at <b>account-help@fabric-testbed.net</b>.
+                  or logging into your experiment's resources via bastion hosts, please use our <a href={portalData.jiraLinks.accountIssue} target="_blank" rel="noopener noreferrer">FABRIC Account Help Portal</a> or email us at <b>account-help@fabric-testbed.net</b>.
                 </p>
-              <a href={portalData.jiraAccountIssueLink} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
+              <a href={portalData.jiraLinks.accountIssue} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
                 <i className="fa fa-sign-in mr-2"></i>
                 FABRIC Account Help Portal
               </a>
diff --git a/src/pages/NewSliceForm.jsx b/src/pages/NewSliceForm.jsx
index 50ebe2d2..ba705952 100644
--- a/src/pages/NewSliceForm.jsx
+++ b/src/pages/NewSliceForm.jsx
@@ -25,6 +25,7 @@ import { getResources } from "../services/resourceService.js";
 import { createSlice } from "../services/sliceService.js";
 import { autoCreateTokens } from "../utils/manageTokens";
 import { getActiveKeys } from "../services/sshKeyService";
+import { default as portalData } from "../services/portalData.json";
 
 class NewSliceForm extends React.Component {
   state = {
@@ -78,6 +79,7 @@ class NewSliceForm extends React.Component {
         showKeySpinner: false
       });
     } catch (ex) {
+      this.setState({ showKeySpinner: false });
       toast.error("Failed to refresh keys. Please try again later.");
     }
   }
@@ -329,7 +331,7 @@ class NewSliceForm extends React.Component {
                   Slice Builder
                 </h2>
                 <a
-                  href="https://learn.fabric-testbed.net/knowledge-base/portal-slice-builder-user-guide/"
+                  href={portalData.learnArticles.guideToSliceBuilder}
                   target="_blank"
                   rel="noreferrer"
                   className="mt-3"
@@ -352,9 +354,15 @@ class NewSliceForm extends React.Component {
                 <div className="slice-builder-left">
                 <div className="card">
                     <div className="card-header slice-builder-card-header py-1">
+                    <a
+                      href={portalData.learnArticles.guideToSliceBuilderSections["step1"]}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
                       <button className="btn btn-link">
                         Step 1: Select Project
                       </button>
+                    </a>
                     </div>
                     <div>
                       <div className="card-body slice-builder-card-body">
@@ -364,9 +372,15 @@ class NewSliceForm extends React.Component {
                   </div>
                   <div className="card">
                     <div className="card-header slice-builder-card-header py-1">
-                      <button className="btn btn-link">
-                        Step 2: Add Nodes and Components
-                      </button>
+                      <a
+                        href={portalData.learnArticles.guideToSliceBuilderSections["step2"]}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        <button className="btn btn-link">
+                          Step 2: Add Nodes and Components
+                        </button>
+                      </a>
                     </div>
                     <div>
                       <div className="card-body slice-builder-card-body">
@@ -386,9 +400,15 @@ class NewSliceForm extends React.Component {
                   </div>
                   <div className="card">
                     <div className="card-header slice-builder-card-header py-1">
-                      <button className="btn btn-link">
-                        Step 3: Add Network Service
-                      </button>
+                      <a
+                        href={portalData.learnArticles.guideToSliceBuilderSections["step3"]}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        <button className="btn btn-link">
+                          Step 3: Add Network Service
+                        </button>
+                      </a>
                     </div>
                     <div>
                       <div className="card-body slice-builder-card-body">
@@ -403,9 +423,15 @@ class NewSliceForm extends React.Component {
                   </div>
                   <div className="card">
                     <div className="card-header slice-builder-card-header py-1">
-                      <button className="btn btn-link">
-                        Step 4: Create Slice
-                      </button>
+                      <a
+                        href={portalData.learnArticles.guideToSliceBuilderSections["step4"]}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        <button className="btn btn-link">
+                          Step 4: Create Slice
+                        </button>
+                      </a>
                     </div>
                     <div>
                       <div className="card-body slice-builder-card-body">
diff --git a/src/pages/ProjectForm.jsx b/src/pages/ProjectForm.jsx
index 94ca1883..1d679c17 100644
--- a/src/pages/ProjectForm.jsx
+++ b/src/pages/ProjectForm.jsx
@@ -159,15 +159,19 @@ class projectForm extends Form {
   doSubmit = async () => {
     this.setState({ showSpinner: true, spinnerText: `Updating project...`  });
 
-    const { data: project } = this.state;
+    const { data: project, globalRoles } = this.state;
     try {
-      await updateProject(project);
-      await updateTags(project.uuid, project.tags);
+      if (globalRoles.isFacilityOperator) {
+        await updateTags(project.uuid, project.tags);
+      } else {
+        await updateProject(project);
+      }
 
       this.setState({ showSpinner: false, spinnerText: ""  });
       toast.success("Project updated successfully!");
     }
     catch (err) {
+      this.setState({ showSpinner: false, spinnerText: ""  });
       toast.error("Failed to save project.");
     }
 
@@ -261,6 +265,7 @@ class projectForm extends Form {
         toast.success(`${personnelType} updated successfully.`);
       });
     } catch (err) {
+      this.setState({ showSpinner: false, spinnerText: ""  });
       toast(`Failed to update ${personnelType}.`)
     }
 
@@ -285,6 +290,7 @@ class projectForm extends Form {
     } = this.state;
     
     let canUpdate = globalRoles.isFacilityOperator || data.is_creator || data.is_owner;
+    let canUpdateAttr = data.is_creator || data.is_owner;
 
     const parsedTags = this.parseTags();
     const urlSuffix = `email=${user.email}&customfield_10058=${data.uuid}&customfield_10059=${encodeURIComponent(data.name)}`;
@@ -303,7 +309,6 @@ class projectForm extends Form {
         <div className="container">
           <NewProjectForm
             history={this.props.history}
-            isFacilityOperator={globalRoles.isFacilityOperator}
             baseOptions={parsedTags.baseOptions}
             optionsMapping={parsedTags.optionsMapping}
           />
@@ -319,7 +324,7 @@ class projectForm extends Form {
         </div>
       )
     } else {
-      // 3. Show detailed project form for PO/ PM or FO.
+      // 3. Show detailed project form for PC/ PO/ PM or FO.
       return (
         <div className="container">
           <div className="d-flex flex-row justify-content-between">
@@ -331,7 +336,7 @@ class projectForm extends Form {
                   type="button"
                   className="btn btn-sm btn-outline-success mr-2 my-3"
                   onClick={() => window.open(
-                    `${portalData.jiraProjectPermissionLink}?${urlSuffix}`,
+                    `${portalData.jiraLinks.projectPermissionRequest}?${urlSuffix}`,
                     "_blank")
                   }
                 >
@@ -342,7 +347,7 @@ class projectForm extends Form {
                   type="button"
                   className="btn btn-sm btn-outline-success mr-2 my-3"
                   onClick={() => window.open(
-                    `${portalData.jiraStorageRequestLink}?${urlSuffix}`,
+                    `${portalData.jiraLinks.storageRequest}?${urlSuffix}`,
                     "_blank")
                   }
                 >
@@ -378,17 +383,17 @@ class projectForm extends Form {
               className={`${activeIndex !== 0 ? "d-none" : "col-9"}`}
             >
               <form onSubmit={this.handleSubmit}>
-                {this.renderInput("name", "Name", canUpdate)}
-                {this.renderTextarea("description", "Description", canUpdate)}
-                {this.renderSelect("facility", "Facility", canUpdate, data.facility, portalData.facilityOptions)}
-                {this.renderSelect("is_public", "Public", canUpdate, "", publicOptions)}
+                {this.renderInput("name", "Name", canUpdateAttr)}
+                {this.renderTextarea("description", "Description", canUpdateAttr)}
+                {this.renderSelect("facility", "Facility", canUpdateAttr, data.facility, portalData.facilityOptions)}
+                {this.renderSelect("is_public", "Public", canUpdateAttr, "", publicOptions)}
                 {globalRoles.isFacilityOperator && this.renderProjectTags("tags", "Project Permissions", parsedTags.baseOptions, parsedTags.optionsMapping)}
                 {canUpdate && this.renderButton("Save")}
               </form>
               {
                 <ProjectBasicInfoTable
                   project={data}
-                  canUpdate={canUpdate}
+                  canUpdate={canUpdateAttr}
                   onDeleteProject={this.handleDeleteProject}
                 />
               }
@@ -403,7 +408,7 @@ class projectForm extends Form {
               <div className="w-100">
                 <ProjectPersonnel
                   personnelType={"Project Owners"}
-                  canUpdate={canUpdate}
+                  canUpdate={canUpdateAttr}
                   users={owners}
                   onSinglePersonnelUpdate={this.handleSinglePersonnelUpdate}
                   onPersonnelUpdate={this.handlePersonnelUpdate}
@@ -420,7 +425,7 @@ class projectForm extends Form {
               <div className="w-100">
                 <ProjectPersonnel
                   personnelType={"Project Members"}
-                  canUpdate={canUpdate}
+                  canUpdate={canUpdateAttr}
                   users={members}
                   onSinglePersonnelUpdate={this.handleSinglePersonnelUpdate}
                   onPersonnelUpdate={this.handlePersonnelUpdate}
diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx
index 71fd958b..e53a232e 100644
--- a/src/pages/Projects.jsx
+++ b/src/pages/Projects.jsx
@@ -52,9 +52,10 @@ class Projects extends React.Component {
         globalRoles: checkGlobalRoles(user),
         projects,
         projectsCount,
-        showSpinner: false,
-      })
+        showSpinner: false
+      });
     } catch (err) {
+      this.setState({ showSpinner: false });
       toast.error("Failed to load projects. Please reload this page.");
     }
   }
@@ -132,7 +133,7 @@ class Projects extends React.Component {
           <div className="d-flex flex-row">
             <h1>Projects</h1>
             <a
-              href="https://learn.fabric-testbed.net/knowledge-base/fabric-user-roles-and-project-permissions"
+              href={portalData.learnArticles.guideToProjectPermissions}
               target="_blank"
               rel="noreferrer"
               className="mt-3"
@@ -142,16 +143,11 @@ class Projects extends React.Component {
             </a>
           </div>
           {
-            (
-              globalRoles.isProjectLead || 
-              globalRoles.isFacilityOperator 
-            )
-            &&
-            (
-              <Link to="/projects/new" className="btn btn-primary create-project-btn my-2">
-                Create Project
-              </Link>
-            )
+            // (globalRoles.isFacilityOperator || globalRoles.isProjectLead) &&
+            globalRoles.isProjectLead &&
+            <Link to="/projects/new" className="btn btn-primary create-project-btn my-2">
+              Create Project
+            </Link>
           }
         </div>
         <div className="w-100 input-group my-3">
diff --git a/src/pages/SliceViewer.jsx b/src/pages/SliceViewer.jsx
index 90a541ed..2c91a976 100644
--- a/src/pages/SliceViewer.jsx
+++ b/src/pages/SliceViewer.jsx
@@ -13,6 +13,7 @@ import sliceParser from "../services/parser/sliceParser.js";
 import sliceErrorParser from "../services/parser/sliceErrorParser.js";
 import sliceTimeParser from "../utils/sliceTimeParser.js";
 import { toast } from "react-toastify";
+import { default as portalData } from "../services/portalData.json";
 
 export default class SliceViewer extends Component { 
   state = {
@@ -63,6 +64,7 @@ export default class SliceViewer extends Component {
               showSliceSpinner: false
             });
           } catch (err) {
+            this.setState({ showSliceSpinner: false });
             toast.error("Failed to load the slice. Please try again later.");
             if (err.response.status === 401) {
               // 401 Error: Provided token is not valid.
@@ -135,7 +137,7 @@ export default class SliceViewer extends Component {
                     {slice.state}
                   </span>
                   <a
-                    href="https://learn.fabric-testbed.net/knowledge-base/portal-slice-builder-user-guide/#slice-states"
+                    href={portalData.learnArticles.guideToSliceBuilderSections["states"]}
                     target="_blank"
                     rel="noreferrer"
                     className="ml-1"
diff --git a/src/pages/User.jsx b/src/pages/User.jsx
index 48861895..e4afd71a 100644
--- a/src/pages/User.jsx
+++ b/src/pages/User.jsx
@@ -48,6 +48,7 @@ class User extends React.Component {
       this.setState({ user: res.results[0], showFullPageSpinner: false });
       toast.success("You've successfully refreshed roles.");
     } catch (err) {
+      this.setState({ showFullPageSpinner: false });
       toast.error("Failed to refresh roles. Please try again.");
     }
   }
diff --git a/src/services/portalData.json b/src/services/portalData.json
index e5f935f6..ec283be1 100644
--- a/src/services/portalData.json
+++ b/src/services/portalData.json
@@ -3,34 +3,59 @@
   "facilityOptions": [
     { "_id": 1, "name": "FABRIC"}
   ],
-  "jiraProjectLeadLink": "https://fabric-testbed.atlassian.net/servicedesk/customer/portal/2/group/11/create/41",
-  "jiraAccountIssueLink": "https://fabric-testbed.atlassian.net/servicedesk/customer/portal/2/group/8/create/18",
-  "jiraProjectPermissionLink": "https://fabric-testbed.atlassian.net/servicedesk/customer/portal/2/group/11/create/39",
-  "jiraStorageRequestLink": "https://fabric-testbed.atlassian.net/servicedesk/customer/portal/2/group/12/create/40",
-  "knowledgeBaseLink": "https://learn.fabric-testbed.net/",
-  "knowledgeBaseFAQLink": "https://learn.fabric-testbed.net/faq/",
-  "knowledgeBaseForumLink": "https://learn.fabric-testbed.net/forums/",
-  "fabricWebsiteLink": "https://fabric-testbed.net/",
-  "fabricTwitterLink": "https://twitter.com/FABRICtestbed",
-  "fabricGithubLink": "https://github.com/fabric-testbed",
-  "fabricYoutubeLink": "http://bit.ly/FABRICYouTube",
-  "jupyterHubLinkAlpha": "https://jupyter-beta.fabric-testbed.net/",
-  "jupyterHubLinkBeta": "https://jupyter-beta.fabric-testbed.net/",
-  "jupyterHubLinkProduction": "https://jupyter.fabric-testbed.net/",
+  "sliverKeyLimit": 10,
+  "bastionKeyLimit": 10,
   "selfEnrollRequest": {
     "id": "self-enroll-modal",
     "title": "FABRIC Self Signup",
     "link": "https://registry-test.cilogon.org/registry/co_petitions/start/coef:558",
     "content": "<p>Dear Experimenter,</p><p>Welcome to FABRIC. We noticed you are not yet registered with FABRIC. In order for you to begin using FABRIC you must go through a 3-step guided enrollment workflow. <b>Clicking the Signup button below will take you to the first step of this process</b>.</p><p><b>If you have already started the enrollment process and are waiting for the approval, please continue to check your email for an approval message.</b> We aim to process enrollment requests within one business day. You will be able to login after receiving this approval.</p><p>Please note: you will <b>always</b> use your institutional credentials to login to FABRIC portal via your institution's Identity Provider - we <b>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>"
   },
-  "projectLeadDescription": "Project Lead can create new projects, designate Project Owner(s)  and invite regular members into a project. Faculty or senior staff at universities can request this role.",
-  "facilityOperatorDescription": "Facility Operator is a ‘superuser’ allowed to manipulate any project. This role is reserved for FABRIC staff.",
-  "sliverKeyLimit": 10,
-  "bastionKeyLimit": 10,
+  "helperText": {
+    "projectLeadDescription": "Project Lead can create new projects, designate Project Owner(s)  and invite regular members into a project. Faculty or senior staff at universities can request this role.",
+    "facilityOperatorDescription": "Facility Operator is a 'superuser' allowed to manipulate any project. This role is reserved for FABRIC staff.",
+    "componentDescription": "Component: Hardware that may be added to a virtual machine to expand its capabilities",
+    "networkServiceDescription": "Network Service: Virtualized hardware that links nodes in a topology so that information (e.g., packets) can be passed through the network.",
+    "sitesDescription": "Sites: Approximately 30 physical locations where FABRIC hardware exists.",
+    "nodeDescription": "Node: An individual element (e.g., virtual machine) in a topology that is connected to other nodes to represent the physical and logical structure of a network."
+  },
+  "jiraLinks": {
+    "projectLeadRequest":  "https://fabric-testbed.atlassian.net/servicedesk/customer/portal/2/group/11/create/41",
+    "accountIssue": "https://fabric-testbed.atlassian.net/servicedesk/customer/portal/2/group/8/create/18",
+    "projectPermissionRequest": "https://fabric-testbed.atlassian.net/servicedesk/customer/portal/2/group/11/create/39",
+    "storageRequest": "https://fabric-testbed.atlassian.net/servicedesk/customer/portal/2/group/12/create/40"
+  },
+  "fabricSocialLinks": {
+    "website": "https://fabric-testbed.net/",
+    "twitter": "https://twitter.com/FABRICtestbed",
+    "youtube": "http://bit.ly/FABRICYouTube",
+    "github": "https://github.com/fabric-testbed"
+  },
+  "jupyterHubLinks": {
+    "alpha": "https://jupyter-beta.fabric-testbed.net/",
+    "beta": "https://jupyter-beta.fabric-testbed.net/",
+    "production": "https://jupyter.fabric-testbed.net/"
+  },
+  "knowledgeBaseLink": "https://learn.fabric-testbed.net/",
+  "knowledgeBaseForumLink": "https://learn.fabric-testbed.net/forums/",
   "learnArticles": {
+    "faq": "https://learn.fabric-testbed.net/faq/",
     "guideToUseTokens": "https://learn.fabric-testbed.net/knowledge-base/obtaining-and-using-fabric-api-tokens/",
     "guideToGenerateFabricCompliantKey": "https://learn.fabric-testbed.net/knowledge-base/logging-into-fabric-vms/#ssh-keypair-primer-creating-identifying-fingerprinting-keypairs",
     "guideToProjectRoles": "https://learn.fabric-testbed.net/knowledge-base/fabric-user-roles-and-project-permissions/#managing-projects-in-the-real-world",
-    "guideToLoginToFabricVMs": "https://learn.fabric-testbed.net/knowledge-base/logging-into-fabric-vms/"
+    "guideToProjectPermissions": "https://learn.fabric-testbed.net/knowledge-base/fabric-user-roles-and-project-permissions/",
+    "guideToLoginToFabricVMs": "https://learn.fabric-testbed.net/knowledge-base/logging-into-fabric-vms/",
+    "guideToSliceBuilder": "https://learn.fabric-testbed.net/knowledge-base/portal-slice-builder-user-guide/",
+    "guideToSliceBuilderSections": {
+      "step1": "https://learn.fabric-testbed.net/knowledge-base/portal-slice-builder-user-guide/#step-1-select-project",
+      "step2": "https://learn.fabric-testbed.net/knowledge-base/portal-slice-builder-user-guide/#step-2-add-nodes-and-components",
+      "step3": "https://learn.fabric-testbed.net/knowledge-base/portal-slice-builder-user-guide/#step-3-add-network-service",
+      "step4": "https://learn.fabric-testbed.net/knowledge-base/portal-slice-builder-user-guide/#step-4-create-slice",
+      "states": "https://learn.fabric-testbed.net/knowledge-base/portal-slice-builder-user-guide/#slice-states"
+    },
+    "guideToStartExperiment": "https://learn.fabric-testbed.net/knowledge-base/quick-start-guide/#3-start-your-first-experiment",
+    "guideToInstallPythonAPI": "https://learn.fabric-testbed.net/knowledge-base/install-the-python-api/",
+    "guideToSliceManager": "https://learn.fabric-testbed.net/knowledge-base/fabrictestbed-slice_manager/",
+    "guideToSliceEditor": "https://learn.fabric-testbed.net/knowledge-base/slice-editor/"
   }
 }