Merge pull request #293 from nulib/deploy/staging

Production push

components/Collection/Tabs/Explore.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+
 import type { GetTopMetadataAggsReturn } from "@/lib/collection-helpers";
 import RelatedItems from "@/components/Shared/RelatedItems";
 
@@ -18,10 +19,12 @@ const CollectionTabsExplore: React.FC<CollectionTabsExploreProps> = ({
   useEffect(() => {
     /**
      * In the future we could  support multiple metadata fields, but for
-     * now we'll just assume passing in 3 Subject collections to Bloom
+     * now we'll just assume passing in 3 Subject collections to the Slider
      */
     const subject = topMetadata[0];
+    console.log("subject", subject);
 
+    // Build "as=iiif" urls for each subject which will feed into the Slider
     setUrls(
       subject.value.map((subjectValue) => {
         const str = `${url}/search?query=collection.id:"${collectionId}" AND ${

components/Facets/Facets.tsx

@@ -1,5 +1,6 @@
 import { FacetExtras, StyledFacets, Width, Wrapper } from "./Facets.styled";
 import React, { useRef } from "react";
+
 import Container from "@/components/Shared/Container";
 import FacetsFilter from "@/components/Facets/Filter/Filter";
 import SearchPublicOnlyWorks from "@/components/Search/PublicOnlyWorks";

components/Search/Search.tsx

@@ -12,6 +12,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+
 import { ALL_FACETS } from "@/lib/constants/facets-model";
 import useQueryParams from "@/hooks/useQueryParams";
 import { useRouter } from "next/router";
@@ -34,6 +35,10 @@ const Search: React.FC<SearchProps> = ({ isSearchActive }) => {
 
     /* Guard against searching from a page with dynamic route params */
     const facetIds = ALL_FACETS.facets.map((facet) => facet.id);
+
+    // Account for the "similar" facet (comes from "View All" in sliders)
+    facetIds.push("similar");
+
     const urlFacetsKeys = Object.keys(urlFacets);
     urlFacetsKeys.forEach((key) => {
       if (!facetIds.includes(key)) {

components/Search/Similar.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from "@/test-utils";
+
+import SearchSimilar from "./Similar";
+
+describe("SearchSimilar component", () => {
+  const mockSetShowSimilar = jest.fn();
+  const props = {
+    handleClose: mockSetShowSimilar,
+    work: {
+      id: "abc123",
+      title: "ima source work for similar results",
+    },
+  };
+
+  it("renders the Work title and a link to the Work page", () => {
+    render(<SearchSimilar {...props} />);
+    const title = screen.getByText(/ima source work for similar results/i);
+    expect(title).toBeInTheDocument();
+
+    expect(
+      screen.getByRole("link", { name: /ima source work for similar results/i })
+    ).toHaveAttribute("href", "/items/abc123");
+  });
+
+  it("renders a close button, which calls a callback fn", () => {
+    render(<SearchSimilar {...props} />);
+    const button = screen.getByRole("button", { name: /close/i });
+    expect(button).toBeInTheDocument();
+    button.click();
+    expect(mockSetShowSimilar).toHaveBeenCalledTimes(1);
+  });
+});

components/Search/Similar.tsx

@@ -0,0 +1,65 @@
+import Announcement from "@/components/Shared/Announcement";
+import { IconClear } from "@/components/Shared/SVG/Icons";
+import Link from "next/link";
+import React from "react";
+import { styled } from "@/stitches.config";
+
+interface Props {
+  handleClose: () => void;
+  work: {
+    id: string;
+    title: string;
+  };
+}
+
+/* eslint sort-keys: 0 */
+
+const SimilarWrapper = styled(Announcement, {
+  marginBottom: "$gr4",
+  paddingTop: "$gr1",
+  paddingBottom: "$gr1",
+});
+
+const SimilarStyled = styled("div", {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  color: "$purple",
+  position: "relative",
+
+  "& button": {
+    position: "absolute",
+    right: 0,
+    background: "transparent",
+    border: "none",
+    cursor: "pointer",
+
+    "& span": {
+      display: "none",
+    },
+
+    "& svg": {
+      width: "$gr3",
+      height: "$gr3",
+    },
+  },
+});
+
+const SearchSimilar: React.FC<Props> = ({ handleClose, work }) => {
+  return (
+    <SimilarWrapper>
+      <SimilarStyled>
+        <p>
+          You are viewing works similar to{" "}
+          <Link href={`/items/${work?.id}`}>{work?.title}</Link>
+        </p>
+        <button type="button" onClick={handleClose}>
+          <span>Close</span>
+          <IconClear />
+        </button>
+      </SimilarStyled>
+    </SimilarWrapper>
+  );
+};
+
+export default SearchSimilar;

components/Work/ActionsDialog/DownloadAndShare.tsx

@@ -50,6 +50,7 @@ function MiradorLink({
     <a
       href={`https://projectmirador.org/embed/?iiif-content=${manifestId}`}
       target="_blank"
+      rel="noreferrer"
     >
       View in Mirador
     </a>
@@ -114,7 +115,11 @@ const DownloadAndShare: React.FC = () => {
                   textPrompt="Copy Manifest Link"
                   textToCopy={manifest.id}
                 />
-                <a href="https://iiif.io/get-started/why-iiif/" target="_blank">
+                <a
+                  href="https://iiif.io/get-started/why-iiif/"
+                  target="_blank"
+                  rel="noreferrer"
+                >
                   What is IIIF?
                 </a>
                 <MiradorLink

jest.setup.js

@@ -1,6 +1,6 @@
 // Used for __tests__/testing-library.js
 // Learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 
 jest.mock("next/dynamic", () => () => {
   const DynamicComponent = () => null;

lib/queries/builder.ts

@@ -1,4 +1,5 @@
 import { buildSearchPart, querySearchTemplate } from "@/lib/queries/search";
+
 import { ApiSearchRequestBody } from "@/types/api/request";
 import { FacetsInstance } from "@/types/components/facets";
 import { QueryDslQueryContainer } from "@elastic/elasticsearch/api/types";
@@ -16,10 +17,17 @@ type BuildQueryProps = {
 
 export function buildQuery(obj: BuildQueryProps) {
   const { aggs, aggsFilterValue, size, term, urlFacets } = obj;
-
   const must: QueryDslQueryContainer[] = [];
+
   if (term) must.push(buildSearchPart(term));
-  if (Object.keys(urlFacets).length > 0) must.push(addFacetsToQuery(urlFacets));
+
+  if (Object.keys(urlFacets).length > 0) {
+    must.push(addFacetsToQuery(urlFacets));
+
+    if (Object.hasOwn(urlFacets, "similar")) {
+      must.push(addMoreLikeThis(urlFacets));
+    }
+  }
 
   return {
     ...querySearchTemplate,
@@ -42,3 +50,26 @@ export function addFacetsToQuery(urlFacets: UrlFacets) {
     },
   };
 }
+
+function addMoreLikeThis(urlFacets: UrlFacets) {
+  return {
+    more_like_this: {
+      fields: [
+        "title",
+        "description",
+        "subject.label",
+        "genre.label",
+        "contributor.label",
+        "creator.label",
+      ],
+      like: [
+        {
+          _id: urlFacets.similar[0],
+        },
+      ],
+      max_query_terms: 10,
+      min_doc_freq: 1,
+      min_term_freq: 1,
+    },
+  };
+}