feat: update scss and test cases

Author: pganesh-apphelix

src/optimizer-page/CourseOptimizerPage.test.js

@@ -174,7 +174,7 @@ describe('CourseOptimizerPage', () => {
       expect(getByText(messages.headingTitle.defaultMessage)).toBeInTheDocument();
       fireEvent.click(getByText(messages.buttonTitle.defaultMessage));
       await waitFor(() => {
-        expect(getByText(scanResultsMessages.noResultsFound.defaultMessage)).toBeInTheDocument();
+        expect(getByText(scanResultsMessages.noDataCard.defaultMessage)).toBeInTheDocument();
       });
     });
 
@@ -380,15 +380,14 @@ describe('CourseOptimizerPage', () => {
       });
     });
 
-    it('should always show broken links section header even when no data', async () => {
+    it('should always show no scan data message when data is empty', async () => {
       axiosMock.onGet(getLinkCheckStatusApiUrl(courseId)).reply(200, mockApiResponseEmpty);
       const { getByText } = render(<OptimizerPage />);
 
       fireEvent.click(getByText(messages.buttonTitle.defaultMessage));
 
       await waitFor(() => {
-        expect(getByText(scanResultsMessages.brokenLinksHeader.defaultMessage)).toBeInTheDocument();
-        expect(getByText(scanResultsMessages.noResultsFound.defaultMessage)).toBeInTheDocument();
+        expect(getByText(scanResultsMessages.noDataCard.defaultMessage)).toBeInTheDocument();
       });
     });
 

src/optimizer-page/CourseOptimizerPage.tsx

@@ -138,7 +138,7 @@ const CourseOptimizerPage: FC<{ courseId: string }> = ({ courseId }) => {
           >
             <Layout.Element>
               <article>
-                <div className="d-flex flex-wrap justify-content-between align-items-center mb-3 px-3 py-3">
+                <div className="d-flex flex-wrap justify-content-between align-items-center mb-3 p-3">
                   <div>
                     <p className="small text-muted mb-1">Tools</p>
                     <div className="d-flex align-items-center">
@@ -151,15 +151,14 @@ const CourseOptimizerPage: FC<{ courseId: string }> = ({ courseId }) => {
                     size="md"
                     className="px-4 rounded-0 scan-course-btn"
                     onClick={() => dispatch(startLinkCheck(courseId))}
-                    disabled={(!!linkCheckInProgress) && !errorMessage}
+                    disabled={!!(linkCheckInProgress) && !errorMessage}
                   >
                     {linkCheckInProgress && !errorMessage ? (
                       <>
                         <Spinner
                           animation="border"
                           size="sm"
-                          className="mr-2"
-                          style={{ width: '1rem', height: '1rem' }}
+                          className="mr-2 spinner-icon"
                         />
                         {intl.formatMessage(messages.buttonTitle)}
                       </>
@@ -168,9 +167,9 @@ const CourseOptimizerPage: FC<{ courseId: string }> = ({ courseId }) => {
                     )}
                   </Button>
                 </div>
-                <Card style={{ boxShadow: 'none', backgroundColor: 'transparent' }}>
+                <Card className="scan-card">
                   <p className="px-3 py-1 small">{intl.formatMessage(messages.description)}</p>
-                  <hr style={{ margin: '0 20px' }} />
+                  <hr />
                   <Card.Header
                     className="scan-header h3 px-3 text-black mb-2"
                     title={intl.formatMessage(messages.scanHeader)}

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

@@ -70,10 +70,10 @@ const LinksCol: FC<{
 }) => (
   <span className="links-container">
     <GoToBlock block={{ url: block.url, displayName: block.displayName || 'Go to block' }} />
-    <Icon className="arrow-forward-ios" src={ArrowForwardIos} style={{ color: '#8F8F8F' }} />
+    <Icon className="arrow-forward-ios" src={ArrowForwardIos} />
     <BrokenLinkHref href={href} />
     {showIcon && linkType && iconsMap[linkType] && (
-      <div style={{ marginLeft: 'auto', marginRight: '10px' }}>
+      <div className="icon-container">
         <CustomIcon
           icon={iconsMap[linkType].icon}
           message1={iconsMap[linkType].message1}
@@ -118,59 +118,60 @@ const BrokenLinkTable: FC<BrokenLinkTableProps> = ({
           }));
           acc.push(...blockPreviousRunLinks);
         }
-      } else {
-        // Handle broken links with filtering and icons
-        if (!filters) { return acc; }
+        return acc;
+      }
 
-        if (
-          filters.brokenLinks
-              || (!filters.brokenLinks && !filters.externalForbiddenLinks && !filters.lockedLinks)
-        ) {
-          const blockBrokenLinks = block.brokenLinks.map((link) => ({
-            Links: (
-              <LinksCol
-                block={{ url: block.url, displayName: block.displayName || 'Go to block' }}
-                href={link}
-                linkType="broken"
-              />
-            ),
-          }));
-          acc.push(...blockBrokenLinks);
-        }
+      // Handle broken links with filtering and icons
+      if (!filters) { return acc; }
 
-        if (
-          filters.lockedLinks
+      if (
+        filters.brokenLinks
               || (!filters.brokenLinks && !filters.externalForbiddenLinks && !filters.lockedLinks)
-        ) {
-          const blockLockedLinks = block.lockedLinks.map((link) => ({
-            Links: (
-              <LinksCol
-                block={{ url: block.url, displayName: block.displayName || 'Go to block' }}
-                href={link}
-                linkType="locked"
-              />
-            ),
-          }));
-
-          acc.push(...blockLockedLinks);
-        }
+      ) {
+        const blockBrokenLinks = block.brokenLinks.map((link) => ({
+          Links: (
+            <LinksCol
+              block={{ url: block.url, displayName: block.displayName || 'Go to block' }}
+              href={link}
+              linkType="broken"
+            />
+          ),
+        }));
+        acc.push(...blockBrokenLinks);
+      }
 
-        if (
-          filters.externalForbiddenLinks
+      if (
+        filters.lockedLinks
               || (!filters.brokenLinks && !filters.externalForbiddenLinks && !filters.lockedLinks)
-        ) {
-          const externalForbiddenLinks = block.externalForbiddenLinks.map((link) => ({
-            Links: (
-              <LinksCol
-                block={{ url: block.url, displayName: block.displayName || 'Go to block' }}
-                href={link}
-                linkType="manual"
-              />
-            ),
-          }));
+      ) {
+        const blockLockedLinks = block.lockedLinks.map((link) => ({
+          Links: (
+            <LinksCol
+              block={{ url: block.url, displayName: block.displayName || 'Go to block' }}
+              href={link}
+              linkType="locked"
+            />
+          ),
+        }));
+
+        acc.push(...blockLockedLinks);
+      }
 
-          acc.push(...externalForbiddenLinks);
-        }
+      if (
+        filters.externalForbiddenLinks
+              || (!filters.brokenLinks && !filters.externalForbiddenLinks && !filters.lockedLinks)
+      ) {
+        const externalForbiddenLinks = block.externalForbiddenLinks.map((link) => ({
+          Links: (
+            <LinksCol
+              block={{ url: block.url, displayName: block.displayName || 'Go to block' }}
+              href={link}
+              linkType="manual"
+            />
+          ),
+        }));
+
+        acc.push(...externalForbiddenLinks);
       }
 
       return acc;

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

@@ -241,6 +241,7 @@
   width: 10px;
   height: 10px;
   align-self: center;
+  color: #8F8F8F;
 }
 
 .scan-results-active-filters-container {
@@ -337,3 +338,22 @@
 .scan-course-btn:focus::before {
   border: none !important;
 }
+
+.spinner-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.scan-card {
+  box-shadow: none;
+  background-color: transparent;
+}
+
+.scan-card hr {
+  margin: 0 20px;
+}
+
+.icon-container {
+  margin-left: auto;
+  margin-right: 10px;
+}

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

@@ -39,6 +39,16 @@ interface Props {
   data: LinkCheckResult | null;
 }
 
+const isDataEmpty = (data: LinkCheckResult | null): boolean => {
+  if (!data) {
+    return true;
+  }
+  const { sections, courseUpdates, customPages } = data;
+  return (!sections || sections.length === 0)
+    && (!courseUpdates || courseUpdates.length === 0)
+    && (!customPages || customPages.length === 0);
+};
+
 const ScanResults: FC<Props> = ({ data }) => {
   const intl = useIntl();
   const waffleFlags = useWaffleFlags();
@@ -167,7 +177,7 @@ const ScanResults: FC<Props> = ({ data }) => {
     setPrevRunOpenStates(allSectionsForPrevRun ? allSectionsForPrevRun.map(() => false) : []);
   }, [allSectionsForBrokenLinks, allSectionsForPrevRun]);
 
-  if (!data) {
+  if (isDataEmpty(data)) {
     return <InfoCard text={intl.formatMessage(messages.noDataCard)} />;
   }
   const handleToggle = (index: number) => {