fix v2 drawer scrolling issues (#1908)

* pass scroll as a boolean argument on Link

* set scroll={false} for NextLinks used within the drawer

* always scroll to the top of the drawer on load

* fix typo

* pass resourceId as a parameter to LearningResourceExpandedV2

Author: gumaerc

frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV2.tsx

@@ -115,6 +115,7 @@ const DrawerContent: React.FC<{
     <>
       <LearningResourceExpandedV2
         imgConfig={imgConfigs.large}
+        resourceId={resourceId}
         resource={resource.data}
         carousels={[similarResourcesCarousel]}
         user={user}

frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.tsx

@@ -196,6 +196,7 @@ const RunDates: React.FC<{ resource: LearningResource }> = ({ resource }) => {
     const showMoreLink = (
       <NoWrap>
         <ShowHideLink
+          scroll={false}
           color="red"
           size="small"
           onClick={() => setShowingMore(!showingMore)}

frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpandedV2.test.tsx

@@ -35,6 +35,7 @@ const setup = (resource: LearningResource, isLearningPathEditor?: boolean) => {
   return render(
     <BrowserRouter>
       <LearningResourceExpandedV2
+        resourceId={resource.id}
         resource={resource}
         user={user}
         shareUrl={`https://learn.mit.edu/search?resource=${resource.id}`}

frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpandedV2.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from "react"
+import React, { useCallback, useEffect, useRef, useState } from "react"
 import styled from "@emotion/styled"
 import Skeleton from "@mui/material/Skeleton"
 import { default as NextImage } from "next/image"
@@ -292,6 +292,7 @@ const CarouselContainer = styled.div({
 })
 
 type LearningResourceExpandedV2Props = {
+  resourceId: number
   resource?: LearningResource
   user?: User
   shareUrl?: string
@@ -658,13 +659,18 @@ const ResourceDescription = ({ resource }: { resource?: LearningResource }) => {
         data-testid="drawer-description-text"
         ref={descriptionRendered}
         /**
-         * Resource descriptions can contain HTML. They are santiized on the
+         * Resource descriptions can contain HTML. They are sanitized on the
          * backend during ETL. This is safe to render.
          */
         dangerouslySetInnerHTML={{ __html: resource.description || "" }}
       />
       {(isClamped || clampedOnFirstRender.current) && (
-        <Link color="red" size="small" onClick={() => setExpanded(!isExpanded)}>
+        <Link
+          scroll={false}
+          color="red"
+          size="small"
+          onClick={() => setExpanded(!isExpanded)}
+        >
           {isExpanded ? "Show less" : "Show more"}
         </Link>
       )}
@@ -673,6 +679,7 @@ const ResourceDescription = ({ resource }: { resource?: LearningResource }) => {
 }
 
 const LearningResourceExpandedV2: React.FC<LearningResourceExpandedV2Props> = ({
+  resourceId,
   resource,
   imgConfig,
   user,
@@ -684,8 +691,14 @@ const LearningResourceExpandedV2: React.FC<LearningResourceExpandedV2Props> = ({
   onAddToUserListClick,
   closeDrawer,
 }) => {
+  const outerContainerRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (outerContainerRef.current && outerContainerRef.current.scrollTo) {
+      outerContainerRef.current.scrollTo(0, 0)
+    }
+  }, [resourceId])
   return (
-    <OuterContainer>
+    <OuterContainer ref={outerContainerRef}>
       <TitleSection
         resource={resource}
         closeDrawer={closeDrawer ?? (() => {})}

frontends/ol-components/src/components/Link/Link.tsx

@@ -71,9 +71,17 @@ type LinkProps = LinkStyleProps &
      * re-fetch API data.
      */
     shallow?: boolean
+    scroll?: boolean
   }
 
-const BaseLink = ({ href, shallow, nohover, onClick, ...rest }: LinkProps) => {
+const BaseLink = ({
+  href,
+  shallow,
+  nohover,
+  scroll,
+  onClick,
+  ...rest
+}: LinkProps) => {
   if (process.env.NODE_ENV === "development") {
     invariant(
       !shallow || href?.startsWith("?"),
@@ -82,6 +90,7 @@ const BaseLink = ({ href, shallow, nohover, onClick, ...rest }: LinkProps) => {
   }
   return (
     <NextLink
+      scroll={scroll}
       href={href || ""}
       {...rest}
       onClick={