refactor: extract components

src/optimizer-page/SectionCollapsible.tsx

@@ -0,0 +1,51 @@
+import { useState, FC } from 'react';
+import {
+  Collapsible,
+  Icon,
+} from '@openedx/paragon';
+import {
+  ArrowRight,
+  ArrowDropDown,
+} from '@openedx/paragon/icons';
+
+interface Props {
+  title: string;
+  children: React.ReactNode;
+  redItalics: string;
+  className: string;
+}
+
+const SectionCollapsible: FC<Props> = ({
+  title, children, redItalics, className,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const styling = 'card-lg';
+  const collapsibleTitle = (
+    <div className={className}>
+      <Icon src={isOpen ? ArrowDropDown : ArrowRight} className="open-arrow" />
+      <strong>{title}</strong>
+      <span className="red-italics">{redItalics}</span>
+    </div>
+  );
+
+  return (
+    <div className={`section ${isOpen ? 'is-open' : ''}`}>
+      <Collapsible
+        styling={styling}
+        title={(
+          <p>
+            <strong>{collapsibleTitle}</strong>
+          </p>
+        )}
+        iconWhenClosed=""
+        iconWhenOpen=""
+        open={isOpen}
+        onToggle={() => setIsOpen(!isOpen)}
+      >
+        <Collapsible.Body>{children}</Collapsible.Body>
+      </Collapsible>
+    </div>
+  );
+};
+
+export default SectionCollapsible;

src/optimizer-page/scan-results/ScanResults.jsx

@@ -1,68 +1,21 @@
 import { useState, useCallback } from 'react';
 import {
-  Container,
-  Layout,
-  Button,
   Card,
-  Collapsible,
   Icon,
   Table,
   CheckBox,
   OverlayTrigger,
   Tooltip,
 } from '@openedx/paragon';
 import {
-  ArrowRight,
-  ArrowDropDown,
   OpenInNew,
   Question,
   Lock,
   LinkOff,
 } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
-
-const SectionCollapsible = ({
-  title, children, redItalics, className,
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const styling = 'card-lg';
-  const collapsibleTitle = (
-    <div className={className}>
-      <Icon src={isOpen ? ArrowDropDown : ArrowRight} className="open-arrow" />
-      <strong>{title}</strong>
-      <span className="red-italics">{redItalics}</span>
-    </div>
-  );
-
-  return (
-    <div className={`section ${isOpen ? 'is-open' : ''}`}>
-      <Collapsible
-        styling={styling}
-        title={(
-          <p>
-            <strong>{collapsibleTitle}</strong>
-          </p>
-        )}
-        iconWhenClosed=""
-        iconWhenOpen=""
-        open={isOpen}
-        onToggle={() => setIsOpen(!isOpen)}
-      >
-        <Collapsible.Body>{children}</Collapsible.Body>
-      </Collapsible>
-    </div>
-  );
-};
-
-function getBaseUrl(url) {
-  try {
-    const parsedUrl = new URL(url);
-    return `${parsedUrl.origin}`;
-  } catch (error) {
-    return null;
-  }
-}
+import SectionCollapsible from '../SectionCollapsible';
 
 const BrokenLinkHref = ({ href }) => (
   <div className="broken-link-container">
@@ -110,6 +63,73 @@ const InfoCard = ({ text }) => (
   </Card>
 );
 
+const BrokenLinkTable = ({ unit }) => (
+  <>
+    <p className="block-header">{unit.displayName}</p>
+    <Table
+      data={unit.blocks.reduce((acc, block) => {
+        const blockBrokenLinks = block.brokenLinks.map(
+          (link) => ({
+            blockLink: <GoToBlock block={block} />,
+            brokenLink: <BrokenLinkHref href={link} />,
+            status: (
+              <span className="link-status-text">
+                <Icon
+                  src={LinkOff}
+                  className="broken-link-icon"
+                />
+                {intl.formatMessage(messages.brokenLinkStatus)}
+              </span>
+            ),
+          }),
+        );
+        acc.push(...blockBrokenLinks);
+        if (!showLockedLinks) {
+          return acc;
+        }
+
+        const blockLockedLinks = block.lockedLinks.map(
+          (link) => ({
+            blockLink: <GoToBlock block={block} />,
+            brokenLink: <BrokenLinkHref href={link} />,
+            status: (
+              <span className="link-status-text">
+                <Icon src={Lock} className="lock-icon" />
+                {intl.formatMessage(messages.lockedLinkStatus)} <LockedInfoIcon />
+              </span>
+            ),
+          }),
+        );
+        acc.push(...blockLockedLinks);
+        return acc;
+      }, [])}
+      columns={[
+        {
+          key: 'blockLink',
+          columnSortable: true,
+          onSort: () => {},
+          width: 'col-3',
+          hideHeader: true,
+        },
+        {
+          key: 'brokenLink',
+          columnSortable: false,
+          onSort: () => {},
+          width: 'col-6',
+          hideHeader: true,
+        },
+        {
+          key: 'status',
+          columnSortable: false,
+          onSort: () => {},
+          width: 'col-6',
+          hideHeader: true,
+        },
+      ]}
+    />
+  </>
+);
+
 const ScanResults = ({ data }) => {
   const intl = useIntl();
   const [showLockedLinks, setShowLockedLinks] = useState(true);
@@ -179,7 +199,7 @@ const ScanResults = ({ data }) => {
               </h2>
               {subsection.units.map((unit) => (
                 <div className="unit">
-                  <p className="block-header">{unit.displayName}</p>
+                  <p className="unit-header">{unit.displayName}</p>
                   <Table
                     data={unit.blocks.reduce((acc, block) => {
                       const blockBrokenLinks = block.brokenLinks.map(

src/optimizer-page/scan-results/ScanResults.scss

@@ -44,7 +44,7 @@
   }
 
   /* Unit Header */
-  .block-header {
+  .unit-header {
     font-size: 14px;
     font-weight: 700;
     margin-bottom: 5px;