feat(Project): improved project links

client/src/components/projects/ProjectLinkButtons.tsx

@@ -0,0 +1,89 @@
+import { Button, Header, Icon, Popup } from "semantic-ui-react";
+import { normalizeURL } from "../util/HelperFunctions";
+import { buildCommonsUrl, buildWorkbenchURL } from "../../utils/projectHelpers";
+
+interface ProjectLinkButtonsProps {
+  libreLibrary?: string;
+  libreCoverID?: string;
+  projectLink?: string;
+  didCreateWorkbench?: boolean;
+}
+
+const ProjectLinkButtons: React.FC<ProjectLinkButtonsProps> = ({
+  libreLibrary,
+  libreCoverID,
+  projectLink,
+  didCreateWorkbench,
+}) => {
+  const validWorkbench = didCreateWorkbench && libreCoverID && libreLibrary;
+  return (
+    <div>
+      <Header as="span" sub>
+        Important Links:{" "}
+      </Header>
+      <div className="flex flex-row mt-2">
+        <Popup
+          content={
+            validWorkbench
+              ? "This link will take you to the book's page in the LibreTexts libraries."
+              : projectLink
+              ? "This link will take you to the project's linked URL. This may be a book in the LibreTexts library or a third-party resource."
+              : "This project does not have a linked URL."
+          }
+          trigger={
+            <Button
+              onClick={() =>
+                validWorkbench
+                  ? window.open(
+                      buildWorkbenchURL(libreLibrary, libreCoverID),
+                      "_blank"
+                    )
+                  : projectLink
+                  ? window.open(normalizeURL(projectLink ?? ""), "_blank")
+                  : ""
+              }
+              className={
+                validWorkbench || projectLink
+                  ? ""
+                  : "!cursor-default opacity-45"
+              }
+              color={validWorkbench || projectLink ? "blue" : "grey"}
+            >
+              {validWorkbench ? "Textbook" : "Project/Textbook"} Link
+              <Icon name="external alternate" className="!ml-2" />
+            </Button>
+          }
+        />
+        <Popup
+          content={
+            libreCoverID && libreLibrary
+              ? "This link will take you to the book's page on the Commons."
+              : "This project does not have a Commons page."
+          }
+          trigger={
+            <Button
+              onClick={
+                libreCoverID && libreLibrary
+                  ? () =>
+                      window.open(
+                        buildCommonsUrl(libreLibrary, libreCoverID),
+                        "_blank"
+                      )
+                  : () => {}
+              }
+              className={
+                libreCoverID && libreLibrary ? "" : "!cursor-default opacity-45"
+              }
+              color={libreCoverID && libreLibrary ? "blue" : "grey"}
+            >
+              Commons Page
+              <Icon name="external alternate" className="!ml-2" />
+            </Button>
+          }
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ProjectLinkButtons;

client/src/components/projects/ProjectView.jsx

@@ -89,7 +89,8 @@ import RemoveTaskAssigneeModal from './TaskComponents/RemoveTaskAssigneeModal';
 import AddTaskAssigneeModal from './TaskComponents/AddTaskAssigneeModal';
 import ViewTaskModal from './TaskComponents/ViewTaskModal';
 import AssignAllModal from './TaskComponents/AssignAllModal';
-import { buildRemixerURL, buildWorkbenchURL } from '../../utils/projectHelpers';
+import { buildCommonsUrl, buildRemixerURL, buildWorkbenchURL } from '../../utils/projectHelpers';
+import ProjectLinkButtons from './ProjectLinkButtons';
 const CreateWorkbenchModal = lazy(() => import('./CreateWorkbenchModal'));
 const ManageTeamModal = lazy(() => import('./ManageTeamModal'));
 
@@ -2110,13 +2111,6 @@ const ProjectView = (props) => {
                               <span>{project.libreCampus}</span>
                             </div>
                           }
-                          <div className='mb-1p'>
-                            <Header as='span' sub>Project Link: </Header>
-                            {(project.projectURL && !isEmptyString(project.projectURL))
-                              ? <a href={normalizeURL(project.projectURL)} target='_blank' rel='noopener noreferrer'>Open <Icon name='external' /></a>
-                              : <span><em>Unlinked</em></span>
-                            }
-                          </div>
                           {(Array.isArray(project.cidDescriptors) && project.cidDescriptors.length > 0) && (
                             <div className="mb-1p">
                               <Header as="span" sub>C-ID(s): </Header>
@@ -2139,22 +2133,7 @@ const ProjectView = (props) => {
                               </Label.Group>
                             </div>
                           }
-                          {
-                            project.didCreateWorkbench && (
-                              <BookCreatedLabel />
-                            )
-                          }
-                          {project.hasCommonsBook && (
-                            <div className="mt-1e">
-                              <Link
-                                to={`/book/${project.libreLibrary}-${project.libreCoverID}`}
-                                target="_blank"
-                                rel="noreferrer"
-                              >
-                                View on Commons <Icon name="external" />
-                              </Link>
-                            </div>
-                          )}
+                          <ProjectLinkButtons libreCoverID={project.libreCoverID} libreLibrary={project.libreLibrary} projectLink={project.projectURL} didCreateWorkbench={project.didCreateWorkbench}/>
                           {(project.adaptCourseID && project.adaptCourseID !== '') && (
                             <div className="mt-1e">
                               <a
@@ -2167,11 +2146,14 @@ const ProjectView = (props) => {
                             </div>
                           )}
                           {(canViewDetails && project.hasCommonsBook) && (
-                            <div className="mt-1e">
+                            <div className="mt-8 flex flex-col">
+                              <Header as='span' sub>Reader Resources: </Header>
                               <Button
                                 color="blue"
+                                basic
                                 compact
                                 onClick={handleOpenReaderResourcesModal}
+                                className='!w-64'
                               >
                                   Manage Reader Resources
                               </Button>

client/src/utils/projectHelpers.ts

@@ -28,4 +28,8 @@ export function buildWorkbenchURL(libreLibrary: string, libreCoverID: string) {
 
 export function buildRemixerURL(libreLibrary: string) {
   return `https://${libreLibrary}.libretexts.org/Under_Construction/Development_Details/OER_Remixer`;
+}
+
+export function buildCommonsUrl(libreLibrary: string, libreCoverID: string) {
+  return `/book/${libreLibrary}-${libreCoverID}`;
 }