Merge pull request #323 from guardian/handle-too-many-open-pinboards

cap the display and mounting of more than 50 pinboards
guardian · Nov 21, 2024 · 0d2d755 · 0d2d755
2 parents c1b9f98 + 827034e
commit 0d2d755
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 18 deletions.
diff --git a/client/src/panel.tsx b/client/src/panel.tsx
@@ -9,7 +9,10 @@ import {
   top,
 } from "./styling";
 import { Pinboard } from "./pinboard";
-import { SelectPinboard } from "./selectPinboard";
+import {
+  MAX_OPEN_PINBOARDS_TO_DISPLAY,
+  SelectPinboard,
+} from "./selectPinboard";
 import { neutral, space } from "@guardian/source-foundations";
 import { Navigation } from "./navigation";
 import { useGlobalStateContext } from "./globalState";
@@ -297,22 +300,26 @@ export const Panel = ({
       {
         // The active pinboards are always mounted, so that we receive new item notifications
         // Note that the pinboard hides itself based on 'isSelected' prop
-        activePinboardIds.map((pinboardId) => (
-          <Pinboard
-            key={pinboardId}
-            pinboardId={pinboardId}
-            composerId={useMemo(
-              () =>
-                activePinboards.find((_) => _.id === pinboardId)?.composerId ||
-                null,
-              [activePinboards, pinboardId]
-            )}
-            isExpanded={pinboardId === selectedPinboardId && isExpanded}
-            isSelected={pinboardId === selectedPinboardId}
-            panelElement={panelRef.current}
-            setMaybeInlineSelectedPinboardId={setMaybeInlineSelectedPinboardId}
-          />
-        ))
+        activePinboardIds
+          .slice(0, MAX_OPEN_PINBOARDS_TO_DISPLAY)
+          .map((pinboardId) => (
+            <Pinboard
+              key={pinboardId}
+              pinboardId={pinboardId}
+              composerId={useMemo(
+                () =>
+                  activePinboards.find((_) => _.id === pinboardId)
+                    ?.composerId || null,
+                [activePinboards, pinboardId]
+              )}
+              isExpanded={pinboardId === selectedPinboardId && isExpanded}
+              isSelected={pinboardId === selectedPinboardId}
+              panelElement={panelRef.current}
+              setMaybeInlineSelectedPinboardId={
+                setMaybeInlineSelectedPinboardId
+              }
+            />
+          ))
       }
 
       {maybePeekingAtPinboard && (

diff --git a/client/src/selectPinboard.tsx b/client/src/selectPinboard.tsx
@@ -50,6 +50,8 @@ const SectionHeading: React.FC = ({ children }) => (
   <div css={{ ...textMarginCss, color: palette.neutral["46"] }}>{children}</div>
 );
 
+export const MAX_OPEN_PINBOARDS_TO_DISPLAY = 50;
+
 interface SelectPinboardProps {
   pinboardsWithClaimCounts: PinboardDataWithClaimCounts[];
   peekAtPinboard: (pinboard: PinboardData) => void;
@@ -118,10 +120,22 @@ export const SelectPinboard = ({
     };
   }, []);
 
-  const activePinboardsWithoutPreselected = isPinboardData(preselectedPinboard)
+  const _allActivePinboardsWithoutPreselected = isPinboardData(
+    preselectedPinboard
+  )
     ? activePinboards.filter((_) => _.id !== preselectedPinboard.id)
     : activePinboards;
 
+  const activePinboardsWithoutPreselected =
+    _allActivePinboardsWithoutPreselected.slice(
+      0,
+      MAX_OPEN_PINBOARDS_TO_DISPLAY
+    );
+
+  const numberOfPinboardsOverDisplayLimit =
+    _allActivePinboardsWithoutPreselected.length -
+    activePinboardsWithoutPreselected.length;
+
   const [searchPinboards, { data, loading, stopPolling, startPolling }] =
     useLazyQuery<{
       listPinboards: PinboardData[];
@@ -453,6 +467,23 @@ export const SelectPinboard = ({
                 : activePinboardsWithoutPreselected
               ).map(OpenPinboardButton)}
               {isLoadingActivePinboardList && <SvgSpinner size="xsmall" />}
+              {numberOfPinboardsOverDisplayLimit > 0 && (
+                <div
+                  css={css`
+                    padding: ${space[2]}px;
+                    font-weight: normal;
+                    font-style: italic;
+                  `}
+                >
+                  <strong>
+                    PLUS {numberOfPinboardsOverDisplayLimit} more, which cannot
+                    be displayed.
+                  </strong>{" "}
+                  Please close some unused pinboards and raise with production
+                  staff to ensure workflow items have the correct status so they
+                  get cleaned up accordingly.
+                </div>
+              )}
               <div css={{ height: space[2] }} />
             </React.Fragment>
           )}