DRAFT: 1945 Links to projects, subprojects, action items

frontend/src/pages/Common/Identifier.js

@@ -1,32 +1,30 @@
-import React, { Component } from "react";
+import React from "react";
 
 import TextInput from "./TextInput";
 
 import "./index.scss";
 
-class Identifier extends Component {
-  render() {
-    return (
-      <div className="identifier">
-        <TextInput
-          label={this.props.nameLabel}
-          value={this.props.name}
-          onChange={this.props.nameOnChange}
-          data-test={this.props.commentId || "nameinput"}
-          disabled={this.props.disabled}
-        />
+const Identifier = (props) => {
+  return (
+    <div className="identifier">
+      <TextInput
+        label={props.nameLabel}
+        value={props.name}
+        onChange={props.nameOnChange}
+        data-test={props.commentId || "nameinput"}
+        disabled={props.disabled}
+      />
 
-        <TextInput
-          label={this.props.commentLabel}
-          value={this.props.comment}
-          onChange={this.props.commentOnChange}
-          multiline={true}
-          data-test={this.props.commentId || "commentinput"}
-          disabled={this.props.disabled}
-        />
-      </div>
-    );
-  }
-}
+      <TextInput
+        label={props.commentLabel}
+        value={props.comment}
+        onChange={props.commentOnChange}
+        multiline={true}
+        data-test={props.commentId || "commentinput"}
+        disabled={props.disabled}
+      />
+    </div>
+  );
+};
 
 export default Identifier;

frontend/src/pages/Common/LinkItems.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+import DatasetLinkedIcon from "@mui/icons-material/DatasetLinked";
+import { Avatar, ListItem, ListItemAvatar, Typography } from "@mui/material";
+
+const displayLinks = (links) => {
+  return links.map((link, idx) => (
+    <Typography variant="body2" mt={2} key={`${link}-${idx}`}>
+      <Link to={`${link}`} key={`${link}-${idx}`}>
+        {link}
+      </Link>
+    </Typography>
+  ));
+};
+
+const LinkItems = ({ projectComment }) => {
+  const regex = /(?<=\s)\/projects[^\s,\.]*/g;
+  const matches = projectComment.match(regex);
+
+  return matches && matches.length > 0 ? (
+    <ListItem>
+      <ListItemAvatar>
+        <Avatar>
+          <DatasetLinkedIcon />
+        </Avatar>
+      </ListItemAvatar>
+      <>{displayLinks(matches)}</>
+    </ListItem>
+  ) : null;
+};
+
+export default LinkItems;

frontend/src/pages/Common/TextWithLinks.js

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+
+import { Link, TextField, Typography } from "@mui/material";
+
+const TextWithLinks = ({
+  label,
+  helperText,
+  value,
+  onChange,
+  onBlur,
+  onFocus,
+  pattern,
+  multiline = false,
+  disabled = false,
+  id,
+  // eslint-disable-next-line no-useless-computed-key
+  ["data-test"]: dataTest
+}) => {
+  const [inputValue, setInputValue] = useState("");
+  const [url, setUrl] = useState("");
+
+  const handleInputChange = (event) => {
+    const value = event.target.value;
+    setInputValue(value);
+
+    // Simple URL detection, could use a more robust regex for URL validation
+    const urlPattern = /https?:\/\/[^\s$.?#].[^\s]*/gi;
+    const detectedUrl = value.match(urlPattern);
+    setUrl(detectedUrl ? detectedUrl[0] : "");
+  };
+
+  return (
+    <>
+      {/* TextField for input */}
+      <TextField
+        variant="standard"
+        label={label}
+        onFocus={onFocus}
+        helperText={helperText}
+        multiline={multiline}
+        className="text-field"
+        disabled={disabled}
+        value={inputValue}
+        id={id}
+        // onChange={(event) => onChange(event.target.value)}
+        onBlur={onBlur}
+        pattern={pattern}
+        data-test={dataTest}
+        onChange={handleInputChange}
+      />
+
+      {/* Conditionally render the clickable URL below the TextField */}
+      {url && (
+        <Typography variant="body2" mt={2}>
+          Clickable URL:{" "}
+          <Link href={url} target="_blank" rel="noopener noreferrer">
+            {url}
+          </Link>
+        </Typography>
+      )}
+    </>
+  );
+};
+
+export default TextWithLinks;

frontend/src/pages/SubProjects/ProjectDetails.js

@@ -35,15 +35,16 @@ import {
 import strings from "../../localizeStrings";
 import ProjectAnalyticsDialog from "../Analytics/ProjectAnalyticsDialog";
 import BudgetEmptyState from "../Common/BudgetEmptyState";
+import LinkItems from "../Common/LinkItems.js";
 
 import ProjectAssigneeContainer from "./ProjectAssigneeContainer";
 
 import "./ProjectDetails.scss";
 
 const displayTags = (tags) => {
-  return tags.map((tag, i) => (
+  return tags.map((tag, idx) => (
     <Chip
-      key={`${tag}-${i}`}
+      key={`${tag}-${idx}`}
       label={`#${formattedTag(tag)}`}
       style={{ margin: "1px" }}
       clickable={false}
@@ -77,6 +78,7 @@ const ProjectDetails = (props) => {
   const hasOpenSubprojects = !_isEmpty(subProjects.find((subproject) => subproject.data.status === "open"));
   const closeDisabled = !canClose || hasOpenSubprojects || projectStatus === "closed";
   const tags = displayTags(projectTags || []);
+
   return (
     <div className="project-details-container">
       <Card className="project-details-card">
@@ -107,6 +109,7 @@ const ProjectDetails = (props) => {
               <ListItemText primary={tags} />
             </ListItem>
           ) : null}
+          <LinkItems projectComment={projectComment} />
         </List>
         <div className="project-projected-budget" data-test="project-projected-budget">
           <Typography variant="body1">{strings.common.total_budget}</Typography>

frontend/src/pages/SubProjects/SubProjectContainer.js

@@ -71,6 +71,16 @@ class SubProjectContainer extends Component {
   }
 
   componentDidUpdate(prevProps) {
+    if (this.props.router.location.pathname !== prevProps.router.location.pathname) {
+      const newProjectId = this.props.router.location.pathname.split("/")[2];
+      if (newProjectId !== this.projectId) {
+        this.setState({ isDataFetched: false });
+        this.projectId = newProjectId;
+        this.props.setSelectedView(this.projectId, "project");
+        this.props.fetchAllProjectDetails(this.projectId, true);
+        this.setState({ isDataFetched: true });
+      }
+    }
     const searchTermChanges = this.props.searchTerm !== prevProps.searchTerm;
     const projectsChange = !_isEqual(this.props.subProjects, prevProps.subProjects);