feat: Advanced Component info (not just on developer builds)

openedx · Sep 28, 2024 · b4a1861 · b4a1861
1 parent 4d67e8b
commit b4a1861
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 17 deletions.
diff --git a/...component-info/ComponentDeveloperInfo.tsx → .../component-info/ComponentAdvancedInfo.tsx b/...component-info/ComponentDeveloperInfo.tsx → .../component-info/ComponentAdvancedInfo.tsx
@@ -1,26 +1,28 @@
-/* istanbul ignore file */
 /* eslint-disable import/prefer-default-export */
-// This file doesn't need test coverage nor i18n because it's only seen by devs
 import React from 'react';
+import { Collapsible } from '@openedx/paragon';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+
 import { LoadingSpinner } from '../../generic/Loading';
 import { useXBlockOLX } from '../data/apiHooks';
+import messages from './messages';
 
 interface Props {
   usageKey: string;
 }
 
-/* istanbul ignore next */
-export const ComponentDeveloperInfo: React.FC<Props> = ({ usageKey }) => {
+export const ComponentAdvancedInfo: React.FC<Props> = ({ usageKey }) => {
+  const intl = useIntl();
   const { data: olx, isLoading: isOLXLoading } = useXBlockOLX(usageKey);
   return (
-    <>
-      <hr className="w-100" />
-      <h3 className="h5">Developer Component Details</h3>
-      <p><small>(This panel is only visible in development builds.)</small></p>
+    <Collapsible
+      styling="basic"
+      title={intl.formatMessage(messages.advancedDetailsTitle)}
+    >
       <dl>
-        <dt>Usage key</dt>
-        <dd><code>{usageKey}</code></dd>
-        <dt>OLX</dt>
+        <dt><FormattedMessage {...messages.advancedDetailsUsageKey} /></dt>
+        <dd className="text-monospace small">{usageKey}</dd>
+        <dt>OLX Source</dt>
         <dd>
           {
             olx ? <code className="micro">{olx}</code> : // eslint-disable-line
@@ -29,6 +31,6 @@ export const ComponentDeveloperInfo: React.FC<Props> = ({ usageKey }) => {
           }
         </dd>
       </dl>
-    </>
+    </Collapsible>
   );
 };
diff --git a/src/library-authoring/component-info/ComponentDetails.tsx b/src/library-authoring/component-info/ComponentDetails.tsx
@@ -5,7 +5,7 @@ import AlertError from '../../generic/alert-error';
 import Loading from '../../generic/Loading';
 import { useLibraryBlockMetadata } from '../data/apiHooks';
 import HistoryWidget from '../generic/history-widget';
-import { ComponentDeveloperInfo } from './ComponentDeveloperInfo';
+import { ComponentAdvancedInfo } from './ComponentAdvancedInfo';
 import messages from './messages';
 
 interface ComponentDetailsProps {
@@ -46,10 +46,7 @@ const ComponentDetails = ({ usageKey }: ComponentDetailsProps) => {
           {...componentMetadata}
         />
       </div>
-      {
-        // istanbul ignore next: this is only shown in development
-        (process.env.NODE_ENV === 'development' ? <ComponentDeveloperInfo usageKey={usageKey} /> : null)
-      }
+      <ComponentAdvancedInfo usageKey={usageKey} />
     </Stack>
   );
 };

diff --git a/src/library-authoring/component-info/messages.ts b/src/library-authoring/component-info/messages.ts
@@ -1,6 +1,21 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
+  advancedDetailsTitle: {
+    id: 'course-authoring.library-authoring.component.advanced.title',
+    defaultMessage: 'Advanced details',
+    description: 'Heading for the advanced technical details of a component',
+  },
+  advancedDetailsOLX: {
+    id: 'course-authoring.library-authoring.component.advanced.olx',
+    defaultMessage: 'OLX Source',
+    description: 'Heading for the component\'s OLX source code',
+  },
+  advancedDetailsUsageKey: {
+    id: 'course-authoring.library-authoring.component.advanced.usage-key',
+    defaultMessage: 'ID (Usage key)',
+    description: 'Heading for the component\'s ID',
+  },
   editNameButtonAlt: {
     id: 'course-authoring.library-authoring.component.edit-name.alt',
     defaultMessage: 'Edit component name',