From 56ad86ee604fabee0578a79ab65dcdafe9884400 Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Thu, 7 Dec 2023 12:30:15 -0500
Subject: [PATCH] feat: update usage metrics to be a hyperlink (#717)

---
 src/files-and-videos/files-page/FilesPage.test.jsx | 10 +++++++++-
 src/files-and-videos/files-page/data/thunks.js     |  4 +++-
 .../generic/UsageMetricsMessage.jsx                | 14 +++++++++++---
 .../videos-page/VideosPage.test.jsx                |  7 ++++++-
 4 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/files-and-videos/files-page/FilesPage.test.jsx b/src/files-and-videos/files-page/FilesPage.test.jsx
index 9c5f7a46c2..da15d89690 100644
--- a/src/files-and-videos/files-page/FilesPage.test.jsx
+++ b/src/files-and-videos/files-page/FilesPage.test.jsx
@@ -339,7 +339,15 @@ describe('FilesAndUploads', () => {
         const assetMenuButton = screen.getByTestId('file-menu-dropdown-mOckID1');
         expect(assetMenuButton).toBeVisible();
 
-        axiosMock.onGet(`${getAssetsUrl(courseId)}mOckID1/usage`).reply(201, { usage_locations: { mOckID1: ['subsection - unit / block'] } });
+        axiosMock.onGet(`${getAssetsUrl(courseId)}mOckID1/usage`)
+          .reply(201, {
+            usage_locations: {
+              mOckID1: [{
+                display_location: 'subsection - unit / block',
+                url: 'base/unit_id#block_id',
+              }],
+            },
+          });
         await waitFor(() => {
           fireEvent.click(within(assetMenuButton).getByLabelText('file-menu-toggle'));
           fireEvent.click(screen.getByText('Info'));
diff --git a/src/files-and-videos/files-page/data/thunks.js b/src/files-and-videos/files-page/data/thunks.js
index 5dd502a0dc..90bdb5ab4f 100644
--- a/src/files-and-videos/files-page/data/thunks.js
+++ b/src/files-and-videos/files-page/data/thunks.js
@@ -1,4 +1,6 @@
 import { isEmpty } from 'lodash';
+import { camelCaseObject } from '@edx/frontend-platform';
+
 import { RequestStatus } from '../../../data/constants';
 import {
   addModel,
@@ -139,7 +141,7 @@ export function getUsagePaths({ asset, courseId }) {
         modelType: 'assets',
         model: {
           id: asset.id,
-          usageLocations: assetLocations,
+          usageLocations: camelCaseObject(assetLocations),
           activeStatus,
         },
       }));
diff --git a/src/files-and-videos/generic/UsageMetricsMessage.jsx b/src/files-and-videos/generic/UsageMetricsMessage.jsx
index 84354dcd70..fee391f094 100644
--- a/src/files-and-videos/generic/UsageMetricsMessage.jsx
+++ b/src/files-and-videos/generic/UsageMetricsMessage.jsx
@@ -1,6 +1,12 @@
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 import PropTypes from 'prop-types';
-import { Icon, Row, Spinner } from '@edx/paragon';
+import {
+  Hyperlink,
+  Icon,
+  Row,
+  Spinner,
+} from '@edx/paragon';
 import { ErrorOutline } from '@edx/paragon/icons';
 import isEmpty from 'lodash/isEmpty';
 import { RequestStatus } from '../../data/constants';
@@ -20,8 +26,10 @@ const UsageMetricsMessage = ({
     ) : (
       <ul className="p-0">
         {usageLocations.map(location => (
-          <li key={`usage-location-${location}`} style={{ listStyle: 'none' }}>
-            {location}
+          <li key={`usage-location-${location.displayLocation}`} style={{ listStyle: 'none' }}>
+            <Hyperlink destination={`${getConfig().STUDIO_BASE_URL}${location.url}`} target="_blank">
+              {location.displayLocation}
+            </Hyperlink>
           </li>
         ))}
       </ul>
diff --git a/src/files-and-videos/videos-page/VideosPage.test.jsx b/src/files-and-videos/videos-page/VideosPage.test.jsx
index b645c0275a..d431aa7fc7 100644
--- a/src/files-and-videos/videos-page/VideosPage.test.jsx
+++ b/src/files-and-videos/videos-page/VideosPage.test.jsx
@@ -440,7 +440,12 @@ describe('FilesAndUploads', () => {
           expect(videoMenuButton).toBeVisible();
 
           axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID1/usage`)
-            .reply(201, { usageLocations: ['subsection - unit / block'] });
+            .reply(201, {
+              usageLocations: [{
+                display_location: 'subsection - unit / block',
+                url: 'base/unit_id#block_id',
+              }],
+            });
           await waitFor(() => {
             fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
             fireEvent.click(screen.getByText('Info'));