diff --git a/src/course-unit/CourseUnit.scss b/src/course-unit/CourseUnit.scss
index 270691ecae..b89b8463a1 100644
--- a/src/course-unit/CourseUnit.scss
+++ b/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;
+ }
+}
diff --git a/src/course-unit/course-xblock/CourseXBlock.jsx b/src/course-unit/course-xblock/CourseXBlock.jsx
index 237a9c95ae..03a4760b08 100644
--- a/src/course-unit/course-xblock/CourseXBlock.jsx
+++ b/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 (
-
+
{
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 });
}
};
diff --git a/src/search-modal/SearchResult.jsx b/src/search-modal/SearchResult.jsx
index c15371d81b..91b934f35e 100644
--- a/src/search-modal/SearchResult.jsx
+++ b/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 (
@@ -140,7 +209,7 @@ const SearchResult = ({ hit }) => {
diff --git a/src/search-modal/data/api.js b/src/search-modal/data/api.js
index cf9cd6b620..880deea8cb 100644
--- a/src/search-modal/data/api.js
+++ b/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]