feat(user): add links to gitlab (#890)

Add links to: - User Profile - User Settings - GitLab Home Fix #867
SwissDataScienceCenter · Apr 3, 2020 · 4538959 · 4538959
1 parent 9ecdabd
commit 4538959
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 5 deletions.
diff --git a/src/landing/NavBar.js b/src/landing/NavBar.js
@@ -29,6 +29,7 @@ import { DropdownItem, Navbar, Nav } from "reactstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
+import { faGitlab } from "@fortawesome/free-brands-svg-icons";
 
 import logo from "./logo.svg";
 import { ExternalDocsLink, ExternalLink, Loader, RenkuNavLink, UserAvatar } from "../utils/UIComponents";
@@ -49,6 +50,20 @@ class RenkuNavBar extends Component {
   }
 }
 
+function gitLabSettingsUrlFromProfileUrl(webUrl) {
+  // Yes, the settings URL ends with 'profile'; the profile URL ends with the username
+  const comps = webUrl.split("/");
+  comps.pop();
+  comps.push("profile");
+  return comps.join("/");
+}
+
+function gitLabUrlFromProfileUrl(webUrl) {
+  const comps = webUrl.split("/");
+  comps.pop();
+  return comps.join("/");
+}
+
 class RenkuToolbarItemUser extends Component {
   render() {
     const { user } = this.props;
@@ -68,7 +83,7 @@ class RenkuToolbarItemUser extends Component {
         {this.props.userAvatar}
       </a>
       <div key="menu" className="dropdown-menu dropdown-menu-right" aria-labelledby="profile-dropdown">
-        <ExternalLink url={`${gatewayURL}/auth/user-profile`} title="Profile" className="dropdown-item" role="link" />
+        <ExternalLink url={`${gatewayURL}/auth/user-profile`} title="Account" className="dropdown-item" role="link" />
         <DropdownItem divider />
         <a id="logout-link" className="dropdown-item"
           href={`${gatewayURL}/auth/logout?redirect_url=${redirect_url}`}>Logout</a>
@@ -130,6 +145,32 @@ function RenkuToolbarHelpMenu(props) {
   </li>;
 }
 
+function RenkuToolbarGitLabMenu(props) {
+  const user = props.user;
+  if (!user.fetched)
+    return "";
+
+  else if (!user.data.id)
+    return "";
+
+  const gitLabUrl = gitLabUrlFromProfileUrl(user.data.web_url);
+  return <li className="nav-item dropdown">
+    { /* eslint-disable-next-line */}
+    <a className="nav-link dropdown-toggle" id="gitLab-menu" role="button"
+      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <FontAwesomeIcon icon={faGitlab} id="gitLabDropdownToggle" />
+    </a>
+    <div key="gitLab-menu" className="dropdown-menu dropdown-menu-right" aria-labelledby="gitLab-menu">
+      <ExternalLink url={gitLabUrl}
+        title="GitLab" className="dropdown-item" role="link" />
+      <ExternalLink url={gitLabSettingsUrlFromProfileUrl(user.data.web_url)}
+        title="Settings" className="dropdown-item" role="link" />
+      <ExternalLink url={user.data.web_url} title="Profile" className="dropdown-item" role="link" />
+    </div>
+  </li>;
+}
+
+
 class LoggedInNavBar extends Component {
 
   constructor(props) {
@@ -182,6 +223,7 @@ class LoggedInNavBar extends Component {
 
             <ul className="navbar-nav">
               <RenkuToolbarItemPlus currentPath={this.props.location.pathname}/>
+              <RenkuToolbarGitLabMenu user={this.props.user} />
               <RenkuToolbarHelpMenu />
               <RenkuToolbarItemUser {...this.props} />
             </ul>

diff --git a/src/utils/UIComponents.js b/src/utils/UIComponents.js
@@ -601,16 +601,23 @@ function IconLink(props) {
 function ExternalIconLinkWithTooltip(props) {
   const [uniqueId, ] = useState(`external-icon-link-${_.uniqueId()}`);
 
+  let className = "icon-link";
+  if (props.className)
+    className += ` ${props.className}`;
+
   return <span>
     <a href={props.url} role="button" target="_blank" rel="noreferrer noopener">
-      <FontAwesomeIcon className="icon-link" icon={props.icon} id={uniqueId} />
+      <FontAwesomeIcon className={className} icon={props.icon} id={uniqueId} />
     </a>
     <ThrottledTooltip target={uniqueId} tooltip={props.tooltip} />
   </span>;
 }
 
 function ExternalIconLinkWithoutTooltip(props) {
-  return <a href={props.url} target="_blank" rel="noreferrer noopener">
+  let className = "";
+  if (props.className)
+    className += ` ${props.className}`;
+  return <a href={props.url} target="_blank" rel="noreferrer noopener" className={className}>
     <FontAwesomeIcon icon={props.icon} /> {props.title}
   </a>;
 }
@@ -623,13 +630,14 @@ function ExternalIconLinkWithoutTooltip(props) {
  * @param {string} [url] - alternative for 'to' -- takes precedence over to
  * @param {icon} [icon] - font-awesome icon to display
  * @param {string} [tooltip] - the text of the tooltip or null for no tooltip
+ * @param {string?} [className] - [Optional] Any classes to add, e.g., 'nav-link' or 'dropdown-item'
  */
 function ExternalIconLink(props) {
   const url = (props.url) ? props.url : props.to;
-  const myProps = {url, ...props};
+  const myProps = { url, ...props };
   return (props.tooltip) ?
     ExternalIconLinkWithTooltip(myProps) :
-    ExternalIconLinkWithoutTooltip(myProps)
+    ExternalIconLinkWithoutTooltip(myProps);
 }
 
 /**