+
+
{intl.formatMessage(messages.scanHeader)}
+
+
- {intl.formatMessage(messages.scanHeader)}
-
- {
- setShowLockedLinks(!showLockedLinks);
- }}
- label={intl.formatMessage(messages.lockedCheckboxLabel)}
- />
-
+ {intl.formatMessage(messages.brokenLinksHeader)}
+ setModalOpen(true)}
+ disabled={false}
+ iconAfter={ArrowDropDown}
+ className="rounded-sm justify-content-between cadence-button"
+ >
+ {intl.formatMessage(messages.filterButtonLabel)}
+
+
setModalOpen(false)}
+ onApply={setFilters}
+ positionRef={buttonRef}
+ filterOptions={filterOptions}
+ initialFilters={filters}
+ activeFilters={activeFilters}
+ filterBy={filterBy}
+ add={add}
+ remove={remove}
+ set={set}
+ />
+ {activeFilters.length > 0 &&
}
+ {activeFilters.length > 0 && (
+
+
+ {activeFilters.map(filter => (
+ {
+ remove(filter);
+ const updatedFilters = { ...filters, [filter]: false };
+ setFilters(updatedFilters);
+ }}
+ >
+ {filterOptions.find(option => option.value === filter)?.name}
+
+ ))}
+
+ {
+ clear();
+ setFilters(initialFilters);
+ }}
+ >
+ {intl.formatMessage(messages.clearFilters)}
+
+
+ )}
{sections?.map((section, index) => (
{section.subsections.map((subsection) => (
<>
-
- {subsection.displayName}
-
- {subsection.units.map((unit) => (
-
-
- ))}
+ {subsection.units.map((unit) => {
+ if (
+ (!filters.brokenLinks && !filters.externalForbiddenLinks && !filters.lockedLinks)
+ || (filters.brokenLinks && unit.blocks.some(block => block.brokenLinks.length > 0))
+ || (filters.externalForbiddenLinks
+ && unit.blocks.some(block => block.externalForbiddenLinks.length > 0))
+ || (filters.lockedLinks && unit.blocks.some(block => block.lockedLinks.length > 0))
+ ) {
+ return (
+
+
+ );
+ }
+ return null;
+ })}
))}
diff --git a/src/optimizer-page/scan-results/SectionCollapsible.tsx b/src/optimizer-page/scan-results/SectionCollapsible.tsx
index 80c40bf978..c854280f89 100644
--- a/src/optimizer-page/scan-results/SectionCollapsible.tsx
+++ b/src/optimizer-page/scan-results/SectionCollapsible.tsx
@@ -6,38 +6,57 @@ import {
import {
ArrowRight,
ArrowDropDown,
+ LinkOff,
} from '@openedx/paragon/icons';
+import CustomIcon from './CustomIcon';
+import messages from './messages';
+import lockedIcon from './lockedIcon';
+import ManualIcon from './manualIcon';
interface Props {
title: string;
children: React.ReactNode;
- redItalics?: string;
- yellowItalics?: string;
- greenItalics?: string;
+ brokenNumber: number;
+ manualNumber: number;
+ lockedNumber: number;
className?: string;
}
const SectionCollapsible: FC = ({
- title, children, redItalics = '', yellowItalics = '', greenItalics = '', className = '',
+ title, children, brokenNumber = 0, manualNumber = 0, lockedNumber = 0, className = '',
}) => {
const [isOpen, setIsOpen] = useState(false);
- const styling = 'card-lg';
+ const styling = 'card-lg rounded-sm shadow-outline';
const collapsibleTitle = (
-
-
{title}
-
{redItalics}
-
{yellowItalics}
-
{greenItalics}
+
+ {title}
+
+
+
+
+
+
+
+
+
+
{collapsibleTitle}
)}
diff --git a/src/optimizer-page/scan-results/filterModal.jsx b/src/optimizer-page/scan-results/filterModal.jsx
new file mode 100644
index 0000000000..6a37b54b37
--- /dev/null
+++ b/src/optimizer-page/scan-results/filterModal.jsx
@@ -0,0 +1,92 @@
+import { ModalPopup, Form } from '@openedx/paragon';
+import { LinkOff } from '@openedx/paragon/icons';
+import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import CustomIcon from './CustomIcon';
+import messages from './messages';
+import LockedIcon from './lockedIcon';
+import ManualIcon from './manualIcon';
+
+const FilterModal = ({
+ isOpen,
+ onClose,
+ onApply,
+ positionRef,
+ filterOptions,
+ initialFilters,
+ activeFilters,
+ filterBy,
+ add,
+ remove,
+ set,
+}) => {
+ const [previousFilters, setPreviousFilters] = useState(activeFilters);
+ useEffect(() => {
+ if (JSON.stringify(activeFilters) !== JSON.stringify(previousFilters)) {
+ set(activeFilters);
+ setPreviousFilters(activeFilters);
+ }
+ }, [activeFilters]);
+
+ const handleCheckboxChange = (e) => {
+ const { value, checked } = e.target;
+
+ const updatedFilters = { ...initialFilters, [value]: checked };
+ if (e.target.checked) {
+ add(e.target.value);
+ } else {
+ remove(e.target.value);
+ }
+ onApply(updatedFilters);
+ };
+
+ return (
+
+
+
+
+ {filterOptions.map(({ name, value }) => (
+
+
+ {name}
+ { value === 'brokenLinks' &&
+
+ ))}
+
+
+
+
+ );
+};
+
+FilterModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onClose: PropTypes.func.isRequired,
+ onApply: PropTypes.func.isRequired,
+ positionRef: PropTypes.shape({
+ current: PropTypes.instanceOf(Element),
+ }),
+ filterOptions: PropTypes.arrayOf(PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ value: PropTypes.string.isRequired,
+ })).isRequired,
+ initialFilters: PropTypes.shape({
+ brokenLinks: PropTypes.bool.isRequired,
+ lockedLinks: PropTypes.bool.isRequired,
+ externalForbiddenLinks: PropTypes.bool.isRequired,
+ }).isRequired,
+ activeFilters: PropTypes.arrayOf(PropTypes.string).isRequired,
+ filterBy: PropTypes.arrayOf(PropTypes.string).isRequired,
+ add: PropTypes.func.isRequired,
+ remove: PropTypes.func.isRequired,
+ set: PropTypes.func.isRequired,
+};
+
+export default FilterModal;
diff --git a/src/optimizer-page/scan-results/lockedIcon.tsx b/src/optimizer-page/scan-results/lockedIcon.tsx
new file mode 100644
index 0000000000..e5bc785322
--- /dev/null
+++ b/src/optimizer-page/scan-results/lockedIcon.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+const LockedIcon: React.FC> = (props) => (
+
+
+);
+
+export default LockedIcon;
diff --git a/src/optimizer-page/scan-results/manualIcon.tsx b/src/optimizer-page/scan-results/manualIcon.tsx
new file mode 100644
index 0000000000..673139d378
--- /dev/null
+++ b/src/optimizer-page/scan-results/manualIcon.tsx
@@ -0,0 +1,20 @@
+// frontend-app-course-authoring/src/assets/icons/ManualIcon.tsx
+import React from 'react';
+
+const ManualIcon: React.FC> = (props) => (
+
+
+);
+
+export default ManualIcon;
diff --git a/src/optimizer-page/scan-results/messages.js b/src/optimizer-page/scan-results/messages.js
index e3b0c88d31..f4f6c7e781 100644
--- a/src/optimizer-page/scan-results/messages.js
+++ b/src/optimizer-page/scan-results/messages.js
@@ -15,43 +15,48 @@ const messages = defineMessages({
},
scanHeader: {
id: 'course-authoring.course-optimizer.scanHeader',
- defaultMessage: 'Broken Links Scan',
+ defaultMessage: 'Scan results',
+ },
+ brokenLinksHeader: {
+ id: 'course-authoring.course-optimizer.brokenLinksHeader',
+ defaultMessage: 'Broken links',
+ },
+ filterButtonLabel: {
+ id: 'course-authoring.course-optimizer.filterButtonLabel',
+ defaultMessage: 'Filters',
},
lockedCheckboxLabel: {
id: 'course-authoring.course-optimizer.lockedCheckboxLabel',
defaultMessage: 'Show Locked Course Files',
},
- brokenLinksNumber: {
- id: 'course-authoring.course-optimizer.brokenLinksNumber',
- defaultMessage: '{count} broken links',
- },
- lockedLinksNumber: {
- id: 'course-authoring.course-optimizer.lockedLinksNumber',
- defaultMessage: '{count} locked links',
- },
- externalForbiddenLinksNumber: {
- id: 'course-authoring.course-optimizer.externalForbiddenLinksNumber',
- defaultMessage: '{count} manual check',
+ lockedLabel: {
+ id: 'course-authoring.course-optimizer.lockedLabel',
+ defaultMessage: 'Locked',
},
lockedInfoTooltip: {
id: 'course-authoring.course-optimizer.lockedInfoTooltip',
- defaultMessage: 'These course files are "locked", so we cannot verify if the link can access the file.',
+ defaultMessage: 'These course files are inaccessible for non-enrolled users so we cannot verify if the link can access the file.',
+ },
+ brokenLabel: {
+ id: 'course-authoring.course-optimizer.brokenLabel',
+ defaultMessage: 'Broken',
},
- brokenLinkStatus: {
- id: 'course-authoring.course-optimizer.brokenLinkStatus',
- defaultMessage: 'Status: Broken',
+ brokenInfoTooltip: {
+ id: 'course-authoring.course-optimizer.brokenInfoTooltip',
+ defaultMessage: `Links pointing to external websites, images, or videos that do not exist or are no longer available.
+ These links can cause issues for learners when they try to access the content.`,
},
- lockedLinkStatus: {
- id: 'course-authoring.course-optimizer.lockedLinkStatus',
- defaultMessage: 'Status: Locked',
+ manualLabel: {
+ id: 'course-authoring.course-optimizer.manualLabel',
+ defaultMessage: 'Manual',
},
- recommendedManualCheckText: {
- id: 'course-authoring.course-optimizer.recommendedManualCheckText',
- defaultMessage: 'Recommended Manual Check',
+ manualInfoTooltip: {
+ id: 'course-authoring.course-optimizer.manualInfoTooltip',
+ defaultMessage: 'We couldn\'t verify this link. Please check it manually.',
},
- recommendedManualCheckTooltip: {
- id: 'course-authoring.course-optimizer.recommendedManualCheckTooltip',
- defaultMessage: 'For websites returning 403, websites often show 403 because they don\'t want bots accessing their content',
+ clearFilters: {
+ id: 'course-authoring.course-optimizer.clearFilters',
+ defaultMessage: 'Clear filters',
},
});
diff --git a/src/optimizer-page/types.ts b/src/optimizer-page/types.ts
index d874516312..9e8d946bcc 100644
--- a/src/optimizer-page/types.ts
+++ b/src/optimizer-page/types.ts
@@ -26,3 +26,9 @@ export interface Section {
export interface LinkCheckResult {
sections: Section[];
}
+
+export interface Filters {
+ brokenLinks: boolean,
+ lockedLinks: boolean,
+ externalForbiddenLinks: boolean,
+}
diff --git a/src/pages-and-resources/discussions/app-list/AppList.scss b/src/pages-and-resources/discussions/app-list/AppList.scss
index 83d3c3c915..8a09744cc0 100644
--- a/src/pages-and-resources/discussions/app-list/AppList.scss
+++ b/src/pages-and-resources/discussions/app-list/AppList.scss
@@ -6,7 +6,7 @@
.pgn__data-table-container {
tr {
th {
- background-color: $white;
+ background-color: var(--pgn-color-white);
text-align: center;
.d-flex,
@@ -16,7 +16,7 @@
}
td {
- background-color: $white;
+ background-color: var(--pgn-color-white);
.pgn__data-table-cell-wrap {
max-width: unset;
@@ -55,7 +55,7 @@
padding-top: 24px;
h2 {
- color: $primary-500;
+ color: var(--pgn-color-primary-500);
line-height: 28px;
font-size: 22px;
}
diff --git a/src/schedule-and-details/ScheduleAndDetails.scss b/src/schedule-and-details/ScheduleAndDetails.scss
index bbaed92e71..99886b5b61 100644
--- a/src/schedule-and-details/ScheduleAndDetails.scss
+++ b/src/schedule-and-details/ScheduleAndDetails.scss
@@ -25,10 +25,10 @@
justify-content: space-between;
align-items: center;
margin-bottom: .75rem;
- border-bottom: $border-width solid $light-400;
+ border-bottom: var(--pgn-size-border-width) solid var(--pgn-color-light-400);
h2 {
- color: $black;
+ color: var(--pgn-color-black);
margin-bottom: .75rem;
}
}
diff --git a/src/schedule-and-details/basic-section/BasicSection.scss b/src/schedule-and-details/basic-section/BasicSection.scss
index 2d4fc39ea2..34f71808e6 100644
--- a/src/schedule-and-details/basic-section/BasicSection.scss
+++ b/src/schedule-and-details/basic-section/BasicSection.scss
@@ -8,9 +8,8 @@
}
.pgn__pageBanner-component {
- @include pgn-box-shadow(1, "down");
-
- background-color: $white;
+ box-shadow: var(--pgn-elevation-box-shadow-down-1);
+ background-color: var(--pgn-color-white);
border-radius: .375rem;
}
diff --git a/src/schedule-and-details/credit-section/CreditSection.scss b/src/schedule-and-details/credit-section/CreditSection.scss
index 2cfbf1c963..269cc9f4fd 100644
--- a/src/schedule-and-details/credit-section/CreditSection.scss
+++ b/src/schedule-and-details/credit-section/CreditSection.scss
@@ -1,8 +1,8 @@
.credit-section {
.credit-help-text {
- padding-top: $spacer;
+ padding-top: var(--pgn-spacing-spacer-base);
margin-bottom: .5rem;
- font: normal .875rem/1.5rem $font-family-base;
+ font: normal .875rem/1.5rem var(--pgn-typography-font-family-base);
}
.credit-info-list {
diff --git a/src/schedule-and-details/instructors-section/InstructorsSection.scss b/src/schedule-and-details/instructors-section/InstructorsSection.scss
index 1581f8e1cc..eddab8aa25 100644
--- a/src/schedule-and-details/instructors-section/InstructorsSection.scss
+++ b/src/schedule-and-details/instructors-section/InstructorsSection.scss
@@ -6,6 +6,6 @@
gap: 1.875rem;
padding-inline-start: 0;
list-style-type: none;
- padding-top: $spacer;
+ padding-top: var(--pgn-spacing-spacer-base);
}
}
diff --git a/src/schedule-and-details/introducing-section/introduction-video/IntroductionVideo.scss b/src/schedule-and-details/introducing-section/introduction-video/IntroductionVideo.scss
index 55dfae6e7e..40658278f0 100644
--- a/src/schedule-and-details/introducing-section/introduction-video/IntroductionVideo.scss
+++ b/src/schedule-and-details/introducing-section/introduction-video/IntroductionVideo.scss
@@ -1,6 +1,5 @@
.embed-video-container {
- @include pgn-box-shadow(1, "down");
-
+ box-shadow: var(--pgn-elevation-box-shadow-down-1);
border-radius: .1875rem;
.introduction-video {
diff --git a/src/schedule-and-details/learning-outcomes-section/LearningOutcomes.scss b/src/schedule-and-details/learning-outcomes-section/LearningOutcomes.scss
index 13b761f01b..b40ef8937e 100644
--- a/src/schedule-and-details/learning-outcomes-section/LearningOutcomes.scss
+++ b/src/schedule-and-details/learning-outcomes-section/LearningOutcomes.scss
@@ -5,6 +5,6 @@
justify-content: space-between;
padding-inline-start: 0;
list-style-type: none;
- padding-top: $spacer;
+ padding-top: var(--pgn-spacing-spacer-base);
}
}
diff --git a/src/schedule-and-details/pacing-section/PacingSection.scss b/src/schedule-and-details/pacing-section/PacingSection.scss
index 2d4c8a751f..5743339108 100644
--- a/src/schedule-and-details/pacing-section/PacingSection.scss
+++ b/src/schedule-and-details/pacing-section/PacingSection.scss
@@ -1,27 +1,27 @@
.pacing-section {
.pgn__form-group {
p.pgn__form-label {
- font: normal .875rem/1.5rem $font-family-base;
+ font: normal .875rem/1.5rem var(--pgn-typography-font-family-base);
}
label.pgn__form-label {
- font: normal $font-weight-bold .75rem/1.25rem $font-family-base;
+ font: normal var(--pgn-typography-font-weight-bold) .75rem/1.25rem var(--pgn-typography-font-family-base);
color: $text-color-weak;
}
.pgn__form-control-description {
- font: normal .75rem/1.5rem $font-family-base;
- color: $black;
+ font: normal .75rem/1.5rem var(--pgn-typography-font-family-base);
+ color: var(--pgn-color-black);
}
}
input.pgn__form-radio-input {
padding: .5rem;
- height: $spacer;
- width: $spacer;
+ height: var(--pgn-spacing-spacer-base);
+ width: var(--pgn-spacing-spacer-base);
}
.pgn__form-control-set {
- padding: $spacer 0 0 2.5rem;
+ padding: var(--pgn-spacing-spacer-base) 0 0 2.5rem;
}
}
diff --git a/src/schedule-and-details/schedule-section/ScheduleSection.scss b/src/schedule-and-details/schedule-section/ScheduleSection.scss
index 4d96dd0f64..8bb42dcd15 100644
--- a/src/schedule-and-details/schedule-section/ScheduleSection.scss
+++ b/src/schedule-and-details/schedule-section/ScheduleSection.scss
@@ -2,7 +2,7 @@
.schedule-date-list {
display: flex;
flex-direction: column;
- padding-top: $spacer;
+ padding-top: var(--pgn-spacing-spacer-base);
margin: 0;
padding-inline-start: 0;
list-style-type: none;
@@ -32,7 +32,7 @@
.schedule-date-item-error {
margin: 0;
padding: 0;
- color: $form-feedback-invalid-color;
- font: normal $font-weight-normal .75rem/1.25rem $font-family-base;
+ color: var(--pgn-color-form-feedback-invalid);
+ font: normal var(--pgn-typography-font-weight-normal) .75rem/1.25rem var(--pgn-typography-font-family-base);
}
}
diff --git a/src/schedule-and-details/schedule-section/certificate-display-row/CertificateDisplayRow.scss b/src/schedule-and-details/schedule-section/certificate-display-row/CertificateDisplayRow.scss
index e715d7f18f..35e643cc0c 100644
--- a/src/schedule-and-details/schedule-section/certificate-display-row/CertificateDisplayRow.scss
+++ b/src/schedule-and-details/schedule-section/certificate-display-row/CertificateDisplayRow.scss
@@ -1,39 +1,39 @@
.dropdown-certificate {
.dropdown-certificate-label {
- font: normal $font-weight-bold .75rem/1.25rem $font-family-base;
- color: $gray-500;
+ font: normal var(--pgn-typography-font-weight-bold) .75rem/1.25rem var(--pgn-typography-font-family-base);
+ color: var(--pgn-color-gray-500);
margin-bottom: .5rem;
}
.dropdown-certificate-control {
.dropdown-certificate-control-toggle {
- font-size: $input-font-size;
- font-weight: $input-font-weight;
- line-height: $input-line-height;
- background: $input-bg;
- border-color: $input-border-color;
- border-width: $input-border-width;
- box-shadow: $input-box-shadow;
- border-radius: $input-border-radius;
- color: $input-color;
- padding: $input-padding-y $input-padding-x;
- height: $input-height;
+ font-size: var(--pgn-typography-form-input-font-size-base);
+ font-weight: var(--pgn-typography-form-input-font-weight);
+ line-height: var(--pgn-typography-form-input-line-height-base);
+ background: var(--pgn-color-form-input-bg-base);
+ border-color: var(--pgn-color-form-input-border);
+ border-width: var(--pgn-size-form-input-width-border);
+ box-shadow: var(--pgn-elevation-form-input-base);
+ border-radius: var(--pgn-size-form-input-radius-border-base);
+ color: var(--pgn-color-form-input-base);
+ padding: var(--pgn-spacing-form-input-padding-y-base) var(--pgn-spacing-form-input-padding-x-base);
+ height: var(--pgn-size-form-input-height-base);
justify-content: space-between;
width: 100%;
&:not(:disabled, .disabled):active,
&:not(:disabled, .disabled).active,
.show & {
- color: $input-color;
- border-color: $input-bg;
- background-color: $input-bg;
+ color: var(--pgn-color-form-input-base);
+ border-color: var(--pgn-color-form-input-bg-base);
+ background-color: var(--pgn-color-form-input-bg-base);
}
}
}
.pgn__form-control-description {
- font: normal $font-weight-normal .75rem/1.25rem $font-family-base;
- color: $gray-500;
+ font: normal var(--pgn-typography-font-weight-normal) .75rem/1.25rem var(--pgn-typography-font-family-base);
+ color: var(--pgn-color-gray-500);
margin-top: .5rem;
}
}
diff --git a/src/search-manager/FilterBy.scss b/src/search-manager/FilterBy.scss
index 7579958f6f..b6e5ccad2e 100644
--- a/src/search-manager/FilterBy.scss
+++ b/src/search-manager/FilterBy.scss
@@ -7,7 +7,7 @@
}
.clear-filter-button:hover {
- color: $info-900 !important;
+ color: var(--pgn-color-info-900) !important;
}
.problem-menu-item {
diff --git a/src/search-modal/SearchModal.scss b/src/search-modal/SearchModal.scss
index b58495c460..f359b695b8 100644
--- a/src/search-modal/SearchModal.scss
+++ b/src/search-modal/SearchModal.scss
@@ -57,7 +57,7 @@
.search-result {
&:hover {
- background-color: $gray-100;
+ background-color: var(--pgn-color-gray-100);
cursor: pointer;
}
diff --git a/src/search-modal/SearchUI.test.tsx b/src/search-modal/SearchUI.test.tsx
index 2990cd6e1e..0c18160586 100644
--- a/src/search-modal/SearchUI.test.tsx
+++ b/src/search-modal/SearchUI.test.tsx
@@ -480,7 +480,7 @@ describe('
+