Revert "cap the display and mounting of more than 50 pinboards"

Author: twrichards

client/src/panel.tsx

@@ -9,10 +9,7 @@ import {
   top,
 } from "./styling";
 import { Pinboard } from "./pinboard";
-import {
-  MAX_OPEN_PINBOARDS_TO_DISPLAY,
-  SelectPinboard,
-} from "./selectPinboard";
+import { SelectPinboard } from "./selectPinboard";
 import { neutral, space } from "@guardian/source-foundations";
 import { Navigation } from "./navigation";
 import { useGlobalStateContext } from "./globalState";
@@ -271,26 +268,22 @@ 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
-          .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
-              }
-            />
-          ))
+        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}
+          />
+        ))
       }
     </div>
   );

client/src/selectPinboard.tsx

@@ -50,8 +50,6 @@ 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[];
   noOfTeamPinboardsNotShown: number;
@@ -119,22 +117,10 @@ export const SelectPinboard = ({
     };
   }, []);
 
-  const _allActivePinboardsWithoutPreselected = isPinboardData(
-    preselectedPinboard
-  )
+  const activePinboardsWithoutPreselected = 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[];
@@ -466,23 +452,6 @@ 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>
           )}