fix: open in new tab

openedx · Feb 21, 2025 · 42a4949 · 42a4949
1 parent f462f23
commit 42a4949
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/src/library-authoring/component-info/ComponentUsage.tsx b/src/library-authoring/component-info/ComponentUsage.tsx
@@ -1,6 +1,6 @@
+import { getConfig, getPath } from '@edx/frontend-platform';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Collapsible } from '@openedx/paragon';
-import { Link } from 'react-router-dom';
+import { Collapsible, Hyperlink } from '@openedx/paragon';
 
 import AlertError from '../../generic/alert-error';
 import Loading from '../../generic/Loading';
@@ -22,6 +22,10 @@ type ComponentUsageTree = Record<string, {
   }[]
 }>;
 
+const getContainerUrl = (contextKey: string, usageKey: string) => (
+  `${getPath(getConfig().PUBLIC_PATH)}course/${contextKey}/container/${usageKey}`
+);
+
 export const ComponentUsage = ({ usageKey }: ComponentUsageProps) => {
   const {
     data: dataDownstreamLinks,
@@ -52,7 +56,7 @@ export const ComponentUsage = ({ usageKey }: ComponentUsageProps) => {
     return <Loading />;
   }
 
-  if (!downstreamKeys.length) {
+  if (!downstreamKeys.length || !downstreamHits) {
     return <FormattedMessage {...messages.detailsTabUsageEmpty} />;
   }
 
@@ -63,19 +67,18 @@ export const ComponentUsage = ({ usageKey }: ComponentUsageProps) => {
       return acc;
     }
 
+    const linkData = {
+      ...link,
+      url: getContainerUrl(hit.contextKey, link.usageKey),
+    };
+
     if (hit.contextKey in acc) {
-      acc[hit.contextKey].links.push({
-        ...link,
-        url: `/course/${hit.contextKey}/container/${link.usageKey}`,
-      });
+      acc[hit.contextKey].links.push(linkData);
     } else {
       acc[hit.contextKey] = {
         key: hit.contextKey,
         contextName: hit.breadcrumbs[0].displayName,
-        links: [{
-          ...link,
-          url: `/course/${hit.contextKey}/container/${link.usageKey}`,
-        }],
+        links: [linkData],
       };
     }
     return acc;
@@ -89,9 +92,7 @@ export const ComponentUsage = ({ usageKey }: ComponentUsageProps) => {
         componentUsageList.map((context) => (
           <Collapsible key={context.key} title={context.contextName} styling="basic">
             {context.links.map(({ usageKey: downstreamUsageKey, displayName, url }) => (
-              <Link key={downstreamUsageKey} to={url}>
-                {displayName}
-              </Link>
+              <Hyperlink key={downstreamUsageKey} destination={url} target="_blank">{displayName}</Hyperlink>
             ))}
           </Collapsible>
         ))

diff --git a/src/search-manager/data/__mocks__/downstream-links.json b/src/search-manager/data/__mocks__/downstream-links.json
@@ -22,7 +22,7 @@
           "display_name": "Sub Section 1"
         },
         {
-          "usage_key": "block-v1:org+course1+run+type@vertical+block@verticalId3",
+          "usage_key": "block-v1:org+course1+run+type@vertical+block@verticalId1",
           "display_name": "Unit 1"
         }
       ]