feat: include issues and MRs in gitlab button (#2256)

client/src/project/Project.present.js

@@ -70,6 +70,7 @@ import { useProjectJsonLdQuery } from "../features/projects/ProjectKgApi";
 
 import "./Project.css";
 import { StartSessionLink } from "../utils/components/entities/Buttons";
+import GitLabConnectButton, { externalUrlToGitLabIdeUrl } from "./components/GitLabConnect";
 
 function filterPaths(paths, blacklist) {
   // Return paths to do not match the blacklist of regexps.
@@ -150,26 +151,6 @@ class ProjectStatusIcon extends Component {
   }
 }
 
-function GitLabConnectButton(props) {
-  const size = (props.size) ? props.size : "md";
-  const { userLogged, gitlabIDEUrl } = props;
-  if (!props.externalUrl)
-    return null;
-  const gitlabProjectButton = <ExternalLink className="btn-outline-rk-green"
-    url={props.externalUrl} title="View in GitLab" />;
-
-  const onClick = () => window.open(gitlabIDEUrl, "_blank");
-  const gitlabIDEButton = userLogged ?
-    (<DropdownItem onClick={onClick} size={size}>View in Web IDE</DropdownItem>) :
-    null;
-
-  let button = gitlabIDEButton ?
-    (<ButtonWithMenu color="rk-green" default={gitlabProjectButton} size={size}>{gitlabIDEButton}</ButtonWithMenu>) :
-    (<ExternalLink className="btn-outline-rk-green" url={props.externalUrl} size={size} title="View in GitLab" />);
-
-  return (<div>{button}</div>);
-}
-
 class ForkProjectModal extends Component {
   constructor(props) {
     super(props);
@@ -303,8 +284,7 @@ function ProjectSuggestionReadme({ commits, commitsReadme, externalUrl, metadata
 
   if (countCommitsReadme > 1 || (!isReadmeCommitInitial && countCommitsReadme !== 0)) return null;
 
-  const gitlabIDEUrl = externalUrl !== "" && externalUrl.includes("/gitlab/") ?
-    externalUrl.replace("/gitlab/", "/gitlab/-/ide/project/") : null;
+  const gitlabIDEUrl = externalUrlToGitLabIdeUrl(externalUrl);
   const addReadmeUrl = `${gitlabIDEUrl}/edit/${metadata.defaultBranch}/-/README.md`;
   return <li><p style={{ fontSize: "smaller" }}>
     <a className="mx-1" href={addReadmeUrl} target="_blank" rel="noopener noreferrer">
@@ -427,8 +407,7 @@ class ProjectViewHeaderOverview extends Component {
       }
     }
 
-    const gitlabIDEUrl = this.props.externalUrl !== "" && this.props.externalUrl.includes("/gitlab/") ?
-      this.props.externalUrl.replace("/gitlab/", "/gitlab/-/ide/project/") : null;
+    const gitlabIDEUrl = externalUrlToGitLabIdeUrl(this.props.externalUrl);
     const forkProjectDisabled = metadata.accessLevel < ACCESS_LEVELS.REPORTER
     && metadata.visibility === "private";
 

client/src/project/components/GitLabConnect.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { DropdownItem } from "reactstrap";
+
+import { ExternalLink } from "../../utils/components/ExternalLinks";
+import { ButtonWithMenu } from "../../utils/components/buttons/Button";
+
+function externalUrlToGitLabIdeUrl(externalUrl: string) {
+  if (externalUrl.includes("/gitlab/")) return externalUrl.replace("/gitlab/", "/gitlab/-/ide/project/");
+  const url = new URL(externalUrl);
+  const pathname = url.pathname;
+  const newPathname = `/-/ide/project${pathname}`;
+  url.pathname = newPathname;
+  return url.toString();
+}
+
+type GitLabLinkItemProps = {
+  size: string;
+  text: string;
+  url: string;
+};
+
+function GitLabLinkItem({ size, text, url }: GitLabLinkItemProps) {
+  const onClick = () => window.open(url, "_blank");
+  return (
+    <DropdownItem onClick={onClick} size={size}>
+      {text}
+    </DropdownItem>
+  );
+}
+
+type GitLabConnectButtonProps = {
+  externalUrl?: string;
+  size: string;
+  userLogged: boolean;
+};
+function GitLabConnectButton(props: GitLabConnectButtonProps) {
+  const { externalUrl, userLogged } = props;
+  if (!externalUrl) return null;
+  const gitlabIdeUrl = externalUrlToGitLabIdeUrl(externalUrl);
+  const size = props.size ? props.size : "md";
+
+  const gitLabIssuesUrl = `${props.externalUrl}/-/issues`;
+  const gitLabMrUrl = `${props.externalUrl}/-/merge_requests`;
+
+  const gitlabProjectButton = (
+    <ExternalLink className="btn-outline-rk-green" url={props.externalUrl} title="Open in GitLab" />
+  );
+
+  const gitlabIDEButton =
+    userLogged && gitlabIdeUrl ? <GitLabLinkItem size={size} text="Web IDE" url={gitlabIdeUrl} /> : null;
+
+  return (
+    <div>
+      <ButtonWithMenu color="rk-green" default={gitlabProjectButton} size={size}>
+        <GitLabLinkItem size={size} text="Issues" url={gitLabIssuesUrl} />
+        <GitLabLinkItem size={size} text="Merge Requests" url={gitLabMrUrl} />
+        {gitlabIDEButton}
+      </ButtonWithMenu>
+    </div>
+  );
+}
+
+export default GitLabConnectButton;
+export { externalUrlToGitLabIdeUrl };