Merge pull request #286 from nulib/3903-mirador-warning

Update message for opening a work in Mirador for authenticated Works

Author: adamjarling

components/Shared/Announcement.tsx

@@ -1,3 +1,4 @@
+import { CSS } from "@stitches/react/types/css-util";
 import React from "react";
 import { maxWidths } from "@/styles/containers";
 import { styled } from "@/stitches.config";
@@ -40,6 +41,7 @@ const ContentWrapper = styled("div", {
 
 interface AnnouncementProps {
   children: React.ReactNode;
+  css?: CSS;
 }
 
 const Announcement: React.FC<AnnouncementProps> = ({

components/Work/ActionsDialog/DownloadAndShare.styled.ts

@@ -120,7 +120,7 @@ const ShareURL = styled(EmbedHTML, {
 const ShareURLActions = styled(EmbedHTMLActionRow, {
   marginTop: "$gr3",
 
-  "> a, > button": {
+  "> a, > button, > span": {
     marginLeft: "$gr3",
     color: "$black50",
     fontSize: "$gr3",

components/Work/ActionsDialog/DownloadAndShare.test.tsx

@@ -3,8 +3,13 @@ import {
   mockPrivateUnpublishedWorkManifest,
 } from "@/mocks/private-unpublished-work";
 import { render, screen } from "@testing-library/react";
+import {
+  samplePublicWork,
+  samplePublicWorkManifest,
+} from "@/mocks/sample-public-work";
 
 import DownloadAndShare from "./DownloadAndShare";
+import { Work } from "@nulib/dcapi-types";
 import { WorkProvider } from "@/context/work-context";
 import mockRouter from "next-router-mock";
 import userEvent from "@testing-library/user-event";
@@ -72,4 +77,73 @@ describe("DownloadAndShare", () => {
     await user.click(screen.getAllByText("Embed HTML")[1]);
     expect(screen.getAllByText(embedWarningText)).toHaveLength(3);
   });
+
+  it("renders a link for Mirador without a warning message", () => {
+    mockRouter.setCurrentUrl("/items/8163f95b-cd40-4210-a7ff-e25b7b39c8d6");
+
+    render(
+      <WorkProvider
+        initialState={{
+          // @ts-ignore
+          manifest: samplePublicWorkManifest,
+          work: samplePublicWork,
+        }}
+      >
+        <DownloadAndShare />
+      </WorkProvider>
+    );
+
+    expect(screen.queryByTestId("mirador-announcement")).toBeNull();
+    expect(screen.getByText("View in Mirador")).toHaveAttribute("href");
+  });
+
+  it("renders no Mirador link and a warning message for an Institution and Private Work", async () => {
+    mockRouter.setCurrentUrl("/items/8163f95b-cd40-4210-a7ff-e25b7b39c8d6");
+
+    // Institution Work
+    let work = {
+      ...samplePublicWork,
+      visibility: "Institution" as Work["visibility"],
+    };
+
+    const { rerender } = render(
+      <WorkProvider
+        initialState={{
+          // @ts-ignore
+          manifest: samplePublicWorkManifest,
+          work,
+        }}
+      >
+        <DownloadAndShare />
+      </WorkProvider>
+    );
+
+    expect(
+      await screen.findByTestId("mirador-announcement")
+    ).toBeInTheDocument();
+    expect(screen.getByText("View in Mirador")).not.toHaveAttribute("href");
+
+    // Private Work
+    work = {
+      ...samplePublicWork,
+      visibility: "Private" as Work["visibility"],
+    };
+
+    rerender(
+      <WorkProvider
+        initialState={{
+          // @ts-ignore
+          manifest: samplePublicWorkManifest,
+          work,
+        }}
+      >
+        <DownloadAndShare />
+      </WorkProvider>
+    );
+
+    expect(
+      await screen.findByTestId("mirador-announcement")
+    ).toBeInTheDocument();
+    expect(screen.getByText("View in Mirador")).not.toHaveAttribute("href");
+  });
 });

components/Work/ActionsDialog/DownloadAndShare.tsx

@@ -15,14 +15,14 @@ import {
   ShareURL,
   ShareURLActions,
 } from "@/components/Work/ActionsDialog/DownloadAndShare.styled";
-
 import { Label, Thumbnail } from "@samvera/nectar-iiif";
 import React, { useEffect, useState } from "react";
 import {
   getAnnotationBodyType,
   getInfoResponse,
 } from "@/lib/iiif/manifest-helpers";
 import { makeBlob, mimicDownload } from "@samvera/image-downloader";
+
 import ActionsDialogAside from "@/components/Work/ActionsDialog/Aside";
 import Announcement from "@/components/Shared/Announcement";
 import CopyText from "@/components/Shared/CopyText";
@@ -37,13 +37,32 @@ import { useWorkState } from "@/context/work-context";
 const embedWarningMessage =
   "Embed is not available for works restricted to the Northwestern University community";
 
+function MiradorLink({
+  showWarning,
+  manifestId,
+}: {
+  showWarning: boolean;
+  manifestId: string;
+}) {
+  return showWarning ? (
+    <span>View in Mirador</span>
+  ) : (
+    <a
+      href={`https://projectmirador.org/embed/?iiif-content=${manifestId}`}
+      target="_blank"
+    >
+      View in Mirador
+    </a>
+  );
+}
+
 const DownloadAndShare: React.FC = () => {
   const { workState } = useWorkState();
   const { manifest, work } = workState;
   const [imageCanvases, setImageCanvases] = useState<Canvas[]>([]);
   const router = useRouter();
   const isSharedLinkPage = router.pathname.includes("/shared");
-  const { isUserLoggedIn, isWorkInstitution, isWorkRestricted } =
+  const { isUserLoggedIn, isWorkInstitution, isWorkPrivate, isWorkRestricted } =
     useWorkAuth(work);
 
   const showEmbedWarning = Boolean(
@@ -98,13 +117,22 @@ const DownloadAndShare: React.FC = () => {
                 <a href="https://iiif.io/get-started/why-iiif/" target="_blank">
                   What is IIIF?
                 </a>
-                <a
-                  href={`https://projectmirador.org/embed/?iiif-content=${manifest.id}`}
-                  target="_blank"
-                >
-                  View in Mirador
-                </a>
+                <MiradorLink
+                  showWarning={isWorkInstitution || isWorkPrivate}
+                  manifestId={manifest.id}
+                />
               </ShareURLActions>
+              {(isWorkInstitution || isWorkPrivate) && (
+                <Announcement
+                  css={{
+                    marginTop: "1rem",
+                  }}
+                  data-testid="mirador-announcement"
+                >
+                  Opening in external tools like Mirador is not supported for works
+                  that require authentication.
+                </Announcement>
+              )}
             </ShareURL>
           </>
         )}