From 9794e12155c8b8ce53d4bcc19c86b9352f2af575 Mon Sep 17 00:00:00 2001
From: Tom Richards <tom.richards@guardian.co.uk>
Date: Thu, 10 Oct 2024 14:02:38 +0100
Subject: [PATCH] WIP fronts integration PLUS 'suggest alternate crops' buttons
 (for composer trail image, see
 https://github.com/guardian/flexible-content/pull/4984)

---
 bootstrapping-lambda/local/index.html       |   7 +
 client/src/addToPinboardButton.tsx          |  45 +----
 client/src/app.tsx                          |  43 +++++
 client/src/buttonInOtherTools.tsx           |  47 ++++++
 client/src/fronts/frontsIntegration.tsx     | 174 ++++++++++++++++++++
 client/src/fronts/suggestAlternateCrops.tsx | 161 ++++++++++++++++++
 client/src/grid/gridStaticImageDisplay.tsx  |  41 +++--
 client/src/types/PayloadAndType.ts          |   2 +
 8 files changed, 465 insertions(+), 55 deletions(-)
 create mode 100644 client/src/buttonInOtherTools.tsx
 create mode 100644 client/src/fronts/frontsIntegration.tsx
 create mode 100644 client/src/fronts/suggestAlternateCrops.tsx

diff --git a/bootstrapping-lambda/local/index.html b/bootstrapping-lambda/local/index.html
index df42e3b0..3d668d29 100644
--- a/bootstrapping-lambda/local/index.html
+++ b/bootstrapping-lambda/local/index.html
@@ -56,6 +56,13 @@ <h3>Override unread notifications bubble</h3>
       <button id="btn-unset-unread-notifications-bubble">Unset</button>
     </div>
 
+    <h3>Fronts Integration</h3>
+    <pinboard-article-button
+      data-url-path="global/2024/oct/08/testing"
+    ></pinboard-article-button>
+    <pinboard-suggest-alternate-crops
+      data-current-crop-url="https://media.test.dev-gutools.co.uk/images/0b146eaac0b6a83727568c8e47eb52d78d83bc72?crop=0_175_4362_2615"
+    ></pinboard-suggest-alternate-crops>
     <h3><code>Add to 📌</code> button</h3>
     <ul id="button_section">
       <h4>present initially</h4>
diff --git a/client/src/addToPinboardButton.tsx b/client/src/addToPinboardButton.tsx
index 85900feb..9cae73b8 100644
--- a/client/src/addToPinboardButton.tsx
+++ b/client/src/addToPinboardButton.tsx
@@ -1,8 +1,6 @@
 import ReactDOM from "react-dom";
 import React, { ReactPortal, useContext } from "react";
-import PinIcon from "../icons/pin-icon.svg";
 import { css } from "@emotion/react";
-import { pinboard, pinMetal } from "../colours";
 import { buildPayloadAndType, PayloadAndType } from "./types/PayloadAndType";
 import { space } from "@guardian/source-foundations";
 import { agateSans } from "../fontNormaliser";
@@ -13,35 +11,10 @@ import {
   IMAGINE_REQUEST_TYPES,
   IMAGING_REQUEST_ITEM_TYPE,
 } from "shared/octopusImaging";
+import { ButtonInOtherTools } from "./buttonInOtherTools";
 
 export const ASSET_HANDLE_HTML_TAG = "asset-handle";
 
-const buttonCss = css`
-  display: flex;
-  align-items: center;
-  background-color: ${pinboard[500]};
-  ${agateSans.xxsmall({ fontWeight: "bold" })};
-  border: none;
-  border-radius: 100px;
-  padding: 0 6px 0 10px;
-  line-height: 2;
-  cursor: pointer;
-  color: ${pinMetal};
-`;
-
-const pinIcon = (
-  <PinIcon
-    css={css`
-      height: 14px;
-      margin-left: 2px;
-      path {
-        stroke: ${pinMetal};
-        stroke-width: 1px;
-      }
-    `}
-  />
-);
-
 interface AddToPinboardButtonProps {
   dataAttributes: DOMStringMap;
   setPayloadToBeSent: (payload: PayloadAndType | null) => void;
@@ -75,7 +48,8 @@ const AddToPinboardButton = (props: AddToPinboardButtonProps) => {
         ${agateSans.small()}
       `}
     >
-      <button
+      <ButtonInOtherTools
+        iconAtEnd
         onClick={() => {
           props.setPayloadToBeSent(payloadToBeSent);
           props.expand();
@@ -83,15 +57,14 @@ const AddToPinboardButton = (props: AddToPinboardButtonProps) => {
             assetType: payloadToBeSent.type,
           });
         }}
-        css={buttonCss}
       >
         {payloadToBeSent.type === "grid-search"
           ? "Add this search to"
           : "Add to"}
-        {pinIcon}
-      </button>
+      </ButtonInOtherTools>
       {payloadToBeSent.type === "grid-original" && (
-        <button
+        <ButtonInOtherTools
+          iconAtEnd
           onClick={() => {
             props.setPayloadToBeSent({
               type: IMAGING_REQUEST_ITEM_TYPE,
@@ -108,15 +81,13 @@ const AddToPinboardButton = (props: AddToPinboardButtonProps) => {
               }
             );
           }}
-          css={css`
-            ${buttonCss};
+          extraCss={css`
             white-space: nowrap;
             margin-top: ${space[1]}px;
           `}
         >
           Imaging order
-          {pinIcon}
-        </button>
+        </ButtonInOtherTools>
       )}
     </root.div>
   );
diff --git a/client/src/app.tsx b/client/src/app.tsx
index e4f7ef0c..a86dc5f3 100644
--- a/client/src/app.tsx
+++ b/client/src/app.tsx
@@ -45,6 +45,14 @@ import { getAgateFontFaceIfApplicable } from "../fontNormaliser";
 import { Global } from "@emotion/react";
 import { TourStateProvider } from "./tour/tourState";
 import { demoMentionableUsers, demoUser } from "./tour/tourConstants";
+import {
+  FRONTS_PINBOARD_ELEMENTS_QUERY_SELECTOR,
+  FrontsIntegration,
+} from "./fronts/frontsIntegration";
+import {
+  SUGGEST_ALTERNATE_CROP_QUERY_SELECTOR,
+  SuggestAlternateCrops,
+} from "./fronts/suggestAlternateCrops";
 
 const PRESELECT_PINBOARD_HTML_TAG = "pinboard-preselect";
 const PRESET_UNREAD_NOTIFICATIONS_COUNT_HTML_TAG = "pinboard-bubble-preset";
@@ -67,6 +75,11 @@ export const PinBoardApp = ({
   const [workflowPinboardElements, setWorkflowPinboardElements] = useState<
     HTMLElement[]
   >([]);
+  const [frontsPinboardElements, setFrontsPinboardElements] = useState<
+    HTMLElement[]
+  >([]);
+  const [alternateCropSuggestionElements, setAlternateCropSuggestionElements] =
+    useState<HTMLElement[]>([]);
 
   const [maybeInlineSelectedPinboardId, _setMaybeInlineSelectedPinboardId] =
     useState<string | null>(null);
@@ -95,6 +108,20 @@ export const PinBoardApp = ({
       )
     );
 
+  const refreshFrontsPinboardElements = () =>
+    setFrontsPinboardElements(
+      Array.from(
+        document.querySelectorAll(FRONTS_PINBOARD_ELEMENTS_QUERY_SELECTOR)
+      )
+    );
+
+  const refreshAlternateCropSuggestionElements = () =>
+    setAlternateCropSuggestionElements(
+      Array.from(
+        document.querySelectorAll(SUGGEST_ALTERNATE_CROP_QUERY_SELECTOR)
+      )
+    );
+
   const refreshPreselectedPinboard = () => {
     const preselectPinboardHTMLElement: HTMLElement | null =
       document.querySelector(PRESELECT_PINBOARD_HTML_TAG);
@@ -129,6 +156,8 @@ export const PinBoardApp = ({
     // Add nodes that already exist at time React app is instantiated
     refreshAssetHandleNodes();
     refreshWorkflowPinboardElements();
+    refreshFrontsPinboardElements();
+    refreshAlternateCropSuggestionElements();
 
     refreshPreselectedPinboard();
 
@@ -138,6 +167,8 @@ export const PinBoardApp = ({
     new MutationObserver(() => {
       refreshAssetHandleNodes();
       refreshWorkflowPinboardElements();
+      refreshFrontsPinboardElements();
+      refreshAlternateCropSuggestionElements();
       refreshPreselectedPinboard();
       refreshPresetUnreadNotifications();
     }).observe(document.body, {
@@ -436,6 +467,18 @@ export const PinBoardApp = ({
                 )}
               </TickContext.Provider>
             </root.div>
+            {frontsPinboardElements.length > 0 && (
+              <FrontsIntegration
+                frontsPinboardElements={frontsPinboardElements}
+              />
+            )}
+            {alternateCropSuggestionElements.length > 0 && (
+              <SuggestAlternateCrops
+                alternateCropSuggestionElements={
+                  alternateCropSuggestionElements
+                }
+              />
+            )}
             {assetHandles.map((node, index) => (
               <AddToPinboardButtonPortal
                 key={index}
diff --git a/client/src/buttonInOtherTools.tsx b/client/src/buttonInOtherTools.tsx
new file mode 100644
index 00000000..d610ac23
--- /dev/null
+++ b/client/src/buttonInOtherTools.tsx
@@ -0,0 +1,47 @@
+import React, { PropsWithChildren } from "react";
+import { css, SerializedStyles } from "@emotion/react";
+import { pinboard, pinMetal } from "../colours";
+import PinIcon from "../icons/pin-icon.svg";
+import { agateSans } from "../fontNormaliser";
+
+interface ButtonInOtherToolsProps {
+  iconAtEnd?: true;
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  extraCss?: SerializedStyles;
+}
+export const ButtonInOtherTools = ({
+  children,
+  iconAtEnd,
+  onClick,
+  extraCss,
+}: PropsWithChildren<ButtonInOtherToolsProps>) => (
+  <button
+    onClick={onClick}
+    css={css`
+      display: flex;
+      align-items: center;
+      background-color: ${pinboard[500]};
+      ${agateSans.xxsmall({ fontWeight: "bold" })};
+      border: none;
+      border-radius: 100px;
+      padding: 0 ${iconAtEnd ? 6 : 10}px 0 ${iconAtEnd ? 10 : 6}px;
+      line-height: 2;
+      cursor: pointer;
+      color: ${pinMetal};
+      ${extraCss};
+    `}
+  >
+    {iconAtEnd && children}
+    <PinIcon
+      css={css`
+        height: 14px;
+        margin-${iconAtEnd ? "left" : "right"}: 2px;
+        path {
+          stroke: ${pinMetal};
+          stroke-width: 1px;
+        }
+      `}
+    />
+    {!iconAtEnd && children}
+  </button>
+);
diff --git a/client/src/fronts/frontsIntegration.tsx b/client/src/fronts/frontsIntegration.tsx
new file mode 100644
index 00000000..1892f1da
--- /dev/null
+++ b/client/src/fronts/frontsIntegration.tsx
@@ -0,0 +1,174 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { useGlobalStateContext } from "../globalState";
+import { PinboardData } from "shared/graphql/extraTypes";
+import { PinboardIdWithItemCounts } from "shared/graphql/graphql";
+import ReactDOM from "react-dom";
+import root from "react-shadow/emotion";
+import { css } from "@emotion/react";
+import { useApolloClient } from "@apollo/client";
+import { gqlGetItemCounts, gqlGetPinboardsByPaths } from "../../gql";
+import { pinboard } from "../../colours";
+import { neutral, palette } from "@guardian/source-foundations";
+import CropIcon from "../../icons/crop.svg";
+import { ButtonInOtherTools } from "../buttonInOtherTools";
+
+export const FRONTS_PINBOARD_ELEMENTS_QUERY_SELECTOR =
+  "pinboard-article-button";
+
+interface PinboardArticleButtonProps {
+  maybePinboardData: PinboardData | undefined;
+  maybeItemCounts: PinboardIdWithItemCounts | undefined;
+}
+const PinboardArticleButton = ({
+  maybePinboardData,
+  maybeItemCounts,
+}: PinboardArticleButtonProps) => {
+  const { setIsExpanded, openPinboard } = useGlobalStateContext();
+
+  return (
+    <root.span>
+      <ButtonInOtherTools
+        extraCss={css`
+          background-color: ${maybePinboardData
+            ? pinboard[500]
+            : neutral["60"]};
+        `}
+        onClick={(event) => {
+          event.stopPropagation();
+          if (maybePinboardData) {
+            setIsExpanded(true);
+            openPinboard(false)(maybePinboardData, false); // TODO probably should be 'peek at pinboard' from panel.tsx
+          } else {
+            alert(
+              "This piece is not tracked in workflow, this is needed to chat and share assets such as crops via Pinboard."
+            );
+            // TODO consider offering an option to create workflow tracking
+          }
+        }}
+      >
+        {!maybePinboardData && "not tracked in workflow"}
+        {maybeItemCounts && (
+          <>
+            {
+              maybeItemCounts.unreadCount ||
+                null /*TODO display number in red blob*/
+            }
+            {maybeItemCounts.unreadCount && " unread of "}
+            {maybeItemCounts.totalCount}
+            {maybeItemCounts.totalCropCount && (
+              <>
+                {" with "}
+                <CropIcon
+                  css={css`
+                    fill: ${palette.neutral[46]};
+                    margin-top: 4px;
+                  `}
+                />
+                {" crops "}
+                {(maybeItemCounts.fiveByFourCount ||
+                  maybeItemCounts.fourByFiveCount) &&
+                  " (incl."}
+                {maybeItemCounts.fiveByFourCount &&
+                  `${maybeItemCounts.fiveByFourCount} at 5:4`}
+                {maybeItemCounts.fourByFiveCount &&
+                  `${maybeItemCounts.fourByFiveCount} at 4:5`}
+                {(maybeItemCounts.fiveByFourCount ||
+                  maybeItemCounts.fourByFiveCount) &&
+                  ")"}
+              </>
+            )}
+          </>
+        )}
+      </ButtonInOtherTools>
+    </root.span>
+  );
+};
+
+export const FrontsIntegration = ({
+  frontsPinboardElements,
+}: {
+  frontsPinboardElements: HTMLElement[];
+}) => {
+  const pathToElementMap: { [path: string]: HTMLElement } = useMemo(
+    () =>
+      frontsPinboardElements.reduce(
+        (acc, htmlElement) =>
+          htmlElement.dataset.urlPath
+            ? {
+                ...acc,
+                [htmlElement.dataset.urlPath]: htmlElement,
+              }
+            : acc,
+        {} as Record<string, HTMLElement>
+      ),
+    [frontsPinboardElements]
+  );
+
+  const apolloClient = useApolloClient();
+
+  const [pathToPinboardDataMap, setPathToPinboardDataMap] = useState(
+    {} as { [path: string]: PinboardData }
+  );
+  useEffect(() => {
+    const paths = Object.keys(pathToElementMap); // TODO filter out ones we already have data for
+    paths.length > 0 &&
+      apolloClient
+        .query({
+          query: gqlGetPinboardsByPaths,
+          variables: {
+            paths,
+          },
+        })
+        .then(({ data }) => {
+          data?.getPinboardsByPaths &&
+            setPathToPinboardDataMap((prevState) =>
+              data.getPinboardsByPaths.reduce(
+                (acc: { [path: string]: PinboardData }, stub: PinboardData) =>
+                  stub.path ? { ...acc, [stub.path]: stub } : acc,
+                prevState
+              )
+            );
+        });
+    //TODO handle errors
+  }, [pathToElementMap]);
+
+  const [allItemCounts, setAllItemCounts] = useState(
+    [] as PinboardIdWithItemCounts[]
+  );
+  useEffect(() => {
+    const pinboardIds = Object.values(pathToPinboardDataMap).map(
+      ({ id }) => id
+    );
+    pinboardIds.length > 0 &&
+      apolloClient
+        .query({
+          query: gqlGetItemCounts,
+          variables: {
+            pinboardIds,
+          },
+        })
+        .then(({ data }) => {
+          data?.getItemCounts && setAllItemCounts(data.getItemCounts); // TODO consider building a map (to avoid finds later) like we do for the other user of getItemCounts
+        });
+  }, [pathToPinboardDataMap]);
+
+  return (
+    <>
+      {Object.entries(pathToElementMap).map(([path, htmlElementToMountInto]) =>
+        ReactDOM.createPortal(
+          <PinboardArticleButton
+            maybePinboardData={pathToPinboardDataMap[path]}
+            maybeItemCounts={
+              pathToPinboardDataMap[path] &&
+              allItemCounts.find(
+                ({ pinboardId }) =>
+                  pinboardId === pathToPinboardDataMap[path]?.id
+              )
+            }
+          />,
+          htmlElementToMountInto
+        )
+      )}
+    </>
+  );
+};
diff --git a/client/src/fronts/suggestAlternateCrops.tsx b/client/src/fronts/suggestAlternateCrops.tsx
new file mode 100644
index 00000000..d945f93a
--- /dev/null
+++ b/client/src/fronts/suggestAlternateCrops.tsx
@@ -0,0 +1,161 @@
+import React, { useCallback, useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+import { ButtonInOtherTools } from "../buttonInOtherTools";
+import { css } from "@emotion/react";
+import { StaticGridPayload } from "../types/PayloadAndType";
+
+export const SUGGEST_ALTERNATE_CROP_QUERY_SELECTOR =
+  "pinboard-suggest-alternate-crops";
+
+const SUGGESTIBLE_CROP_RATIOS = {
+  "5:4": "Landscape",
+  "4:5": "Portrait",
+};
+
+const gridTopLevelDomain = window.location.host.includes(".gutools.co.uk")
+  ? "gutools.co.uk"
+  : "test.dev-gutools.co.uk";
+
+interface GridCropDataFromPostMessage {
+  id: string;
+  specification: {
+    aspectRatio: keyof typeof SUGGESTIBLE_CROP_RATIOS;
+    uri: string;
+  };
+  assets: Array<{
+    secureUrl: string;
+    size: number;
+  }>;
+}
+
+export const SuggestAlternateCrops = ({
+  alternateCropSuggestionElements,
+}: {
+  alternateCropSuggestionElements: HTMLElement[];
+  // TODO take in some count of existing crops
+}) => {
+  // FIXME handle the piece not being tracked in workflow
+
+  const [maybeGridIFrameUrl, setMaybeGridIframeUrl] = useState<string | null>(
+    null
+  );
+  const onClick = useCallback(
+    (
+        maybeCurrentCropUrl: string | undefined,
+        cropType: string,
+        customRatio: string
+      ) =>
+      () => {
+        const newGridIframeUrl = new URL(
+          maybeCurrentCropUrl || `https://media.${gridTopLevelDomain}`
+        );
+        newGridIframeUrl.searchParams.delete("crop");
+        newGridIframeUrl.pathname = newGridIframeUrl.pathname + "/crop";
+        newGridIframeUrl.searchParams.set("cropType", cropType);
+        newGridIframeUrl.searchParams.set(
+          "customRatio",
+          `${cropType},${customRatio.split(":").join(",")}`
+        );
+        setMaybeGridIframeUrl(newGridIframeUrl.toString());
+      },
+    []
+  );
+
+  const handleSelectedCrop = useCallback(
+    (data: GridCropDataFromPostMessage) => {
+      console.log(data);
+      const pinboardPayload: StaticGridPayload = {
+        type: "grid-crop",
+        payload: {
+          thumbnail: data.assets.reduce((smallest, asset) =>
+            smallest.size > asset.size ? asset : smallest
+          ).secureUrl,
+          embeddableUrl: `${data.specification.uri.replace(
+            "https://api.",
+            "https://"
+          )}?crop=${data.id}`,
+          aspectRatio: data.specification.aspectRatio,
+          cropType: SUGGESTIBLE_CROP_RATIOS[data.specification.aspectRatio],
+        },
+      };
+      console.log(pinboardPayload);
+      // TODO post to pinboard (perhaps with animation, or at least expand pinboard to show it has sent)
+      setMaybeGridIframeUrl(null);
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (maybeGridIFrameUrl) {
+      const handleGridMessage = (event: MessageEvent) =>
+        maybeGridIFrameUrl.includes(event.origin) &&
+        event.data &&
+        handleSelectedCrop(event.data.crop.data);
+      window.addEventListener("message", handleGridMessage);
+      return () => window.removeEventListener("message", handleGridMessage); // Cleanup/unmount function
+    }
+  }, [maybeGridIFrameUrl]);
+  return (
+    <>
+      {alternateCropSuggestionElements.map((htmlElement) =>
+        ReactDOM.createPortal(
+          <div
+            css={css`
+              display: flex;
+              flex-direction: column;
+              gap: 5px;
+              margin: 5px 0;
+            `}
+          >
+            {Object.entries(SUGGESTIBLE_CROP_RATIOS).map(
+              ([customRatio, cropType]) => (
+                <ButtonInOtherTools
+                  key={customRatio}
+                  onClick={onClick(
+                    htmlElement.dataset.currentCropUrl,
+                    cropType,
+                    customRatio
+                  )}
+                >
+                  Suggest an alternate {customRatio} crop
+                </ButtonInOtherTools>
+              )
+            )}
+          </div>,
+          htmlElement
+        )
+      )}
+      {maybeGridIFrameUrl && (
+        <div
+          css={css`
+            background: rgba(0, 0, 0, 0.5);
+            position: fixed;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            padding: 25px;
+          `}
+        >
+          <iframe
+            src={maybeGridIFrameUrl}
+            css={css`
+              width: 100%;
+              height: 100%;
+            `}
+          />
+          <button
+            onClick={() => setMaybeGridIframeUrl(null)}
+            css={css`
+              position: absolute;
+              top: 0;
+              right: 0;
+            `}
+          >
+            CLOSE
+          </button>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/client/src/grid/gridStaticImageDisplay.tsx b/client/src/grid/gridStaticImageDisplay.tsx
index e01f1eab..817c4b4e 100644
--- a/client/src/grid/gridStaticImageDisplay.tsx
+++ b/client/src/grid/gridStaticImageDisplay.tsx
@@ -4,12 +4,13 @@ import { StaticGridPayload } from "../types/PayloadAndType";
 import CropIcon from "../../icons/crop.svg";
 import PictureIcon from "../../icons/picture.svg";
 import { palette } from "@guardian/source-foundations";
+import { agateSans } from "../../fontNormaliser";
 
 export const GridStaticImageDisplay = ({
   type,
   payload,
 }: StaticGridPayload) => (
-  <React.Fragment>
+  <>
     <img
       src={payload.thumbnail}
       css={css`
@@ -20,22 +21,26 @@ export const GridStaticImageDisplay = ({
       draggable={false}
       // TODO: hover for larger thumbnail
     />
-
-    {type === "grid-crop" && (
-      <CropIcon
-        css={css`
-          fill: ${palette.neutral[46]};
-          margin-top: 4px;
-        `}
-      />
-    )}
-    {type === "grid-original" && (
-      <PictureIcon
-        css={css`
+    <div
+      css={css`
+        display: flex;
+        gap: 3px;
+        align-items: center;
+        ${agateSans.xxsmall({ lineHeight: "tight" })}
+        margin-top: 6px;
+        color: ${palette.neutral[46]};
+        svg {
           fill: ${palette.neutral[46]};
-          margin-top: 4px;
-        `}
-      />
-    )}
-  </React.Fragment>
+          margin-top: -2px;
+        }
+      `}
+    >
+      {type === "grid-crop" && <CropIcon />}
+      {type === "grid-original" && <PictureIcon />}
+      {payload.cropType}
+      {payload.cropType && payload.aspectRatio && " ("}
+      {payload.aspectRatio}
+      {payload.cropType && payload.aspectRatio && ")"}
+    </div>
+  </>
 );
diff --git a/client/src/types/PayloadAndType.ts b/client/src/types/PayloadAndType.ts
index f9f48677..977c8990 100644
--- a/client/src/types/PayloadAndType.ts
+++ b/client/src/types/PayloadAndType.ts
@@ -33,6 +33,8 @@ interface PayloadCommon {
 
 export interface PayloadWithThumbnail extends PayloadCommon {
   thumbnail: string;
+  aspectRatio?: string;
+  cropType?: string;
 }
 
 export interface PayloadWithExternalUrl extends PayloadWithThumbnail {