refactor: url redirect for libraries

src/search-modal/SearchResult.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 // @ts-check
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { getConfig, getPath } from '@edx/frontend-platform';
 import {
   Button,
@@ -65,63 +65,74 @@ const ItemIcon = {
   html: TextFields,
 };
 
-/**
- * Returns the URL for the context of the hit
- * @param {CustomHit} hit
- * @param {boolean} newWindow
- * @param {string} libraryAuthoringMfeUrl
- * @returns {string}
- */
-const getContextUrl = (hit, newWindow, libraryAuthoringMfeUrl) => {
-  const { context_key: contextKey, usage_key: usageKey } = hit;
-  if (contextKey.startsWith('course-v1:')) {
-    const courseSufix = `course/${contextKey}?show=${encodeURIComponent(usageKey)}`;
-    if (newWindow) {
-      return `${getPath(getConfig().PUBLIC_PATH)}${courseSufix}`;
-    }
-    return `/${courseSufix}`;
-  }
-  if (usageKey.startsWith('lb:')) {
-    return `${libraryAuthoringMfeUrl}library/${contextKey}`;
-  }
-  return '#';
-};
-
 /**
  * A single search result (row), usually represents an XBlock/Component
  * @type {React.FC<{ hit: CustomHit, closeSearch?: () => void}>}
  */
 const SearchResult = ({ hit, closeSearch }) => {
   const navigate = useNavigate();
-  const { libraryAuthoringMfeUrl } = useSelector(getStudioHomeData);
+  const { libraryAuthoringMfeUrl, redirectToLibraryAuthoringMfe } = useSelector(getStudioHomeData);
 
   /**
-    * Navigates to the context of the hit
+   * Returns the URL for the context of the hit
+   * @param {CustomHit} hit
+   * @param {boolean?} newWindow
+   * @param {string} libraryAuthoringMfeUrl
+   * @returns {string?}
+   */
+  const getContextUrl = useCallback((newWindow) => {
+    const { context_key: contextKey, usage_key: usageKey } = hit;
+    if (contextKey.startsWith('course-v1:')) {
+      const courseSufix = `course/${contextKey}?show=${encodeURIComponent(usageKey)}`;
+      if (newWindow) {
+        return `${getPath(getConfig().PUBLIC_PATH)}${courseSufix}`;
+      }
+      return `/${courseSufix}`;
+    }
+    if (usageKey.startsWith('lb:')) {
+      if (redirectToLibraryAuthoringMfe) {
+        return `${libraryAuthoringMfeUrl}library/${contextKey}`;
+      }
+    }
+
+    // No context URL for this hit
+    return undefined;
+  }, [libraryAuthoringMfeUrl, redirectToLibraryAuthoringMfe]);
+
+  const redirectUrl = useMemo(() => getContextUrl(), [libraryAuthoringMfeUrl, redirectToLibraryAuthoringMfe]);
+  const newWindowUrl = useMemo(() => getContextUrl(true), [libraryAuthoringMfeUrl, redirectToLibraryAuthoringMfe]);
+
+  /**
+    * Opens the context of the hit in a new window
     * @param {React.MouseEvent} e
-    * @param {boolean} newWindow
     * @returns {void}
     * */
-  const navigateToContext = (e, newWindow) => {
+  const openContextInNewWindow = (e) => {
     e.stopPropagation();
-    const url = getContextUrl(hit, newWindow, libraryAuthoringMfeUrl);
-    if (newWindow) {
-      window.open(url, '_blank');
-      return;
-    }
+    window.open(newWindowUrl, '_blank');
+  };
 
-    if (url.startsWith('http')) {
-      window.location.href = url;
+  /**
+    * Navigates to the context of the hit
+    * @param {React.MouseEvent} e
+    * @returns {void}
+    * */
+  const navigateToContext = (e) => {
+    e.stopPropagation();
+    if (redirectUrl.startsWith('http')) {
+      window.location.href = redirectUrl;
       return;
     }
 
-    navigate(url);
+    navigate(redirectUrl);
     closeSearch?.();
   };
 
   return (
     <Button
       variant="tertiary w-100 text-left"
       onClick={navigateToContext}
+      disabled={!redirectUrl}
     >
       <Stack
         className="border-bottom search-result p-2 w-100"
@@ -143,7 +154,12 @@ const SearchResult = ({ hit, closeSearch }) => {
             <CustomHighlight attribute="breadcrumbsNames" separator=" / " hit={hit} />
           </div>
         </Stack>
-        <IconButton src={OpenInNew} iconAs={Icon} onClick={(e) => navigateToContext(e, true)} />
+        <IconButton
+          src={OpenInNew}
+          iconAs={Icon}
+          disabled={!newWindowUrl}
+          onClick={openContextInNewWindow}
+        />
       </Stack>
     </Button>
   );