feat: redirect to unit page if the hit or its parent is a unit

src/course-unit/CourseUnit.scss

@@ -3,3 +3,18 @@
 @import "./add-component/AddComponent";
 @import "./course-xblock/CourseXBlock";
 @import "./sidebar/Sidebar";
+
+div.xblock-highlight {
+  animation: 5s glow;
+  animation-timing-function: cubic-bezier(1, 0, .72, .04);
+}
+
+@keyframes glow {
+  0% {
+    box-shadow: 0 0 5px 5px $primary-500;
+  }
+
+  100% {
+    box-shadow: unset;
+  }
+}

src/course-unit/course-xblock/CourseXBlock.jsx

@@ -6,7 +6,7 @@ import {
 import { EditOutline as EditIcon, MoreVert as MoveVertIcon } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import DeleteModal from '../../generic/delete-modal/DeleteModal';
 import { scrollToElement } from '../../course-outline/utils';
@@ -23,6 +23,10 @@ const CourseXBlock = ({
   const courseId = useSelector(getCourseId);
   const intl = useIntl();
 
+  const [searchParams] = useSearchParams();
+  const locatorId = searchParams.get('show');
+  const isScrolledToElement = locatorId === id;
+
   const onXBlockDelete = () => {
     unitXBlockActions.handleDelete(id);
     closeDeleteModal();
@@ -41,13 +45,17 @@ const CourseXBlock = ({
 
   useEffect(() => {
     // if this item has been newly added, scroll to it.
-    if (courseXBlockElementRef.current && shouldScroll) {
+    if (courseXBlockElementRef.current && (shouldScroll || isScrolledToElement)) {
       scrollToElement(courseXBlockElementRef.current);
     }
-  }, []);
+  }, [isScrolledToElement]);
 
   return (
-    <div ref={courseXBlockElementRef} {...props}>
+    <div
+      ref={courseXBlockElementRef}
+      {...props}
+      className={isScrolledToElement ? 'xblock-highlight' : undefined}
+    >
       <Card className="mb-1">
         <Card.Header
           title={title}

src/course-unit/hooks.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { RequestStatus } from '../data/constants';
 import {
@@ -25,6 +25,7 @@ import { changeEditTitleFormOpen, updateQueryPendingStatus } from './data/slice'
 // eslint-disable-next-line import/prefer-default-export
 export const useCourseUnit = ({ courseId, blockId }) => {
   const dispatch = useDispatch();
+  const [searchParams] = useSearchParams();
 
   const [isErrorAlert, toggleErrorAlert] = useState(false);
   const [hasInternetConnectionError, setInternetConnectionError] = useState(false);
@@ -69,7 +70,10 @@ export const useCourseUnit = ({ courseId, blockId }) => {
 
   const handleNavigate = (id) => {
     if (sequenceId) {
-      navigate(`/course/${courseId}/container/${blockId}/${id}`, { replace: true });
+      navigate({
+        pathname: `/course/${courseId}/container/${blockId}/${id}`,
+        search: `?${searchParams}`,
+      }, { replace: true });
     }
   };
 

src/search-modal/SearchResult.jsx

@@ -33,6 +33,73 @@ function getItemIcon(blockType) {
   return STRUCTURAL_TYPE_ICONS[blockType] ?? COMPONENT_TYPE_ICON_MAP[blockType] ?? Article;
 }
 
+/**
+ * Returns the URL Suffix for library/library component hit
+ * @param {import('./data/api').ContentHit} hit
+ * @param {string} libraryAuthoringMfeUrl
+ * @returns string
+*/
+function getLibraryHitUrl(hit, libraryAuthoringMfeUrl) {
+  const { contextKey } = hit;
+  return `${libraryAuthoringMfeUrl}library/${contextKey}`;
+}
+
+/**
+ * Returns the URL Suffix for a unit hit
+ * @param {import('./data/api').ContentHit} hit
+ * @returns string
+*/
+function getUnitUrlSuffix(hit) {
+  const { contextKey, usageKey } = hit;
+  return `course/${contextKey}/container/${usageKey}`;
+}
+
+/**
+ * Returns the URL Suffix for a unit component hit
+ * @param {import('./data/api').ContentHit} hit
+ * @returns string
+*/
+function getUnitComponentUrlSuffix(hit) {
+  const { breadcrumbs, contextKey, usageKey } = hit;
+  const { usageKey: parentUsageKey } = breadcrumbs[breadcrumbs.length - 1];
+  return `course/${contextKey}/container/${parentUsageKey}?show=${encodeURIComponent(usageKey)}`;
+}
+
+/**
+ * Returns the URL Suffix for a course component hit
+ * @param {import('./data/api').ContentHit} hit
+ * @returns string
+*/
+function getCourseComponentUrlSuffix(hit) {
+  const { contextKey, usageKey } = hit;
+  return `course/${contextKey}?show=${encodeURIComponent(usageKey)}`;
+}
+
+/**
+ * Returns the URL Suffix for the search hit param
+ * @param {import('./data/api').ContentHit} hit
+ * @returns string
+*/
+function getUrlSuffix(hit) {
+  const { blockType, breadcrumbs } = hit;
+
+  // Check if is a unit
+  if (blockType === 'vertical') {
+    return getUnitUrlSuffix(hit);
+  }
+
+  // Check if the parent is a unit
+  if (breadcrumbs.length) {
+    const { usageKey: parentUsageKey } = breadcrumbs[breadcrumbs.length - 1];
+
+    if (parentUsageKey.includes('type@vertical')) {
+      return getUnitComponentUrlSuffix(hit);
+    }
+  }
+
+  return getCourseComponentUrlSuffix(hit);
+}
+
 /**
  * A single search result (row), usually represents an XBlock/Component
  * @type {React.FC<{hit: import('./data/api').ContentHit}>}
@@ -43,33 +110,33 @@ const SearchResult = ({ hit }) => {
   const { closeSearchModal } = useSearchContext();
   const { libraryAuthoringMfeUrl, redirectToLibraryAuthoringMfe } = useSelector(getStudioHomeData);
 
+  const { usageKey } = hit;
+
+  const noRedirectUrl = usageKey.startsWith('lb:') && !redirectToLibraryAuthoringMfe;
+
   /**
    * Returns the URL for the context of the hit
    */
   const getContextUrl = React.useCallback((newWindow = false) => {
-    const { contextKey, usageKey } = hit;
+    const { contextKey } = hit;
     if (contextKey.startsWith('course-v1:')) {
-      const courseSufix = `course/${contextKey}?show=${encodeURIComponent(usageKey)}`;
+      const urlSuffix = getUrlSuffix(hit);
+
       if (newWindow) {
-        return `${getPath(getConfig().PUBLIC_PATH)}${courseSufix}`;
+        return `${getPath(getConfig().PUBLIC_PATH)}${urlSuffix}`;
       }
-      return `/${courseSufix}`;
+      return `/${urlSuffix}`;
     }
+
     if (usageKey.startsWith('lb:')) {
       if (redirectToLibraryAuthoringMfe) {
-        return `${libraryAuthoringMfeUrl}library/${contextKey}`;
+        return getLibraryHitUrl(hit, libraryAuthoringMfeUrl);
       }
     }
 
     // No context URL for this hit
     return undefined;
-  }, [libraryAuthoringMfeUrl, redirectToLibraryAuthoringMfe]);
-
-  const redirectUrl = React.useMemo(() => getContextUrl(), [libraryAuthoringMfeUrl, redirectToLibraryAuthoringMfe]);
-  const newWindowUrl = React.useMemo(
-    () => getContextUrl(true),
-    [libraryAuthoringMfeUrl, redirectToLibraryAuthoringMfe],
-  );
+  }, [libraryAuthoringMfeUrl, redirectToLibraryAuthoringMfe, hit]);
 
   /**
    * Opens the context of the hit in a new window
@@ -78,6 +145,7 @@ const SearchResult = ({ hit }) => {
    */
   const openContextInNewWindow = (e) => {
     e.stopPropagation();
+    const newWindowUrl = getContextUrl(true);
     /* istanbul ignore next */
     if (!newWindowUrl) {
       return;
@@ -90,8 +158,9 @@ const SearchResult = ({ hit }) => {
    * @param {(React.MouseEvent | React.KeyboardEvent)} e
    * @returns {void}
    */
-  const navigateToContext = (e) => {
+  const navigateToContext = React.useCallback((e) => {
     e.stopPropagation();
+    const redirectUrl = getContextUrl();
 
     /* istanbul ignore next */
     if (!redirectUrl) {
@@ -112,16 +181,16 @@ const SearchResult = ({ hit }) => {
 
     navigate(redirectUrl);
     closeSearchModal();
-  };
+  }, [getContextUrl]);
 
   return (
     <Stack
-      className={`border-bottom search-result p-2 align-items-start ${!redirectUrl ? 'text-muted' : ''}`}
+      className={`border-bottom search-result p-2 align-items-start ${noRedirectUrl ? 'text-muted' : ''}`}
       direction="horizontal"
       gap={3}
       onClick={navigateToContext}
       onKeyDown={navigateToContext}
-      tabIndex={redirectUrl ? 0 : undefined}
+      tabIndex={noRedirectUrl ? undefined : 0}
       role="button"
     >
       <Icon className="text-muted" src={getItemIcon(hit.blockType)} />
@@ -140,7 +209,7 @@ const SearchResult = ({ hit }) => {
       <IconButton
         src={OpenInNew}
         iconAs={Icon}
-        disabled={!newWindowUrl}
+        disabled={noRedirectUrl}
         onClick={openContextInNewWindow}
         alt={intl.formatMessage(messages.openInNewWindow)}
       />

src/search-modal/data/api.js

@@ -83,7 +83,7 @@ function formatTagsFilter(tagsFilter) {
  * @property {string} blockType The block_type part of the usage key. What type of XBlock this is.
  * @property {string} contextKey The course or library ID
  * @property {string} org
- * @property {{displayName: string}[]} breadcrumbs First one is the name of the course/library itself.
+ * @property {{displayName: string, usageKey: string}[]} breadcrumbs First one is the name of the course/library itself.
  *       After that is the name of any parent Section/Subsection/Unit/etc.
  * @property {Record<'taxonomy'|'level0'|'level1'|'level2'|'level3', string[]>} tags
  * @property {ContentDetails} [content]