diff --git a/client/src/panel.tsx b/client/src/panel.tsx index 32b958cc..3e514999 100644 --- 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) => ( - - 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) => ( + + 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 index e51ef8c8..46cfc68c 100644 --- a/client/src/selectPinboard.tsx +++ b/client/src/selectPinboard.tsx @@ -50,6 +50,8 @@ const SectionHeading: React.FC = ({ children }) => (
{children}
); +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 && } + {numberOfPinboardsOverDisplayLimit > 0 && ( +
+ + PLUS {numberOfPinboardsOverDisplayLimit} more, which cannot + be displayed. + {" "} + Please close some unused pinboards and raise with production + staff to ensure workflow items have the correct status so they + get cleaned up accordingly. +
+ )}
)}