Merge branch 'bugfix/open-summary-page-from-lightbox' into 'release/2…

…022.2'

OEQ-1386 fix: make sure Lightbox opens the correct Item summary page

See merge request edalex-group/development/oeq/openequella!87

react-front-end/__stories__/components/Lightbox.stories.tsx

@@ -116,10 +116,16 @@ NavigateAttachments.args = {
   },
 };
 
-export const disableSummaryPage: Story<LightboxProps> = (
+export const enableSummaryPage: Story<LightboxProps> = (
   args: LightboxProps
 ) => <Lightbox {...args} />;
-disableSummaryPage.args = {
+enableSummaryPage.args = {
   ...displayImage.args,
-  allowOpenSummaryPage: false,
+  config: {
+    ...imageConfig,
+    item: {
+      uuid: "8b3c1f4d-a781-4455-93a3-1d58913143b5",
+      version: 1,
+    },
+  },
 };

react-front-end/__tests__/tsrc/components/Lightbox.test.tsx

@@ -43,17 +43,7 @@ jest.mock("react-router", () => ({
 const mockWindowOpen = jest.spyOn(window, "open").mockImplementation(jest.fn());
 
 const renderLightbox = (config: LightboxConfig) =>
-  render(
-    <Lightbox
-      onClose={jest.fn()}
-      open
-      config={config}
-      item={{
-        uuid: "369c92fa-ae59-4845-957d-8fcaa22c15e3",
-        version: 1,
-      }}
-    />
-  );
+  render(<Lightbox onClose={jest.fn()} open config={config} />);
 
 describe("isLightboxSupportedMimeType", () => {
   it.each<[string, boolean]>([
@@ -162,7 +152,13 @@ describe("supports viewing Item Summary page", () => {
         updateMockGetRenderData(basicRenderData);
       }
 
-      const { queryByLabelText } = renderLightbox(displayImage.args!.config!);
+      const { queryByLabelText } = renderLightbox({
+        ...displayImage.args!.config!,
+        item: {
+          uuid: "369c92fa-ae59-4845-957d-8fcaa22c15e3",
+          version: 1,
+        },
+      });
       const viewSummaryPageButton = queryByLabelText(
         languageStrings.lightboxComponent.openSummaryPage
       );
@@ -171,6 +167,15 @@ describe("supports viewing Item Summary page", () => {
       expect(onClick).toHaveBeenCalledTimes(1);
     }
   );
+
+  it("does not display a item summary button if no item details provided", () => {
+    const { queryByLabelText } = renderLightbox(displayImage.args!.config!);
+
+    const viewSummaryPageButton = queryByLabelText(
+      languageStrings.lightboxComponent.openSummaryPage
+    );
+    expect(viewSummaryPageButton).not.toBeInTheDocument();
+  });
 });
 
 describe("Provide embed code", () => {

react-front-end/__tests__/tsrc/modules/ViewerModule.test.ts

@@ -24,6 +24,7 @@ import {
   CustomMimeTypes,
   getMimeTypeDefaultViewerDetails,
 } from "../../../tsrc/modules/MimeTypesModule";
+import type { BasicSearchResultItem } from "../../../tsrc/modules/SearchModule";
 import {
   buildAttachmentsAndViewerDefinitions,
   buildViewerConfigForAttachments,
@@ -78,8 +79,11 @@ const attachments = [
   },
 ];
 
-const itemUuid = "4fddbeb7-8d16-4417-be60-8709ce9d7b15";
-const itemVersion = 1;
+const testItem: BasicSearchResultItem = {
+  uuid: "4fddbeb7-8d16-4417-be60-8709ce9d7b15",
+  version: 1,
+  status: "live",
+};
 const mockGetViewerDetails = jest.fn();
 
 describe("determineViewer()", () => {
@@ -169,8 +173,8 @@ describe("buildAttachmentsAndViewerDefinitions()", () => {
     const attachmentsAndViewerDefinitions =
       await buildAttachmentsAndViewerDefinitions(
         attachments,
-        itemUuid,
-        itemVersion,
+        testItem.uuid,
+        testItem.version,
         mockGetViewerDetails
       );
     expect(attachmentsAndViewerDefinitions).toBeLeft();
@@ -181,8 +185,8 @@ describe("buildAttachmentsAndViewerDefinitions()", () => {
     const attachmentsAndViewerDefinitions =
       await buildAttachmentsAndViewerDefinitions(
         attachments,
-        itemUuid,
-        itemVersion,
+        testItem.uuid,
+        testItem.version,
         mockGetViewerDetails
       );
     expect(attachmentsAndViewerDefinitions).toBeRight();
@@ -194,9 +198,8 @@ describe("buildViewerConfigForAttachment", () => {
     mockGetViewerDetails.mockRejectedValue("Failure");
     await expect(
       buildViewerConfigForAttachments(
+        testItem,
         attachments,
-        itemUuid,
-        itemVersion,
         mockGetViewerDetails
       )
     ).rejects.toBeTruthy();
@@ -206,9 +209,8 @@ describe("buildViewerConfigForAttachment", () => {
     mockGetViewerDetails.mockResolvedValue("Success");
     await expect(
       buildViewerConfigForAttachments(
+        testItem,
         attachments,
-        itemUuid,
-        itemVersion,
         mockGetViewerDetails
       )
     ).resolves.toBeTruthy();

react-front-end/tsrc/components/ItemAttachmentLink.tsx

@@ -40,30 +40,13 @@ export interface ItemAttachmentLinkProps {
    * Information about an attachment and what viewer to be used for this attachment.
    */
   selectedAttachment: AttachmentAndViewerConfig;
-  /**
-   * Item which this attachment is attached to.
-   */
-  item: {
-    /**
-     * UUID of the Item.
-     */
-    uuid: string;
-    /**
-     * Version of the Item.
-     */
-    version: number;
-    /**
-     * Status of the Item used to determine whether to show the button for accessing Item summary page.
-     */
-    status: string;
-  };
 }
 
 /**
  * A component to be used for viewing attachments in a uniform manner. If the viewer specified
  * in `viewerDetails` is anything other than `lightbox` then a simple link will be created. In
  * future versions of oEQ when the balance of New UI is undertaken, then in theory this component
- * will need to handle the other types of viewers - e.g. generating links for google docs, or
+ * will need to handle the other types of viewers - e.g. generating links for Google Docs, or
  * downloading attachments, etc.
  */
 const ItemAttachmentLink = ({
@@ -72,7 +55,6 @@ const ItemAttachmentLink = ({
     attachment: { description, mimeType },
     viewerConfig,
   },
-  item: { uuid, version, status },
 }: ItemAttachmentLinkProps) => {
   const { attachmentLink } = languageStrings.searchpage.searchResult;
   const [lightBoxProps, setLightBoxProps] = useState<LightboxProps>();
@@ -102,8 +84,6 @@ const ItemAttachmentLink = ({
           setLightBoxProps(undefined);
         },
         config,
-        allowOpenSummaryPage: status !== "personal",
-        item: { uuid, version },
       });
 
     if (!mimeType) {

react-front-end/tsrc/components/Lightbox.tsx

@@ -107,6 +107,20 @@ export interface LightboxConfig {
   title?: string;
   /** MIME type of the items specified by `src` */
   mimeType: string;
+  /**
+   * Optional details for an item which (if present) are used to display a button which when
+   * clicked with navigate the user to the item's summary page.
+   */
+  item?: {
+    /**
+     * UUID of the Item.
+     */
+    uuid: string;
+    /**
+     * Version of the Item.
+     */
+    version: number;
+  };
   /** Function fired to view previous attachment. */
   onPrevious?: () => LightboxConfig;
   /** Function fired to view next attachment. */
@@ -120,42 +134,19 @@ export interface LightboxProps {
   open: boolean;
   /** Configuration specifying the Lightbox's content. */
   config: LightboxConfig;
-  /**
-   * Item which the Lightbox content is attached to.
-   */
-  item: {
-    /**
-     * UUID of the Item.
-     */
-    uuid: string;
-    /**
-     * Version of the Item.
-     */
-    version: number;
-  };
-  /**
-   * Flag to control whether to show the icon button for accessing the Resource summary page.
-   */
-  allowOpenSummaryPage?: boolean;
 }
 
 const domParser = new DOMParser();
 
-const Lightbox = ({
-  open,
-  onClose,
-  config,
-  item,
-  allowOpenSummaryPage = true,
-}: LightboxProps) => {
+const Lightbox = ({ open, onClose, config }: LightboxProps) => {
   const classes = useStyles();
 
   const [content, setContent] = useState<ReactElement | undefined>();
   const [lightBoxConfig, setLightBoxConfig] = useState<LightboxConfig>(config);
   const [openEmbedCodeDialog, setOpenEmbedCodeDialog] =
     useState<boolean>(false);
 
-  const { src, title, mimeType, onPrevious, onNext } = lightBoxConfig;
+  const { src, title, mimeType, onPrevious, onNext, item } = lightBoxConfig;
 
   const handleNav = (getLightboxConfig: () => LightboxConfig) => {
     setContent(undefined);
@@ -271,7 +262,7 @@ const Lightbox = ({
         <Typography variant="h6" className={classes.title}>
           {title}
         </Typography>
-        {allowOpenSummaryPage && (
+        {item && (
           <OEQItemSummaryPageButton
             {...{ item, title: labelOpenSummaryPage, color: "inherit" }}
           />

react-front-end/tsrc/modules/SearchModule.ts

@@ -29,6 +29,11 @@ import { DateRange, getISODateString } from "../util/Date";
 import type { Collection } from "./CollectionsModule";
 import type { SelectedCategories } from "./SearchFacetsModule";
 
+export type BasicSearchResultItem = Pick<
+  OEQ.Search.SearchResultItem,
+  "uuid" | "version" | "status"
+>;
+
 /**
  * List of status which are considered 'live'.
  */