fix v2 drawer scrolling issues

[gumaerc]

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/6293

Description (What does it do?)

This PR fixes various scrolling related to the new learning resource drawer. Firstly, clicking the "Show more" link on the description or the start dates were causing the main window to scroll to the top. This is caused by the scroll property on NextLink: https://nextjs.org/docs/pages/api-reference/components/link#scroll. It defaults to true, so whenever you click a NextLink, nextjs scrolls the window to the top. scroll can now be passed as a boolean argument to our Link component, which passes it on to the NextLink component. For the links inside the drawer, we pass false which prevents the scroll to the top from happening.

The second scrolling option here has to do with the cards in the recommendation carousel. Currently clicking them reloads the drawer, but does not scroll the drawer to the top. In order to fix this, code was added to LearningResourceExpandedV2 to reset the scroll position if the resource ID in the query string has changed.

How can this be tested?

• If you have Posthog set up locally, enable the lr_drawer_v2 flag
• If you don't have Posthog set up locally, you can force drawerV2 to be true in LearningResourceDrawer.tsx
• Ensure that you have backpopulated some courses into your local database for testing
• On line 119 of LearningResourceDrawerV2, temporarily set carousels={[similarResourcesCarousel, similarResourcesCarousel, similarResourcesCarousel]} to create enough scrollable content to demonstrate the second issue detailed above
• Spin up this branch of mit-learn
• Visit the search page at http://localhost:8062/search
• Search for a course with a long description and many start dates, such as "Global Manufacturing Leadership Program"
• When the search result is returned, scroll to the bottom of the page and then click the card to bring up the drawer
• Click "Show more" both below the description and near the start dates, verifying that the page behind the drawer does not scroll to the top
• Scroll down within the drawer and click one of the cards in the recommendation carousels, verifying that the drawer is scrolled to the top

[ChristopherChudzicki]

Works well. One question for you about possible simplification.

[ChristopherChudzicki]

Would this work instead?

  const outerContainerRef = useRef<HTMLDivElement>(null)
  useEffect(() => {
    if (outerContainerRef.current) {
      outerContainerRef.current.scrollTo(0, 0)
    }
  }, [resource?.id])

Only possible quirk i see is that if you scroll while the resource is still loading, it will scroll up when when the resource finishes loading.

If that seems undesirable, maybe pass the ID into v2expanded as a prop. (Alternatively the effect could run when searchParams.get("resource") changes, and eliminate the search params ref, but currently v2expanded has no knowledge of routing, e.g., it doesn't know the "resource" querykey is involved at all, mildly nice to presreve that..)

[gumaerc]

@ChristopherChudzicki Thanks, this is ready for another look now