From e579d2b570733bd4dadeb7480e0fe5cdebe5fde8 Mon Sep 17 00:00:00 2001
From: Yaxue Guo <yaxue.guo23@gmail.com>
Date: Fri, 3 Jan 2025 17:34:18 -0500
Subject: [PATCH] #356: solved active side navbar item issue

---
 package-lock.json                            |  4 ++--
 package.json                                 |  2 +-
 src/components/UserProfile/OtherIdentity.jsx | 13 ++++++++++-
 src/components/common/SideNav.jsx            |  2 +-
 src/pages/ProjectForm.jsx                    | 10 ++++++++-
 src/pages/User.jsx                           | 23 ++++++++++++++++----
 src/services/portalData.json                 |  5 +++--
 7 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9e8a7dc..05c7dda 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "fabric-portal",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "fabric-portal",
-      "version": "1.7.3",
+      "version": "1.8.0",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-brands-svg-icons": "^5.15.3",
diff --git a/package.json b/package.json
index adf8b01..7d38584 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/UserProfile/OtherIdentity.jsx b/src/components/UserProfile/OtherIdentity.jsx
index c16880b..a30a421 100644
--- a/src/components/UserProfile/OtherIdentity.jsx
+++ b/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">
diff --git a/src/components/common/SideNav.jsx b/src/components/common/SideNav.jsx
index dd4ec54..bea7d8f 100644
--- a/src/components/common/SideNav.jsx
+++ b/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>
             );
           })}
diff --git a/src/pages/ProjectForm.jsx b/src/pages/ProjectForm.jsx
index d3af4a7..260e912 100644
--- a/src/pages/ProjectForm.jsx
+++ b/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]}`);
   };
 
diff --git a/src/pages/User.jsx b/src/pages/User.jsx
index 9352745..5a67f7f 100644
--- a/src/pages/User.jsx
+++ b/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 () => {
diff --git a/src/services/portalData.json b/src/services/portalData.json
index 6f34ead..5fe0dca 100644
--- a/src/services/portalData.json
+++ b/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",