fix: enhance code structure and i18n support

Author: pganesh-apphelix

src/constants.ts

@@ -107,3 +107,9 @@ export const iframeMessageTypes = {
   xblockEvent: 'xblock-event',
   xblockScroll: 'xblock-scroll',
 };
+
+export const BROKEN = 'broken';
+
+export const LOCKED = 'locked';
+
+export const MANUAL = 'manual';

src/optimizer-page/CourseOptimizerPage.tsx

@@ -13,6 +13,7 @@ import CourseStepper from '../generic/course-stepper';
 import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
 import AlertMessage from '../generic/alert-message';
 import { RequestFailureStatuses } from '../data/constants';
+import { RERUN_LINK_UPDATE_STATUSES } from './data/constants';
 import { STATEFUL_BUTTON_STATES } from '../constants';
 import messages from './messages';
 import {
@@ -45,7 +46,8 @@ export function pollRerunLinkUpdateDuringUpdate(
   courseId: string,
 ) {
   const shouldPoll = rerunLinkUpdateInProgress === true
-    || (rerunLinkUpdateResult && rerunLinkUpdateResult.status && rerunLinkUpdateResult.status !== 'Succeeded');
+    || (rerunLinkUpdateResult && rerunLinkUpdateResult.status
+      && rerunLinkUpdateResult.status !== RERUN_LINK_UPDATE_STATUSES.SUCCEEDED);
 
   if (shouldPoll) {
     clearInterval(interval.current as number | undefined);

src/optimizer-page/messages.js

@@ -61,6 +61,14 @@ const messages = defineMessages({
     id: 'course-authoring.course-optimizer.scanHeader',
     defaultMessage: 'Scan results',
   },
+  updateButton: {
+    id: 'course-authoring.scanResults.updateButton',
+    defaultMessage: 'Update',
+  },
+  updated: {
+    id: 'course-authoring.scanResults.updated',
+    defaultMessage: 'Updated',
+  },
 });
 
 export default messages;

src/optimizer-page/scan-results/BrokenLinkTable.tsx

@@ -1,6 +1,7 @@
 import {
   Card, Icon, DataTable, StatefulButton, Spinner,
 } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   ArrowForwardIos,
   LinkOff,
@@ -12,7 +13,9 @@ import messages from './messages';
 import CustomIcon from './CustomIcon';
 import lockedIcon from './lockedIcon';
 import ManualIcon from './manualIcon';
-import { STATEFUL_BUTTON_STATES } from '../../constants';
+import {
+  STATEFUL_BUTTON_STATES, BROKEN, LOCKED, MANUAL,
+} from '../../constants';
 
 const BrokenLinkHref: FC<{ href: string }> = ({ href }) => {
   const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
@@ -29,7 +32,7 @@ const BrokenLinkHref: FC<{ href: string }> = ({ href }) => {
   );
 };
 
-const GoToBlock: FC<{ block: { url: string, displayName: string } }> = ({ block }) => {
+const GoToBlock: FC<{ block: { url: string, displayName?: string } }> = ({ block }) => {
   const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     window.open(block.url, '_blank');
@@ -87,6 +90,7 @@ const LinksCol: FC<{
   updatedLinkMap,
   updatedLinkInProgress,
 }) => {
+  const intl = useIntl();
   const handleUpdate = () => {
     if (onUpdate) {
       onUpdate(originalLink || href, block.id || block.url, sectionId);
@@ -119,13 +123,16 @@ const LinksCol: FC<{
             <span
               className="updated-link-text d-flex align-items-center text-success"
             >
-              Updated
+              {intl.formatMessage(messages.updated)}
               <Icon src={Check} className="text-success" />
             </span>
           ) : (
             <StatefulButton
               className="px-4 rounded-0 update-link-btn"
-              labels={{ default: 'Update', pending: 'Update' }}
+              labels={{
+                default: intl.formatMessage(messages.updateButton),
+                pending: intl.formatMessage(messages.updateButton),
+              }}
               icons={{ default: '', pending: <Spinner animation="border" size="sm" className="mr-2 spinner-icon" /> }}
               state={isUpdating ? STATEFUL_BUTTON_STATES.pending : STATEFUL_BUTTON_STATES.default}
               onClick={handleUpdate}
@@ -160,7 +167,7 @@ type TableData = {
 const BrokenLinkTable: FC<BrokenLinkTableProps> = ({
   unit,
   filters,
-  linkType = 'broken',
+  linkType = BROKEN,
   onUpdateLink,
   sectionId,
   updatedLinks = [],
@@ -225,7 +232,7 @@ const BrokenLinkTable: FC<BrokenLinkTableProps> = ({
             <LinksCol
               block={{ url: block.url, displayName: block.displayName || 'Go to block' }}
               href={link}
-              linkType="broken"
+              linkType={BROKEN}
             />
           ),
         }));
@@ -241,7 +248,7 @@ const BrokenLinkTable: FC<BrokenLinkTableProps> = ({
             <LinksCol
               block={{ url: block.url, displayName: block.displayName || 'Go to block' }}
               href={link}
-              linkType="locked"
+              linkType={LOCKED}
             />
           ),
         }));
@@ -258,7 +265,7 @@ const BrokenLinkTable: FC<BrokenLinkTableProps> = ({
             <LinksCol
               block={{ url: block.url, displayName: block.displayName || 'Go to block' }}
               href={link}
-              linkType="manual"
+              linkType={MANUAL}
             />
           ),
         }));

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

@@ -129,7 +129,7 @@
   }
 
   .links-container > div:first-child {
-    max-width: 95%;
+    max-width: 85%;
   }
 
   .locked-links-checkbox {

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

@@ -196,38 +196,27 @@ const ScanResults: FC<Props> = ({
       const successfulLinkIds: string[] = [];
       const newMap: Record<string, string> = {};
 
-      const blocksWithResults = new Set();
-      if (response.results && Array.isArray(response.results)) {
+      const typeToSection: Record<string, string> = {
+        course_updates: 'course-updates',
+        custom_pages: 'custom-pages',
+      };
+
+      const blocksWithResults = new Set<string>();
+
+      const addBlocksWithPrevLinks = (sectionId: string) => {
+        const section = allSections.find(s => s.id === sectionId);
+        if (!section) { return; }
+        section.subsections.forEach(sub => sub.units.forEach(unit => unit.blocks.forEach(b => {
+          if (b.previousRunLinks?.length) { blocksWithResults.add(b.id); }
+        })));
+      };
+
+      if (Array.isArray(response.results)) {
         response.results.forEach((result) => {
-          if (result.type === 'course_updates') {
-            allSections.forEach(section => {
-              if (section.id === 'course-updates') {
-                section.subsections.forEach(subsection => {
-                  subsection.units.forEach(unit => {
-                    unit.blocks.forEach(block => {
-                      if (block.previousRunLinks && block.previousRunLinks.length > 0) {
-                        blocksWithResults.add(block.id);
-                      }
-                    });
-                  });
-                });
-              }
-            });
-          } else if (result.type === 'custom_pages') {
-            allSections.forEach(section => {
-              if (section.id === 'custom-pages') {
-                section.subsections.forEach(subsection => {
-                  subsection.units.forEach(unit => {
-                    unit.blocks.forEach(block => {
-                      if (block.previousRunLinks && block.previousRunLinks.length > 0) {
-                        blocksWithResults.add(block.id);
-                      }
-                    });
-                  });
-                });
-              }
-            });
-          } else {
+          const sectionId = typeToSection[result.type];
+          if (sectionId) {
+            addBlocksWithPrevLinks(sectionId);
+          } else if (result.id) {
             blocksWithResults.add(result.id);
           }
         });

src/optimizer-page/scan-results/messages.js

@@ -74,6 +74,14 @@ const messages = defineMessages({
     id: 'course-authoring.course-optimizer.updateLinksError',
     defaultMessage: 'Some links couldn\'t be updated.',
   },
+  updateButton: {
+    id: 'course-authoring.scanResults.updateButton',
+    defaultMessage: 'Update',
+  },
+  updated: {
+    id: 'course-authoring.scanResults.updated',
+    defaultMessage: 'Updated',
+  },
 });
 
 export default messages;