#356: solved active side navbar item issue

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fabric-portal",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.32",

src/components/UserProfile/OtherIdentity.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { default as portalData } from "../../services/portalData.json";
 
 class OtherIdentity extends React.Component {
   state = {
@@ -117,7 +118,17 @@ class OtherIdentity extends React.Component {
     const { other_identities } = this.props;
     return (
       <div>
-        <h5 className="mt-2">Other Identities</h5>
+        <h5 className="mt-2">
+          Other Identities
+          <a
+            href={portalData.learnArticles.guideToOtherIdentities}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <i className="fa fa-question-circle mx-2"></i>
+            User Guide
+          </a>
+        </h5>
         <div className="form-row ps-1">
           <div className="form-group slice-builder-form-group w-25 me-2">
             <label htmlFor="inputtype" className="slice-builder-label">

src/components/common/SideNav.jsx

@@ -9,7 +9,7 @@ class SideNav extends React.Component {
           {this.props.items.map((item, index) => {
             return (
               item.active ? 
-              <Nav.Link href={item.hash} key={`sidenav-${index}`} onClick={() => this.props.handleChange(index)}>{item.name}</Nav.Link> :
+              <Nav.Link href={item.hash} key={`sidenav-${index}`} onClick={() => this.props.handleChange(index)} className="active">{item.name}</Nav.Link> :
               <Nav.Link eventKey={item.hash} key={`sidenav-${index}`} onClick={() => this.props.handleChange(index)}>{item.name}</Nav.Link>
             );
           })}

src/pages/ProjectForm.jsx

@@ -424,7 +424,15 @@ class ProjectForm extends Form {
       2: "#slices",
       3: "#volumes",
     }
-    this.setState({ activeIndex: newIndex });
+    this.setState({ 
+      activeIndex: newIndex,
+      SideNavItems: [
+        { name: "BASIC INFORMATION", active: newIndex === 0 },
+        { name: "PROJECT MEMBERSHIPS", active: newIndex === 1 },
+        { name: "SLICES", active: newIndex === 2 },
+        { name: "PERSISTENT STORAGE", active: newIndex === 3 }
+      ]
+     });
     this.props.navigate(`/projects/${this.props.match.params.id}${indexToHash[newIndex]}`);
   };
 

src/pages/User.jsx

@@ -15,10 +15,10 @@ import Col from 'react-bootstrap/Col';
 class User extends React.Component {
   state = {
     SideNavItems: [
-      { name: "MY PROFILE", active: true },
-      { name: "MY ROLES & PROJECTS", active: false },
-      { name: "MY SSH KEYS", active: false },
-      { name: "MY SLICES", active: false },
+      { name: "MY PROFILE", hash: "#profile", active: true },
+      { name: "MY ROLES & PROJECTS", hash: "#roles", active: false },
+      { name: "MY SSH KEYS", hash: "#sshKeys", active: false },
+      { name: "MY SLICES", hash: "#slices", active: false },
     ],
     user: {},
     activeIndex: 0,
@@ -41,6 +41,21 @@ class User extends React.Component {
 
   handleChange = (newIndex) => {
     this.setState({ activeIndex: newIndex });
+    const indexToHash = {
+      0: "#profile",
+      1: "#roles",
+      2: "#sshKeys",
+      3: "#slices",
+    }
+    this.setState({ activeIndex: newIndex,
+      SideNavItems: [
+        { name: "MY PROFILE", active: newIndex === 0  },
+        { name: "MY ROLES & PROJECTS", active: newIndex === 1 },
+        { name: "MY SSH KEYS", active: newIndex === 2 },
+        { name: "MY SLICES", active: newIndex === 3 }
+      ]
+    });
+    this.props.navigate(`/user${indexToHash[newIndex]}`);
   };
 
   handleRoleRefresh = async () => {

src/services/portalData.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.3",
+  "version": "1.8.0",
   "defaultFacility": "FABRIC",
   "facilityOptions": ["FABRIC"],
   "projectTypeOptions": [
@@ -94,7 +94,8 @@
     "guideToSliceManager": "https://learn.fabric-testbed.net/knowledge-base/fabrictestbed-slice_manager/",
     "guideToSliceEditor": "https://learn.fabric-testbed.net/knowledge-base/slice-editor/",
     "guideToUseArtifactManager": "https://learn.fabric-testbed.net/knowledge-base/artifact-manager/",
-    "guideToCommunityList": "https://learn.fabric-testbed.net/knowledge-base/project-science-domain-community-list/"
+    "guideToCommunityList": "https://learn.fabric-testbed.net/knowledge-base/project-science-domain-community-list/",
+    "guideToOtherIdentities": "https://learn.fabric-testbed.net/knowledge-base/add-other-identities-in-portal/"
   },
   "usernameOnImageMapping": {
     "default_centos8_stream": "centos",