feat: update usage metrics to be a hyperlink (#717)

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'));

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,
         },
       }));

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>

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'));