- Warning: }}
- />
-
-
-
+
+
+
+
-
{Object.keys(advancedSettingsData).map((settingName) => {
const settingData = advancedSettingsData[settingName];
@@ -205,17 +223,33 @@ const AdvancedSettings = ({ intl, courseId }) => {
return null;
}
return (
-
+
+ +
+);
+
+export default CustomAdvancedSettingsHeader;
diff --git a/src/assets/icons/custom-stars.svg b/src/assets/icons/custom-stars.svg
new file mode 100644
index 0000000000..6a42ab8908
--- /dev/null
+++ b/src/assets/icons/custom-stars.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/assets/scss/_form.scss b/src/assets/scss/_form.scss
index 9ca6aa170b..29bf67a9da 100644
--- a/src/assets/scss/_form.scss
+++ b/src/assets/scss/_form.scss
@@ -83,3 +83,78 @@
.react-datepicker-popper {
z-index: 3;
}
+
+.titaned-grader-dropdown-wrapper {
+ .titaned-grader-dropdown-toggle {
+ width: 100%;
+ text-align: left;
+ background-color: var(--bg-surface);
+ border: 1px solid var(--border-color);
+ border-radius: 0.375rem;
+ padding: 0.375rem 0.75rem;
+ font-size: 1rem;
+ line-height: 1.5;
+ color: var(--text-primary);
+
+ &:focus {
+ border-color: var(--primary);
+ outline: 0;
+ box-shadow: 0 0 0 0.25rem var(--primary-light);
+ }
+
+ &:after {
+ margin-left: auto;
+ }
+ }
+
+ .titaned-grader-dropdown-menu {
+ width: 100%;
+ border: 1px solid var(--border-color);
+ border-radius: 0.375rem;
+ box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+ padding: 0.25rem 0;
+ margin-top: 0.125rem;
+ background-color: var(--bg-surface);
+ }
+
+ .titaned-grader-dropdown-item {
+ padding: 0.5rem 1rem;
+ color: var(--text-primary);
+ text-decoration: none;
+ display: block;
+ width: 100%;
+ clear: both;
+ font-weight: 400;
+ text-align: inherit;
+ white-space: nowrap;
+ background-color: transparent;
+ border: 0;
+
+ &:hover {
+ background-color: var(--primary) !important;
+ color: var(--text-white) !important;
+ }
+
+ &:focus {
+ background-color: var(--primary) !important;
+ color: var(--text-white) !important;
+ }
+
+ &:active {
+ background-color: var(--primary-active) !important;
+ color: var(--text-white) !important;
+ }
+ }
+}
+
+.custom-select-option-priary {
+ &:hover {
+ background-color: var(--primary) !important;
+ color: white !important;
+ }
+
+ &:focus {
+ background-color: var(--primary) !important;
+ color: white !important;
+ }
+}
\ No newline at end of file
diff --git a/src/assignment/assets/styles/_assignment.scss b/src/assignment/assets/styles/_assignment.scss
new file mode 100644
index 0000000000..e599561bf3
--- /dev/null
+++ b/src/assignment/assets/styles/_assignment.scss
@@ -0,0 +1,271 @@
+
+.assignment-page {
+ background-color: var(--bg-body);
+ padding: 20px;
+
+ .header {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+
+ .top-row {
+ display: flex;
+ justify-content: space-between;
+
+
+ h2 {
+ color: var(--text-primary);
+ font-size: 24px;
+ }
+
+ .datefilterItem1 {
+ display: none;
+ }
+ }
+
+ .filters {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ .inputfilterContainer {
+ display: flex;
+ }
+
+ .searchInputItem {
+ .search-bar {
+ max-width: 280px;
+
+ .pgn__form-control {
+ color: var(--text-primary);
+ border-radius: 8px;
+
+ &::placeholder {
+ color: var(--disabled);
+ }
+ }
+
+ .pgn__icon,
+ .pgn__icon-button {
+ color: var(--primary);
+
+ &:hover {
+ color: var(--primary);
+ }
+ }
+
+ .pgn__form-control-decorator-group {
+ .pgn__form-control-decorator {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ }
+
+ }
+
+ .searchInputItem,
+ .customFilterDropdownItem1,
+ .customFilterDropdownItem2 {
+ margin-left: 18px;
+ }
+ }
+ }
+
+ .date-filter {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ gap: 10px;
+
+ .date-presets {
+ display: flex;
+ gap: 8px;
+
+ .pgn__button {
+ background-color: var(--bg-surface);
+ border-color: var(--border-color);
+ color: var(--text-primary);
+
+ &:hover {
+ background-color: var(--bg-hover);
+ border-color: var(--border-color-hover);
+ }
+ }
+ }
+
+ .pgn__icon-button {
+ color: var(--primary);
+
+ &:hover {
+ color: var(--primary-hover);
+ }
+ }
+
+ .date-filter-panel {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ margin-top: 8px;
+ padding: 16px;
+ border: 1px solid var(--border-color);
+ border-radius: 12px;
+ background-color: var(--bg-surface);
+ box-shadow: 0 2px 6px var(--border-color);
+ z-index: 50;
+ }
+
+ .date-presets {
+ display: flex;
+ gap: 8px;
+ margin-top: 12px;
+
+ .pgn__button {
+ background-color: var(--bg-surface);
+ border-color: var(--border-color);
+ color: var(--text-primary);
+
+ &:hover {
+ background-color: var(--bg-hover);
+ border-color: var(--border-color-hover);
+ }
+ }
+ }
+ }
+
+ .table-row {
+ margin-top: 20px;
+
+ .pgn__data-table-status,
+ .pgn__data-table-footer,
+ .pgn__data-table-status-bar {
+ display: none;
+ }
+
+ .pgn__data-table th {
+ color: var(--text-primary);
+ font-weight: 600;
+ font-size: 1.02rem;
+ }
+
+ .pgn__data-table .pgn__data-table-cell-wrap {
+ max-width: 220px;
+ min-width: 102px;
+ }
+ }
+
+ .pagination-row {
+ margin-top: 20px;
+ display: flex;
+ justify-content: center;
+ }
+}
+
+@media (max-width: 1100px) {
+ .assignment-page {
+ .header {
+ flex-direction: column;
+ align-items: start;
+ gap: 12px;
+
+ .top-row {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .datefilterItem1 {
+ display: block;
+ }
+ }
+
+ .filters {
+ .datefilterItem2 {
+ display: none;
+ }
+
+ .searchInputItem {
+ margin-left: 0;
+ }
+ }
+ }
+
+ .date-filter {
+ position: relative;
+
+ .date-filter-panel {
+ width: 260px;
+ position: absolute;
+ top: 100%;
+ right: 0;
+ left: auto;
+ }
+ }
+
+ .btn-outline-primary {
+ border-radius: 4px;
+ padding: 4px;
+ font-size: 12px;
+ }
+
+ .btn-outline-secondary {
+ border-radius: 4px;
+ padding: 4px;
+ font-size: 12px;
+ }
+ }
+}
+
+@media (max-width: 767px) {
+ .assignment-page {
+ .header {
+ .filters {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ align-items: start;
+
+ .customFilterDropdownItem1 {
+ margin-left: 0;
+ }
+ }
+
+ }
+
+ .date-filter {
+ position: relative;
+
+ .date-filter-panel {
+ width: 260px;
+ position: absolute;
+ top: 100%;
+ right: 0;
+ left: auto;
+ }
+ }
+
+ .btn-outline-primary {
+ border-radius: 4px;
+ padding: 4px;
+ font-size: 12px;
+ }
+
+ .btn-outline-secondary {
+ border-radius: 4px;
+ padding: 4px;
+ font-size: 12px;
+ }
+
+ .pagination-row {
+ .btn {
+ font-size: 12px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/assignment/components/AssignmentTable.jsx b/src/assignment/components/AssignmentTable.jsx
new file mode 100644
index 0000000000..e021fd50b6
--- /dev/null
+++ b/src/assignment/components/AssignmentTable.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { DataTable, IconButton, Icon } from '@openedx/paragon';
+import { OpenInNew } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useAssignmentContext } from '../context/AssignmentContext';
+import messages from '../data/messages';
+
+const AssignmentTable = () => {
+ const intl = useIntl();
+ const { assignments } = useAssignmentContext();
+
+ const columns = [
+ { Header: intl.formatMessage(messages.tableHeaders.assignmentName), accessor: 'assignmentName' },
+ { Header: intl.formatMessage(messages.tableHeaders.courseName), accessor: 'courseName' },
+ { Header: intl.formatMessage(messages.tableHeaders.unitName), accessor: 'unitName' },
+ { Header: intl.formatMessage(messages.tableHeaders.dueDate), accessor: 'dueDate' },
+ { Header: intl.formatMessage(messages.tableHeaders.responses), accessor: 'responses' },
+ { Header: intl.formatMessage(messages.tableHeaders.marks), accessor: 'marks' },
+ { Header: intl.formatMessage(messages.tableHeaders.status), accessor: 'status' },
+ {
+ Header: intl.formatMessage(messages.tableHeaders.review),
+ accessor: 'review',
+ Cell: ({ value }) => (
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+ {isOpen && (
+
+
+
+ {showSearch && (
+ setSearchText(e.target.value)}
+ placeholder={intl.formatMessage({ id: 'search.placeholder', defaultMessage: 'Search...' })}
+ style={{
+ margin: '5px',
+ width: 'calc(100% - 10px)',
+ border: '1px solid var(--border-color)',
+ background: 'var(--bg-body)',
+ color: 'var(--text-primary)',
+ }}
+ />
+ )}
+
+ )}
+
+ {filteredOptions.length > 0 ? (
+ filteredOptions.map((opt) => (
+
+ handleOptionClick(opt)}
+ style={{
+ fontSize: '18px',
+ cursor: 'pointer',
+ whiteSpace: 'normal',
+ wordBreak: 'break-word',
+ padding: '5px 10px',
+ borderBottom: '1px solid var(--border-color)',
+ color: 'var(--text-primary)',
+ background: 'var(--bg-surface)',
+ }}
+ >
+ {opt.label}
+
+ ))
+ ) : (
+
+ {intl.formatMessage({ id: 'no.results', defaultMessage: 'No results found' })}
+
+ )}
+
+
+ );
+};
+
+export default DateFilter;
+
diff --git a/src/assignment/components/ErrorDisplay.jsx b/src/assignment/components/ErrorDisplay.jsx
new file mode 100644
index 0000000000..26362f7f96
--- /dev/null
+++ b/src/assignment/components/ErrorDisplay.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Alert } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useAssignmentContext } from '../context/AssignmentContext';
+
+const ErrorDisplay = () => {
+ const intl = useIntl();
+ const { error, clearError } = useAssignmentContext();
+
+ if (!error) return null;
+
+ return (
+
+
+ {intl.formatMessage(messages.fromDateLabel)}
+ {
+ setFromDate(e.target.value);
+ if (toDate) {
+ const maxTo = new Date(e.target.value);
+ maxTo.setMonth(maxTo.getMonth() + 3);
+ if (new Date(toDate) > maxTo) {
+ setToDate('');
+ }
+ }
+ }}
+ />
+
+
+
+ {intl.formatMessage(messages.toDateLabel)}
+ setToDate(e.target.value)}
+ disabled={!fromDate}
+ min={fromDate ? new Date(fromDate).toISOString().split('T')[0] : ''}
+ max={getMaxToDate()}
+ />
+
+
+
+ )}
+
+
+
+
+
+
+
+ 0 ? (
+
+ );
+};
+
+export default SearchBar;
diff --git a/src/assignment/context/AssignmentContext.jsx b/src/assignment/context/AssignmentContext.jsx
new file mode 100644
index 0000000000..74bcb69253
--- /dev/null
+++ b/src/assignment/context/AssignmentContext.jsx
@@ -0,0 +1,137 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { fetchAssignments } from '../data/assignmentService';
+import messages from '../data/messages';
+
+const AssignmentContext = createContext();
+
+export const useAssignmentContext = () => useContext(AssignmentContext);
+
+export const AssignmentProvider = ({ children }) => {
+ const [assignments, setAssignments] = useState([]);
+ const [totalAssignments, setTotalAssignments] = useState(0);
+ const [totalPages, setTotalPages] = useState(0);
+ const [courseOptions, setCourseOptions] = useState(['all']);
+ const [statusOptions, setStatusOptions] = useState(['all']);
+ const [searchQuery, setSearchQuery] = useState('');
+ const [courseFilter, setCourseFilter] = useState('all');
+ const [statusFilter, setStatusFilter] = useState('all');
+ const [fromDate, setFromDate] = useState(null);
+ const [toDate, setToDate] = useState(null);
+ const [currentPage, setCurrentPage] = useState(1);
+ const [pageSize] = useState(15);
+ const [error, setError] = useState(null);
+
+ const validateDateRange = (from, to) => {
+ if (!from || !to) return true;
+ const fromTime = new Date(from).getTime();
+ const toTime = new Date(to).getTime();
+ const threeMonths = 3 * 30 * 24 * 60 * 60 * 1000;
+ return toTime - fromTime <= threeMonths;
+ };
+
+ useEffect(() => {
+ const loadData = async () => {
+ if (fromDate && toDate && !validateDateRange(fromDate, toDate)) {
+ setError(messages.errorInvalidDateRange);
+ setAssignments([]);
+ setTotalAssignments(0);
+ setTotalPages(0);
+ return;
+ }
+ try {
+ const { data, total, totalPages, courseOptions, statusOptions } =
+ await fetchAssignments({
+ page: currentPage,
+ pageSize,
+ fromDate,
+ toDate,
+ course: courseFilter,
+ status: statusFilter,
+ searchQuery,
+ });
+
+ setAssignments(data);
+ setTotalAssignments(total);
+ setTotalPages(totalPages);
+ setCourseOptions(courseOptions);
+ setStatusOptions(statusOptions);
+ setError(null);
+ } catch (err) {
+ setError(messages.errorLoad);
+ setAssignments([]);
+ setTotalAssignments(0);
+ setTotalPages(0);
+ }
+ };
+ loadData();
+ }, [currentPage, fromDate, toDate, courseFilter, statusFilter, searchQuery]);
+
+ useEffect(() => {
+ setCurrentPage(1);
+ }, [courseFilter, statusFilter, searchQuery, fromDate, toDate]);
+
+ const setToday = () => {
+ const today = new Date();
+ setFromDate(today);
+ setToDate(today);
+ setCurrentPage(1);
+ };
+
+ const setThisWeek = () => {
+ const today = new Date();
+ const startOfWeek = new Date(today);
+ startOfWeek.setDate(today.getDate() - today.getDay());
+ const endOfWeek = new Date(startOfWeek);
+ endOfWeek.setDate(startOfWeek.getDate() + 6);
+ setFromDate(startOfWeek);
+ setToDate(endOfWeek);
+ setCurrentPage(1);
+ };
+
+ const setThisMonth = () => {
+ const today = new Date();
+ const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+ const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+ setFromDate(startOfMonth);
+ setToDate(endOfMonth);
+ setCurrentPage(1);
+ };
+
+ const clearError = () => setError(null);
+
+ return (
+
+
+ );
+};
+
+const AssignmentPage = () => (
+
+
+
+
+
+
+ {intl.formatMessage(messages.pageTitle)}
+
+
+
+
+
+
+
+
+
+
+
+ setCourseFilter(val)}
+ options={courseOptions}
+ allLabelMessage={messages.allCourses}
+ />
+
+
+ setStatusFilter(val)}
+ options={statusOptions}
+ allLabelMessage={messages.allStatus}
+ showSearch={false}
+ />
+
+
+
+
+
+
+
+ );
+};
+
+export default CalendarHeader;
\ No newline at end of file
diff --git a/src/calendar/components/CalendarView.jsx b/src/calendar/components/CalendarView.jsx
new file mode 100644
index 0000000000..67cb8526ce
--- /dev/null
+++ b/src/calendar/components/CalendarView.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import FullCalendar from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import listPlugin from '@fullcalendar/list';
+import interactionPlugin from '@fullcalendar/interaction';
+import allLocales from '@fullcalendar/core/locales-all';
+import { useCalendarContext } from '../context/CalendarContext';
+import { getLocale } from '@edx/frontend-platform/i18n';
+
+const CalendarView = () => {
+ const { filteredEvents, setCurrentDateTitle, currentDate, currentView } = useCalendarContext();
+
+ return (
+
+
+ + {intl && intl.formatMessage + ? intl.formatMessage(messages.calendarTitle) + : messages.calendarTitle.defaultMessage} +
+
+
+
+
+ {currentDateTitle}
+
+ setSearchText(e.target.value)}
+ onKeyDown={onSearchKeyDown}
+ onBlur={() => searchEvents(searchText)}
+ />
+
+
+ setCurrentDateTitle(arg.view.title)}
+ initialDate={currentDate}
+ />
+
+ );
+};
+
+export default CalendarView;
\ No newline at end of file
diff --git a/src/calendar/components/Dropdown.jsx b/src/calendar/components/Dropdown.jsx
new file mode 100644
index 0000000000..b34649e8d4
--- /dev/null
+++ b/src/calendar/components/Dropdown.jsx
@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { ExpandMore } from '@openedx/paragon/icons';
+
+const Dropdown = ({ options, onChange, value, className }) => {
+ const intl = useIntl();
+ const [isOpen, setIsOpen] = useState(false);
+
+ const selectedOption = options.find(opt => opt.value === value);
+
+ const getLabel = (option) => {
+ return option.label ||
+ (intl && intl.formatMessage
+ ? intl.formatMessage({
+ id: option.messageId,
+ defaultMessage: option.defaultMessage || option.messageId,
+ })
+ : option.defaultMessage || option.messageId);
+ };
+
+ const toggleDropdown = () => setIsOpen(prev => !prev);
+
+ const handleSelect = (option) => {
+ onChange(option.value);
+ setIsOpen(false);
+ };
+
+ useEffect(() => {
+ const handleClickOutside = (e) => {
+ if (!e.target.closest('.custom-dropdown')) {
+ setIsOpen(false);
+ }
+ };
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => document.removeEventListener('mousedown', handleClickOutside);
+ }, []);
+
+ return (
+
+
+ );
+};
+
+Dropdown.propTypes = {
+ options: PropTypes.arrayOf(
+ PropTypes.shape({
+ value: PropTypes.string.isRequired,
+ messageId: PropTypes.string,
+ defaultMessage: PropTypes.string,
+ label: PropTypes.string,
+ })
+ ).isRequired,
+ onChange: PropTypes.func.isRequired,
+ value: PropTypes.string,
+ className: PropTypes.string,
+};
+
+Dropdown.defaultProps = {
+ value: undefined,
+ className: '',
+};
+
+export default Dropdown;
diff --git a/src/calendar/components/ErrorDisplay.jsx b/src/calendar/components/ErrorDisplay.jsx
new file mode 100644
index 0000000000..f02b053c3b
--- /dev/null
+++ b/src/calendar/components/ErrorDisplay.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Alert } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useCalendarContext } from '../context/CalendarContext';
+import messages from '../data/messages';
+
+const ErrorDisplay = () => {
+ const { intl } = useIntl();
+ const { error, clearError } = useCalendarContext();
+
+ if (!error) return null;
+
+ const message = messages[error] || { id: error, defaultMessage: 'An error occurred.' };
+
+ return (
+ e.key === 'Enter' && toggleDropdown()}
+ >
+ {selectedOption ? getLabel(selectedOption) : intl.formatMessage({ id: 'select.placeholder', defaultMessage: 'Select...' })}
+
+
+
+ {isOpen && (
+
+ {options.map((option) => (
+
+ )}
+ handleSelect(option)}
+ role="option"
+ tabIndex={0}
+ onKeyDown={(e) => e.key === 'Enter' && handleSelect(option)}
+ >
+ {getLabel(option)}
+
+ ))}
+
+
+ );
+};
+
+export default FilterDropdown;
\ No newline at end of file
diff --git a/src/calendar/components/NavigationButton.jsx b/src/calendar/components/NavigationButton.jsx
new file mode 100644
index 0000000000..558583c3bf
--- /dev/null
+++ b/src/calendar/components/NavigationButton.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from '../data/messages';
+
+const NavigationButton = ({ type, onClick, className }) => {
+ const intl = useIntl();
+
+ return (
+
+ );
+};
+
+NavigationButton.propTypes = {
+ type: PropTypes.oneOf(['prev', 'next', 'today']).isRequired,
+ onClick: PropTypes.func.isRequired,
+ className: PropTypes.string,
+};
+
+NavigationButton.defaultProps = {
+ className: '',
+};
+
+export default NavigationButton;
\ No newline at end of file
diff --git a/src/calendar/context/CalendarContext.jsx b/src/calendar/context/CalendarContext.jsx
new file mode 100644
index 0000000000..3ace8e80c8
--- /dev/null
+++ b/src/calendar/context/CalendarContext.jsx
@@ -0,0 +1,169 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { getLocale } from '@edx/frontend-platform/i18n';
+import eventsData from '../data/events.json';
+
+const CalendarContext = createContext();
+
+export const useCalendarContext = () => useContext(CalendarContext);
+
+export const CalendarProvider = ({ children }) => {
+ const [events, setEvents] = useState([]);
+ const [filterType, setFilterType] = useState('all');
+ const [searchQuery, setSearchQuery] = useState('');
+ const [filteredEvents, setFilteredEvents] = useState([]);
+ const [currentEventIndex, setCurrentEventIndex] = useState(0);
+ const [currentDateTitle, setCurrentDateTitle] = useState('');
+ const [currentDate, setCurrentDate] = useState(new Date());
+ const [currentView, setCurrentView] = useState('dayGridMonth');
+ const [error, setError] = useState(null);
+ const locale = getLocale();
+
+ useEffect(() => {
+ if (!Array.isArray(eventsData)) {
+ setError('calendar.error.eventsLoad');
+ return;
+ }
+ setEvents(eventsData);
+ setFilteredEvents(eventsData);
+ setError(null);
+ }, []);
+
+ useEffect(() => {
+ let result = [...events];
+ if (filterType && filterType !== 'all') {
+ result = result.filter((ev) => ev.type === filterType);
+ }
+ if (searchQuery && searchQuery.trim() !== '') {
+ const q = searchQuery.toLowerCase().trim();
+ result = result.filter(
+ (ev) =>
+ (ev.title && ev.title.toLowerCase().includes(q)) ||
+ (ev.type && ev.type.toLowerCase().includes(q))
+ );
+ }
+ setFilteredEvents(result);
+ setCurrentEventIndex(0);
+ setError(null);
+ }, [events, filterType, searchQuery]);
+
+ useEffect(() => {
+ if (filteredEvents.length > 0 && currentEventIndex < filteredEvents.length) {
+ const ev = filteredEvents[currentEventIndex];
+ if (ev && ev.start) {
+ const eventDate = new Date(ev.start);
+ if (!isNaN(eventDate.getTime())) {
+ setCurrentDate(eventDate);
+ setError(null);
+ } else {
+ setError('calendar.error.eventNavigation');
+ }
+ }
+ }
+ }, [filteredEvents, currentEventIndex]);
+
+ const adjustDate = (prevDate, direction) => {
+ const d = new Date(prevDate);
+ if (isNaN(d.getTime())) {
+ setError('calendar.error.navigation');
+ return prevDate;
+ }
+ switch (currentView) {
+ case 'dayGridMonth':
+ d.setMonth(d.getMonth() + direction);
+ break;
+ case 'timeGridWeek':
+ case 'listWeek':
+ d.setDate(d.getDate() + direction * 7);
+ break;
+ case 'timeGridDay':
+ d.setDate(d.getDate() + direction);
+ break;
+ default:
+ setError('calendar.error.navigation');
+ return prevDate;
+ }
+ setError(null);
+ return d;
+ };
+
+ const prev = () => setCurrentDate((prevDate) => adjustDate(prevDate, -1));
+
+ const next = () => setCurrentDate((prevDate) => adjustDate(prevDate, 1));
+
+ const today = () => {
+ setCurrentDate(new Date());
+ setError(null);
+ };
+
+ const changeView = (view) => {
+ if (['dayGridMonth', 'timeGridWeek', 'timeGridDay', 'listWeek'].includes(view)) {
+ setCurrentView(view);
+ setCurrentDateTitle('');
+ setError(null);
+ } else {
+ setError('calendar.error.viewChange');
+ }
+ };
+
+ const filterByType = (type) => {
+ setFilterType(type);
+ setError(null);
+ };
+
+ const searchEvents = (query) => {
+ setSearchQuery(query);
+ setError(null);
+ };
+
+ const nextEvent = () => {
+ setCurrentEventIndex((prev) =>
+ filteredEvents.length ? (prev + 1) % filteredEvents.length : 0
+ );
+ setError(null);
+ };
+
+ const prevEvent = () => {
+ setCurrentEventIndex((prev) =>
+ filteredEvents.length ? (prev - 1 + filteredEvents.length) % filteredEvents.length : 0
+ );
+ setError(null);
+ };
+
+ const clearError = () => {
+ setError(null);
+ };
+
+ return (
+
+
+ )}
+
+
+
+
{
+ ref.current = el;
+ panelRef.current = el;
+ }} style={panelStyle} className={`copilot-panel ${isFullScreen ? 'fullscreen' : ''} ${(isDocked && !isFullScreen) ? 'isDocked' : ''}`}>
+
+ {children} ;
+};
+
+export default CopilotContext;
\ No newline at end of file
diff --git a/src/copilot/copilot.scss b/src/copilot/copilot.scss
new file mode 100644
index 0000000000..bb05868e0f
--- /dev/null
+++ b/src/copilot/copilot.scss
@@ -0,0 +1,635 @@
+.copilot-wrapper {
+ display: flex;
+ flex-shrink: 0;
+
+ &.inline {
+ position: fixed;
+ z-index: 999;
+ flex: 0 0 auto;
+ }
+
+ &.docked {
+ position: relative;
+ flex: 0 0 auto;
+ z-index: 999;
+ pointer-events: auto;
+ transition: width 0.3s ease-in-out;
+ }
+
+ .copilot-panel {
+ border: 1px solid var(--border-color);
+ border-radius: 16px;
+ color: var(--text-primary);
+ background: var(--bg-surface);
+ position: relative;
+ pointer-events: auto;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+
+ &.fullscreen {
+ border: none;
+ border-radius: 0;
+ background: var(--bg-body);
+ }
+
+ .copilot-loading {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ span {
+ font-size: 1.2rem;
+ font-weight: 500;
+ color: var(--text-primary);
+ }
+ }
+
+ .copilot-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 12px;
+ border-bottom: 1px solid var(--border-color);
+ flex-shrink: 0;
+ background: var(--bg-surface);
+
+ .header-left {
+ display: flex;
+ align-items: center;
+ }
+
+ .header-mid {
+ cursor: move;
+ height: 36px;
+ width: 100%;
+ }
+
+ .header-right {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ }
+
+ .title {
+ font-weight: 600;
+ margin-left: 8px;
+ font-size: 1rem;
+ color: var(--primary);
+ }
+
+ .drag-handle {
+ cursor: pointer;
+ margin: 0 8px;
+ padding: 4px;
+
+ .dots {
+ display: grid;
+ grid-template-columns: repeat(3, 4px);
+ grid-template-rows: repeat(2, 4px);
+ grid-gap: 3px;
+
+ span {
+ background: var(--text-muted);
+ border-radius: 50%;
+ }
+ }
+
+ &:hover .dots span {
+ background: var(--secondary);
+ }
+ }
+
+ .minimize-icon {
+ margin: 0 4px;
+ color: var(--text-muted);
+
+ &:hover {
+ color: var(--primary);
+ }
+ }
+ }
+
+ .copilot-content {
+ flex: 1 1 auto;
+ min-height: 0;
+ padding: 0.75rem 1rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 0.5rem;
+
+ .none {
+ display: none;
+ }
+
+ .pined-suggestion {
+ width: 100%;
+ max-height: 30%;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ scrollbar-width: thin;
+ scrollbar-color: var(--secondary-light) var(--bg-surface);
+ position: absolute;
+ top: 64px;
+ left: 0;
+ background: var(--bg-surface);
+ border-bottom: 1px solid var(--border-color);
+ padding: 8px;
+ z-index: 100;
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+ backdrop-filter: blur(8px);
+ -webkit-backdrop-filter: blur(8px);
+
+ .pinned-group {
+ margin-bottom: 12px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ .pinned-group-label {
+ font-size: 0.75rem;
+ font-weight: 600;
+ color: var(--primary);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ margin-bottom: 6px;
+ padding: 0 4px;
+ }
+
+ .pinned-group-items {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+ }
+ }
+
+ .pinned-item {
+ // position: relative;
+ border-radius: 6px;
+ overflow: hidden;
+ border: 1px solid var(--border-color);
+ cursor: pointer;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+ &.text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 6px;
+ font-size: 0.80rem;
+ line-height: 1.2;
+ text-align: left;
+ background: var(--bg-body);
+ color: var(--text-primary);
+ }
+
+ img {
+ width: 84px;
+ object-fit: cover;
+ }
+
+ .unpin-btn {
+ position: absolute;
+ top: 2px;
+ right: 2px;
+ color: var(--primary);
+ border: none;
+ border-radius: 50%;
+ width: 18px;
+ height: 18px;
+ cursor: pointer;
+ opacity: 0;
+ transition: opacity 0.2s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &:hover {
+ transform: scale(1.01);
+ z-index: 1000;
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+
+ .unpin-btn {
+ opacity: 1;
+ }
+ }
+ }
+ }
+
+ .chat-messages {
+ width: 100%;
+ overflow-y: scroll;
+ margin-bottom: 0.5rem;
+ padding-right: 8px;
+ scrollbar-width: thin;
+ scrollbar-color: var(--secondary-light) var(--bg-surface);
+
+ &::-webkit-scrollbar {
+ width: 4px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: var(--bg-surface);
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: var(--secondary-light);
+ border-radius: 3px;
+ }
+
+ .suggestion-wrapper {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ margin: 0.25rem 0;
+
+ .pin-btn {
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ padding: 4px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0.6;
+ transition: all 0.2s ease;
+
+ &:hover {
+ opacity: 1;
+ background: var(--bg-hover);
+ }
+
+ &.pinned {
+ opacity: 1;
+ color: var(--primary);
+
+ &:hover {
+ color: var(--primary-hover);
+ }
+ }
+
+ svg {
+ width: 16px;
+ height: 16px;
+ }
+ }
+ }
+
+
+ .message-container {
+ display: flex;
+ flex-direction: column;
+ margin: 0.5rem 0;
+ max-width: 100%;
+
+ &.ai {
+ align-items: flex-start;
+
+ .message,
+ .message-container {
+ max-width: 78%;
+ }
+
+ .message,
+ .customQuestion {
+ background: var(--secondary-light);
+ color: var(--text-primary);
+ padding: 0.75rem 1rem;
+ border-radius: 16px 16px 16px 0;
+ width: fit-content;
+ text-align: left;
+ word-break: break-word;
+ // box-shadow:
+ // 0 2px 6px rgba(0, 0, 0, 0.1),
+ // 0 1px 3px rgba(0, 0, 0, 0.08);
+ backdrop-filter: blur(8px);
+ -webkit-backdrop-filter: blur(8px);
+ box-shadow:
+ inset 2px 2px 4px rgba(255, 255, 255, 0.6),
+ inset -2px -2px 6px rgba(0, 0, 0, 0.05),
+ 0 6px 12px rgba(0, 0, 0, 0.1),
+ 0 2px 4px rgba(0, 0, 0, 0.08);
+ font-size: 1rem;
+ line-height: 1.4;
+ position: relative;
+
+ }
+ }
+
+ &.user {
+ align-items: flex-end;
+
+ .message,
+ .suggestion {
+ background: var(--primary-light);
+ color: var(--text-primary);
+ padding: 0.75rem 1rem;
+ border-radius: 16px 16px 0 16px;
+ max-width: 78%;
+ width: fit-content;
+ text-align: left;
+ word-break: break-word;
+ // box-shadow:
+ // 0 2px 8px rgba(0, 0, 0, 0.1),
+ // 0 1px 4px rgba(0, 0, 0, 0.08);
+ backdrop-filter: blur(4px);
+ -webkit-backdrop-filter: blur(8px);
+ box-shadow:
+ inset 2px 2px 4px rgba(255, 255, 255, 0.6),
+ inset -2px -2px 6px rgba(0, 0, 0, 0.05),
+ 0 6px 12px rgba(0, 0, 0, 0.1),
+ 0 2px 4px rgba(0, 0, 0, 0.08);
+ font-size: 1rem;
+ line-height: 1.4;
+ position: relative;
+ }
+
+ .image-message {
+ max-width: 240px;
+ border-radius: 12px;
+ overflow: hidden;
+ border: 1px solid var(--border-color);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+ img {
+ width: 100%;
+ height: auto;
+ display: block;
+ }
+ }
+ }
+
+ .customQuestion {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+ color: var(--primary);
+ }
+
+ .suggestion {
+ background: transparent;
+ border: 1px solid var(--border-color);
+ padding: 0.4rem 0.8rem;
+ border-radius: 8px;
+ margin: 0.25rem;
+ max-width: 78%;
+ font-size: 1rem;
+ width: fit-content;
+ cursor: pointer;
+ text-align: left;
+ transition: all 0.2s ease;
+
+ &:hover {
+ border-color: var(--primary);
+ background-color: var(--primary-hover);
+ }
+
+ &.selected {
+ border-color: var(--primary);
+ background-color: var(--primary-light);
+ box-shadow: 0 0 0 1px var(--primary-alt);
+ }
+
+ &.image-suggestion {
+ padding: 0;
+ border-radius: 12px;
+ overflow: hidden;
+ max-width: 240px;
+ border: 1px solid var(--border-color);
+
+ &:hover {
+ border-color: var(--primary);
+ }
+
+ &.selected {
+ border-color: var(--primary);
+ box-shadow: 0 0 0 2px var(--primary-alt);
+ }
+
+ img {
+ width: 100%;
+ height: auto;
+ display: block;
+ }
+ }
+ }
+ }
+ }
+
+ .copilot-content-bottom {
+ height: 20%;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ flex-shrink: 0;
+
+ .copilot-content-bottom-button {
+ display: flex;
+ gap: 8px;
+ padding: 0 8px;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+
+ button {
+ font-size: 14px;
+ padding: 6px 12px;
+ line-height: 1.2;
+ border-radius: 8px;
+ transition: all 0.2s ease;
+
+ &.pgn__btn--primary {
+ background: var(--primary);
+ border-color: var(--primary);
+ color: var(--text-white);
+
+ &:hover {
+ background: var(--primary-hover);
+ border-color: var(--primary-alt);
+ }
+
+ &:active {
+ background: var(--primary-active);
+ }
+ }
+
+ &.pgn__btn--outline-primary {
+ border-color: var(--primary);
+ color: var(--primary);
+
+ &:hover {
+ background: var(--primary-light);
+ border-color: var(--primary-alt);
+ }
+ }
+ }
+ }
+
+ .input-container {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 0 8px;
+
+ input {
+ font-size: 14px;
+ padding: 8px 12px;
+ flex: 1;
+ min-width: 0;
+ border-radius: 8px;
+ border: 1px solid var(--border-color);
+ background: var(--bg-surface);
+ color: var(--text-primary);
+
+ &:focus {
+ border-color: var(--primary);
+ box-shadow: 0 0 0 2px var(--primary-light);
+ }
+ }
+
+ button {
+ font-size: 14px;
+ padding: 8px 12px;
+ border-radius: 8px;
+ background: var(--primary);
+ border-color: var(--primary);
+ color: var(--text-white);
+
+ &:hover {
+ background: var(--primary-hover);
+ border-color: var(--primary-alt);
+ }
+
+ &:active {
+ background: var(--primary-active);
+ }
+ }
+ }
+ }
+ }
+
+ .resize-indicator {
+ position: absolute;
+ pointer-events: auto;
+ opacity: 0.6;
+ z-index: 1008;
+ cursor: ew-resize;
+
+ &::before {
+ content: '';
+ display: block;
+ background: var(--text-muted);
+ border-radius: 2px;
+ }
+
+ &:hover {
+ opacity: 1;
+
+ &::before {
+ background: var(--primary);
+ }
+ }
+ }
+
+ .left-indicator {
+ top: 50%;
+ left: 4px;
+ transform: translateY(-50%);
+ width: 4px;
+ height: 40px;
+
+ &::before {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .bottom-right-indicator {
+ right: 12px;
+ bottom: 6px;
+ width: 4px;
+ height: 16px;
+ transform: rotate(45deg);
+
+ &::before {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .resizer {
+ position: absolute;
+ background: transparent;
+ z-index: 1010;
+
+ &-left {
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 5px;
+ cursor: ew-resize;
+ }
+
+ &-bottom-right {
+ right: 0;
+ bottom: 0;
+ width: 10px;
+ height: 10px;
+ cursor: nwse-resize;
+ }
+ }
+ }
+}
+
+.isDocked {
+ border-right: 0;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+/* RTL Support */
+html[dir="rtl"] {
+ .copilot-panel {
+ .copilot-header {
+ .title {
+ margin-left: 0;
+ margin-right: 8px;
+ }
+
+ .drag-handle {
+ margin: 0 8px 0 0;
+ }
+ }
+
+ .message-container {
+ &.ai {
+ align-items: flex-start;
+
+ .message,
+ .customQuestion {
+ border-radius: 12px 12px 4px 12px;
+ }
+ }
+
+ &.user {
+ align-items: flex-start;
+
+ .message,
+ .suggestion {
+ border-radius: 12px 12px 12px 4px;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/copilot/messages.js b/src/copilot/messages.js
new file mode 100644
index 0000000000..c72f3a42d1
--- /dev/null
+++ b/src/copilot/messages.js
@@ -0,0 +1,153 @@
+// src/components/Copilot/messages.js
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ copilotTitle: {
+ id: 'copilot.title',
+ defaultMessage: 'Copilot',
+ description: 'Main title of the Copilot panel',
+ },
+ generating: {
+ id: 'copilot.generating',
+ defaultMessage: 'Generating your content...',
+ description: 'Loading message while AI generates suggestions',
+ },
+ error: {
+ id: 'copilot.error',
+ defaultMessage: 'Something went wrong. Please try again.',
+ description: 'Generic error message for API failures',
+ },
+ retry: {
+ id: 'copilot.retry',
+ defaultMessage: 'Retry',
+ description: 'Button to retry the last failed action',
+ },
+ noValue: {
+ id: 'copilot.error.noValue',
+ defaultMessage: 'Please provide a valid {field} to generate suggestions.',
+ description: 'Error when no input is provided',
+ },
+ inserted: {
+ id: 'copilot.inserted',
+ defaultMessage: 'The {field} has been successfully inserted!',
+ description: 'Success message after inserting suggestion',
+ },
+ placeholderMessage: {
+ id: 'copilot.placeholder.message',
+ defaultMessage: 'Type your message...',
+ description: 'Placeholder for chat input',
+ },
+ placeholderAnswer: {
+ id: 'copilot.placeholder.answer',
+ defaultMessage: 'Type your answer...',
+ description: 'Placeholder when answering a question',
+ },
+ buttonContinue: {
+ id: 'copilot.button.continue',
+ defaultMessage: 'Continue',
+ description: 'Button to proceed to next field',
+ },
+ buttonMore: {
+ id: 'copilot.button.more',
+ defaultMessage: 'More Suggestions',
+ description: 'Button to get more AI suggestions',
+ },
+ buttonCustomize: {
+ id: 'copilot.button.customize',
+ defaultMessage: 'Customize',
+ description: 'Button to start customization flow',
+ },
+ customizeRequest: {
+ id: 'copilot.customize.request',
+ defaultMessage: 'Requesting customization options...',
+ description: 'User message when starting customization',
+ },
+ questionCounter: {
+ id: 'copilot.question.counter',
+ defaultMessage: 'Q{current}/{total}',
+ description: 'Question progress indicator',
+ },
+ fieldTitle: {
+ id: 'copilot.field.title',
+ defaultMessage: 'Title',
+ },
+ fieldShortDescription: {
+ id: 'copilot.field.shortDescription',
+ defaultMessage: 'Short Description',
+ },
+ fieldDescription: {
+ id: 'copilot.field.description',
+ defaultMessage: 'Description',
+ },
+ fieldCardImage: {
+ id: 'copilot.field.cardImage',
+ defaultMessage: 'Course Card Image',
+ },
+ fieldBannerImage: {
+ id: 'copilot.field.bannerImage',
+ defaultMessage: 'Banner Image',
+ },
+ continueTitle: {
+ id: 'copilot.continue.title',
+ defaultMessage: 'Create a title using Copilot. Click Continue.',
+ },
+ continueShortDescription: {
+ id: 'copilot.continue.shortDescription',
+ defaultMessage: 'Create a Short Description using Copilot. Click Continue.',
+ },
+ continueDescription: {
+ id: 'copilot.continue.description',
+ defaultMessage: 'Generate a detailed Description. Click Continue.',
+ },
+ continueCardImage: {
+ id: 'copilot.continue.cardImage',
+ defaultMessage: 'Design a Course Card Image. Click Continue.',
+ },
+ continueBannerImage: {
+ id: 'copilot.continue.bannerImage',
+ defaultMessage: 'Create a Banner Image. Click Continue.'
+ },
+ tooltipClickToInsert: {
+ id: 'copilot.tooltip.clickToInsert',
+ defaultMessage: 'Click to insert',
+ },
+ tooltipRemovePinned: {
+ id: 'copilot.tooltip.removePinned',
+ defaultMessage: 'Remove',
+ },
+ tooltipPin: {
+ id: 'copilot.tooltip.pin',
+ defaultMessage: 'Pin',
+ },
+ tooltipUnpin: {
+ id: 'copilot.tooltip.unpin',
+ defaultMessage: 'Unpin',
+ },
+ altSelectedImage: {
+ id: 'copilot.alt.selectedImage',
+ defaultMessage: 'Selected image',
+ },
+ altSuggestionImage: {
+ id: 'copilot.alt.suggestionImage',
+ defaultMessage: 'Suggested image',
+ },
+ tooltipDragToMove: {
+ id: 'copilot.tooltip.dragToMove',
+ defaultMessage: 'click to Undocked',
+ },
+ tooltipResize: {
+ id: 'copilot.tooltip.resize',
+ defaultMessage: 'Drag to resize',
+ },
+ altPinnedImage: {
+ id: 'copilot.alt.pinnedImage',
+ defaultMessage: 'Pinned image',
+ },
+ loadingcopilot: {
+ id: 'copilot.loadingcopilot',
+ defaultMessage: 'Coming Soon',
+ description: 'Message shown when Copilot is loading or not yet available',
+ },
+});
+
+export default messages;
\ No newline at end of file
diff --git a/src/course-checklist/ChecklistSection/ChecklistSection.jsx b/src/course-checklist/ChecklistSection/ChecklistSection.jsx
index 46fe71889c..2c4edf3db1 100644
--- a/src/course-checklist/ChecklistSection/ChecklistSection.jsx
+++ b/src/course-checklist/ChecklistSection/ChecklistSection.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { injectIntl } from '@edx/frontend-platform/i18n';
import { Container, Stack } from '@openedx/paragon';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
import { LoadingSpinner } from '../../generic/Loading';
import { getCompletionCount, useChecklistState } from './hooks';
import ChecklistItemBody from './ChecklistItemBody';
@@ -23,16 +24,32 @@ const ChecklistSection = ({
return (
-
+
{isLoading ? (
+
{checks.map(check => {
const checkId = check.id;
@@ -40,17 +57,28 @@ const ChecklistSection = ({
const updateLink = updateLinks?.[checkId];
const outlineUrl = updateLinks.outline;
return (
-
+
+ {enabledCopilot ? (
+ <>
+
+ {t(messages.copilotTitle)}
+
+ {!isFullScreen && }
+
+ {isDocked && !isFullScreen && (
+
+ )}
+ {!isMinimized && !isFullScreen && !isFloating && (
+
+
+
+ )}
+ {!isMinimized && (
+
+ )}
+ {!isMinimized && !isDocked && !isFullScreen && (
+
+ )}
+ {!isMinimized && (
+
+ )}
+
+
+
+
+
+
+
+ ) : (
+ {
+ pinnedContainerRef.current = ref;
+ }} className={`${pinnedSuggestions.length === 0 ? 'none' : 'pined-suggestion'}`}>
+ {(() => {
+ const sorted = getSortedPinnedSuggestions();
+ const grouped = {};
+ sorted.forEach(sug => {
+ if (!grouped[sug.field]) grouped[sug.field] = [];
+ grouped[sug.field].push(sug);
+ });
+
+ const fieldLabels = {
+ title: t(messages.fieldTitle),
+ shortDescription: t(messages.fieldShortDescription),
+ description: t(messages.fieldDescription),
+ cardImage: t(messages.fieldCardImage),
+ bannerImage: t(messages.fieldBannerImage),
+ };
+
+ return Object.keys(grouped).map(field => (
+
+
+
+
+ ));
+ })()}
+
+ {fieldLabels[field] || field}
+
+
+ {grouped[field].map((sug) => {
+ const isImage = isValidImageUrl(sug.value);
+ return (
+
+ insertPinnedSuggestion(sug)}
+ title={t(messages.tooltipClickToInsert)}
+ >
+ {isImage ? (
+ 
+ ) : (
+
+ );
+ })}
+ {sug.value}
+ )}
+
+
+ {chatHistory.map((item, index) => (
+
+
+ {item.type === 'text' && (
+ handleSelectSuggestion(sug)}
+ />
+ ) : (
+
+ ))}
+
+ {item.content}
+ )}
+ {item.type === 'error' && (
+
+
+ )}
+
+
+ {item.type === 'suggestions' && (
+ item.content.map((sug) => {
+ const isImage = isValidImageUrl(sug.value);
+ const isPinned = pinnedSuggestions.some(p => p.value === sug.value && p.field === sug.field);
+
+ const suggestionEl = isImage ? (
+ {item.content}
+
+ handleSelectSuggestion(sug)}
+ >
+ {sug.value}
+
+ );
+
+ return (
+
+ {suggestionEl}
+
+
+ );
+ })
+ )}
+ {item.type === 'image' && (
+
+ 
+
+ )}
+
+ {item.type === 'customize' && (
+
+ {item.content}
+
+ )}
+
+
+ {item.type === 'question' && (
+
+
+ )}
+
+ {t(messages.questionCounter, { current: item.questionIndex, total: item.totalQuestions })} {item.content}
+
+ {item.options ? (
+ item.options.map((option) => (
+ handleAnswer(option, fieldData.name)}
+ >
+ {option}
+
+ ))
+ ) : null}
+
+
+
+ {buttons.map((button) => (
+
+ ))}
+
+
+ setPrompt(e.target.value)}
+ placeholder={
+ questions.length > 0 && currentQuestionIndex >= 0 && !questions[currentQuestionIndex]?.options
+ ? t(messages.placeholderAnswer)
+ : t(messages.placeholderMessage)
+ }
+ onKeyPress={(e) => {
+ if (e.key === 'Enter') {
+ if (questions.length > 0 && currentQuestionIndex >= 0 && !questions[currentQuestionIndex].options) {
+ handleSendAnswer();
+ } else {
+ sendPrompt();
+ }
+ }
+ }}
+ />
+
+
+ {!isMinimized && ({t(messages.loadingcopilot)})}
+ )
+ }
+ {/* Resizers and indicators moved here, inside .copilot-panel */}
+ {!isFullScreen && !isMinimized && (
+ <>
+ {isDocked ? (
+
+ ) : (
+
+ )}
+
+ )}
+ {!isFullScreen && (
+ isDocked ? (
+ handleMouseDownResize('width')(e)}
+ />
+ ) : (
+
+ );
+};
+
+export default Copilot;
\ No newline at end of file
diff --git a/src/copilot/CopilotContext.js b/src/copilot/CopilotContext.js
new file mode 100644
index 0000000000..0bc7a25069
--- /dev/null
+++ b/src/copilot/CopilotContext.js
@@ -0,0 +1,908 @@
+import { createContext, useContext, useState, useEffect, useRef } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getConfig } from '@edx/frontend-platform';
+
+const CopilotContext = createContext(null);
+export const useCopilot = () => useContext(CopilotContext);
+
+// const BASE_API_URL = 'https://staging.titaned.com';
+
+const isValidImageUrl = (url) => {
+ return typeof url === 'string' && (
+ url.match(/\.(jpeg|jpg|png|gif|webp|bmp|svg)(?=\?|$)/i) ||
+ url.match(/^https?:\/\/(www\.)?picsum\.photos\/.+/i)
+ );
+};
+
+const debounce = (func, wait) => {
+ let timeout;
+ return (...args) => {
+ clearTimeout(timeout);
+ timeout = setTimeout(() => func(...args), wait);
+ };
+};
+
+export const CopilotProvider = ({ children, initialConfig = { width: 400, height: 83, position: 'right' } }) => {
+ const { formatMessage } = useIntl();
+ // const t = (msg, values) => formatMessage(msg, values);
+ const t = (msg, values) => {
+ if (!msg || !msg.id) {
+ console.warn('Missing message id in CopilotContext:', msg);
+ return ''; // or return msg?.defaultMessage || ''
+ }
+ return formatMessage(msg, values);
+ };
+
+
+ // const STUDIO_BASE = getConfig().STUDIO_BASE_URL?.replace(/\/+$/, '') ?? '';
+ const [enabledCopilot, setEnabledCopilot] = useState(false);
+ const [showCopilotIcon, setShowCopilotIcon] = useState(false);
+ const [isOpen, setIsOpen] = useState(false);
+ const [fieldData, setFieldData] = useState({ name: '', value: '' });
+ const [isDocked, setIsDocked] = useState(true);
+ const [isMinimized, setIsMinimized] = useState(false);
+ const [size, setSize] = useState({ w: initialConfig.width, h: initialConfig.height });
+ const [pos, setPos] = useState({ x: window.innerWidth - initialConfig.width, y: 0 });
+ const [isFullScreen, setIsFullScreen] = useState(false);
+ const [savedState, setSavedState] = useState(null);
+ const [dragging, setDragging] = useState(false);
+ const [resizing, setResizing] = useState(false);
+ const [resizeType, setResizeType] = useState('');
+ const [sidebarWidth, setSidebarWidth] = useState(0);
+ const [feedbackBannerHeight, setFeedbackBannerHeight] = useState(0);
+ const [navbarHeight, setNavbarHeight] = useState(0);
+ const [isFloating, setIsFloating] = useState(false);
+ const [title, setTitle] = useState('');
+ const [shortDescription, setShortDescription] = useState('');
+ const [description, setDescription] = useState('');
+ const [cardImage, setCardImage] = useState('');
+ const [bannerImage, setBannerImage] = useState('');
+ const [aiResponse, setAiResponse] = useState([]);
+ const [chatHistory, setChatHistory] = useState([]);
+ const [selectedSuggestion, setSelectedSuggestion] = useState(null);
+ const [prompt, setPrompt] = useState('');
+ const [buttons, setButtons] = useState([]);
+ const [questions, setQuestions] = useState([]);
+ const [currentQuestionIndex, setCurrentQuestionIndex] = useState(-1);
+ const [userAnswers, setUserAnswers] = useState({});
+ const [pinnedSuggestions, setPinnedSuggestions] = useState([]);
+ const [aiLoading, setAiLoading] = useState({
+ title: false, shortDescription: false, description: false, cardImage: false, bannerImage: false,
+ });
+ const [lastFailedAction, setLastFailedAction] = useState(null);
+
+ const startData = useRef({ x: 0, y: 0, w: 0, h: 0, mouseX: 0, mouseY: 0 });
+
+ const addErrorToChat = (retryAction) => {
+ setChatHistory(prev => [...prev, {
+ type: 'error',
+ sender: 'ai',
+ content: t(messages.error),
+ retryAction
+ }]);
+ };
+
+ const retryLastAction = () => {
+ if (lastFailedAction) {
+ lastFailedAction();
+ setLastFailedAction(null);
+ }
+ };
+
+ const safeApiCall = async (apiCall, actionName) => {
+ try {
+ setLastFailedAction(() => () => safeApiCall(apiCall, actionName));
+ return await apiCall();
+ } catch (err) {
+ console.error(`API Error [${actionName}]:`, err);
+ addErrorToChat(() => safeApiCall(apiCall, actionName));
+ return null;
+ }
+ };
+
+ // const getToken = async () => {
+ // const res = await fetch(`${BASE_API_URL}/oauth2/access_token`, {
+ // method: "POST",
+ // headers: { "Content-Type": "application/x-www-form-urlencoded" },
+ // body: new URLSearchParams({
+ // grant_type: "password",
+ // client_id: "mrClisF8yB0nCcrDxCXQQkk1IKr5k4x0j8DN8wwZ",
+ // username: "admin",
+ // password: "edx",
+ // }),
+ // });
+ // if (!res.ok) throw new Error("Token fetch failed");
+ // const data = await res.json();
+ // return data.access_token;
+ // };
+
+ // const client = getAuthenticatedHttpClient();
+
+ const handleAIButtonClick = async (fieldName, fieldValue) => {
+ let effectiveValue = fieldValue?.trim() || "";
+ if (!effectiveValue && !['cardImage', 'bannerImage'].includes(fieldName)) return;
+ if (['cardImage', 'bannerImage'].includes(fieldName)) {
+ effectiveValue = title?.trim() || "";
+ if (!effectiveValue) return;
+ }
+
+ setAiLoading(prev => ({ ...prev, [fieldName]: true }));
+ setChatHistory(prev => [...prev, { type: 'text', sender: 'ai', content: t(messages.generating) }]);
+
+ const action = async () => {
+ // const token = await getToken();
+ const config = {
+ title: { url: 'suggest-titles/', key: 'title' },
+ shortDescription: { url: 'suggest-descriptions/', key: 'user_short_description' },
+ description: { url: 'suggest-full-descriptions/', key: 'user_long_description' },
+ cardImage: { url: 'suggest-images/', key: 'title' },
+ bannerImage: { url: 'suggest-images/', key: 'title' },
+ }[fieldName];
+
+ // const res = await fetch(`${BASE_API_URL}/chat/v1/${config.url}`, {
+ // method: "POST",
+ // headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
+ // body: JSON.stringify({ [config.key]: effectiveValue }),
+ // });
+ // const res = await getAuthenticatedHttpClient().post(`${getConfig().LMS_BASE_URL}/chat/v1/${config.url}`, {
+ // [config.key]: effectiveValue,
+ // });
+ // if (!res.ok) throw new Error("Suggestion failed");
+ // return await res.json();
+
+ try {
+ const res = await getAuthenticatedHttpClient().post(
+ `${getConfig().LMS_BASE_URL}/chat/v1/${config.url}`,
+ { [config.key]: effectiveValue }
+ );
+ return res.data;
+
+ } catch (err) {
+ throw new Error("Suggestion failed");
+ }
+ };
+
+ const data = await safeApiCall(action, `AI_${fieldName}`);
+ if (data) {
+ openCopilot(fieldName, effectiveValue);
+ setAiResponse(prev => [...prev, data]);
+ setButtons(data.btns || []);
+ }
+ setAiLoading(prev => ({ ...prev, [fieldName]: false }));
+ };
+
+ const updateTitle = (v) => setTitle(v);
+ const updateShortDescription = (v) => setShortDescription(v);
+ const updateDescription = (v) => setDescription(v);
+ const updateCardImage = (v) => setCardImage(v);
+ const updateBannerImage = (v) => setBannerImage(v);
+
+ const getReadableFieldName = (field) => t(messages[`field${field.charAt(0).toUpperCase() + field.slice(1)}`]);
+
+ const openCopilotReview = () => {
+ setPinnedSuggestions([]);
+ setIsDocked(true); setIsMinimized(true);
+ setSize({ w: initialConfig.width, h: initialConfig.height });
+ setPos({ x: window.innerWidth - initialConfig.width, y: 0 });
+ setIsOpen(true); setIsFloating(false);
+ setTimeout(() => setIsMinimized(false), 10);
+ if (!isOpen) {
+ setChatHistory([]); setAiResponse([]); setSelectedSuggestion(null);
+ setPrompt(''); setButtons([]); setQuestions([]); setCurrentQuestionIndex(-1); setUserAnswers({});
+ }
+ }
+ const openCopilot = (name, value) => {
+ setPinnedSuggestions([]);
+ setFieldData({ name, value });
+ setIsDocked(true); setIsMinimized(true);
+ setSize({ w: initialConfig.width, h: initialConfig.height });
+ setPos({ x: window.innerWidth - initialConfig.width, y: 0 });
+ setIsOpen(true); setIsFloating(false);
+ setTimeout(() => setIsMinimized(false), 10);
+ if (!isOpen) {
+ setChatHistory([]); setAiResponse([]); setSelectedSuggestion(null);
+ setPrompt(''); setButtons([]); setQuestions([]); setCurrentQuestionIndex(-1); setUserAnswers({});
+ }
+ };
+
+ const closeCopilot = () => {
+ setPinnedSuggestions([]);
+ setIsOpen(false);
+ if (isFullScreen) { setIsFullScreen(false); setSavedState(null); }
+ setQuestions([]); setCurrentQuestionIndex(-1); setUserAnswers({});
+ };
+
+ const toggleMinimize = () => setIsMinimized(!isMinimized);
+
+ const dock = () => {
+ setIsDocked(true); setIsMinimized(false);
+ setSize({ w: initialConfig.width, h: initialConfig.height });
+ setPos({ x: window.innerWidth - initialConfig.width, y: 0 });
+ setIsFloating(false);
+ };
+
+ const toggleFullScreen = () => {
+ if (!isFullScreen) {
+ setSavedState({ size, pos, isDocked, isMinimized });
+ setSize({
+ w: window.innerWidth - sidebarWidth - 40,
+ h: window.innerHeight - feedbackBannerHeight - navbarHeight - 16
+ });
+ setPos({
+ x: sidebarWidth + 20,
+ y: feedbackBannerHeight + navbarHeight + 15
+ });
+ setIsDocked(false);
+ setIsMinimized(false);
+ setIsFullScreen(true);
+ } else if (savedState) {
+ setSize(savedState.size);
+ setPos(savedState.pos);
+ setIsDocked(savedState.isDocked);
+ setIsMinimized(savedState.isMinimized);
+ setIsFullScreen(false);
+ setSavedState(null);
+ }
+ };
+
+ const handleFloating = () => {
+ setIsFloating(true); setIsDocked(false);
+ const w = 400, h = 450;
+ setPos({ x: window.innerWidth / 2 - w / 2, y: window.innerHeight / 2 - h / 2 });
+ setSize({ w, h });
+ };
+
+ // const pinSuggestion = (sug) => {
+ // if (!pinnedSuggestions.some(p => p.value === sug.value && p.field === sug.field)) {
+ // setPinnedSuggestions(prev => [...prev, sug]);
+ // }
+ // };
+
+ // const unpinSuggestion = (sug) => {
+ // setPinnedSuggestions(prev => prev.filter(p => !(p.value === sug.value && p.field === sug.field)));
+ // };
+
+ // const insertPinnedSuggestion = (sug) => {
+ // handleSelectSuggestion(sug);
+ // // setPinnedSuggestions([]); // Clear all pinned
+ // };
+
+ // Field order for sorting
+ const FIELD_ORDER = {
+ title: 0,
+ shortDescription: 1,
+ description: 2,
+ cardImage: 3,
+ bannerImage: 4,
+ };
+
+ // Helper: Sort pinned suggestions by field order
+ const getSortedPinnedSuggestions = () => {
+ return [...pinnedSuggestions].sort((a, b) => {
+ return (FIELD_ORDER[a.field] ?? 5) - (FIELD_ORDER[b.field] ?? 5);
+ });
+ };
+
+ // Updated pinSuggestion
+ const pinSuggestion = (sug) => {
+ const newPin = { value: sug.value, field: sug.field };
+ setPinnedSuggestions(prev => {
+ if (prev.some(p => p.value === newPin.value && p.field === newPin.field)) {
+ return prev;
+ }
+ return [...prev, newPin];
+ });
+ };
+
+ // Updated unpinSuggestion
+ const unpinSuggestion = (valueOrSug) => {
+ const value = typeof valueOrSug === 'string' ? valueOrSug : valueOrSug.value;
+ const field = typeof valueOrSug === 'string' ? fieldData.name : valueOrSug.field;
+
+ setPinnedSuggestions(prev =>
+ prev.filter(p => !(p.value === value && p.field === field))
+ );
+ };
+
+ // Updated insertPinnedSuggestion – only removes from same field
+ const insertPinnedSuggestion = (sug) => {
+ handleSelectSuggestion(sug); // This already inserts + updates field
+
+ // Remove ONLY pinned items from the SAME field
+ setPinnedSuggestions(prev =>
+ prev.filter(p => p.field !== sug.field)
+ );
+ };
+ const getApiConfig = (field) => {
+ const map = {
+ title: { url: 'suggest-titles/', bodyKey: 'title' },
+ shortDescription: { url: 'suggest-descriptions/', bodyKey: 'user_short_description' },
+ description: { url: 'suggest-full-descriptions/', bodyKey: 'user_long_description' },
+ cardImage: { url: 'suggest-images/', bodyKey: 'title' },
+ bannerImage: { url: 'suggest-images/', bodyKey: 'title' },
+ };
+ return map[field] || map.title;
+ };
+
+ const getPreviousValue = (field) => {
+ const map = { shortDescription: title, description: shortDescription || title, cardImage: title, bannerImage: title };
+ return (map[field] || '')?.trim();
+ };
+
+ const getCurrentFieldValue = (field) => {
+ const map = { title, shortDescription, description, cardImage: title, bannerImage: title };
+ return (map[field] || '')?.trim();
+ };
+
+ const fetchQuestions = async (field) => {
+ setChatHistory(prev => [...prev, { type: 'text', sender: 'user', content: t(messages.customizeRequest) }]);
+ const action = async () => {
+ // const token = await getToken();
+ // const res = await fetch(`${BASE_API_URL}/chat/v1/prediction-questions/`, {
+ // method: 'POST',
+ // headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+ // });
+
+
+ // const res = await getAuthenticatedHttpClient().post(`${getConfig().LMS_BASE_URL}/chat/v1/prediction-questions/`, {});
+ // if (!res.ok) throw new Error("Failed to fetch questions");
+ // return await res.json();
+
+ try {
+ const res = await getAuthenticatedHttpClient().post(
+ `${getConfig().LMS_BASE_URL}/chat/v1/prediction-questions/`,
+ {}
+ );
+ return res.data;
+
+ } catch (err) {
+ throw new Error("Failed to fetch questions");
+ }
+ };
+ const data = await safeApiCall(action, 'fetchQuestions');
+ if (data) {
+ setQuestions(data.questions || []);
+ setCurrentQuestionIndex(0);
+ setChatHistory(prev => [...prev, { type: 'text', sender: 'ai', content: data.messages?.[0]?.text }]);
+ }
+ };
+
+ const fetchSuggestions = async (prompt, field = fieldData.name, more = false) => {
+ const value = more ? getCurrentFieldValue(field) : prompt;
+ if (!value) {
+ setChatHistory(prev => [...prev, { type: 'text', sender: 'ai', content: t(messages.noValue, { field: getReadableFieldName(field) }) }]);
+ return;
+ }
+
+ setChatHistory(prev => [...prev, { type: 'text', sender: 'ai', content: t(messages.generating) }]);
+
+ const action = async () => {
+ // const token = await getToken();
+ // const config = getApiConfig(field);
+ // const res = await fetch(`${BASE_API_URL}/chat/v1/${config.url}`, {
+ // method: "POST",
+ // headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
+ // body: JSON.stringify({ [config.bodyKey]: value, ...(more && { more_suggestions: true }) }),
+ // });
+
+ const cfg = getApiConfig(field);
+ const payload = { [cfg.bodyKey]: value, };
+ if (more) payload.more_suggestions = true;
+
+ // const res = await getAuthenticatedHttpClient().post(`${getConfig().LMS_BASE_URL}/chat/v1/${cfg.url}`, payload);
+ // if (!res.ok) throw new Error("Failed to fetch suggestions");
+ // return await res.json();
+
+ try {
+ const res = await getAuthenticatedHttpClient().post(
+ `${getConfig().LMS_BASE_URL}/chat/v1/${cfg.url}`,
+ payload
+ );
+ return res.data;
+
+ } catch (err) {
+ throw new Error("Failed to fetch suggestions");
+ }
+ };
+
+ const data = await safeApiCall(action, 'fetchSuggestions');
+ if (data) setAiResponse(prev => [...prev, data]);
+ };
+
+ const submitCustomAnswers = async (field = fieldData.name) => {
+ setChatHistory(prev => [...prev, { type: 'text', sender: 'ai', content: t(messages.generating) }]);
+ const action = async () => {
+ // const token = await getToken();
+ // const config = getApiConfig(field);
+ // const res = await fetch(`${BASE_API_URL}/chat/v1/${config.url}`, {
+ // method: 'POST',
+ // headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+ // body: JSON.stringify({ [config.bodyKey]: getCurrentFieldValue(field), ...userAnswers, custom_flow: true }),
+ // });
+ const cfg = getApiConfig(field);
+ const payload = {
+ [cfg.bodyKey]: getCurrentFieldValue(field),
+ ...userAnswers,
+ custom_flow: true,
+ };
+ // const res = await getAuthenticatedHttpClient().post(`${getConfig().LMS_BASE_URL}/chat/v1/${cfg.url}`, payload);
+ // if (!res.ok) throw new Error("Failed to submit answers");
+ // return await res.json();
+
+ try {
+ const res = await getAuthenticatedHttpClient().post(
+ `${getConfig().LMS_BASE_URL}/chat/v1/${cfg.url}`,
+ payload
+ );
+
+ return res.data;
+
+ } catch (err) {
+ throw new Error("Failed to submit answers");
+ }
+ };
+ const data = await safeApiCall(action, 'submitCustomAnswers');
+ if (data) {
+ setAiResponse(prev => [...prev, data]);
+ setQuestions([]); setCurrentQuestionIndex(-1); setUserAnswers({});
+ }
+ };
+
+ const handleAnswer = (answer, field) => {
+ setUserAnswers(prev => ({ ...prev, [questions[currentQuestionIndex].key]: answer }));
+ setChatHistory(prev => [...prev, { type: 'text', sender: 'user', content: answer }]);
+ if (currentQuestionIndex + 1 < questions.length) {
+ setCurrentQuestionIndex(prev => prev + 1);
+ } else {
+ submitCustomAnswers(field);
+ }
+ };
+
+ const sendPrompt = async () => {
+ let effectivePrompt = prompt.trim();
+ if (!effectivePrompt) {
+ effectivePrompt = getPreviousValue(fieldData.name);
+ if (!effectivePrompt) {
+ setChatHistory(prev => [...prev, { type: 'text', sender: 'ai', content: t(messages.noValue, { field: getReadableFieldName(fieldData.name) }) }]);
+ return;
+ }
+ } else {
+ setChatHistory(prev => [...prev, { type: 'text', sender: 'user', content: prompt }]);
+ }
+ setPrompt('');
+ await fetchSuggestions(effectivePrompt);
+ };
+
+ const handleButtonAction = (buttonId) => {
+ switch (buttonId) {
+ case 'more_suggestions':
+ setChatHistory(prev => [...prev, { type: 'text', sender: 'user', content: t(messages.buttonMore) }]);
+ fetchSuggestions(getPreviousValue(fieldData.name), fieldData.name, true);
+ break;
+ case 'customize':
+ handleCustomize();
+ break;
+ // case 'continue':
+ // const next = { title: 'shortDescription', shortDescription: 'description', description: 'cardImage', cardImage: 'bannerImage' };
+ // const nextField = next[fieldData.name];
+ // if (nextField) {
+ // setFieldData({ name: nextField, value: '' });
+ // setPrompt('');
+ // fetchSuggestions(getCurrentFieldValue(fieldData.name), nextField);
+ // }
+ // break;
+ case 'continue': {
+ const fieldOrder = ['title', 'shortDescription', 'description', 'cardImage', 'bannerImage'];
+ const currentIndex = fieldOrder.indexOf(fieldData.name);
+ const remainingFields = fieldOrder.slice(currentIndex + 1);
+
+ // Find the first EMPTY field in the remaining sequence
+ const nextEmptyField = remainingFields.find(f => {
+ const value = {
+ title,
+ shortDescription,
+ description,
+ cardImage,
+ bannerImage,
+ }[f];
+ return !value || value.trim() === '';
+ });
+
+ const targetField = nextEmptyField;
+ if (targetField) {
+ setFieldData({ name: targetField, value: '' });
+ setPrompt('');
+ fetchSuggestions(getCurrentFieldValue(fieldData.name), targetField);
+ }
+ break;
+ }
+
+ }
+ };
+
+ const handleCustomize = () => fetchQuestions(fieldData.name);
+
+ const handleMouseDownDrag = (ref) => (e) => {
+ if (isMinimized || isFullScreen) return;
+ e.preventDefault(); e.stopPropagation();
+ const rect = ref.current?.getBoundingClientRect();
+ if (!rect) return;
+ startData.current = { x: rect.left, y: rect.top, mouseX: e.clientX, mouseY: e.clientY };
+ if (isDocked) {
+ setIsDocked(false); setIsFloating(true);
+ setSize({ w: 400, h: window.innerHeight * 0.83 });
+ setPos({ x: rect.left, y: rect.top });
+ }
+ setDragging(true);
+ };
+
+ const handleMouseDownResize = (type) => (e) => {
+ if (isMinimized || isFullScreen) return;
+ e.preventDefault(); e.stopPropagation();
+ startData.current = { w: size.w, h: size.h, mouseX: e.clientX, mouseY: e.clientY };
+ setResizing(true); setResizeType(type);
+ };
+
+ const handleMouseMove = (e) => {
+ if (dragging) {
+ const dx = e.clientX - startData.current.mouseX;
+ const dy = e.clientY - startData.current.mouseY;
+ const newX = Math.max(0, Math.min(window.innerWidth - size.w, startData.current.x + dx));
+ const newY = Math.max(0, Math.min(window.innerHeight - size.h, startData.current.y + dy));
+ setPos({ x: newX, y: newY });
+ }
+ if (resizing) {
+ const dx = e.clientX - startData.current.mouseX;
+ const dy = e.clientY - startData.current.mouseY;
+ let newW = size.w, newH = size.h;
+ if (resizeType === 'width') newW = Math.max(400, Math.min(600, size.w - dx));
+ if (resizeType === 'both') {
+ newW = Math.max(400, Math.min(800, size.w + dx));
+ newH = Math.max(450, Math.min(800, size.h + dy));
+ }
+ setSize({ w: newW, h: newH });
+ }
+ };
+
+ const handleMouseUp = () => {
+ setDragging(false); setResizing(false); setResizeType('');
+ };
+
+ useEffect(() => {
+ // const client = getAuthenticatedHttpClient();
+ // const LMS_BASE = getConfig().LMS_BASE_URL?.replace(/\/+$/, '') ?? '';
+
+ const fetchMenuConfig = async () => {
+ try {
+ const response = await getAuthenticatedHttpClient().get(`${getConfig().STUDIO_BASE_URL}/titaned/api/v1/menu-config/`);
+ // const response = await getAuthenticatedHttpClient().get('https://studio.staging.titaned.com/titaned/api/v1/menu-config/');
+ // const response = await client.get(`${LMS_BASE}/titaned/api/v1/mfe_context/`);
+
+ const data = response.data;
+
+ setEnabledCopilot(!!data.enable_copilot);
+ setShowCopilotIcon(!!data.show_copilot_icon);
+ } catch (err) {
+ console.log('Failed to load menu-config for Copilot:', err);
+ setEnabledCopilot(false);
+ setShowCopilotIcon(false);
+ }
+ };
+
+ fetchMenuConfig();
+ }, []);
+
+ useEffect(() => {
+ const handle = (e) => { if (dragging || resizing) { e.preventDefault(); handleMouseMove(e); } };
+ if (dragging || resizing) {
+ document.addEventListener('mousemove', handle, { passive: false });
+ document.addEventListener('mouseup', handleMouseUp, { passive: false });
+ document.body.style.userSelect = 'none';
+ return () => {
+ document.removeEventListener('mousemove', handle);
+ document.removeEventListener('mouseup', handleMouseUp);
+ document.body.style.userSelect = '';
+ };
+ }
+ }, [dragging, resizing]);
+
+ // useEffect(() => {
+ // // SELECTORS — Adjust if your app uses different classes
+ // const sidebar = document.querySelector('.sidebar, [data-testid="sidebar"], #sidebar, .pgn__sidebar');
+ // const navbar = document.querySelector('.navbar, header, [data-testid="navbar"], .pgn__navbar');
+ // const feedbackBanner = document.querySelector('.feedback-banner, .alert, .toast, [data-testid="feedback-banner"], .pgn__alert');
+
+ // // Avoid running if elements don't exist
+ // if (!sidebar && !navbar && !feedbackBanner) return;
+
+ // let latestSidebar = 0;
+ // let latestNavbar = 0;
+ // let latestFeedback = 0;
+
+ // const updateLayout = () => {
+ // const sidebarRect = sidebar?.getBoundingClientRect();
+ // const navbarRect = navbar?.getBoundingClientRect();
+ // const feedbackRect = feedbackBanner?.getBoundingClientRect();
+
+ // const newSidebar = sidebarRect ? sidebarRect.width : 0;
+ // const newNavbar = navbarRect ? navbarRect.height : 0;
+ // const newFeedback = feedbackRect ? feedbackRect.height : 0;
+
+ // if (
+ // newSidebar !== latestSidebar ||
+ // newNavbar !== latestNavbar ||
+ // newFeedback !== latestFeedback
+ // ) {
+ // latestSidebar = newSidebar;
+ // latestNavbar = newNavbar;
+ // latestFeedback = newFeedback;
+
+ // setSidebarWidth(newSidebar);
+ // setNavbarHeight(newNavbar);
+ // setFeedbackBannerHeight(newFeedback);
+
+ // // Auto-resize fullscreen
+ // if (isFullScreen) {
+ // setSize({
+ // w: window.innerWidth - newSidebar - 40,
+ // h: window.innerHeight - newFeedback - newNavbar - 16
+ // });
+ // setPos({
+ // x: newSidebar + 20,
+ // y: newFeedback + newNavbar + 15
+ // });
+ // }
+ // }
+ // };
+
+ // // ResizeObserver for size changes
+ // const resizeObserver = new ResizeObserver(debounce(updateLayout, 50));
+
+ // if (sidebar) resizeObserver.observe(sidebar);
+ // if (navbar) resizeObserver.observe(navbar);
+ // if (feedbackBanner) resizeObserver.observe(feedbackBanner);
+
+ // // MutationObserver for show/hide (class changes, etc.)
+ // const mutationObserver = new MutationObserver(debounce(updateLayout, 100));
+ // mutationObserver.observe(document.body, {
+ // childList: true,
+ // subtree: true,
+ // attributes: true,
+ // attributeFilter: ['class', 'style']
+ // });
+
+ // // Initial measure
+ // updateLayout();
+
+ // // Cleanup
+ // return () => {
+ // resizeObserver.disconnect();
+ // mutationObserver.disconnect();
+ // };
+ // }, [isFullScreen]); // Re-run if fullscreen state changes
+
+ // useEffect(() => {
+ // if (isFullScreen) {
+ // const resize = debounce(() => {
+ // setSize({ w: window.innerWidth - sidebarWidth - 40, h: window.innerHeight - feedbackBannerHeight - navbarHeight - 16 });
+ // setPos({ x: sidebarWidth + 20, y: feedbackBannerHeight + navbarHeight + 15 });
+ // }, 100);
+ // window.addEventListener('resize', resize); resize();
+ // return () => window.removeEventListener('resize', resize);
+ // }
+ // }, [isFullScreen, sidebarWidth, feedbackBannerHeight, navbarHeight]);
+
+ // PERFECT FEEDBACK BANNER + SIDEBAR + NAVBAR DETECTION
+ useEffect(() => {
+ let banner = document.querySelector('.feedback_banner');
+ let sidebar = document.querySelector('.sidebar, [data-testid="sidebar"], #sidebar, .pgn__sidebar, aside');
+ let navbar = document.querySelector('header, .navbar, nav, [data-testid="navbar"], .pgn__navbar');
+
+ let currentBannerH = 0;
+ let currentNavbarH = 0;
+ let currentSidebarW = 0;
+
+ const update = () => {
+ const newBanner = document.querySelector('.feedback_banner');
+ const newBannerH = newBanner?.getBoundingClientRect().height || 0;
+ const newNavbarH = navbar?.getBoundingClientRect().height || 0;
+ const newSidebarW = sidebar?.getBoundingClientRect().width || 0;
+
+ if (
+ newBanner !== banner ||
+ newBannerH !== currentBannerH ||
+ newNavbarH !== currentNavbarH ||
+ newSidebarW !== currentSidebarW
+ ) {
+ banner = newBanner;
+ currentBannerH = newBannerH;
+ currentNavbarH = newNavbarH;
+ currentSidebarW = newSidebarW;
+
+ setFeedbackBannerHeight(currentBannerH);
+ setNavbarHeight(currentNavbarH);
+ setSidebarWidth(currentSidebarW);
+
+ if (isFullScreen) {
+ setSize({
+ w: window.innerWidth - currentSidebarW - 40,
+ h: window.innerHeight - currentBannerH - currentNavbarH - 16
+ });
+ setPos({
+ x: currentSidebarW + 20,
+ y: currentBannerH + currentNavbarH + 15
+ });
+ }
+ }
+ };
+
+ // Initial + instant
+ update();
+
+ // Watch for banner appearing/disappearing
+ const mo = new MutationObserver(update);
+ mo.observe(document.body, {
+ childList: true,
+ subtree: true,
+ attributes: true,
+ attributeFilter: ['class', 'style']
+ });
+
+ // Watch size changes
+ const ro = new ResizeObserver(update);
+ if (sidebar) ro.observe(sidebar);
+ if (navbar) ro.observe(navbar);
+ document.querySelectorAll('.feedback_banner').forEach(el => ro.observe(el));
+
+ // Window resize
+ window.addEventListener('resize', update);
+
+ // Safety poll (for banners added via JS after mount)
+ const poll = setInterval(update, 400);
+
+ return () => {
+ mo.disconnect();
+ ro.disconnect();
+ window.removeEventListener('resize', update);
+ clearInterval(poll);
+ };
+ }, [isFullScreen]);
+
+ useEffect(() => {
+ if (aiResponse.length > 0) {
+ const latest = aiResponse[aiResponse.length - 1];
+ const history = [];
+ // Helper to tag suggestions with current field
+ const tagSuggestions = (arr) => (arr || []).map(value => ({
+ value,
+ field: fieldData.name // This is the magic!
+ }));
+
+ latest.msg?.forEach(m => history.push({ type: 'text', sender: 'ai', content: m.text, id: m.id }));
+ if (latest.suggestions) history.push({ type: 'suggestions', sender: 'ai', content: tagSuggestions(latest.suggestions) });
+ if (latest.l3) history.push({ type: 'customize', sender: 'ai', content: latest.l3.text });
+ if (latest.l4) history.push({ type: 'text', sender: 'ai', content: latest.l4.text });
+ if (latest.more_suggestions) history.push({ type: 'suggestions', sender: 'ai', content: tagSuggestions(latest.more_suggestions) });
+ setChatHistory(prev => [...prev, ...history]);
+ setButtons(latest.btns || []);
+ if (latest.suggestions && !latest.more_suggestions && latest.suggestions.length > 0) {
+ const first = latest.suggestions[0];
+ setSelectedSuggestion(first);
+ insertSuggestion(first, false);
+ }
+ }
+ }, [aiResponse]);
+
+ useEffect(() => {
+ if (questions.length > 0 && currentQuestionIndex >= 0 && currentQuestionIndex < questions.length) {
+ const q = questions[currentQuestionIndex];
+ if (chatHistory[chatHistory.length - 1]?.id === q.key) return;
+ setChatHistory(prev => [...prev, {
+ type: 'question', sender: 'ai', id: q.key, content: q.text, options: q.options || null,
+ questionIndex: currentQuestionIndex + 1, totalQuestions: questions.length
+ }]);
+ }
+ }, [questions, currentQuestionIndex]);
+
+ const insertSuggestion = (sug, add = true) => {
+ const value = typeof sug === 'string' ? sug : sug.value;
+ const targetField = typeof sug === 'string' ? fieldData.name : sug.field;
+ const map = { title: updateTitle, shortDescription: updateShortDescription, description: updateDescription, cardImage: updateCardImage, bannerImage: updateBannerImage };
+ map[targetField]?.(value);
+ if (add) {
+ const messageContent = isValidImageUrl(value)
+ ? { value }
+ : value;
+
+ setChatHistory(prev => [...prev, {
+ type: isValidImageUrl(value) ? 'image' : 'text',
+ sender: 'user',
+ content: messageContent
+ }]);
+ }
+ };
+
+ const handleSelectSuggestion = (sug) => {
+
+ const value = typeof sug === 'string' ? sug : sug.value;
+ const targetField = typeof sug === 'string' ? fieldData.name : sug.field;
+ setSelectedSuggestion({ value, field: targetField });
+ setSelectedSuggestion({ value, field: targetField });
+ insertSuggestion({ value, field: targetField }, true);
+
+ setPinnedSuggestions(prev =>
+ prev.filter(p => p.field !== sug.field)
+ );
+
+ // ✅ Update correct field using available updaters
+ const updaters = {
+ title: updateTitle,
+ shortDescription: updateShortDescription,
+ description: updateDescription,
+ cardImage: updateCardImage,
+ bannerImage: updateBannerImage,
+ };
+
+ updaters[targetField]?.(value);
+
+ // ✅ Switch to the correct field
+ setFieldData({ name: targetField, value });
+
+
+ // const field = fieldData.name;
+ const readableName = getReadableFieldName(targetField);
+
+ // Success message
+ setChatHistory(prev => [
+ ...prev,
+ { type: 'text', sender: 'ai', content: t(messages.inserted, { field: readableName }) },
+ ]);
+
+ // ✅ Find next EMPTY field (same logic as your 'continue' case)
+ const fieldOrder = ['title', 'shortDescription', 'description', 'cardImage', 'bannerImage'];
+ const currentIndex = fieldOrder.indexOf(targetField);
+ const remainingFields = fieldOrder.slice(currentIndex + 1);
+
+ const nextEmptyField = remainingFields.find(f => {
+ const value = {
+ title,
+ shortDescription,
+ description,
+ cardImage,
+ bannerImage,
+ }[f];
+ return !value || value.trim() === '';
+ });
+
+ const nextField = nextEmptyField; // may be undefined if all filled
+
+ if (nextField) {
+ setChatHistory(prev => [
+ ...prev,
+ { type: 'text', sender: 'ai', content: t(messages[`continue${nextField.charAt(0).toUpperCase() + nextField.slice(1)}`]) }
+ ]);
+ setButtons([{ id: 'continue', label: t(messages.buttonContinue), status: 'active' }]);
+ } else {
+ setButtons([]); // Last field → no continue
+ }
+ };
+
+
+
+ const value = {
+ isOpen, fieldData, isDocked, isMinimized, size, pos, openCopilot, closeCopilot, toggleMinimize, dock,
+ isFullScreen, toggleFullScreen, isFloating, handleFloating, handleMouseDownDrag, handleMouseDownResize,
+ title, shortDescription, description, cardImage, bannerImage,
+ updateTitle, updateShortDescription, updateDescription, updateCardImage, updateBannerImage,
+ chatHistory, selectedSuggestion, prompt, setPrompt, buttons, questions, currentQuestionIndex,
+ handleSelectSuggestion, sendPrompt, handleButtonAction, handleAnswer, handleAIButtonClick, aiLoading,
+ t, retryLastAction, getReadableFieldName, sidebarWidth, feedbackBannerHeight, navbarHeight, pinnedSuggestions,
+ pinSuggestion, unpinSuggestion, insertPinnedSuggestion, getSortedPinnedSuggestions, enabledCopilot, showCopilotIcon, openCopilotReview,
+ };
+
+ return handleMouseDownResize('both')(e)}
+ />
+ )
+ )}
+
+
+ {dataHeading}
+{dataHeading}
+
- {getCompletionCount(checks, totalCompletedChecks)}
-
+
+ {getCompletionCount(checks, totalCompletedChecks)}
+
+
-
-
-
+
+
-
+ {enableQuality && (
+
+
+
);
};
diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
index e7468e68fb..15f19eb079 100644
--- a/src/course-outline/CourseOutline.jsx
+++ b/src/course-outline/CourseOutline.jsx
@@ -23,6 +23,7 @@ import {
} from '@dnd-kit/sortable';
import { useLocation } from 'react-router-dom';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
import { LoadingSpinner } from '../generic/Loading';
import { getProcessingNotification } from '../generic/processing-notification/data/selectors';
import { RequestStatus } from '../data/constants';
@@ -36,7 +37,6 @@ import getPageHeadTitle from '../generic/utils';
import { getCurrentItem, getProctoredExamsFlag } from './data/selectors';
import { COURSE_BLOCK_NAMES } from './constants';
import HeaderNavigations from './header-navigations/HeaderNavigations';
-import OutlineSideBar from './outline-sidebar/OutlineSidebar';
import StatusBar from './status-bar/StatusBar';
import EnableHighlightsModal from './enable-highlights-modal/EnableHighlightsModal';
import SectionCard from './section-card/SectionCard';
@@ -55,6 +55,7 @@ import {
import { useCourseOutline } from './hooks';
import messages from './messages';
import { getTagsExportFile } from './data/api';
+import OutlineSidebar from './outline-sidebar/OutlineSidebar';
const CourseOutline = ({ courseId }) => {
const intl = useIntl();
@@ -104,7 +105,6 @@ const CourseOutline = ({ courseId }) => {
handleNewUnitSubmit,
getUnitUrl,
handleVideoSharingOptionChange,
- handleCopyToClipboardClick,
handlePasteClipboardClick,
notificationDismissUrl,
discussionsSettings,
@@ -122,10 +122,11 @@ const CourseOutline = ({ courseId }) => {
} = useCourseOutline({ courseId });
// Use `setToastMessage` to show the toast.
- const [toastMessage, setToastMessage] = useState(/** @type{null|string} */ (null));
+ const [toastMessage, setToastMessage] = useState(/** @type{null|string} */(null));
useEffect(() => {
- if (location.hash === '#export-tags') {
+ // Wait for the course data to load before exporting tags.
+ if (courseId && courseName && location.hash === '#export-tags') {
setToastMessage(intl.formatMessage(messages.exportTagsCreatingToastMessage));
getTagsExportFile(courseId, courseName).then(() => {
setToastMessage(intl.formatMessage(messages.exportTagsSuccessToastMessage));
@@ -136,7 +137,7 @@ const CourseOutline = ({ courseId }) => {
// Delete `#export-tags` from location
window.location.href = '#';
}
- }, [location]);
+ }, [location, courseId, courseName]);
const [sections, setSections] = useState(sectionsList);
@@ -237,8 +238,9 @@ const CourseOutline = ({ courseId }) => {
{getPageHeadTitle(courseName, intl.formatMessage(messages.headingTitle))}
+
-
+
{
/>
) : null}
+
{
/>
)}
/>
+
{
>
+
-
+
);
})}
diff --git a/src/course-checklist/CourseChecklist.jsx b/src/course-checklist/CourseChecklist.jsx
index 5766bfe45e..9ff463822f 100644
--- a/src/course-checklist/CourseChecklist.jsx
+++ b/src/course-checklist/CourseChecklist.jsx
@@ -6,6 +6,7 @@ import { Helmet } from 'react-helmet';
import { useDispatch, useSelector } from 'react-redux';
import { Container, Stack } from '@openedx/paragon';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
import { useModel } from '../generic/model-store';
import SubHeader from '../generic/sub-header/SubHeader';
import messages from './messages';
@@ -52,37 +53,59 @@ const CourseChecklist = ({
})}
-
+
-
+
-
+
+
{
openEnableHighlightsModal={openEnableHighlightsModal}
handleVideoSharingOptionChange={handleVideoSharingOptionChange}
/>
+
+
{sections.length ? (
@@ -396,8 +432,8 @@ const CourseOutline = ({ courseId }) => {
onDuplicateSubmit={handleDuplicateUnitSubmit}
getTitleLink={getUnitUrl}
onOrderChange={updateUnitOrderByIndex}
- onCopyToClipboardClick={handleCopyToClipboardClick}
discussionsSettings={discussionsSettings}
+ onCopyToClipboardClick={handlePasteClipboardClick}
/>
))}
@@ -434,7 +470,7 @@ const CourseOutline = ({ courseId }) => {
-
{
-
+
{isSequential && proctoringExamConfigurationLink && (
`${getApiBaseUrl()}${rein
export const getXBlockBaseApiUrl = () => `${getApiBaseUrl()}/xblock/`;
export const getCourseItemApiUrl = (itemId) => `${getXBlockBaseApiUrl()}${itemId}`;
export const getXBlockApiUrl = (blockId) => `${getXBlockBaseApiUrl()}outline/${blockId}`;
-export const getClipboardUrl = () => `${getApiBaseUrl()}/api/content-staging/v1/clipboard/`;
export const exportTags = (courseId) => `${getApiBaseUrl()}/api/content_tagging/v1/object_tags/${courseId}/export/`;
/**
diff --git a/src/course-outline/data/thunk.js b/src/course-outline/data/thunk.js
index 315c5846c0..c4cebdc44c 100644
--- a/src/course-outline/data/thunk.js
+++ b/src/course-outline/data/thunk.js
@@ -1,5 +1,4 @@
import { RequestStatus } from '../../data/constants';
-import { updateClipboardData } from '../../generic/data/slice';
import { NOTIFICATION_MESSAGES } from '../../constants';
import { API_ERROR_TYPES, COURSE_BLOCK_NAMES } from '../constants';
import {
@@ -88,7 +87,6 @@ export function fetchCourseOutlineIndexQuery(courseId) {
},
} = outlineIndex;
dispatch(fetchOutlineIndexSuccess(outlineIndex));
- dispatch(updateClipboardData(outlineIndex.initialUserClipboard));
dispatch(updateStatusBar({
courseReleaseDate,
highlightsEnabledForMessaging,
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index 25b9d8bedd..9e111ebdc1 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom';
import { useToggle } from '@openedx/paragon';
import { getConfig } from '@edx/frontend-platform';
-import { copyToClipboard } from '../generic/data/thunks';
import { getSavingStatus as getGenericSavingStatus } from '../generic/data/selectors';
import { RequestStatus } from '../data/constants';
import { COURSE_BLOCK_NAMES } from './constants';
@@ -95,10 +94,6 @@ const useCourseOutline = ({ courseId }) => {
const isSavingStatusFailed = savingStatus === RequestStatus.FAILED || genericSavingStatus === RequestStatus.FAILED;
- const handleCopyToClipboardClick = (usageKey) => {
- dispatch(copyToClipboard(usageKey));
- };
-
const handlePasteClipboardClick = (parentLocator, sectionId) => {
dispatch(pasteClipboardContent(parentLocator, sectionId));
};
@@ -339,7 +334,6 @@ const useCourseOutline = ({ courseId }) => {
openUnitPage,
handleNewUnitSubmit,
handleVideoSharingOptionChange,
- handleCopyToClipboardClick,
handlePasteClipboardClick,
notificationDismissUrl,
discussionsSettings,
diff --git a/src/course-outline/status-bar/CustomStatusBar.jsx b/src/course-outline/status-bar/CustomStatusBar.jsx
new file mode 100644
index 0000000000..b424dcc1ae
--- /dev/null
+++ b/src/course-outline/status-bar/CustomStatusBar.jsx
@@ -0,0 +1,250 @@
+import React, { useContext, useState, useEffect } from 'react';
+import moment from 'moment/moment';
+import PropTypes from 'prop-types';
+import { FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform/config';
+import {
+ Hyperlink, Form, Stack, useToggle,
+} from '@openedx/paragon';
+import { AppContext } from '@edx/frontend-platform/react';
+
+import { ContentTagsDrawerSheet } from '../../content-tags-drawer';
+import TagCount from '../../generic/tag-count';
+import { useHelpUrls } from '../../help-urls/hooks';
+import { VIDEO_SHARING_OPTIONS } from '../constants';
+import { useContentTagsCount } from '../../generic/data/apiHooks';
+import messages from './messages';
+import { getVideoSharingOptionText } from '../utils';
+
+const StatusBarItem = ({ title, children }) => (
+
+
+
+ {courseReleaseDateObj.isValid() ? (
+
+
+
+
+ {isSelfPaced
+ ? intl.formatMessage(messages.pacingTypeSelfPaced)
+ : intl.formatMessage(messages.pacingTypeInstructorPaced)}
+
+
+
+
+ {checkListTitle} {intl.formatMessage(messages.checklistCompleted)}
+
+
+
+
+ {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
+
+
+ )}
+ {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
+
+
+ Export Tags
+
+
+ )}
+ {videoSharingEnabled && (
+
+ {intl.formatMessage(messages.videoSharingTitle)}
+
+
+
+ )}
+ {/* {renderViewLiveButton && renderViewLiveButton()} */}
+
+ closeManageTagsDrawer()}
+ showSheet={isManageTagsDrawerOpen}
+ />
+
+ );
+};
+
+CustomStatusBar.propTypes = {
+ courseId: PropTypes.string.isRequired,
+ isLoading: PropTypes.bool.isRequired,
+ openEnableHighlightsModal: PropTypes.func.isRequired,
+ handleVideoSharingOptionChange: PropTypes.func.isRequired,
+ statusBarData: PropTypes.shape({
+ courseReleaseDate: PropTypes.string.isRequired,
+ isSelfPaced: PropTypes.bool.isRequired,
+ checklist: PropTypes.shape({
+ totalCourseLaunchChecks: PropTypes.number.isRequired,
+ completedCourseLaunchChecks: PropTypes.number.isRequired,
+ totalCourseBestPracticesChecks: PropTypes.number.isRequired,
+ completedCourseBestPracticesChecks: PropTypes.number.isRequired,
+ }),
+ highlightsEnabledForMessaging: PropTypes.bool.isRequired,
+ videoSharingEnabled: PropTypes.bool.isRequired,
+ videoSharingOptions: PropTypes.string.isRequired,
+ }).isRequired,
+ renderViewLiveButton: PropTypes.func,
+};
+
+export default CustomStatusBar;
diff --git a/src/course-outline/status-bar/StatusBarContent.jsx b/src/course-outline/status-bar/StatusBarContent.jsx
new file mode 100644
index 0000000000..acd10dee4a
--- /dev/null
+++ b/src/course-outline/status-bar/StatusBarContent.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ActionRow } from '@openedx/paragon';
+
+const StatusBarContent = ({
+ contentTitle,
+ description,
+ instruction,
+ headerActions,
+ hideBorder,
+ withSubHeaderContent,
+}) => (
+ {
- onCopyToClipboardClick(unit.id);
+ copyToClipboard(id);
};
const titleComponent = (
@@ -241,7 +244,6 @@ UnitCard.propTypes = {
onOrderChange: PropTypes.func.isRequired,
isSelfPaced: PropTypes.bool.isRequired,
isCustomRelativeDatesActive: PropTypes.bool.isRequired,
- onCopyToClipboardClick: PropTypes.func.isRequired,
discussionsSettings: PropTypes.shape({
providerType: PropTypes.string,
enableGradedUnits: PropTypes.bool,
diff --git a/src/course-outline/xblock-status/GradingTypeAndDueDate.jsx b/src/course-outline/xblock-status/GradingTypeAndDueDate.jsx
index b02e138346..8a15f1bbf8 100644
--- a/src/course-outline/xblock-status/GradingTypeAndDueDate.jsx
+++ b/src/course-outline/xblock-status/GradingTypeAndDueDate.jsx
@@ -2,10 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Icon } from '@openedx/paragon';
-import {
- Check as CheckIcon,
- CalendarMonth as CalendarIcon,
-} from '@openedx/paragon/icons';
+import { Check as CheckIcon, CalendarMonth as CalendarIcon } from '@openedx/paragon/icons';
+import { convertToLocalTime } from '../../utils';
+
import messages from './messages';
@@ -23,6 +22,10 @@ const GradingTypeAndDueDate = ({
relativeWeeksDue,
}) => {
const intl = useIntl();
+
+ // Convert dueDate to local time, if valid
+ const localDueDate = dueDate ? convertToLocalTime(dueDate) : 'No scheduled due date';
+
const showRelativeWeeks = isSelfPaced && isCustomRelativeDatesActive && relativeWeeksDue;
let examValue = '';
@@ -51,10 +54,11 @@ const GradingTypeAndDueDate = ({
);
const dueDateDiv = () => {
- if (dueDate && isInstructorPaced) {
+ // If it's instructor-paced and dueDate is valid, display the formatted date
+ if (localDueDate && isInstructorPaced && localDueDate !== 'No scheduled due date') {
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/course-team/CourseTeam.jsx b/src/course-team/CourseTeam.jsx
index 10360460a3..2d0ca2979a 100644
--- a/src/course-team/CourseTeam.jsx
+++ b/src/course-team/CourseTeam.jsx
@@ -8,6 +8,7 @@ import {
} from '@openedx/paragon';
import { Add as IconAdd } from '@openedx/paragon/icons';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
import InternetConnectionAlert from '../generic/internet-connection-alert';
import { useModel } from '../generic/model-store';
import SubHeader from '../generic/sub-header/SubHeader';
@@ -74,10 +75,21 @@ const CourseTeam = ({ courseId }) => {
+
+);
+
+StatusBarItem.propTypes = {
+ title: PropTypes.string.isRequired,
+ children: PropTypes.node,
+};
+
+StatusBarItem.defaultProps = {
+ children: null,
+};
+
+const CustomStatusBar = ({
+ statusBarData,
+ isLoading,
+ courseId,
+ openEnableHighlightsModal,
+ handleVideoSharingOptionChange,
+ renderViewLiveButton,
+}) => {
+ const intl = useIntl();
+ const { config } = useContext(AppContext);
+
+ const {
+ courseReleaseDate,
+ highlightsEnabledForMessaging,
+ checklist,
+ isSelfPaced,
+ videoSharingEnabled,
+ videoSharingOptions,
+ } = statusBarData;
+
+ const {
+ completedCourseLaunchChecks,
+ completedCourseBestPracticesChecks,
+ totalCourseLaunchChecks,
+ totalCourseBestPracticesChecks,
+ } = checklist;
+
+ const courseReleaseDateObj = moment.utc(courseReleaseDate, 'MMM DD, YYYY at HH:mm UTC', true);
+ const checkListTitle = `${completedCourseLaunchChecks + completedCourseBestPracticesChecks}/${totalCourseLaunchChecks + totalCourseBestPracticesChecks}`;
+ const checklistDestination = () => new URL(`checklists/${courseId}`, config.STUDIO_BASE_URL).href;
+ const scheduleDestination = () => new URL(`settings/details/${courseId}#schedule`, config.STUDIO_BASE_URL).href;
+
+ const {
+ contentHighlights: contentHighlightsUrl,
+ socialSharing: socialSharingUrl,
+ } = useHelpUrls(['contentHighlights', 'socialSharing']);
+
+ const { data: courseTagCount } = useContentTagsCount(courseId);
+
+ const [isManageTagsDrawerOpen, openManageTagsDrawer, closeManageTagsDrawer] = useToggle(false);
+ const [highlightToggle, setHighlightToggle] = useState(highlightsEnabledForMessaging);
+ useEffect(() => {
+ setHighlightToggle(highlightsEnabledForMessaging);
+ }, [highlightsEnabledForMessaging]);
+
+ const handleHighlightToggle = () => {
+ if (!highlightToggle) {
+ // User is turning ON, open modal
+ openEnableHighlightsModal({
+ onCancel: () => setHighlightToggle(false),
+ onEnable: () => setHighlightToggle(true),
+ });
+ } else {
+ // Optionally handle turning OFF here if needed
+ setHighlightToggle(false);
+ }
+ };
+
+ if (isLoading) {
+ return null;
+ }
+
+ return (
+ <>
+ {title}
+
+ {children}
+
+
+
+ {intl.formatMessage(messages.highlightEmailsLink)}
+
+
+
+
+
+ handleVideoSharingOptionChange(e.target.value)}
+ >
+ {Object.values(VIDEO_SHARING_OPTIONS).map((option) => (
+
+ ))}
+
+
+ {intl.formatMessage(messages.videoSharingLink)}
+
+
+
+
+ {headerActions && (
+
+ {headerActions}
+
+ )}
+
+ {contentTitle && withSubHeaderContent && (
+
+
+ )}
+ {instruction && (
+
+);
+
+StatusBarContent.defaultProps = {
+ instruction: '',
+ description: '',
+ subtitle: '',
+ breadcrumbs: '',
+ contentTitle: '',
+ headerActions: null,
+ titleActions: null,
+ hideBorder: false,
+ withSubHeaderContent: true,
+};
+
+StatusBarContent.propTypes = {
+ title: PropTypes.oneOfType([
+ PropTypes.node,
+ PropTypes.string,
+ ]).isRequired,
+ subtitle: PropTypes.string,
+ breadcrumbs: PropTypes.oneOfType([
+ PropTypes.node,
+ PropTypes.string,
+ ]),
+ contentTitle: PropTypes.string,
+ description: PropTypes.string,
+ instruction: PropTypes.oneOfType([
+ PropTypes.element,
+ PropTypes.string,
+ ]),
+ headerActions: PropTypes.node,
+ titleActions: PropTypes.node,
+ hideBorder: PropTypes.bool,
+ withSubHeaderContent: PropTypes.bool,
+};
+export default StatusBarContent;
+
diff --git a/src/course-outline/subsection-card/SubsectionCard.jsx b/src/course-outline/subsection-card/SubsectionCard.jsx
index 9f134fdbe1..032178618f 100644
--- a/src/course-outline/subsection-card/SubsectionCard.jsx
+++ b/src/course-outline/subsection-card/SubsectionCard.jsx
@@ -16,7 +16,7 @@ import { RequestStatus } from '../../data/constants';
import CardHeader from '../card-header/CardHeader';
import SortableItem from '../../generic/drag-helper/SortableItem';
import { DragContext } from '../../generic/drag-helper/DragContextProvider';
-import { useCopyToClipboard, PasteComponent } from '../../generic/clipboard';
+import { useClipboard, PasteComponent } from '../../generic/clipboard';
import TitleButton from '../card-header/TitleButton';
import XBlockStatus from '../xblock-status/XBlockStatus';
import { getItemStatus, getItemStatusBorder, scrollToElement } from '../utils';
@@ -49,7 +49,7 @@ const SubsectionCard = ({
const isScrolledToElement = locatorId === subsection.id;
const [isFormOpen, openForm, closeForm] = useToggle(false);
const namePrefix = 'subsection';
- const { sharedClipboardData, showPasteUnit } = useCopyToClipboard();
+ const { sharedClipboardData, showPasteUnit } = useClipboard();
const {
id,
@@ -233,7 +233,7 @@ const SubsectionCard = ({
>
{intl.formatMessage(messages.newUnitButton)}
- {enableCopyPasteUnits && showPasteUnit && (
+ {enableCopyPasteUnits && showPasteUnit && sharedClipboardData && (
{contentTitle}
+ {description} +{instruction}
+ )} +
- {intl.formatMessage(messages.dueLabel)} {dueDate}
+ {intl.formatMessage(messages.dueLabel)} {localDueDate}
);
}
@@ -84,12 +88,12 @@ const GradingTypeAndDueDate = ({
{showRelativeWeeks && (selfPacedRelativeDueWeeksDiv())}
);
- } if ((dueDate && !isSelfPaced) || graded) {
+ } if ((localDueDate !== 'No scheduled due date' && !isSelfPaced) || graded) { // Check if there's a valid due date
return (
<>
{gradingTypeDiv()}
- {dueDateDiv()}
+ {dueDateDiv()} {/* Display the local due date */}
{showRelativeWeeks && (selfPacedRelativeDueWeeksDiv())}
@@ -102,6 +106,7 @@ const GradingTypeAndDueDate = ({
);
}
+
return null;
};
@@ -131,4 +136,4 @@ GradingTypeAndDueDate.propTypes = {
relativeWeeksDue: PropTypes.number,
};
-export default GradingTypeAndDueDate;
+export default GradingTypeAndDueDate;
\ No newline at end of file
diff --git a/src/course-outline/xblock-status/ReleaseStatus.jsx b/src/course-outline/xblock-status/ReleaseStatus.jsx
index 59cbb50596..4ba4d71d4a 100644
--- a/src/course-outline/xblock-status/ReleaseStatus.jsx
+++ b/src/course-outline/xblock-status/ReleaseStatus.jsx
@@ -2,9 +2,10 @@ import React from 'react';
import PropTypes from 'prop-types';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Icon } from '@openedx/paragon';
-import {
- AccessTime as ClockIcon,
-} from '@openedx/paragon/icons';
+import { AccessTime as ClockIcon } from '@openedx/paragon/icons';
+import { convertToLocalTime } from '../../utils';
+import moment from 'moment-timezone';
+
import messages from './messages';
@@ -16,11 +17,9 @@ const ReleaseStatus = ({
}) => {
const intl = useIntl();
- const explanatoryMessageDiv = () => (
-
- {explanatoryMessage}
-
- );
+ // Convert the release date if it's valid
+ const localReleaseDate = releaseDate ? convertToLocalTime(releaseDate) : '';
+ const displayReleaseDate = localReleaseDate === 'Invalid date' ? null : localReleaseDate;
let releaseLabel = messages.unscheduledLabel;
if (releasedToStudents) {
@@ -29,26 +28,30 @@ const ReleaseStatus = ({
releaseLabel = messages.scheduledLabel;
}
- const releaseStatusDiv = () => (
-
-
- {intl.formatMessage(messages.releaseStatusScreenReaderTitle)}
-
-
- );
-
+ // If explanatory message exists, display it
if (explanatoryMessage) {
- return explanatoryMessageDiv();
+ return (
+
+ {explanatoryMessage}
+
+ );
}
+ // If it's instructor-paced, display the release status with the formatted date
if (isInstructorPaced) {
- return releaseStatusDiv();
+ return (
+
+
+ {intl.formatMessage(messages.releaseStatusScreenReaderTitle)}
+
+
+ {intl.formatMessage(releaseLabel)}
+ {displayReleaseDate}
+
+ );
}
- return null;
+ return null; // Return null if neither explanatory message nor instructor-paced condition is met
};
ReleaseStatus.defaultProps = {
@@ -64,4 +67,4 @@ ReleaseStatus.propTypes = {
releasedToStudents: PropTypes.bool,
};
-export default ReleaseStatus;
+export default ReleaseStatus;
\ No newline at end of file
diff --git a/src/course-rerun/index.jsx b/src/course-rerun/index.jsx
index 1bfeed4f9a..a6fea3d85d 100644
--- a/src/course-rerun/index.jsx
+++ b/src/course-rerun/index.jsx
@@ -10,6 +10,7 @@ import {
import { StudioFooter } from '@edx/frontend-component-footer';
import { useNavigate, useParams } from 'react-router-dom';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
import Header from '../header';
import Loading from '../generic/Loading';
import { getLoadingStatuses } from '../generic/data/selectors';
@@ -42,53 +43,75 @@ const CourseRerun = () => {
return (
<>
- - {intl.formatMessage(messages.rerunTitle)} {displayName} -
- {originalCourseData} --
+ {intl.formatMessage(messages.rerunTitle)} {displayName} +
+ {originalCourseData} ++
-
+ {
>
{intl.formatMessage(messages.addNewMemberButton)}
- )}
- />
+ )}
+ />
+
{isFormVisible && (
diff --git a/src/course-team/add-team-member/AddTeamMember.scss b/src/course-team/add-team-member/AddTeamMember.scss
index 6859a2dced..87b152c7e3 100644
--- a/src/course-team/add-team-member/AddTeamMember.scss
+++ b/src/course-team/add-team-member/AddTeamMember.scss
@@ -4,6 +4,7 @@
justify-content: space-between;
border: .0625rem solid $gray-200;
border-radius: .375rem;
+ box-shadow: 0 1px 1px $gray-200;
box-shadow: inset inset 0 1px .125rem 1px $gray-200;
padding: 1.25rem 1.875rem;
@@ -14,4 +15,5 @@
.add-team-member-title {
font-size: $spacer;
}
+
}
diff --git a/src/course-unit/course-xblock/CourseXBlock.jsx b/src/course-unit/course-xblock/CourseXBlock.jsx
index 2d8f6221e8..21331a402d 100644
--- a/src/course-unit/course-xblock/CourseXBlock.jsx
+++ b/src/course-unit/course-xblock/CourseXBlock.jsx
@@ -7,7 +7,7 @@ import {
} from '@openedx/paragon';
import { EditOutline as EditIcon, MoreVert as MoveVertIcon } from '@openedx/paragon/icons';
import { useIntl } from '@edx/frontend-platform/i18n';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
import { getCanEdit, getCourseId } from 'CourseAuthoring/course-unit/data/selectors';
import DeleteModal from '../../generic/delete-modal/DeleteModal';
@@ -15,10 +15,11 @@ import ConfigureModal from '../../generic/configure-modal/ConfigureModal';
import SortableItem from '../../generic/drag-helper/SortableItem';
import { scrollToElement } from '../../course-outline/utils';
import { COURSE_BLOCK_NAMES } from '../../constants';
-import { copyToClipboard } from '../../generic/data/thunks';
+// import { copyToClipboard } from '../../generic/data/thunks';
import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
import XBlockMessages from './xblock-messages/XBlockMessages';
import messages from './messages';
+import { createCorrectInternalRoute } from '../../utils';
const CourseXBlock = ({
id, title, type, unitXBlockActions, shouldScroll, userPartitionInfo,
@@ -28,7 +29,6 @@ const CourseXBlock = ({
const [isDeleteModalOpen, openDeleteModal, closeDeleteModal] = useToggle(false);
const [isConfigureModalOpen, openConfigureModal, closeConfigureModal] = useToggle(false);
const dispatch = useDispatch();
- const navigate = useNavigate();
const canEdit = useSelector(getCanEdit);
const courseId = useSelector(getCourseId);
const intl = useIntl();
@@ -58,7 +58,11 @@ const CourseXBlock = ({
case COMPONENT_TYPES.html:
case COMPONENT_TYPES.problem:
case COMPONENT_TYPES.video:
- navigate(`/course/${courseId}/editor/${type}/${id}`);
+ // Not using useNavigate from react router to use browser navigation
+ // which allows us to block back button if unsaved changes in editor are present.
+ window.location.assign(
+ createCorrectInternalRoute(`/course/${courseId}/editor/${type}/${id}`),
+ );
break;
default:
}
@@ -115,11 +119,11 @@ const CourseXBlock = ({
{intl.formatMessage(messages.blockLabelButtonMove)}
- {canEdit && (
+ {/* {canEdit && (
dispatch(copyToClipboard(id))}>
{intl.formatMessage(messages.blockLabelButtonCopyToClipboard)}
- )}
+ )} */}
{intl.formatMessage(messages.blockLabelButtonManageAccess)}
diff --git a/src/course-unit/course-xblock/CourseXBlock.test.jsx b/src/course-unit/course-xblock/CourseXBlock.test.jsx
index 0cdf05d4f6..95482d098e 100644
--- a/src/course-unit/course-xblock/CourseXBlock.test.jsx
+++ b/src/course-unit/course-xblock/CourseXBlock.test.jsx
@@ -29,7 +29,6 @@ const blockId = '567890';
const handleDeleteMock = jest.fn();
const handleDuplicateMock = jest.fn();
const handleConfigureSubmitMock = jest.fn();
-const mockedUsedNavigate = jest.fn();
const {
name,
block_id: id,
@@ -42,11 +41,6 @@ const unitXBlockActionsMock = {
handleDuplicate: handleDuplicateMock,
};
-jest.mock('react-router-dom', () => ({
- ...jest.requireActual('react-router-dom'),
- useNavigate: () => mockedUsedNavigate,
-}));
-
jest.mock('react-redux', () => ({
...jest.requireActual('react-redux'),
useSelector: jest.fn(),
@@ -78,6 +72,16 @@ useSelector.mockImplementation((selector) => {
});
describe(' = ({
true}
onClose={onClose}
returnFunction={returnFunction}
validateEntry={validateEntry}
diff --git a/src/editors/data/redux/problem/reducers.js b/src/editors/data/redux/problem/reducers.js
index 034f1bbb38..3a0a762819 100644
--- a/src/editors/data/redux/problem/reducers.js
+++ b/src/editors/data/redux/problem/reducers.js
@@ -16,6 +16,7 @@ const initialState = {
generalFeedback: '',
additionalAttributes: {},
defaultSettings: {},
+ isDirty: false,
settings: {
randomization: null,
scoring: {
@@ -52,6 +53,7 @@ const problem = createSlice({
updateQuestion: (state, { payload }) => ({
...state,
question: payload,
+ isDirty: true,
}),
updateAnswer: (state, { payload }) => {
const { id, hasSingleAnswer, ...answer } = payload;
@@ -77,6 +79,7 @@ const problem = createSlice({
...state,
correctAnswerCount,
answers,
+ isDirty: true,
};
},
deleteAnswer: (state, { payload }) => {
@@ -86,6 +89,7 @@ const problem = createSlice({
return {
...state,
correctAnswerCount: state.problemType === ProblemTypeKeys.NUMERIC ? 1 : 0,
+ isDirty: true,
answers: [{
id: 'A',
title: '',
@@ -140,6 +144,7 @@ const problem = createSlice({
answers,
correctAnswerCount: correct ? state.correctAnswerCount - 1 : state.correctAnswerCount,
groupFeedbackList,
+ isDirty: true,
};
},
addAnswer: (state) => {
@@ -167,6 +172,7 @@ const problem = createSlice({
return {
...state,
correctAnswerCount,
+ isDirty: true,
answers,
};
},
@@ -185,6 +191,7 @@ const problem = createSlice({
...state,
correctAnswerCount,
answers: [newOption],
+ isDirty: true,
};
},
@@ -194,6 +201,7 @@ const problem = createSlice({
...state.settings,
...payload,
},
+ isDirty: true,
}),
load: (state, { payload: { settings: { scoring, showAnswer, ...settings }, ...payload } }) => ({
...state,
diff --git a/src/editors/data/redux/problem/reducers.test.js b/src/editors/data/redux/problem/reducers.test.js
index b503206deb..83421f4c71 100644
--- a/src/editors/data/redux/problem/reducers.test.js
+++ b/src/editors/data/redux/problem/reducers.test.js
@@ -19,6 +19,7 @@ describe('problem reducer', () => {
it(`load ${target} from payload`, () => {
expect(reducer(testingState, actions[action](testValue))).toEqual({
...testingState,
+ isDirty: true,
[target]: testValue,
});
});
@@ -62,6 +63,7 @@ describe('problem reducer', () => {
expect(reducer(testingState, actions.addAnswer(answer))).toEqual({
...testingState,
answers: [answer],
+ isDirty: true,
});
});
});
@@ -79,6 +81,7 @@ describe('problem reducer', () => {
const payload = { hints: ['soMehInt'] };
expect(reducer(testingState, actions.updateSettings(payload))).toEqual({
...testingState,
+ isDirty: true,
settings: {
...testingState.settings,
...payload,
@@ -99,6 +102,7 @@ describe('problem reducer', () => {
expect(reducer({ ...testingState, problemType: 'choiceresponse' }, actions.addAnswer())).toEqual({
...testingState,
problemType: 'choiceresponse',
+ isDirty: true,
answers: [answer],
});
});
@@ -111,6 +115,7 @@ describe('problem reducer', () => {
expect(reducer(numericTestState, actions.addAnswer())).toEqual({
...numericTestState,
correctAnswerCount: 1,
+ isDirty: true,
answers: [{
...answer,
correct: true,
@@ -131,6 +136,7 @@ describe('problem reducer', () => {
expect(reducer({ ...testingState, problemType: ProblemTypeKeys.NUMERIC }, actions.addAnswerRange())).toEqual({
...testingState,
correctAnswerCount: 1,
+ isDirty: true,
problemType: ProblemTypeKeys.NUMERIC,
answers: [answerRange],
});
@@ -151,6 +157,7 @@ describe('problem reducer', () => {
)).toEqual({
...testingState,
correctAnswerCount: 1,
+ isDirty: true,
answers: [{ id: 'A', correct: true }],
});
});
@@ -183,6 +190,7 @@ describe('problem reducer', () => {
actions.deleteAnswer(payload),
)).toEqual({
...testingState,
+ isDirty: true,
correctAnswerCount: 0,
answers: [{
id: 'A',
@@ -220,6 +228,7 @@ describe('problem reducer', () => {
)).toEqual({
...testingState,
correctAnswerCount: 1,
+ isDirty: true,
answers: [{
id: 'A',
correct: true,
@@ -259,6 +268,7 @@ describe('problem reducer', () => {
)).toEqual({
...testingState,
problemType: ProblemTypeKeys.SINGLESELECT,
+ isDirty: true,
correctAnswerCount: 1,
answers: [{
id: 'A',
@@ -300,6 +310,7 @@ describe('problem reducer', () => {
)).toEqual({
...testingState,
correctAnswerCount: 1,
+ isDirty: true,
answers: [{
id: 'A',
correct: true,
@@ -380,6 +391,7 @@ describe('problem reducer', () => {
)).toEqual({
...testingState,
correctAnswerCount: 1,
+ isDirty: true,
answers: [{
id: 'A',
correct: true,
@@ -429,6 +441,7 @@ describe('problem reducer', () => {
...testingState,
problemType: ProblemTypeKeys.NUMERIC,
correctAnswerCount: 1,
+ isDirty: true,
answers: [{
id: 'A',
title: '',
diff --git a/src/editors/data/redux/problem/selectors.js b/src/editors/data/redux/problem/selectors.js
index 1ba3c3ea0b..fcd36b37aa 100644
--- a/src/editors/data/redux/problem/selectors.js
+++ b/src/editors/data/redux/problem/selectors.js
@@ -17,6 +17,7 @@ export const simpleSelectors = {
question: mkSimpleSelector(problemData => problemData.question),
defaultSettings: mkSimpleSelector(problemData => problemData.defaultSettings),
completeState: mkSimpleSelector(problemData => problemData),
+ isDirty: mkSimpleSelector(problemData => problemData.isDirty),
};
export default {
diff --git a/src/editors/hooks.test.jsx b/src/editors/hooks.test.jsx
index 4a247a802c..103577a98a 100644
--- a/src/editors/hooks.test.jsx
+++ b/src/editors/hooks.test.jsx
@@ -50,11 +50,19 @@ describe('hooks', () => {
describe('initializeApp', () => {
test('calls provided function with provided data as args when useEffect is called', () => {
const dispatch = jest.fn();
- const fakeData = { some: 'data' };
+ const fakeData = {
+ blockId: 'blockId',
+ studioEndpointUrl: 'studioEndpointUrl',
+ learningContextId: 'learningContextId',
+ };
hooks.initializeApp({ dispatch, data: fakeData });
expect(dispatch).not.toHaveBeenCalledWith(fakeData);
const [cb, prereqs] = useEffect.mock.calls[0];
- expect(prereqs).toStrictEqual([fakeData]);
+ expect(prereqs).toStrictEqual([
+ fakeData.blockId,
+ fakeData.studioEndpointUrl,
+ fakeData.learningContextId,
+ ]);
cb();
expect(dispatch).toHaveBeenCalledWith(thunkActions.app.initialize(fakeData));
});
diff --git a/src/editors/hooks.ts b/src/editors/hooks.ts
index d2a7403d87..c32d608008 100644
--- a/src/editors/hooks.ts
+++ b/src/editors/hooks.ts
@@ -9,7 +9,7 @@ import { RequestKeys } from './data/constants/requests';
// eslint-disable-next-line react-hooks/rules-of-hooks
export const initializeApp = ({ dispatch, data }) => useEffect(
() => dispatch(thunkActions.app.initialize(data)),
- [data],
+ [data?.blockId, data?.studioEndpointUrl, data?.learningContextId],
);
export const navigateTo = (destination: string | URL) => {
diff --git a/src/editors/sharedComponents/CustomTypeaheadDropdown/FormGroup.jsx b/src/editors/sharedComponents/CustomTypeaheadDropdown/FormGroup.jsx
new file mode 100644
index 0000000000..f0739e1e4b
--- /dev/null
+++ b/src/editors/sharedComponents/CustomTypeaheadDropdown/FormGroup.jsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import { Form } from '@openedx/paragon';
+
+const FormGroup = (props) => {
+ const handleFocus = (e) => {
+ if (props.handleFocus) { props.handleFocus(e); }
+ };
+ const handleClick = (e) => {
+ if (props.handleClick) { props.handleClick(e); }
+ };
+ const handleOnBlur = (e) => {
+ if (!e.currentTarget.contains(e.relatedTarget)) {
+ if (props.handleBlur) { props.handleBlur(e); }
+ }
+ };
+ return (
+
+
+ {props.options ? props.options() : null}
+
+
+ {props.children}
+
+ {props.helpText && _.isEmpty(props.errorMessage) && (
+
+ {props.helpText}
+
+ )}
+
+ {!_.isEmpty(props.errorMessage) && (
+
+ {props.errorMessage}
+
+ )}
+
+ );
+};
+
+FormGroup.defaultProps = {
+ as: 'input',
+ errorMessage: '',
+ autoComplete: null,
+ readOnly: false,
+ handleBlur: null,
+ handleChange: () => {},
+ handleFocus: null,
+ handleClick: null,
+ helpText: '',
+ placeholder: '',
+ options: null,
+ trailingElement: null,
+ type: 'text',
+ children: null,
+ className: '',
+ controlClassName: '',
+};
+
+FormGroup.propTypes = {
+ as: PropTypes.string,
+ errorMessage: PropTypes.string,
+ autoComplete: PropTypes.string,
+ readOnly: PropTypes.bool,
+ floatingLabel: PropTypes.string.isRequired,
+ handleBlur: PropTypes.func,
+ handleChange: PropTypes.func,
+ handleFocus: PropTypes.func,
+ handleClick: PropTypes.func,
+ helpText: PropTypes.string,
+ placeholder: PropTypes.string,
+ name: PropTypes.string.isRequired,
+ options: PropTypes.func,
+ trailingElement: PropTypes.element,
+ type: PropTypes.string,
+ value: PropTypes.string.isRequired,
+ children: PropTypes.element,
+ className: PropTypes.string,
+ controlClassName: PropTypes.string,
+};
+
+export default FormGroup;
diff --git a/src/editors/sharedComponents/CustomTypeaheadDropdown/FormGroup.test.jsx b/src/editors/sharedComponents/CustomTypeaheadDropdown/FormGroup.test.jsx
new file mode 100644
index 0000000000..7c24ad03e5
--- /dev/null
+++ b/src/editors/sharedComponents/CustomTypeaheadDropdown/FormGroup.test.jsx
@@ -0,0 +1,83 @@
+import {
+ fireEvent,
+ render,
+ screen,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import FormGroup from './FormGroup';
+
+jest.unmock('@openedx/paragon');
+jest.unmock('@openedx/paragon/icons');
+
+const mockHandleChange = jest.fn();
+const mockHandleFocus = jest.fn();
+const mockHandleClick = jest.fn();
+const mockHandleBlur = jest.fn();
+const defaultProps = {
+ as: 'input',
+ errorMessage: '',
+ borderClass: '',
+ autoComplete: null,
+ readOnly: false,
+ handleBlur: mockHandleBlur,
+ handleChange: mockHandleChange,
+ handleFocus: mockHandleFocus,
+ handleClick: mockHandleClick,
+ helpText: 'helpText text',
+ options: null,
+ trailingElement: null,
+ type: 'text',
+ children: null,
+ className: '',
+ floatingLabel: 'floatingLabel text',
+ name: 'title',
+ value: '',
+};
+
+const renderComponent = (props) => render( { this.handleExpandMore(e); }}
+ />
+ );
+ }
+
+ expandLessButton() {
+ return (
+ { this.handleExpandLess(e); }}
+ />
+ );
+ }
+
+ render() {
+ const noOptionsMessage = (
+
+
+ );
+ const dropDownEmptyList = this.state.dropDownItems && this.state.isFocused ? noOptionsMessage : null;
+ return (
+
{intl.formatMessage(messages.pageTitle, {
@@ -113,7 +117,7 @@ const CourseExportPage = ({ intl, courseId }) => {
onInternetConnectionFailed={() => null}
/>
</div>
- </>
+ </PluginSlot>
);
};
diff --git a/src/export-page/CustomCourseExportPage.jsx b/src/export-page/CustomCourseExportPage.jsx
new file mode 100644
index 0000000000..fd464a96e6
--- /dev/null
+++ b/src/export-page/CustomCourseExportPage.jsx
@@ -0,0 +1,129 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+ Container, Layout, Button, Card,
+} from '@openedx/paragon';
+import { ArrowCircleDown as ArrowCircleDownIcon } from '@openedx/paragon/icons';
+import Cookies from 'universal-cookie';
+import { getConfig } from '@edx/frontend-platform';
+import { Helmet } from 'react-helmet';
+
+import InternetConnectionAlert from '../generic/internet-connection-alert';
+import SubHeader from '../generic/sub-header/SubHeader';
+import { RequestStatus } from '../data/constants';
+import { useModel } from '../generic/model-store';
+import messages from './messages';
+import ExportSidebar from './export-sidebar/ExportSidebar';
+import {
+ getCurrentStage, getError, getExportTriggered, getLoadingStatus, getSavingStatus,
+} from './data/selectors';
+import { startExportingCourse } from './data/thunks';
+import { EXPORT_STAGES, LAST_EXPORT_COOKIE_NAME } from './data/constants';
+import { updateExportTriggered, updateSavingStatus, updateSuccessDate } from './data/slice';
+import ExportModalError from './export-modal-error/ExportModalError';
+import ExportFooter from './export-footer/ExportFooter';
+import ExportStepper from './export-stepper/ExportStepper';
+
+const CustomCourseExportPage = ({ intl, courseId }) => {
+ const dispatch = useDispatch();
+ const exportTriggered = useSelector(getExportTriggered);
+ const courseDetails = useModel('courseDetails', courseId);
+ const currentStage = useSelector(getCurrentStage);
+ const { msg: errorMessage } = useSelector(getError);
+ const loadingStatus = useSelector(getLoadingStatus);
+ const savingStatus = useSelector(getSavingStatus);
+ const cookies = new Cookies();
+ const isShowExportButton = !exportTriggered || errorMessage || currentStage === EXPORT_STAGES.SUCCESS;
+ const anyRequestFailed = savingStatus === RequestStatus.FAILED || loadingStatus === RequestStatus.FAILED;
+ const anyRequestInProgress = savingStatus === RequestStatus.PENDING || loadingStatus === RequestStatus.IN_PROGRESS;
+
+ useEffect(() => {
+ const cookieData = cookies.get(LAST_EXPORT_COOKIE_NAME);
+ if (cookieData) {
+ dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+ dispatch(updateExportTriggered(true));
+ dispatch(updateSuccessDate(cookieData.date));
+ }
+ }, []);
+
+ return (
+ <>
+ <Helmet>
+ <title>
+ {intl.formatMessage(messages.pageTitle, {
+ headingTitle: intl.formatMessage(messages.headingTitle),
+ courseName: courseDetails?.name,
+ siteName: process.env.SITE_NAME,
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{intl.formatMessage(messages.learnMoreButtonTitle)}
+
+ );
+};
+
+CustomExportSidebar.propTypes = {
+ intl: intlShape.isRequired,
+ courseId: PropTypes.string.isRequired,
+};
+
+export default injectIntl(CustomExportSidebar);
diff --git a/src/export-page/export-sidebar/ExportSidebar.jsx b/src/export-page/export-sidebar/ExportSidebar.jsx
index c8684a577a..7f5bc881d0 100644
--- a/src/export-page/export-sidebar/ExportSidebar.jsx
+++ b/src/export-page/export-sidebar/ExportSidebar.jsx
@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
import { Hyperlink } from '@openedx/paragon';
import { getConfig } from '@edx/frontend-platform';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
import { HelpSidebar } from '../../generic/help-sidebar';
import { useHelpUrls } from '../../help-urls/hooks';
import messages from './messages';
@@ -14,30 +15,35 @@ import messages from './messages';
const ExportSidebar = ({ intl, courseId }) => {
const { exportCourse: exportLearnMoreUrl } = useHelpUrls(['exportCourse']);
return (
-
-
-
-
-{intl.formatMessage(messages.learnMoreButtonTitle)}
-
+
+
+
+
+
+{intl.formatMessage(messages.learnMoreButtonTitle)}
+
+
);
};
diff --git a/src/feedback/FeedbackComponent.jsx b/src/feedback/FeedbackComponent.jsx
new file mode 100644
index 0000000000..47cf05ce52
--- /dev/null
+++ b/src/feedback/FeedbackComponent.jsx
@@ -0,0 +1,195 @@
+import React, { useState, useEffect } from 'react'; // Add useEffect import
+import { Check } from '@openedx/paragon/icons';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getConfig } from '@edx/frontend-platform';
+import './feedbackComponent.scss';
+import emoji1 from './emoji/emoji-1.png';
+import emoji2 from './emoji/emoji-2.png';
+import emoji3 from './emoji/emoji-3.png';
+import emoji4 from './emoji/emoji-4.png';
+
+const FeedbackComponent = ({ isOpen, setIsOpen }) => {
+ const [formData, setFormData] = useState({
+ mood: '',
+ feedbackType: '',
+ description: '',
+ });
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [submitStatus, setSubmitStatus] = useState(null);
+
+ const moods = [
+ { value: 'not_good', label: 'Not good', emoji: 
, rating: 1, question: 'What didn’t work for you?' },
+ { value: 'okay', label: 'Okay', emoji: 
, rating: 2, question: 'What can we improve?' },
+ { value: 'good', label: 'Good', emoji: 
, rating: 3, question: 'What excited you most?' },
+ { value: 'love_it', label: 'Love it', emoji: 
, rating: 4, question: 'What excited you most?' },
+ ];
+
+ useEffect(() => {
+ if (!isOpen) {
+ setFormData({ mood: '', feedbackType: '', description: '' });
+ setSubmitStatus(null);
+ setIsSubmitting(false);
+ }
+ }, [isOpen]);
+
+ const handleMoodClick = (value) => {
+ setFormData((prev) => ({ ...prev, mood: value }));
+ };
+
+ const handleInputChange = (e) => {
+ const { name, value } = e.target;
+ setFormData((prev) => ({ ...prev, [name]: value }));
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ if (!formData.mood) return;
+
+ setIsSubmitting(true);
+ try {
+ const httpClient = getAuthenticatedHttpClient();
+ const apiUrl = `${getConfig().LMS_BASE_URL}/feedback/api/v1/submit-feedback/`;
+
+ const selectedMood = moods.find((m) => m.value === formData.mood);
+
+ const payload = {
+ satisfaction_rating: selectedMood.rating,
+ experience: formData.description,
+ feedback_for: formData.feedbackType || '',
+ page_url: window.location.href,
+ extra_responses: {
+ used_dark_mode: '',
+ feedback_time: '',
+ },
+ email: '',
+ interface: 'studio',
+ };
+
+ const response = await httpClient.post(apiUrl, payload);
+ if (response.status !== 200) throw new Error('API error');
+
+ setSubmitStatus('success');
+ setTimeout(() => {
+ setIsOpen(false); // useEffect will handle reset
+ }, 3000);
+ } catch (error) {
+ console.error('Error submitting feedback:', error);
+ setSubmitStatus('error');
+ setIsSubmitting(false);
+ setFormData({ mood: '', feedbackType: '', description: '' });
+ setTimeout(() => {
+ setSubmitStatus(null);
+ }, 2000);
+ }
+ };
+
+ return (
+
+
+
+
+ );
+};
+
+CustomFilesPage.propTypes = {
+ courseId: PropTypes.string.isRequired,
+ // injected
+ intl: intlShape.isRequired,
+};
+
+export default injectIntl(CustomFilesPage);
diff --git a/src/files-and-videos/files-page/FilesPage.jsx b/src/files-and-videos/files-page/FilesPage.jsx
index be100bd55b..02520a81b6 100644
--- a/src/files-and-videos/files-page/FilesPage.jsx
+++ b/src/files-and-videos/files-page/FilesPage.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';
import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
import { CheckboxFilter, Container } from '@openedx/paragon';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
import Placeholder from '../../editors/Placeholder';
import { RequestStatus } from '../../data/constants';
@@ -178,44 +179,49 @@ const FilesPage = ({
}
return (
-
-
-
-
+
+
+
+
+
+
);
};
diff --git a/src/files-and-videos/generic/FileMenu.jsx b/src/files-and-videos/generic/FileMenu.jsx
index 36ea4da174..be8b4bf4f2 100644
--- a/src/files-and-videos/generic/FileMenu.jsx
+++ b/src/files-and-videos/generic/FileMenu.jsx
@@ -6,7 +6,7 @@ import {
IconButton,
Icon,
} from '@openedx/paragon';
-import { MoreHoriz } from '@openedx/paragon/icons';
+import { MoreHoriz, MoreVert } from '@openedx/paragon/icons';
import messages from './messages';
const FileMenu = ({
@@ -26,7 +26,7 @@ const FileMenu = ({
{
+ const lockFile = () => {
+ const { locked, id } = original;
+ handleLockFile(id, !locked);
+ };
+
+ return (
+
+ {/*
+ handleOpenFileInfo(original)}
+ portableUrl={original.portableUrl}
+ id={original.id}
+ fileType={fileType}
+ onDownload={() => handleBulkDownload([{
+ original: {
+ id: original.id,
+ displayName:
+ original.displayName,
+ downloadLink: original?.downloadLink,
+ },
+ }])}
+ openDeleteConfirmation={() => handleOpenDeleteConfirmation([{ original }])}
+ />
+
+ )}
+ /> */}
+
+
+ {/*
+
+ {original.wrapperType}
+
+ {original.transcripts?.length > 0 && */}
+
+ );
+};
+
+CustomGalleryCard.defaultProps = {
+ className: null,
+};
+CustomGalleryCard.propTypes = {
+ className: PropTypes.string,
+ original: PropTypes.shape({
+ displayName: PropTypes.string.isRequired,
+ wrapperType: PropTypes.string.isRequired,
+ locked: PropTypes.bool,
+ externalUrl: PropTypes.string,
+ thumbnail: PropTypes.string,
+ id: PropTypes.string.isRequired,
+ portableUrl: PropTypes.string,
+ status: PropTypes.string,
+ transcripts: PropTypes.arrayOf(PropTypes.string),
+ downloadLink: PropTypes.string,
+ }).isRequired,
+ handleBulkDownload: PropTypes.func.isRequired,
+ handleLockFile: PropTypes.func.isRequired,
+ handleOpenDeleteConfirmation: PropTypes.func.isRequired,
+ handleOpenFileInfo: PropTypes.func.isRequired,
+ thumbnailPreview: PropTypes.func.isRequired,
+ fileType: PropTypes.string.isRequired,
+};
+
+export default CustomGalleryCard;
diff --git a/src/files-and-videos/generic/table-components/GalleryCard.jsx b/src/files-and-videos/generic/table-components/GalleryCard.jsx
index fa21a182cf..37fac36129 100644
--- a/src/files-and-videos/generic/table-components/GalleryCard.jsx
+++ b/src/files-and-videos/generic/table-components/GalleryCard.jsx
@@ -8,6 +8,7 @@ import {
Truncate,
} from '@openedx/paragon';
import { ClosedCaption } from '@openedx/paragon/icons';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
import FileMenu from '../FileMenu';
import FileThumbnail from '../ThumbnailPreview';
@@ -27,6 +28,18 @@ const GalleryCard = ({
};
return (
+
0 &&
+
);
};
@@ -107,4 +121,4 @@ GalleryCard.propTypes = {
fileType: PropTypes.string.isRequired,
};
-export default GalleryCard;
+export default GalleryCard;
\ No newline at end of file
diff --git a/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx b/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx
index 8621237afc..28a3368836 100644
--- a/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx
+++ b/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx
@@ -10,7 +10,7 @@ import {
MenuItem,
useToggle,
} from '@openedx/paragon';
-import { MoreHoriz } from '@openedx/paragon/icons';
+import { MoreHoriz, MoreVert } from '@openedx/paragon/icons';
import messages from '../../messages';
@@ -38,7 +38,7 @@ const MoreInfoColumn = ({
return (
<>
{
+ const navigate = useNavigate();
+
+ const handleGoHome = () => {
+ navigate('/home');
+ };
+
+ const handleGoBack = () => {
+ navigate(-1);
+ };
+
+ return (
+ that manages a single clipboardBroadcastChannel
+ // rather than having a separate channel per useClipboard hook.
+ queryClient.setQueryData(['clipboard'], event.data);
+ };
+
+ // Cleanup function for the BroadcastChannel when the hook is unmounted
+ return () => {
+ clipboardBroadcastChannel.close();
+ };
+ }, [clipboardBroadcastChannel]);
+
+ const isPasteable = canEdit && clipboardData?.content?.status !== CLIPBOARD_STATUS.expired;
+ const showPasteUnit = isPasteable && clipboardData?.content?.blockType === 'vertical';
+ const showPasteXBlock = isPasteable
+ && clipboardData?.content
+ && !STRUCTURAL_XBLOCK_TYPES.includes(clipboardData.content?.blockType);
+
+ return {
+ showPasteUnit,
+ showPasteXBlock,
+ sharedClipboardData: clipboardData,
+ copyToClipboard,
+ };
+};
+
+export default useClipboard;
diff --git a/src/generic/clipboard/index.js b/src/generic/clipboard/index.js
index 2716b10c49..65f2f96125 100644
--- a/src/generic/clipboard/index.js
+++ b/src/generic/clipboard/index.js
@@ -1,2 +1,2 @@
-export { default as useCopyToClipboard } from './hooks/useCopyToClipboard';
+export { default as useClipboard } from './hooks/useClipboard';
export { default as PasteComponent } from './paste-component';
diff --git a/src/generic/clipboard/paste-component/components/PasteButton.tsx b/src/generic/clipboard/paste-component/components/PasteButton.tsx
new file mode 100644
index 0000000000..d38f5a45f0
--- /dev/null
+++ b/src/generic/clipboard/paste-component/components/PasteButton.tsx
@@ -0,0 +1,22 @@
+import { Button } from '@openedx/paragon';
+import { ContentCopy as ContentCopyIcon } from '@openedx/paragon/icons';
+
+interface PasteButtonProps {
+ onClick: () => void;
+ text: string;
+ className?: string;
+}
+
+const PasteButton = ({ onClick, text, className }: PasteButtonProps) => (
+
+);
+
+export default PasteButton;
diff --git a/src/generic/clipboard/paste-component/components/PopoverContent.tsx b/src/generic/clipboard/paste-component/components/PopoverContent.tsx
new file mode 100644
index 0000000000..70ac2808c9
--- /dev/null
+++ b/src/generic/clipboard/paste-component/components/PopoverContent.tsx
@@ -0,0 +1,51 @@
+import { Link } from 'react-router-dom';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon, Popover, Stack } from '@openedx/paragon';
+import { OpenInNew as OpenInNewIcon } from '@openedx/paragon/icons';
+
+import type { ClipboardStatus } from '../../../data/api';
+import messages from '../messages';
+
+interface PopoverContentProps {
+ clipboardData: ClipboardStatus,
+}
+
+const PopoverContent = ({ clipboardData } : PopoverContentProps) => {
+ const intl = useIntl();
+ const { sourceEditUrl, content, sourceContextTitle } = clipboardData;
+
+ // istanbul ignore if: this should never happen
+ if (!content) {
+ return null;
+ }
+
+ return (
+
+
+
+ {content.displayName}
+ {sourceEditUrl && (
+
+
+
+ );
+};
+
+export default PopoverContent;
diff --git a/src/generic/clipboard/paste-component/components/WhatsInClipboard.tsx b/src/generic/clipboard/paste-component/components/WhatsInClipboard.tsx
new file mode 100644
index 0000000000..78fd3e17f8
--- /dev/null
+++ b/src/generic/clipboard/paste-component/components/WhatsInClipboard.tsx
@@ -0,0 +1,54 @@
+import { useRef } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon } from '@openedx/paragon';
+import { Question as QuestionIcon } from '@openedx/paragon/icons';
+
+import messages from '../messages';
+
+interface WhatsInClipboardProps {
+ handlePopoverToggle: (show: boolean) => void;
+ togglePopover: (show: boolean) => void;
+ popoverElementRef: React.RefObject;
+}
+
+const WhatsInClipboard = ({
+ handlePopoverToggle, togglePopover, popoverElementRef,
+}: WhatsInClipboardProps) => {
+ const intl = useIntl();
+ const triggerElementRef = useRef(null);
+
+ const handleKeyDown = ({ key }) => {
+ if (key === 'Tab') {
+ popoverElementRef.current?.focus();
+ handlePopoverToggle(true);
+ }
+ };
+
+ return (
+
+
+
+ );
+};
+
+export default PasteComponent;
diff --git a/src/generic/clipboard/paste-component/messages.ts b/src/generic/clipboard/paste-component/messages.ts
new file mode 100644
index 0000000000..77fbcba2b8
--- /dev/null
+++ b/src/generic/clipboard/paste-component/messages.ts
@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ popoverContentText: {
+ id: 'course-authoring.generic.paste-component.popover.content.text',
+ defaultMessage: 'From:',
+ description: 'The popover content label before the source course name of the copied content.',
+ },
+ pasteButtonWhatsInClipboardText: {
+ id: 'course-authoring.generic.paste-component.paste-button.whats-in-clipboard.text',
+ defaultMessage: "What's in my clipboard?",
+ description: 'The popover trigger button text of the info about copied content.',
+ },
+});
+
+export default messages;
diff --git a/src/generic/configure-modal/BasicTab.jsx b/src/generic/configure-modal/BasicTab.jsx
index fc924a9821..f0be654ed6 100644
--- a/src/generic/configure-modal/BasicTab.jsx
+++ b/src/generic/configure-modal/BasicTab.jsx
@@ -1,5 +1,6 @@
+import React, { useState } from 'react';
import PropTypes from 'prop-types';
-import { Stack, Form } from '@openedx/paragon';
+import { Stack, Form, Dropdown } from '@openedx/paragon';
import { FormattedMessage, injectIntl, useIntl } from '@edx/frontend-platform/i18n';
import { DatepickerControl, DATEPICKER_TYPES } from '../datepicker-control';
@@ -13,6 +14,7 @@ const BasicTab = ({
isSelfPaced,
}) => {
const intl = useIntl();
+ const [graderDropdownOpen, setGraderDropdownOpen] = useState(false);
const {
releaseDate,
@@ -20,11 +22,17 @@ const BasicTab = ({
dueDate,
} = values;
- const onChangeGraderType = (e) => setFieldValue('graderType', e.target.value);
+ const onChangeGraderType = (value) => {
+ setFieldValue('graderType', value);
+ setGraderDropdownOpen(false);
+ };
- const createOptions = () => courseGraders.map((option) => (
-
- ));
+ const getGraderDisplayValue = () => {
+ if (graderType === 'notgraded') {
+ return intl.formatMessage(messages.notGradedTypeOption);
+ }
+ return graderType;
+ };
return (
<>
@@ -44,7 +52,7 @@ const BasicTab = ({
setFieldValue('releaseDate', val)}
/>
@@ -59,17 +67,36 @@ const BasicTab = ({
-
- {createOptions()}
-
+
+ {getGraderDisplayValue()}
+
+
+ onChangeGraderType('notgraded')}
+ className="titaned-grader-dropdown-item"
+ >
+ {intl.formatMessage(messages.notGradedTypeOption)}
+
+ {courseGraders.map((option) => (
+ onChangeGraderType(option)}
+ className="titaned-grader-dropdown-item"
+ >
+ {option}
+
+ ))}
+
+
{!isSelfPaced && (
{this.props.noOptionsMessage}
+
+
+
+
+ );
+ }
+}
+
+CustomTypeaheadDropdown.defaultProps = {
+ options: null,
+ floatingLabel: null,
+ handleFocus: null,
+ handleChange: null,
+ handleBlur: null,
+ helpMessage: '',
+ placeholder: '',
+ value: null,
+ errorMessage: null,
+ readOnly: false,
+ controlClassName: '',
+ allowNewOption: false,
+ newOptionButtonLabel: '',
+ addNewOption: null,
+};
+
+CustomTypeaheadDropdown.propTypes = {
+ noOptionsMessage: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ options: PropTypes.arrayOf(PropTypes.string),
+ floatingLabel: PropTypes.string,
+ handleFocus: PropTypes.func,
+ handleChange: PropTypes.func,
+ handleBlur: PropTypes.func,
+ helpMessage: PropTypes.string,
+ placeholder: PropTypes.string,
+ value: PropTypes.string,
+ errorMessage: PropTypes.string,
+ readOnly: PropTypes.bool,
+ controlClassName: PropTypes.string,
+ allowNewOption: PropTypes.bool,
+ newOptionButtonLabel: PropTypes.string,
+ addNewOption: PropTypes.func,
+};
+
+export default onClickOutside(CustomTypeaheadDropdown);
\ No newline at end of file
diff --git a/src/editors/sharedComponents/CustomTypeaheadDropdown/index.test.jsx b/src/editors/sharedComponents/CustomTypeaheadDropdown/index.test.jsx
new file mode 100644
index 0000000000..66d6ee7d90
--- /dev/null
+++ b/src/editors/sharedComponents/CustomTypeaheadDropdown/index.test.jsx
@@ -0,0 +1,137 @@
+import {
+ act,
+ fireEvent,
+ render,
+ screen,
+ waitFor,
+ within,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import CustomTypeaheadDropdown from '.';
+
+jest.unmock('@openedx/paragon');
+jest.unmock('@openedx/paragon/icons');
+
+const defaultProps = {
+ as: 'input',
+ name: 'OrganizationDropdown',
+ floatingLabel: 'floatingLabel text',
+ options: null,
+ handleFocus: null,
+ handleChange: null,
+ handleBlur: null,
+ value: null,
+ errorMessage: null,
+ errorCode: null,
+ readOnly: false,
+ noOptionsMessage: 'No options',
+};
+const renderComponent = (props) => render(
+ {this.state.dropDownItems.length > 0 ? this.state.dropDownItems : dropDownEmptyList}
+
+ {intl.formatMessage(messages.description1, { studioShortName: getConfig().STUDIO_SHORT_NAME })}
+{intl.formatMessage(messages.description2)}
+
+
+
+
+
+ )}
+
+ {exportTriggered &&
+
+ null}
+ />
+
+
+ );
+};
+
+CustomCourseExportPage.propTypes = {
+ intl: intlShape.isRequired,
+ courseId: PropTypes.string.isRequired,
+};
+
+CustomCourseExportPage.defaultProps = {};
+
+export default injectIntl(CustomCourseExportPage);
diff --git a/src/export-page/export-sidebar/CustomExportSidebar.jsx b/src/export-page/export-sidebar/CustomExportSidebar.jsx
new file mode 100644
index 0000000000..00a294d5d3
--- /dev/null
+++ b/src/export-page/export-sidebar/CustomExportSidebar.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+ injectIntl,
+ intlShape,
+} from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import { Hyperlink } from '@openedx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+
+import { HelpSidebar } from '../../generic/help-sidebar';
+import { useHelpUrls } from '../../help-urls/hooks';
+import messages from './messages';
+
+const CustomExportSidebar = ({ intl, courseId }) => {
+ const { exportCourse: exportLearnMoreUrl } = useHelpUrls(['exportCourse']);
+ return (
+ {intl.formatMessage(messages.title1)}
+{intl.formatMessage(messages.description1, { studioShortName: getConfig().STUDIO_SHORT_NAME })}
++
{intl.formatMessage(messages.exportedContent)}
+
+
+ {intl.formatMessage(messages.exportedContentHeading)}
+-
+
- {intl.formatMessage(messages.content1)} +
- {intl.formatMessage(messages.content2)} +
- {intl.formatMessage(messages.content3)} +
- {intl.formatMessage(messages.content4)} +
- {intl.formatMessage(messages.content5)} +
+
+ {intl.formatMessage(messages.notExportedContent)}
+-
+
- {intl.formatMessage(messages.content6)} +
- {intl.formatMessage(messages.content7)} +
+
{intl.formatMessage(messages.openDownloadFile)}
+{intl.formatMessage(messages.openDownloadFileDescription)}
++
{intl.formatMessage(messages.title1)}
-{intl.formatMessage(messages.description1, { studioShortName: getConfig().STUDIO_SHORT_NAME })}
--
{intl.formatMessage(messages.exportedContent)}
-{intl.formatMessage(messages.exportedContentHeading)}
--
-
- {intl.formatMessage(messages.content1)} -
- {intl.formatMessage(messages.content2)} -
- {intl.formatMessage(messages.content3)} -
- {intl.formatMessage(messages.content4)} -
- {intl.formatMessage(messages.content5)} -
{intl.formatMessage(messages.notExportedContent)}
--
-
- {intl.formatMessage(messages.content6)} -
- {intl.formatMessage(messages.content7)} -
-
{intl.formatMessage(messages.openDownloadFile)}
-{intl.formatMessage(messages.openDownloadFileDescription)}
--
{intl.formatMessage(messages.title1)}
+{intl.formatMessage(messages.description1, { studioShortName: getConfig().STUDIO_SHORT_NAME })}
++
{intl.formatMessage(messages.exportedContent)}
+{intl.formatMessage(messages.exportedContentHeading)}
+-
+
- {intl.formatMessage(messages.content1)} +
- {intl.formatMessage(messages.content2)} +
- {intl.formatMessage(messages.content3)} +
- {intl.formatMessage(messages.content4)} +
- {intl.formatMessage(messages.content5)} +
{intl.formatMessage(messages.notExportedContent)}
+-
+
- {intl.formatMessage(messages.content6)} +
- {intl.formatMessage(messages.content7)} +
+
{intl.formatMessage(messages.openDownloadFile)}
+{intl.formatMessage(messages.openDownloadFileDescription)}
++
+
+
+ {isOpen && (
+
+ );
+};
+
+export default FeedbackComponent;
\ No newline at end of file
diff --git a/src/feedback/emoji/emoji-1.png b/src/feedback/emoji/emoji-1.png
new file mode 100644
index 0000000000..64aed54dcf
Binary files /dev/null and b/src/feedback/emoji/emoji-1.png differ
diff --git a/src/feedback/emoji/emoji-2.png b/src/feedback/emoji/emoji-2.png
new file mode 100644
index 0000000000..8d19ed7bf2
Binary files /dev/null and b/src/feedback/emoji/emoji-2.png differ
diff --git a/src/feedback/emoji/emoji-3.png b/src/feedback/emoji/emoji-3.png
new file mode 100644
index 0000000000..67834f0ec4
Binary files /dev/null and b/src/feedback/emoji/emoji-3.png differ
diff --git a/src/feedback/emoji/emoji-4.png b/src/feedback/emoji/emoji-4.png
new file mode 100644
index 0000000000..dd484b6bf2
Binary files /dev/null and b/src/feedback/emoji/emoji-4.png differ
diff --git a/src/feedback/feedbackComponent.scss b/src/feedback/feedbackComponent.scss
new file mode 100644
index 0000000000..945549db2d
--- /dev/null
+++ b/src/feedback/feedbackComponent.scss
@@ -0,0 +1,374 @@
+.feedback-container {
+ position: fixed;
+ top: 50%;
+ right: 12px;
+ z-index: 1002;
+ transform: translateY(-50%);
+
+ .feedback-button {
+ background: var(--primary);
+ color: var(--text-white);
+ border: none;
+ border-radius: 6px 0 0 6px;
+ padding: 8px 12px;
+ font-weight: 500;
+ cursor: pointer;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ transition: background 0.3s ease, transform 0.2s ease;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ height: 100%;
+ min-height: 100px;
+ width: 35px;
+
+ &.open {
+ background: var(--danger);
+ height: 100%;
+ min-height: 70px;
+ }
+
+ .text {
+ white-space: nowrap;
+ font-size: 16px;
+ transform: rotate(270deg);
+ }
+
+ &:focus {
+ outline: none;
+ outline-offset: none;
+ }
+ }
+
+ .feedback-form-container {
+ position: absolute;
+ top: 50%;
+ right: calc(100% + 10px);
+ transform: translateY(-50%);
+ width: 340px;
+ background: var(--bg-surface);
+ border-radius: 8px;
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+ z-index: 1003;
+ max-height: 508px;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+ padding: 12px 18px;
+ }
+
+ .feedback-question {
+ font-size: 18px;
+ font-weight: 600;
+ color: var(--text-primary);
+ margin-bottom: 15px;
+ }
+
+ .feedback-body {
+ padding: 0;
+ }
+
+ .form-label {
+ display: block;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--text-primary);
+ }
+
+ .mood-rating {
+ display: flex;
+ gap: 16px;
+ overflow: visible;
+ }
+
+ .mood-icon-wrapper {
+ position: relative;
+ pointer-events: all;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+
+ .mood-tooltip {
+ display: none;
+ position: absolute;
+ top: -30px;
+ left: 50%;
+ transform: translateX(-50%);
+ background: var(--text-primary);
+ color: var(--text-white);
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ white-space: nowrap;
+ z-index: 1004;
+ transition: opacity 0.2s ease;
+ opacity: 0;
+ }
+
+ &:hover .mood-tooltip {
+ display: block;
+ opacity: 1;
+ }
+ }
+
+ .mood-icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ font-size: 32px;
+ /* Adjusted for emoji size */
+ cursor: pointer;
+ color: var(--primary);
+ transition: transform 0.2s ease, color 0.2s ease;
+
+ &.selected {
+ transform: scale(1.3);
+ }
+
+ &:hover {
+ transform: scale(1.3);
+ }
+
+ &:focus {
+ outline: none;
+ outline-offset: none;
+ }
+ }
+
+ .form-group {
+ margin-bottom: 15px;
+ }
+
+ .form-textarea {
+ width: 100%;
+ padding: 10px;
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ font-size: 14px;
+ background: var(--bg-surface);
+ color: var(--text-primary);
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
+ resize: vertical;
+ min-height: 80px;
+
+ &:focus {
+ border-color: var(--primary);
+ outline: none;
+ }
+
+ &::placeholder {
+ color: var(--text-muted);
+ }
+ }
+
+ .radio-group {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: -12px;
+ }
+
+ .radio-label {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 14px;
+ color: var(--text-primary);
+ cursor: pointer;
+
+ .radio-input {
+ width: 18px;
+ height: 18px;
+ margin: 0;
+ accent-color: var(--primary);
+ transition: transform 0.2s ease;
+
+ &:hover {
+ transform: scale(1.1);
+ }
+
+ &:focus {
+ outline: none;
+ outline-offset: none;
+ }
+ }
+ }
+
+ .submit-button {
+ background: var(--primary);
+ color: var(--text-white);
+ padding: 8px 12px;
+ margin: 0;
+ border: none;
+ border-radius: 6px;
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: background 0.2s ease;
+
+ &:hover:not(:disabled) {
+ color: var(--primary);
+ background: var(--primary-light);
+ }
+
+ &:disabled {
+ background: var(--disabled);
+ cursor: not-allowed;
+ }
+
+ &:focus {
+ outline: none;
+ outline-offset: none;
+ }
+ }
+
+ .spinner {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ border: 2px solid var(--text-white);
+ border-top: 2px solid transparent;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ margin-right: 6px;
+ }
+
+ @keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+ .success-message,
+ .error-message {
+ text-align: center;
+ padding: 20px;
+ font-size: 16px;
+ font-weight: 700;
+ color: var(--text-primary);
+ }
+
+ .success-message {
+ color: var(--success);
+
+ .check-icon {
+ width: 36px;
+ height: 36px;
+ color: var(--success);
+ margin-bottom: 10px;
+ }
+ }
+
+ .error-message {
+ color: var(--danger);
+ }
+}
+
+@media only screen and (max-width : 480px) {
+ .feedback-container {
+ .feedback-button {
+ padding: 6px 8px;
+ min-height: 80px;
+ width: 30px;
+
+ &.open {
+ min-height: 60px;
+ }
+
+ .text {
+ font-size: 13px;
+ }
+ }
+
+ .feedback-form-container {
+ width: 230px;
+ max-height: 350px;
+ padding: 10px 14px;
+ }
+
+ .feedback-question {
+ font-size: 14px;
+ line-height: 1.3;
+ margin-bottom: 8px;
+ }
+
+ .form-label {
+ font-size: 12px;
+ }
+
+ .mood-rating {
+ gap: 8px;
+ }
+
+ .mood-icon-wrapper {
+ .mood-tooltip {
+ padding: 3px 6px;
+ font-size: 10px;
+ }
+ }
+
+ .mood-icon {
+ width: 28px;
+ height: 28px;
+
+ &.selected {
+ transform: scale(1.2);
+ }
+
+ &:hover {
+ transform: scale(1.2);
+ }
+ }
+
+ .form-textarea {
+ font-size: 12px;
+ min-height: 65px;
+ }
+
+ .radio-label {
+ font-size: 12px;
+ }
+
+ .radio-input {
+ width: 14px;
+ height: 14px;
+ }
+
+ .submit-button {
+ padding: 6px 8px;
+ font-size: 10px;
+
+ }
+
+ .spinner {
+ width: 12px;
+ height: 12px;
+ margin-right: 4px;
+ }
+
+ .success-message,
+ .error-message {
+ text-align: center;
+ padding: 16px;
+ font-size: 12px;
+ }
+ .success-message {
+ .check-icon {
+ width: 28px;
+ height: 28px;
+ margin-bottom: 8px;
+ }
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/feedbackBanner/FeedbackLink.jsx b/src/feedbackBanner/FeedbackLink.jsx
new file mode 100644
index 0000000000..f238eb49cc
--- /dev/null
+++ b/src/feedbackBanner/FeedbackLink.jsx
@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from 'react';
+import { Icon } from '@openedx/paragon';
+import { Close } from '@openedx/paragon/icons';
+import './feedbackLink.scss';
+
+
+const FeedbackLink = ({ isOpen, setIsOpen }) => {
+ const [bannerShow, setBannerShow] = useState(() => {
+ const lastClosed = localStorage.getItem('bannerClosedTimestamp');
+ if (lastClosed) {
+ const timeDiff = Date.now() - parseInt(lastClosed, 10);
+ const hoursDiff = timeDiff / (1000 * 60 * 60);
+ return hoursDiff >= 24;
+ }
+ return true;
+ });
+
+ const [isAnimating, setIsAnimating] = useState(false);
+
+ const handleClose = () => {
+ setIsAnimating(true);
+ setTimeout(() => {
+ setBannerShow(false);
+ setIsAnimating(false);
+ localStorage.setItem('bannerClosedTimestamp', Date.now().toString());
+ }, 1000);
+ };
+
+ useEffect(() => {
+ const checkBannerReset = () => {
+ const lastClosed = localStorage.getItem('bannerClosedTimestamp');
+ if (lastClosed) {
+ const timeDiff = Date.now() - parseInt(lastClosed, 10);
+ const hoursDiff = timeDiff / (1000 * 60 * 60);
+ if (hoursDiff >= 24) {
+ localStorage.removeItem('bannerClosedTimestamp');
+ setBannerShow(true);
+ }
+ }
+ };
+
+ const interval = setInterval(checkBannerReset, 60 * 60 * 1000);
+ return () => clearInterval(interval);
+ }, []);
+
+ return (
+
+
+ )}
+
+ {submitStatus === 'success' ? (
+
+
+
+ ) : submitStatus === 'error' ? (
+ Thank you! Your feedback helps us make your experience even better.
+
+
+ ) : (
+ <>
+ Something went wrong. Please try again.
+How's your experience with the new Studio?
+
+
+ )}
+
+
+ );
+};
+
+export default FeedbackLink;
diff --git a/src/feedbackBanner/feedbackLink.scss b/src/feedbackBanner/feedbackLink.scss
new file mode 100644
index 0000000000..0c06e392de
--- /dev/null
+++ b/src/feedbackBanner/feedbackLink.scss
@@ -0,0 +1,129 @@
+.feedback_banner {
+ width: 100%;
+ height: 26px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ gap: 4px;
+ font-size: 1.05rem;
+ font-weight: 600;
+ color: var(--primary);
+ background: var(--bg-body);
+ border: 1px solid var(--border-color);
+ text-align: center;
+ padding: 0;
+ overflow: hidden;
+ max-height: 26px;
+ .message_wrape{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: row;
+ }
+
+ &.showBanner {
+ animation: expandHeight 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+ }
+
+ &.hideBanner {
+ animation: collapseHeight 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+ }
+
+ .feedback_banner_button {
+ text-decoration: underline;
+ margin: 0 4px;
+
+ &:hover {
+ color: var(--primary);
+ }
+ }
+
+ .close_icon {
+ position: absolute;
+ right: 30px;
+ cursor: pointer;
+ height: 18px;
+ width: 18px;
+ }
+}
+
+
+@keyframes expandHeight {
+ from {
+ max-height: 0;
+ opacity: 0;
+ }
+
+ to {
+ max-height: 26px;
+ opacity: 1;
+ }
+}
+
+@keyframes collapseHeight {
+ from {
+ max-height: 26px;
+ opacity: 1;
+ }
+
+ to {
+ max-height: 0;
+ opacity: 0;
+ }
+}
+
+@media only screen and (max-width : 900px) {
+ .feedback_banner {
+ .desktopview {
+ display: none;
+ }
+ }
+}
+
+@media only screen and (max-width : 650px) {
+ .feedback_banner {
+ height: 40px;
+ max-height: 40px;
+ font-size: 0.8rem;
+ flex-direction: row;
+
+ .message_wrape{
+ flex-direction: column;
+ line-height: 1.25;
+ margin-right: 18px;
+ }
+ &.showBanner {
+ animation: expandHeightPhone 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+ }
+
+ &.hideBanner {
+ animation: collapseHeightPhone 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+ }
+ }
+}
+
+
+@keyframes expandHeightPhone {
+ from {
+ max-height: 0;
+ opacity: 0;
+ }
+
+ to {
+ max-height: 40px;
+ opacity: 1;
+ }
+}
+
+@keyframes collapseHeightPhone {
+ from {
+ max-height: 40px;
+ opacity: 1;
+ }
+
+ to {
+ max-height: 0;
+ opacity: 0;
+ }
+}
\ No newline at end of file
diff --git a/src/files-and-videos/files-page/CustomFilesPage.jsx b/src/files-and-videos/files-page/CustomFilesPage.jsx
new file mode 100644
index 0000000000..2ae28a45b1
--- /dev/null
+++ b/src/files-and-videos/files-page/CustomFilesPage.jsx
@@ -0,0 +1,230 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { CheckboxFilter, Container } from '@openedx/paragon';
+import Placeholder from '../../editors/Placeholder';
+
+import { RequestStatus } from '../../data/constants';
+import { useModels, useModel } from '../../generic/model-store';
+import {
+ addAssetFile,
+ deleteAssetFile,
+ fetchAssets,
+ updateAssetLock,
+ fetchAssetDownload,
+ getUsagePaths,
+ resetErrors,
+ updateAssetOrder,
+ validateAssetFiles,
+} from './data/thunks';
+import messages from './messages';
+import FilesPageProvider from './FilesPageProvider';
+import getPageHeadTitle from '../../generic/utils';
+import {
+ AccessColumn,
+ ActiveColumn,
+ EditFileErrors,
+ FileTable,
+ ThumbnailColumn,
+} from '../generic';
+import { getFileSizeToClosestByte } from '../../utils';
+import FileThumbnail from './FileThumbnail';
+import FileInfoModalSidebar from './FileInfoModalSidebar';
+import FileValidationModal from './FileValidationModal';
+
+const CustomFilesPage = ({
+ courseId,
+ // injected
+ intl,
+}) => {
+ const dispatch = useDispatch();
+ const courseDetails = useModel('courseDetails', courseId);
+ document.title = getPageHeadTitle(courseDetails?.name, intl.formatMessage(messages.heading));
+
+ useEffect(() => {
+ dispatch(fetchAssets(courseId));
+ }, [courseId]);
+
+ const {
+ assetIds,
+ loadingStatus,
+ addingStatus: addAssetStatus,
+ deletingStatus: deleteAssetStatus,
+ updatingStatus: updateAssetStatus,
+ usageStatus: usagePathStatus,
+ errors: errorMessages,
+ } = useSelector(state => state.assets);
+
+ const handleErrorReset = (error) => dispatch(resetErrors(error));
+ const handleDeleteFile = (id) => dispatch(deleteAssetFile(courseId, id));
+ const handleDownloadFile = (selectedRows) => dispatch(fetchAssetDownload({ selectedRows, courseId }));
+ const handleAddFile = (files) => {
+ handleErrorReset({ errorType: 'add' });
+ dispatch(validateAssetFiles(courseId, files));
+ };
+ const handleFileOverwrite = (close, files) => {
+ Object.values(files).forEach(file => dispatch(addAssetFile(courseId, file, true)));
+ close();
+ };
+ const handleLockFile = (fileId, locked) => {
+ handleErrorReset({ errorType: 'lock' });
+ dispatch(updateAssetLock({ courseId, assetId: fileId, locked }));
+ };
+ const handleUsagePaths = (asset) => dispatch(getUsagePaths({ asset, courseId }));
+ const handleFileOrder = ({ newFileIdOrder, sortType }) => {
+ dispatch(updateAssetOrder(courseId, newFileIdOrder, sortType));
+ };
+
+ const thumbnailPreview = (props) => FileThumbnail(props);
+ const infoModalSidebar = (asset) => FileInfoModalSidebar({
+ asset,
+ handleLockedAsset: handleLockFile,
+ });
+
+ const assets = useModels('assets', assetIds);
+ const data = {
+ fileIds: assetIds,
+ loadingStatus,
+ usagePathStatus,
+ usageErrorMessages: errorMessages.usageMetrics,
+ fileType: 'file',
+ };
+ const maxFileSize = 20 * 1048576;
+
+ const activeColumn = {
+ id: 'activeStatus',
+ Header: 'Active',
+ accessor: 'activeStatus',
+ Cell: ({ row }) => ActiveColumn({ row, pageLoadStatus: loadingStatus }),
+ Filter: CheckboxFilter,
+ filter: 'exactTextCase',
+ filterChoices: [
+ { name: intl.formatMessage(messages.activeCheckboxLabel), value: 'active' },
+ { name: intl.formatMessage(messages.inactiveCheckboxLabel), value: 'inactive' },
+ ],
+ };
+ const accessColumn = {
+ id: 'lockStatus',
+ Header: 'Access',
+ accessor: 'lockStatus',
+ Cell: ({ row }) => AccessColumn({ row }),
+ Filter: CheckboxFilter,
+ filterChoices: [
+ { name: intl.formatMessage(messages.lockedCheckboxLabel), value: 'locked' },
+ { name: intl.formatMessage(messages.publicCheckboxLabel), value: 'public' },
+ ],
+ };
+ const thumbnailColumn = {
+ id: 'thumbnail',
+ Header: '',
+ Cell: ({ row }) => ThumbnailColumn({ row, thumbnailPreview }),
+ };
+ const fileSizeColumn = {
+ id: 'fileSize',
+ Header: 'File size',
+ accessor: 'fileSize',
+ Cell: ({ row }) => {
+ const { fileSize } = row.original;
+ return getFileSizeToClosestByte(fileSize);
+ },
+ };
+
+ const tableColumns = [
+ { ...thumbnailColumn },
+ {
+ Header: 'File name',
+ accessor: 'displayName',
+ },
+ { ...fileSizeColumn },
+ {
+ Header: 'Type',
+ accessor: 'wrapperType',
+ Filter: CheckboxFilter,
+ filter: 'includesValue',
+ filterChoices: [
+ {
+ name: intl.formatMessage(messages.codeCheckboxLabel),
+ value: 'code',
+ },
+ {
+ name: intl.formatMessage(messages.imageCheckboxLabel),
+ value: 'image',
+ },
+ {
+ name: intl.formatMessage(messages.documentCheckboxLabel),
+ value: 'document',
+ },
+ {
+ name: intl.formatMessage(messages.audioCheckboxLabel),
+ value: 'audio',
+ },
+ {
+ name: intl.formatMessage(messages.otherCheckboxLabel),
+ value: 'other',
+ },
+ ],
+ },
+ { ...activeColumn },
+ { ...accessColumn },
+ ];
+
+ if (loadingStatus === RequestStatus.DENIED) {
+ return (
+
+
+
+
+ You're using the new Studio (Beta). We're refining the experience. Your
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ {loadingStatus !== RequestStatus.FAILED && (
+ <>
+
-
- {loadingStatus !== RequestStatus.FAILED && (
- <>
-
+
+ {loadingStatus !== RequestStatus.FAILED && (
+ <>
+
+
+
+
+ {original.displayName}
+
+
+
+
+ handleOpenFileInfo(original)}
+ portableUrl={original.portableUrl}
+ id={original.id}
+ fileType={fileType}
+ onDownload={() => handleBulkDownload([{
+ original: {
+ id: original.id,
+ displayName:
+ original.displayName,
+ downloadLink: original?.downloadLink,
+ },
+ }])}
+ openDeleteConfirmation={() => handleOpenDeleteConfirmation([{ original }])}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default PageNotFound;
diff --git a/src/generic/PageNotFound/messages.js b/src/generic/PageNotFound/messages.js
new file mode 100644
index 0000000000..0904c8586d
--- /dev/null
+++ b/src/generic/PageNotFound/messages.js
@@ -0,0 +1,31 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ title: {
+ id: 'pageNotFound.title',
+ defaultMessage: 'Page Not Found',
+ description: 'Title for the 404 error page',
+ },
+ description: {
+ id: 'pageNotFound.description',
+ defaultMessage: 'Sorry, the page you are looking for doesn\'t exist or has been moved.',
+ description: 'Description message for the 404 error page',
+ },
+ goHome: {
+ id: 'pageNotFound.goHome',
+ defaultMessage: 'Go to Dashboard',
+ description: 'Button text to navigate back to the dashboard',
+ },
+ goBack: {
+ id: 'pageNotFound.goBack',
+ defaultMessage: 'Go Back',
+ description: 'Button text to go back to the previous page',
+ },
+ help: {
+ id: 'pageNotFound.help',
+ defaultMessage: 'If you believe this is an error, please contact support.',
+ description: 'Help text for the 404 error page',
+ },
+});
+
+export default messages;
diff --git a/src/generic/clipboard/hooks/messages.ts b/src/generic/clipboard/hooks/messages.ts
new file mode 100644
index 0000000000..e41740660a
--- /dev/null
+++ b/src/generic/clipboard/hooks/messages.ts
@@ -0,0 +1,21 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ copying: {
+ id: 'copypaste.copying',
+ defaultMessage: 'Copying',
+ description: 'Message shown when copying content to clipboard',
+ },
+ done: {
+ id: 'copypaste.done',
+ defaultMessage: 'Copied to clipboard',
+ description: 'Message shown when content is copied to clipboard',
+ },
+ error: {
+ id: 'copypaste.error',
+ defaultMessage: 'Error copying to clipboard',
+ description: 'Message shown when an error occurs while copying content to clipboard',
+ },
+});
+
+export default messages;
diff --git a/src/generic/clipboard/hooks/useClipboard.ts b/src/generic/clipboard/hooks/useClipboard.ts
new file mode 100644
index 0000000000..19ac231eca
--- /dev/null
+++ b/src/generic/clipboard/hooks/useClipboard.ts
@@ -0,0 +1,82 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useContext, useEffect, useState } from 'react';
+
+import { getClipboard, updateClipboard } from '../../data/api';
+import {
+ CLIPBOARD_STATUS,
+ STRUCTURAL_XBLOCK_TYPES,
+ STUDIO_CLIPBOARD_CHANNEL,
+} from '../../../constants';
+import { ToastContext } from '../../toast-context';
+import messages from './messages';
+
+/**
+ * Custom React hook for managing clipboard functionality.
+ *
+ * @param canEdit - Flag indicating whether the clipboard is editable.
+ * @returns - An object containing state variables and functions related to clipboard functionality.
+ * @property showPasteUnit - Flag indicating whether the "Paste Unit" button should be visible.
+ * @property showPasteXBlock - Flag indicating whether the "Paste XBlock" button should be visible.
+ * @property sharedClipboardData - The shared clipboard data object.
+ * @property copyToClipboard - Function to copy the current selection to the clipboard.
+ */
+const useClipboard = (canEdit: boolean = true) => {
+ const intl = useIntl();
+ const [clipboardBroadcastChannel] = useState(() => new BroadcastChannel(STUDIO_CLIPBOARD_CHANNEL));
+ const { data: clipboardData } = useQuery({
+ queryKey: ['clipboard'],
+ queryFn: getClipboard,
+ refetchInterval: (data) => (data?.content?.status === CLIPBOARD_STATUS.loading ? 1000 : false),
+ });
+ const { showToast } = useContext(ToastContext);
+
+ const queryClient = useQueryClient();
+
+ const copyToClipboard = async (usageKey: string) => {
+ // This code is synchronous for now, but it could be made asynchronous in the future.
+ // In that case, the `done` message should be shown after the asynchronous operation completes.
+ showToast(intl.formatMessage(messages.copying));
+ try {
+ const newData = await updateClipboard(usageKey);
+ clipboardBroadcastChannel.postMessage(newData);
+ queryClient.setQueryData(['clipboard'], newData);
+ showToast(intl.formatMessage(messages.done));
+ } catch (error) {
+ showToast(intl.formatMessage(messages.error));
+ }
+ };
+
+ useEffect(() => {
+ // Handle messages from the broadcast channel
+ clipboardBroadcastChannel.onmessage = (event) => {
+ // Note: if this useClipboard() hook is used many times on one page,
+ // this will result in many separate calls to setQueryData() whenever
+ // the clipboard contents change, but that is fine and shouldn't actually
+ // cause any issues. If it did, we could refactor this into a
+ //
+ {/* 404 Number */}
+
+
+
+
+
+ {/* Error Message */}
+ 404
+
+
+
+
+
+ {/* Action Buttons */}
+
+
+
+
+
+
+
+
+ {/* Help Text */}
+
+
+
+
+
+ {content.blockTypeDisplay}
+
+ {intl.formatMessage(messages.popoverContentText)}
+
+ {sourceContextTitle}
+
+
+ handlePopoverToggle(true)}
+ onMouseLeave={() => handlePopoverToggle(false)}
+ onFocus={() => togglePopover(true)}
+ onBlur={() => togglePopover(false)}
+ >
+
+ );
+};
+
+export default WhatsInClipboard;
diff --git a/src/generic/clipboard/paste-component/components/index.ts b/src/generic/clipboard/paste-component/components/index.ts
new file mode 100644
index 0000000000..1336513b37
--- /dev/null
+++ b/src/generic/clipboard/paste-component/components/index.ts
@@ -0,0 +1,3 @@
+export { default as WhatsInClipboard } from './WhatsInClipboard';
+export { default as PasteButton } from './PasteButton';
+export { default as PopoverContent } from './PopoverContent';
diff --git a/src/generic/clipboard/paste-component/index.tsx b/src/generic/clipboard/paste-component/index.tsx
new file mode 100644
index 0000000000..0ebc243098
--- /dev/null
+++ b/src/generic/clipboard/paste-component/index.tsx
@@ -0,0 +1,54 @@
+import { useRef, useState } from 'react';
+import { OverlayTrigger, Popover } from '@openedx/paragon';
+
+import { PopoverContent, PasteButton, WhatsInClipboard } from './components';
+import type { ClipboardStatus } from '../../data/api';
+
+interface PasteComponentProps {
+ onClick: () => void;
+ clipboardData: ClipboardStatus;
+ text: string;
+ className?: string;
+}
+
+const PasteComponent = ({
+ onClick, clipboardData, text, className,
+}: PasteComponentProps) => {
+ const [showPopover, togglePopover] = useState(false);
+ const popoverElementRef = useRef(null);
+
+ const handlePopoverToggle = (isOpen) => togglePopover(isOpen);
+
+ const renderPopover = () => (
+ + {intl.formatMessage(messages.pasteButtonWhatsInClipboardText)} +
+
+ handlePopoverToggle(true)}
+ onMouseLeave={() => handlePopoverToggle(false)}
+ onFocus={() => handlePopoverToggle(true)}
+ onBlur={() => handlePopoverToggle(false)}
+ >
+
+
+ );
+
+ return (
+ <>
+
@@ -85,7 +112,7 @@ const BasicTab = ({
setFieldValue('dueDate', val)}
/>
diff --git a/src/generic/configure-modal/messages.js b/src/generic/configure-modal/messages.js
index 41ef703bd8..a0df9c5f76 100644
--- a/src/generic/configure-modal/messages.js
+++ b/src/generic/configure-modal/messages.js
@@ -1,5 +1,13 @@
+import moment from 'moment-timezone';
import { defineMessages } from '@edx/frontend-platform/i18n';
+const getUserTimezoneDetails = () => {
+ const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+ const timezoneOffset = moment.tz(userTimezone).format('Z');
+
+ return `${userTimezone} GMT${timezoneOffset}`;
+};
+
const messages = defineMessages({
title: {
id: 'course-authoring.course-outline.configure-modal.title',
@@ -30,6 +38,10 @@ const messages = defineMessages({
id: 'course-authoring.course-outline.configure-modal.basic-tab.release-time-UTC',
defaultMessage: 'Release time in UTC:',
},
+ releaseTimeCustom: {
+ id: 'this.releaseTimeCustom',
+ defaultMessage: `Release time in (${getUserTimezoneDetails()})`,
+ },
visibilityTabTitle: {
id: 'course-authoring.course-outline.configure-modal.visibility-tab.title',
defaultMessage: 'Visibility',
@@ -119,6 +131,10 @@ const messages = defineMessages({
id: 'course-authoring.course-outline.configure-modal.basic-tab.due-time-UTC',
defaultMessage: 'Due time in UTC:',
},
+ dueTimeCustom: {
+ id: 'this.dueTimeCustom',
+ defaultMessage: `Due time in (${getUserTimezoneDetails()})`,
+ },
subsectionVisibility: {
id: 'course-authoring.course-outline.configure-modal.visibility-tab.subsection-visibility',
defaultMessage: 'Subsection visibility',
diff --git a/src/generic/course-stepper/index.jsx b/src/generic/course-stepper/index.jsx
index caf341f77d..f281f83c38 100644
--- a/src/generic/course-stepper/index.jsx
+++ b/src/generic/course-stepper/index.jsx
@@ -9,6 +9,7 @@ import {
import { Icon } from '@openedx/paragon';
import PropTypes from 'prop-types';
import classNames from 'classnames';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
const CourseStepper = ({
steps,
@@ -76,6 +77,10 @@ const CourseStepper = ({
>
+
)}
diff --git a/src/generic/processing-notification/ProcessingNotification.test.jsx b/src/generic/processing-notification/ProcessingNotification.test.jsx
index 97f57429bf..d2bbdbeaca 100644
--- a/src/generic/processing-notification/ProcessingNotification.test.jsx
+++ b/src/generic/processing-notification/ProcessingNotification.test.jsx
@@ -1,13 +1,11 @@
-import { capitalize } from 'lodash';
import userEvent from '@testing-library/user-event';
import { initializeMocks, render, screen } from '../../testUtils';
-import { NOTIFICATION_MESSAGES } from '../../constants';
import ProcessingNotification from '.';
const mockUndo = jest.fn();
const props = {
- title: NOTIFICATION_MESSAGES.saving,
+ title: 'ThIs IS a Test. OK?',
isShow: true,
action: {
label: 'Undo',
@@ -22,16 +20,16 @@ describe(' {}} />);
- expect(screen.getByText(capitalize(props.title))).toBeInTheDocument();
+ expect(screen.getByText(props.title)).toBeInTheDocument();
expect(screen.getByText('Undo')).toBeInTheDocument();
expect(screen.getByRole('alert').querySelector('.processing-notification-hide-close-button')).not.toBeInTheDocument();
userEvent.click(screen.getByText('Undo'));
- expect(mockUndo).toBeCalled();
+ expect(mockUndo).toHaveBeenCalled();
});
it('add hide-close-button class if no close action is passed', () => {
render( = ({ message }) => (
+
+
+);
+
+export default WarningMessage;
diff --git a/src/grading-settings/GradingSettings.jsx b/src/grading-settings/GradingSettings.jsx
index 79234b603e..0284ce88b7 100644
--- a/src/grading-settings/GradingSettings.jsx
+++ b/src/grading-settings/GradingSettings.jsx
@@ -7,6 +7,7 @@ import {
} from '@openedx/paragon';
import { CheckCircle, Warning, Add as IconAdd } from '@openedx/paragon/icons';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
import { useModel } from '../generic/model-store';
import AlertMessage from '../generic/alert-message';
import { RequestStatus } from '../data/constants';
@@ -138,12 +139,22 @@ const GradingSettings = ({ intl, courseId }) => {
>
-
+
{
return (
<>
+
{
xl={[{ span: 9 }, { span: 3 }]}
>
+ (
{intl.formatMessage(messages['course-authoring.page.title'], { siteName: getConfig().SITE_NAME })}
+ {/* */}
);
diff --git a/src/header/Header.tsx b/src/header/Header.tsx
index 80991c78d5..7d9daee440 100644
--- a/src/header/Header.tsx
+++ b/src/header/Header.tsx
@@ -8,6 +8,7 @@ import { generatePath, useHref } from 'react-router-dom';
import { SearchModal } from '../search-modal';
import { useContentMenuItems, useSettingMenuItems, useToolsMenuItems } from './hooks';
import messages from './messages';
+import { setUIPreference } from '../services/uiPreferenceService';
type ContainerPropsType = React.ComponentProps;
@@ -64,7 +65,7 @@ const Header = ({
: generatePath(libraryHref, { libraryId: contextId });
return (
- <>
+
+
+
-
+
diff --git a/src/import-page/import-sidebar/CustomImportSidebar.jsx b/src/import-page/import-sidebar/CustomImportSidebar.jsx
new file mode 100644
index 0000000000..3a46bff9e9
--- /dev/null
+++ b/src/import-page/import-sidebar/CustomImportSidebar.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+ injectIntl,
+ intlShape,
+} from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import { Hyperlink } from '@openedx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+
+import { HelpSidebar } from '../../generic/help-sidebar';
+import { useHelpUrls } from '../../help-urls/hooks';
+import messages from './messages';
+
+const CustomImportSidebar = ({ intl, courseId }) => {
+ const { importCourse: importLearnMoreUrl } = useHelpUrls(['importCourse']);
+ return (
+
+
+
+
+
+ {intl.formatMessage(messages.learnMoreButtonTitle)}
+
+
+ );
+};
+
+CustomImportSidebar.propTypes = {
+ intl: intlShape.isRequired,
+ courseId: PropTypes.string.isRequired,
+};
+
+export default injectIntl(CustomImportSidebar);
diff --git a/src/index.jsx b/src/index.jsx
index 34f27f1b9a..9a3ba6fecc 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,11 +1,14 @@
+/* eslint-disable no-console */
+/* eslint-disable linebreak-style */
import {
APP_INIT_ERROR, APP_READY, subscribe, initialize, mergeConfig, getConfig, getPath,
} from '@edx/frontend-platform';
import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import {
Route, createRoutesFromElements, createBrowserRouter, RouterProvider,
+ Outlet,
} from 'react-router-dom';
import {
QueryClient,
@@ -14,6 +17,13 @@ import {
import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
import { logError } from '@edx/frontend-platform/logging';
+// import { loadThemeStyles } from 'utils/themeService';
+import MyCourses from 'my-courses/MyCourses';
+import CreateWidgets from 'widgets-create/CreateWidgets';
+import LibrariesV2Tab from 'studio-home/tabs-section/libraries-v2-tab';
+import { configure, getMessages, IntlProvider } from '@edx/frontend-platform/i18n';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import Dashboard from './dashboard/Dashboard';
import messages from './i18n';
import {
@@ -31,14 +41,134 @@ import { TaxonomyLayout, TaxonomyDetailPage, TaxonomyListPage } from './taxonomy
import { ContentTagsDrawer } from './content-tags-drawer';
import AccessibilityPage from './accessibility-page';
import { ToastProvider } from './generic/toast-context';
-
+import PageNotFound from './generic/PageNotFound';
import 'react-datepicker/dist/react-datepicker.css';
import './index.scss';
+// eslint-disable-next-line import/no-unresolved
+import Layout from './Layout';
+// import './styles/global-overrides.scss';
+
+// Import conditional styles CSS only
+import './styles/conditional-styles.css';
+import CustomCreateNewCourseForm from './studio-home/ps-course-form/CustomCreateNewCourseForm';
+import registerFontAwesomeIcons from './utils/RegisterFontAwesome';
+import Calendar from './calendar/pages/CalendarPage';
+import AssignmentPage from './assignment/pages/AssignmentPage';
+// import { getUIPreference } from './services/uiPreferenceService';
+import * as Sentry from '@sentry/react';
+import { dynamicTheme } from 'titaned-frontend-library';
+try {
+ const sentryresponse = await getAuthenticatedHttpClient().get(`${getConfig().LMS_BASE_URL}/titaned/api/v1/mfe_context/`);
+ Sentry.init({
+ dsn: sentryresponse.data.sentry.dsn,
+ environment: sentryresponse.data.sentry.environment,
+ tracesSampleRate: sentryresponse.data.sentry.traces_sample_rate,
+ sendDefaultPii: sentryresponse.data.sentry.send_default_pii,
+ integrations: [
+ Sentry.browserTracingIntegration(),
+ Sentry.replayIntegration(),
+ ],
+ replaysSessionSampleRate: 0.1,
+ replaysOnErrorSampleRate: 1.0,
+ });
+} catch (error) {
+ console.error('API call failed, fro sentry:', error);
+}
+
+// Load styles only for new UI
+const loadStylesForNewUI = (isOldUI) => {
+ console.log('loadStylesForNewUI called with isOldUI:', isOldUI);
+ document.body.className = isOldUI ? 'old-ui' : 'new-ui';
+ document.documentElement.className = isOldUI ? 'old-ui' : 'new-ui';
+ console.log('Body className set to:', document.body.className);
+ console.log('Html className set to:', document.documentElement.className);
+
+ if (!isOldUI) {
+ console.log('Loading titaned-frontend-library styles...');
+ import('titaned-frontend-library/dist/index.css');
+ import('./styles/styles-overrides.scss');
+ } else {
+ console.log('Skipping titaned-frontend-library styles for old UI');
+ }
+};
const queryClient = new QueryClient();
+registerFontAwesomeIcons();
+
const App = () => {
+ const [oldUI, setOldUI] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [menuConfig, setMenuConfig] = useState(null);
+ console.log('oldUI in Index', oldUI);
+
+ // Load UI preference and menu config in one API call to avoid race conditions
useEffect(() => {
+ const loadUIPreferenceAndMenuConfig = async () => {
+ try {
+ // First, load from localStorage for immediate display
+ const localStorageValue = localStorage.getItem('oldUI') || 'false';
+ console.log('Initial localStorage oldUI:', localStorageValue);
+ setOldUI(localStorageValue);
+ setLoading(false);
+
+ // Then, fetch both UI preference and menu config in one API call
+ console.log('Fetching menu config and UI preference...');
+ const response = await getAuthenticatedHttpClient().get(`${getConfig().STUDIO_BASE_URL}/titaned/api/v1/menu-config/`);
+
+ if (response.status === 200 && response.data) {
+ console.log('Menu config:', response.data);
+ setMenuConfig(response.data);
+
+ // Extract UI preference from the same response
+ const useNewUI = response.data.use_new_ui === true;
+ const apiOldUIValue = !useNewUI ? 'true' : 'false';
+ console.log('API returned use_new_ui:', useNewUI, 'API oldUI:', apiOldUIValue);
+
+ // Check if API response matches localStorage
+ if (localStorageValue !== apiOldUIValue) {
+ console.log('Mismatch detected! localStorage:', localStorageValue, 'API:', apiOldUIValue);
+ console.log('Updating localStorage and reloading page...');
+ localStorage.setItem('oldUI', apiOldUIValue);
+ // Reload page to re-run build-time config with correct localStorage
+ window.location.reload();
+ return;
+ }
+
+ console.log('localStorage and API are in sync, no reload needed');
+ } else {
+ console.warn('API failed, using localStorage value and default menu config');
+ setMenuConfig({}); // Set empty object as fallback
+ }
+ } catch (error) {
+ console.error('API call failed, using localStorage value and default menu config:', error);
+ setMenuConfig({}); // Set empty object as fallback
+ }
+ };
+
+ loadUIPreferenceAndMenuConfig();
+ }, []);
+
+ // Apply theme from JSON
+ useEffect(() => {
+ if (oldUI === 'false') {
+ (async () => {
+ try {
+ const response = await getAuthenticatedHttpClient().get(`${getConfig().LMS_BASE_URL}/titaned/api/v1/mfe_context/`);
+ dynamicTheme(response);
+ } catch (error) {
+ console.error('Error fetching theme config:', error);
+ }
+ })();
+ }
+ }, [oldUI]);
+
+ useEffect(() => {
+ // Only load styles after we know the UI preference
+ if (oldUI !== null) {
+ loadStylesForNewUI(oldUI === 'true');
+ }
+
if (process.env.HOTJAR_APP_ID) {
try {
initializeHotjar({
@@ -50,39 +180,86 @@ const App = () => {
logError(error);
}
}
- }, []);
+ }, [oldUI]); // Add oldUI as dependency
+
+ // Note: uiModeChanged event listener removed because UI switching actions
+ // (Header.tsx and Layout.jsx) immediately reload/redirect the page after
+ // dispatching the event, making the event listener redundant.
+
+ // Show loading screen while UI preference is being fetched
+ if (loading || menuConfig === null) {
+ return (
+
-
-
+ ,
document.getElementById('root'),
);
});
diff --git a/src/index.scss b/src/index.scss
index 69f9b8b34f..d9ca934474 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -54,14 +54,188 @@ div.xblock-highlight {
}
}
+html,
body {
background-color: $light-200;
+ // height: 100%;
.editor-page {
background-color: $light-100;
}
}
+/* Only apply overflow hidden for new UI */
+html,
+body.new-ui {
+ overflow: hidden !important;
+ /* Prevent outer scrollbar for new UI */
+}
+
+/* Allow scrolling for old UI */
+html,
+body.old-ui {
+ overflow: auto !important;
+ /* Allow scrolling for old UI */
+}
+
+html.old-ui {
+ overflow: auto !important;
+ /* Allow scrolling for old UI */
+}
+
+html.new-ui {
+ overflow: hidden !important;
+ /* Prevent outer scrollbar for new UI */
+}
+
mark {
padding: 0;
}
+
+.app-container {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+.content-wrapper {
+ display: flex;
+ flex: 1;
+ min-height: 0;
+ flex-grow: 1;
+}
+
+/* Different overflow behavior for old vs new UI */
+body.new-ui .app-container,
+body.new-ui .content-wrapper {
+ overflow: hidden;
+}
+
+body.old-ui .app-container,
+body.old-ui .content-wrapper {
+ overflow: visible;
+}
+
+.main-content {
+ flex: 1;
+ // padding: 20px;
+ padding-left: 0px;
+ padding-bottom: 0px;
+ padding-top: 0;
+ box-sizing: border-box;
+ background-color: var(--bg-body);
+
+ .page-content {
+ flex-grow: 1;
+ }
+}
+
+/* Different overflow behavior for old vs new UI */
+body.new-ui .main-content {
+ overflow-y: auto;
+ height: calc(100vh - 100px);
+}
+
+body.old-ui .main-content {
+ overflow-y: visible;
+ height: auto;
+ min-height: calc(100vh - 100px);
+}
+
+.pgn-btn-active {
+ color: #454545;
+ background-color: #E1DDDB;
+ border-color: transparent;
+}
+
+.btn-tertiary:focus::before {
+ border: solid 2px transparent;
+}
+
+.sidebar-container {
+ overflow-y: auto;
+ flex-shrink: 0;
+ overflow-x: hidden;
+ height: calc(100vh - 0px);
+
+ // @media (max-height: 690px) {
+ // height: calc(100vh - 5rem);
+ // }
+}
+
+/* Styles for the sidebar scrollbar */
+.sidebar-container::-webkit-scrollbar {
+ width: 4px;
+ /* width of the vertical scrollbar */
+ z-index: 10;
+}
+
+.sidebar-container::-webkit-scrollbar-track {
+ background: transparent;
+ /* color of the track */
+}
+
+.sidebar-container::-webkit-scrollbar-thumb {
+ background-color: #888;
+ /* color of the scrollbar thumb */
+ border-radius: 4px;
+ /* roundness of the scrollbar thumb */
+}
+
+.sidebar-container::-webkit-scrollbar-thumb:hover {
+ background-color: #555;
+ /* color of the scrollbar thumb on hover */
+}
+
+/* UI Switch Button Styles */
+.ui-switch-button {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ border-radius: 6px;
+ z-index: 9999;
+ background-color: var(--primary);
+ color: white;
+ padding: 8px 12px;
+ text-align: center;
+ font-size: 14px;
+ font-weight: bold;
+ width: fit-content;
+ border: none;
+ cursor: pointer;
+ white-space: nowrap;
+
+ /* Use left positioning to stay consistent relative to header content */
+ left: 50%;
+ transform: translateY(-50%) translateX(-50px);
+ /* Center horizontally, then move right towards search icon */
+
+ /* Responsive adjustments - move right more as screen gets bigger */
+ @media (min-width: 680px) {
+ transform: translateY(-50%) translateX(0px);
+ }
+
+ @media (min-width: 841px) {
+ transform: translateY(-50%) translateX(115px);
+ }
+
+ @media (min-width: 841px) and (max-width:920px) {
+ padding: 6px 4px;
+ font-size: 12px;
+ }
+
+ @media (min-width: 1440px) {
+ transform: translateY(-50%) translateX(100px);
+ }
+
+ @media (min-width: 1920px) {
+ transform: translateY(-50%) translateX(150px);
+ }
+
+ /* Fallback for very small screens */
+ @media (max-width: 480px) {
+ transform: translateY(-50%) translateX(-80px);
+ font-size: 12px;
+ padding: 6px 10px;
+ }
+}
\ No newline at end of file
diff --git a/src/interfaces/components.ts b/src/interfaces/components.ts
new file mode 100644
index 0000000000..8599d2e201
--- /dev/null
+++ b/src/interfaces/components.ts
@@ -0,0 +1,29 @@
+/* eslint-disable linebreak-style */
+
+type TextAlign = 'right' | 'left' | 'center';
+export interface FooterProps {
+ contactInfo: {
+ align: TextAlign;
+ content: {
+ shortdesc: string;
+ address1: string;
+ address2: string;
+ pincode: string;
+ location: { label: string; value: string };
+ phonenumber: string;
+ facebook: string;
+ instagram: string;
+ twitter: string;
+ linkedIn: string;
+ };
+ };
+ quickLinks: {
+ align: TextAlign;
+ content: { label: string; link: string }[];
+ };
+ exploreLinks: {
+ align: TextAlign;
+ content: { label: string; link: string }[];
+ };
+ logoUrl: string;
+}
diff --git a/src/library-authoring/CustomLibraryAuthoringPage.tsx b/src/library-authoring/CustomLibraryAuthoringPage.tsx
new file mode 100644
index 0000000000..479aac52db
--- /dev/null
+++ b/src/library-authoring/CustomLibraryAuthoringPage.tsx
@@ -0,0 +1,95 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable react/prop-types */
+import { Container, Tab, Tabs } from '@openedx/paragon';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { LmsBook } from '@openedx/paragon/icons';
+import { useNavigate } from 'react-router-dom';
+// import SubHeader from '../generic/sub-header/SubHeader';
+import {
+ ClearFiltersButton, FilterByBlockType, FilterByTags, SearchContextProvider, SearchKeywordsField, SearchSortWidget,
+} from '../search-manager';
+import messages from './messages';
+import LibraryContent, { ContentType } from './LibraryContent';
+import { LibrarySidebar } from './library-sidebar';
+
+const CustomLibraryAuthoringPage = ({
+ libraryData,
+ extraFilter,
+ subHeaderTitle,
+ intl,
+ // componentPickerMode,
+ headerActions,
+ // breadcumbs,
+ activeKey,
+ handleTabChange,
+ sidebarComponentInfo,
+// libraryId,
+}) => {
+ const navigate = useNavigate();
+ return (
+ ('');
+ const [activeKey, setActiveKey] = useState(ContentType.home);
useEffect(() => {
const currentPath = location.pathname.split('/').pop();
if (componentPickerMode || currentPath === libraryId || currentPath === '') {
- setActiveKey(TabList.home);
- } else if (currentPath && currentPath in TabList) {
- setActiveKey(TabList[currentPath]);
+ setActiveKey(ContentType.home);
+ } else if (currentPath && currentPath in ContentType) {
+ setActiveKey(ContentType[currentPath]);
}
- }, [location.pathname]);
+ }, []);
useEffect(() => {
if (!componentPickerMode) {
@@ -178,6 +163,14 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPage
return
+ {intl.formatMessage(messages.librariesV2DisabledError)}
+
+ );
+ }
+
// istanbul ignore if: this should never happen
if (activeKey === undefined) {
return
- handleTabChange(tabList.collections)}
- >
-
- handleTabChange(tabList.components)}
- >
-
-
- )
- }
-
- );
-};
-
-export default LibraryHome;
diff --git a/src/library-authoring/LibraryRecentlyModified.tsx b/src/library-authoring/LibraryRecentlyModified.tsx
deleted file mode 100644
index 6d67e5a554..0000000000
--- a/src/library-authoring/LibraryRecentlyModified.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { orderBy } from 'lodash';
-
-import { SearchContextProvider, useSearchContext } from '../search-manager';
-import { type CollectionHit, type ContentHit, SearchSortOption } from '../search-manager/data/api';
-import LibrarySection, { LIBRARY_SECTION_PREVIEW_LIMIT } from './components/LibrarySection';
-import messages from './messages';
-import ComponentCard from './components/ComponentCard';
-import CollectionCard from './components/CollectionCard';
-import { useLibraryContext } from './common/context';
-
-const RecentlyModified: React.FC> = () => {
- const intl = useIntl();
- const {
- hits,
- collectionHits,
- totalHits,
- totalCollectionHits,
- } = useSearchContext();
-
- const componentCount = totalHits + totalCollectionHits;
- // Since we only display a fixed number of items in preview,
- // only these number of items are use in sort step below
- const componentList = hits.slice(0, LIBRARY_SECTION_PREVIEW_LIMIT);
- const collectionList = collectionHits.slice(0, LIBRARY_SECTION_PREVIEW_LIMIT);
- // Sort them by `modified` field in reverse and display them
- const recentItems = orderBy([
- ...componentList,
- ...collectionList,
- ], ['modified'], ['desc']).slice(0, LIBRARY_SECTION_PREVIEW_LIMIT);
-
- return componentCount > 0
- ? (
-
-
- )
- : null;
-};
-
-const LibraryRecentlyModified: React.FC> = () => {
- const { libraryId, showOnlyPublished } = useLibraryContext();
-
- const extraFilter = [`context_key = "${libraryId}"`];
- if (showOnlyPublished) {
- extraFilter.push('last_published IS NOT NULL');
- }
-
- return (
-
-
- );
-};
-
-export default LibraryRecentlyModified;
diff --git a/src/library-authoring/__mocks__/collection-search.json b/src/library-authoring/__mocks__/collection-search.json
index dba7008aaf..81e8afcb58 100644
--- a/src/library-authoring/__mocks__/collection-search.json
+++ b/src/library-authoring/__mocks__/collection-search.json
@@ -180,34 +180,7 @@
"display_name": "Blank Problem",
"description": "Problem"
}
- }
- ],
- "query": "",
- "processingTimeMs": 1,
- "limit": 20,
- "offset": 0,
- "estimatedTotalHits": 5
- },
- {
- "indexUid": "studio_content",
- "hits": [],
- "query": "",
- "processingTimeMs": 0,
- "limit": 0,
- "offset": 0,
- "estimatedTotalHits": 5,
- "facetDistribution": {
- "block_type": {
- "html": 4,
- "problem": 1
},
- "content.problem_types": {}
- },
- "facetStats": {}
- },
- {
- "indexUid": "studio_content",
- "hits": [
{
"display_name": "My first collection",
"block_id": "my-first-collection",
@@ -246,12 +219,30 @@
"access_id": 16,
"num_children": 1
}
+
],
"query": "",
+ "processingTimeMs": 1,
+ "limit": 20,
+ "offset": 0,
+ "estimatedTotalHits": 5
+ },
+ {
+ "indexUid": "studio_content",
+ "hits": [],
+ "query": "",
"processingTimeMs": 0,
- "limit": 1,
+ "limit": 0,
"offset": 0,
- "estimatedTotalHits": 1
+ "estimatedTotalHits": 5,
+ "facetDistribution": {
+ "block_type": {
+ "html": 4,
+ "problem": 1
+ },
+ "content.problem_types": {}
+ },
+ "facetStats": {}
}
]
}
diff --git a/src/library-authoring/__mocks__/library-search.json b/src/library-authoring/__mocks__/library-search.json
index aebfcb81ed..d4456c6558 100644
--- a/src/library-authoring/__mocks__/library-search.json
+++ b/src/library-authoring/__mocks__/library-search.json
@@ -32,6 +32,199 @@
"description": "Testing"
}
},
+ {
+ "display_name": "Collection 1",
+ "block_id": "col1",
+ "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer.",
+ "id": 1,
+ "type": "collection",
+ "breadcrumbs": [
+ {
+ "display_name": "CS problems 2"
+ }
+ ],
+ "created": 1725534795.628254,
+ "modified": 1725878053.420395,
+ "context_key": "lib:OpenedX:CSPROB2",
+ "org": "OpenedX",
+ "access_id": 16,
+ "_formatted": {
+ "display_name": "Collection 1",
+ "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…",
+ "id": "1",
+ "type": "collection",
+ "breadcrumbs": [
+ {
+ "display_name": "CS problems 2"
+ }
+ ],
+ "created": "1725534795.628254",
+ "modified": "1725534795.628266",
+ "context_key": "lib:OpenedX:CSPROB2",
+ "org": "OpenedX",
+ "access_id": "16"
+ }
+ },
+ {
+ "display_name": "Collection 2",
+ "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 58",
+ "id": 2,
+ "type": "collection",
+ "breadcrumbs": [
+ {
+ "display_name": "CS problems 2"
+ }
+ ],
+ "created": 1725534795.619101,
+ "modified": 1725534795.619113,
+ "context_key": "lib:OpenedX:CSPROB2",
+ "org": "OpenedX",
+ "access_id": 16,
+ "_formatted": {
+ "display_name": "Collection 2",
+ "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…",
+ "id": "2",
+ "type": "collection",
+ "breadcrumbs": [
+ {
+ "display_name": "CS problems 2"
+ }
+ ],
+ "created": "1725534795.619101",
+ "modified": "1725534795.619113",
+ "context_key": "lib:OpenedX:CSPROB2",
+ "org": "OpenedX",
+ "access_id": "16"
+ }
+ },
+ {
+ "display_name": "Collection 3",
+ "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 57",
+ "id": 3,
+ "type": "collection",
+ "breadcrumbs": [
+ {
+ "display_name": "CS problems 2"
+ }
+ ],
+ "created": 1725534795.609781,
+ "modified": 1725534795.609794,
+ "context_key": "lib:OpenedX:CSPROB2",
+ "org": "OpenedX",
+ "access_id": 16,
+ "_formatted": {
+ "display_name": "Collection 3",
+ "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…",
+ "id": "3",
+ "type": "collection",
+ "breadcrumbs": [
+ {
+ "display_name": "CS problems 2"
+ }
+ ],
+ "created": "1725534795.609781",
+ "modified": "1725534795.609794",
+ "context_key": "lib:OpenedX:CSPROB2",
+ "org": "OpenedX",
+ "access_id": "16"
+ }
+ },
+ {
+ "display_name": "Collection 4",
+ "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 56",
+ "id": 4,
+ "type": "collection",
+ "breadcrumbs": [
+ {
+ "display_name": "CS problems 2"
+ }
+ ],
+ "created": 1725534795.596287,
+ "modified": 1725534795.5963,
+ "context_key": "lib:OpenedX:CSPROB2",
+ "org": "OpenedX",
+ "access_id": 16,
+ "_formatted": {
+ "display_name": "Collection 4",
+ "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…",
+ "id": "4",
+ "type": "collection",
+ "breadcrumbs": [
+ {
+ "display_name": "CS problems 2"
+ }
+ ],
+ "created": "1725534795.596287",
+ "modified": "1725534795.5963",
+ "context_key": "lib:OpenedX:CSPROB2",
+ "org": "OpenedX",
+ "access_id": "16"
+ }
+ },
+ {
+ "display_name": "Collection 5",
+ "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 55",
+ "id": 5,
+ "type": "collection",
+ "breadcrumbs": [
+ {
+ "display_name": "CS problems 2"
+ }
+ ],
+ "created": 1725534795.583068,
+ "modified": 1725534795.583082,
+ "context_key": "lib:OpenedX:CSPROB2",
+ "org": "OpenedX",
+ "access_id": 16,
+ "_formatted": {
+ "display_name": "Collection 5",
+ "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…",
+ "id": "5",
+ "type": "collection",
+ "breadcrumbs": [
+ {
+ "display_name": "CS problems 2"
+ }
+ ],
+ "created": "1725534795.583068",
+ "modified": "1725534795.583082",
+ "context_key": "lib:OpenedX:CSPROB2",
+ "org": "OpenedX",
+ "access_id": "16"
+ }
+ },
+ {
+ "display_name": "Collection 6",
+ "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 54",
+ "id": 6,
+ "type": "collection",
+ "breadcrumbs": [
+ {
+ "display_name": "CS problems 2"
+ }
+ ],
+ "created": 1725534795.573794,
+ "modified": 1725534795.573808,
+ "context_key": "lib:OpenedX:CSPROB2",
+ "org": "OpenedX",
+ "access_id": 16,
+ "_formatted": {
+ "display_name": "Collection 6",
+ "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…",
+ "id": "6",
+ "type": "collection",
+ "breadcrumbs": [
+ {
+ "display_name": "CS problems 2"
+ }
+ ],
+ "created": "1725534795.573794",
+ "modified": "1725534795.573808",
+ "context_key": "lib:OpenedX:CSPROB2",
+ "org": "OpenedX",
+ "access_id": "16"
+ }
+ },
{
"id": "lbaximtesthtml73a22298-bcd9-4f4c-ae34-0bc2b0612480-46b4a7f2",
"display_name": "Second Text Component",
@@ -318,209 +511,6 @@
}
},
"facetStats": {}
- },
- {
- "indexUid": "studio",
- "hits": [
- {
- "display_name": "Collection 1",
- "block_id": "col1",
- "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer.",
- "id": 1,
- "type": "collection",
- "breadcrumbs": [
- {
- "display_name": "CS problems 2"
- }
- ],
- "created": 1725534795.628254,
- "modified": 1725878053.420395,
- "context_key": "lib:OpenedX:CSPROB2",
- "org": "OpenedX",
- "access_id": 16,
- "_formatted": {
- "display_name": "Collection 1",
- "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…",
- "id": "1",
- "type": "collection",
- "breadcrumbs": [
- {
- "display_name": "CS problems 2"
- }
- ],
- "created": "1725534795.628254",
- "modified": "1725534795.628266",
- "context_key": "lib:OpenedX:CSPROB2",
- "org": "OpenedX",
- "access_id": "16"
- }
- },
- {
- "display_name": "Collection 2",
- "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 58",
- "id": 2,
- "type": "collection",
- "breadcrumbs": [
- {
- "display_name": "CS problems 2"
- }
- ],
- "created": 1725534795.619101,
- "modified": 1725534795.619113,
- "context_key": "lib:OpenedX:CSPROB2",
- "org": "OpenedX",
- "access_id": 16,
- "_formatted": {
- "display_name": "Collection 2",
- "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…",
- "id": "2",
- "type": "collection",
- "breadcrumbs": [
- {
- "display_name": "CS problems 2"
- }
- ],
- "created": "1725534795.619101",
- "modified": "1725534795.619113",
- "context_key": "lib:OpenedX:CSPROB2",
- "org": "OpenedX",
- "access_id": "16"
- }
- },
- {
- "display_name": "Collection 3",
- "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 57",
- "id": 3,
- "type": "collection",
- "breadcrumbs": [
- {
- "display_name": "CS problems 2"
- }
- ],
- "created": 1725534795.609781,
- "modified": 1725534795.609794,
- "context_key": "lib:OpenedX:CSPROB2",
- "org": "OpenedX",
- "access_id": 16,
- "_formatted": {
- "display_name": "Collection 3",
- "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…",
- "id": "3",
- "type": "collection",
- "breadcrumbs": [
- {
- "display_name": "CS problems 2"
- }
- ],
- "created": "1725534795.609781",
- "modified": "1725534795.609794",
- "context_key": "lib:OpenedX:CSPROB2",
- "org": "OpenedX",
- "access_id": "16"
- }
- },
- {
- "display_name": "Collection 4",
- "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 56",
- "id": 4,
- "type": "collection",
- "breadcrumbs": [
- {
- "display_name": "CS problems 2"
- }
- ],
- "created": 1725534795.596287,
- "modified": 1725534795.5963,
- "context_key": "lib:OpenedX:CSPROB2",
- "org": "OpenedX",
- "access_id": 16,
- "_formatted": {
- "display_name": "Collection 4",
- "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…",
- "id": "4",
- "type": "collection",
- "breadcrumbs": [
- {
- "display_name": "CS problems 2"
- }
- ],
- "created": "1725534795.596287",
- "modified": "1725534795.5963",
- "context_key": "lib:OpenedX:CSPROB2",
- "org": "OpenedX",
- "access_id": "16"
- }
- },
- {
- "display_name": "Collection 5",
- "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 55",
- "id": 5,
- "type": "collection",
- "breadcrumbs": [
- {
- "display_name": "CS problems 2"
- }
- ],
- "created": 1725534795.583068,
- "modified": 1725534795.583082,
- "context_key": "lib:OpenedX:CSPROB2",
- "org": "OpenedX",
- "access_id": 16,
- "_formatted": {
- "display_name": "Collection 5",
- "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…",
- "id": "5",
- "type": "collection",
- "breadcrumbs": [
- {
- "display_name": "CS problems 2"
- }
- ],
- "created": "1725534795.583068",
- "modified": "1725534795.583082",
- "context_key": "lib:OpenedX:CSPROB2",
- "org": "OpenedX",
- "access_id": "16"
- }
- },
- {
- "display_name": "Collection 6",
- "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 54",
- "id": 6,
- "type": "collection",
- "breadcrumbs": [
- {
- "display_name": "CS problems 2"
- }
- ],
- "created": 1725534795.573794,
- "modified": 1725534795.573808,
- "context_key": "lib:OpenedX:CSPROB2",
- "org": "OpenedX",
- "access_id": 16,
- "_formatted": {
- "display_name": "Collection 6",
- "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…",
- "id": "6",
- "type": "collection",
- "breadcrumbs": [
- {
- "display_name": "CS problems 2"
- }
- ],
- "created": "1725534795.573794",
- "modified": "1725534795.573808",
- "context_key": "lib:OpenedX:CSPROB2",
- "org": "OpenedX",
- "access_id": "16"
- }
- }
- ],
- "query": "learn",
- "processingTimeMs": 1,
- "limit": 6,
- "offset": 0,
- "estimatedTotalHits": 6
}
]
}
diff --git a/src/library-authoring/add-content/AddContentContainer.test.tsx b/src/library-authoring/add-content/AddContentContainer.test.tsx
index e8f53c3fd4..4798d271ad 100644
--- a/src/library-authoring/add-content/AddContentContainer.test.tsx
+++ b/src/library-authoring/add-content/AddContentContainer.test.tsx
@@ -1,3 +1,5 @@
+import MockAdapter from 'axios-mock-adapter/types';
+import { snakeCaseObject } from '@edx/frontend-platform';
import {
fireEvent,
render as baseRender,
@@ -6,23 +8,55 @@ import {
initializeMocks,
} from '../../testUtils';
import { mockContentLibrary } from '../data/api.mocks';
-import { getCreateLibraryBlockUrl, getLibraryPasteClipboardUrl } from '../data/api';
+import {
+ getContentLibraryApiUrl, getCreateLibraryBlockUrl, getLibraryCollectionComponentApiUrl, getLibraryPasteClipboardUrl,
+} from '../data/api';
import { mockBroadcastChannel, mockClipboardEmpty, mockClipboardHtml } from '../../generic/data/api.mock';
import { LibraryProvider } from '../common/context';
import AddContentContainer from './AddContentContainer';
+import { ComponentEditorModal } from '../components/ComponentEditorModal';
+import editorCmsApi from '../../editors/data/services/cms/api';
+import { ToastActionData } from '../../generic/toast-context';
mockBroadcastChannel();
+// Mocks for ComponentEditorModal to work in tests.
+jest.mock('frontend-components-tinymce-advanced-plugins', () => ({ a11ycheckerCss: '' }));
+
const { libraryId } = mockContentLibrary;
-const render = () => baseRender({ children } ,
-});
+const render = (collectionId?: string) => {
+ const params: { libraryId: string, collectionId?: string } = { libraryId };
+ if (collectionId) {
+ params.collectionId = collectionId;
+ }
+ return baseRender(
+ { children }
+
+ ),
+ });
+};
+let axiosMock: MockAdapter;
+let mockShowToast: (message: string, action?: ToastActionData | undefined) => void;
describe('
);
};
diff --git a/src/library-authoring/collections/LibraryCollectionPage.test.tsx b/src/library-authoring/collections/LibraryCollectionPage.test.tsx
index 7c7d1afc6f..1d15837a81 100644
--- a/src/library-authoring/collections/LibraryCollectionPage.test.tsx
+++ b/src/library-authoring/collections/LibraryCollectionPage.test.tsx
@@ -37,7 +37,7 @@ const searchEndpoint = 'http://mock.meilisearch.local/multi-search';
const path = '/library/:libraryId/*';
const libraryTitle = mockContentLibrary.libraryData.title;
const mockCollection = {
- collectionId: mockResult.results[2].hits[0].block_id,
+ collectionId: mockResult.results[0].hits[5].block_id,
collectionNeverLoads: mockGetCollectionMetadata.collectionIdLoading,
collectionNoComponents: 'collection-no-components',
collectionEmpty: mockGetCollectionMetadata.collectionIdError,
@@ -62,23 +62,21 @@ describe('(() => {});
case mockCollection.collectionEmpty:
- mockResultCopy.results[2].hits = [];
- mockResultCopy.results[2].estimatedTotalHits = 0;
+ mockResultCopy.results[0].hits = [];
+ mockResultCopy.results[0].totalHits = 0;
break;
case mockCollection.collectionNoComponents:
mockResultCopy.results[0].hits = [];
- mockResultCopy.results[0].estimatedTotalHits = 0;
+ mockResultCopy.results[0].totalHits = 0;
mockResultCopy.results[1].facetDistribution.block_type = {};
- mockResultCopy.results[2].hits[0].num_children = 0;
break;
default:
break;
@@ -181,7 +179,7 @@ describe('
+
+ {getPageHeadTitle('', intl.formatMessage(messages.headerTitle))}
+
+
+);
+
+export default CustomTaxonomyListPage;
diff --git a/src/taxonomy/TaxonomyLayout.jsx b/src/taxonomy/TaxonomyLayout.jsx
index ccebad1531..817f5dee2e 100644
--- a/src/taxonomy/TaxonomyLayout.jsx
+++ b/src/taxonomy/TaxonomyLayout.jsx
@@ -4,7 +4,7 @@ import { StudioFooter } from '@edx/frontend-component-footer';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Outlet, ScrollRestoration } from 'react-router-dom';
import { Toast } from '@openedx/paragon';
-
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
import AlertMessage from '../generic/alert-message';
import Header from '../header';
import { TaxonomyContext } from './common/context';
@@ -23,8 +23,10 @@ const TaxonomyLayout = () => {
return (
-
{title}
diff --git a/src/generic/data/thunks.js b/src/generic/data/thunks.js index f5cc8a9557..e0826028bf 100644 --- a/src/generic/data/thunks.js +++ b/src/generic/data/thunks.js @@ -1,10 +1,3 @@ -import { logError } from '@edx/frontend-platform/logging'; - -import { CLIPBOARD_STATUS, NOTIFICATION_MESSAGES } from '../../constants'; -import { - hideProcessingNotification, - showProcessingNotification, -} from '../processing-notification/data/slice'; import { RequestStatus } from '../../data/constants'; import { fetchOrganizations, @@ -13,14 +6,11 @@ import { updateRedirectUrlObj, updateCourseRerunData, updateSavingStatus, - updateClipboardData, } from './slice'; import { createOrRerunCourse, getOrganizations, getCourseRerun, - updateClipboard, - getClipboard, } from './api'; export function fetchOrganizationsQuery() { @@ -62,34 +52,4 @@ export function updateCreateOrRerunCourseQuery(courseData) { return false; } }; -} - -export function copyToClipboard(usageKey) { - const POLL_INTERVAL_MS = 1000; // Timeout duration for polling in milliseconds - - return async (dispatch) => { - dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.copying)); - dispatch(updateSavingStatus({ status: RequestStatus.PENDING })); - - try { - let clipboardData = await updateClipboard(usageKey); - - while (clipboardData.content?.status === CLIPBOARD_STATUS.loading) { - // eslint-disable-next-line no-await-in-loop,no-promise-executor-return - await new Promise((resolve) => setTimeout(resolve, POLL_INTERVAL_MS)); - clipboardData = await getClipboard(); // eslint-disable-line no-await-in-loop - } - - if (clipboardData.content?.status === CLIPBOARD_STATUS.ready) { - dispatch(updateClipboardData(clipboardData)); - dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL })); - } else { - throw new Error(`Unexpected clipboard status "${clipboardData.content?.status}" in successful API response.`); - } - } catch (error) { - logError('Error copying to clipboard:', error); - } finally { - dispatch(hideProcessingNotification()); - } - }; -} +} \ No newline at end of file diff --git a/src/generic/datepicker-control/DatepickerControl.jsx b/src/generic/datepicker-control/DatepickerControl.jsx index 91306f2f11..cd9fd4e729 100644 --- a/src/generic/datepicker-control/DatepickerControl.jsx +++ b/src/generic/datepicker-control/DatepickerControl.jsx @@ -39,7 +39,8 @@ const DatepickerControl = ({ {label} {showUTC && ( - ({intl.formatMessage(messages.datepickerUTC)}) + {/* This will show the user's timezone with offset */} + ({intl.formatMessage(messages.datepickerCustom)}) )} @@ -99,4 +100,4 @@ DatepickerControl.propTypes = { onChange: PropTypes.func.isRequired, }; -export default DatepickerControl; +export default DatepickerControl; \ No newline at end of file diff --git a/src/generic/datepicker-control/messages.js b/src/generic/datepicker-control/messages.js index b6139f7b57..0e10c72dcc 100644 --- a/src/generic/datepicker-control/messages.js +++ b/src/generic/datepicker-control/messages.js @@ -1,5 +1,13 @@ +import moment from 'moment-timezone'; import { defineMessages } from '@edx/frontend-platform/i18n'; +const getUserTimezoneDetails = () => { + const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone; + const timezoneOffset = moment.tz(userTimezone).format('Z'); + + return `${userTimezone} GMT${timezoneOffset}`; +}; + const messages = defineMessages({ calendarAltText: { id: 'course-authoring.schedule.schedule-section.alt-text', @@ -9,6 +17,10 @@ const messages = defineMessages({ id: 'course-authoring.schedule.schedule-section.datepicker.utc', defaultMessage: 'UTC', }, + datepickerCustom: { + id: 'this.datepickerCustom', + defaultMessage: getUserTimezoneDetails(), + }, }); -export default messages; +export default messages; \ No newline at end of file diff --git a/src/generic/drag-helper/SortableItem.jsx b/src/generic/drag-helper/SortableItem.jsx index ffea67a849..98aafd3e2d 100644 --- a/src/generic/drag-helper/SortableItem.jsx +++ b/src/generic/drag-helper/SortableItem.jsx @@ -8,6 +8,7 @@ import { } from '@openedx/paragon'; import { DragIndicator } from '@openedx/paragon/icons'; +import { PluginSlot } from '@openedx/frontend-plugin-framework'; import messages from './messages'; const SortableItem = ({ @@ -50,7 +51,7 @@ const SortableItem = ({ marginBottom: '1.5rem', borderRadius: '0.35rem', boxShadow: '0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)', - ...componentStyle, + // ...componentStyle, }; return ( @@ -73,7 +74,11 @@ const SortableItem = ({ {...listeners} > -Content
;
@@ -23,7 +23,7 @@ const TestComponentToClose = () => {
const { showToast, closeToast } = React.useContext(ToastContext);
React.useEffect(() => {
- showToast('This is the toast!');
+ showToast('This is the Toast!');
closeToast();
}, [showToast]);
@@ -59,19 +59,19 @@ describe('
+
+
+
+ Warning
+ {message}
+
+ {intl.formatMessage(messages.description1)}
{intl.formatMessage(messages.description2)}
{intl.formatMessage(messages.description3)}
-{intl.formatMessage(messages.title1)}
++ {intl.formatMessage(messages.description1, { studioShortName: getConfig().STUDIO_SHORT_NAME })} +
++
{intl.formatMessage(messages.importedContent)}
+
+
+ {intl.formatMessage(messages.importedContentHeading)}
+-
+
- {intl.formatMessage(messages.content1)} +
- {intl.formatMessage(messages.content2)} +
- {intl.formatMessage(messages.content3)} +
- {intl.formatMessage(messages.content4)} +
- {intl.formatMessage(messages.content5)} +
+
+ {intl.formatMessage(messages.notImportedContent)}
+-
+
- {intl.formatMessage(messages.content6)} +
- {intl.formatMessage(messages.content7)} +
+
{intl.formatMessage(messages.warningTitle)}
+{intl.formatMessage(messages.warningDescription)}
++
+
+ );
+ }
+
+ console.log('Rendering app with oldUI:', oldUI);
const router = createBrowserRouter(
createRoutesFromElements(
- Loading.. Please wait...
+
+
+ );
+};
+
+export default CustomLibraryAuthoringPage;
diff --git a/src/library-authoring/LibraryAuthoringPage.scss b/src/library-authoring/LibraryAuthoringPage.scss
index 6e422a802f..b4c08e02b3 100644
--- a/src/library-authoring/LibraryAuthoringPage.scss
+++ b/src/library-authoring/LibraryAuthoringPage.scss
@@ -12,7 +12,7 @@
}
.library-authoring-sidebar {
- z-index: 1001; // to appear over header
+ z-index: 1000; // same as header
flex: 450px 0 0;
position: sticky;
top: 0;
@@ -21,6 +21,10 @@
overflow-y: auto;
}
+.dropdown-menu {
+ z-index: 1001; // over the sidebar
+}
+
// Reduce breadcrumb bottom margin
ol.list-inline {
margin-bottom: 0;
diff --git a/src/library-authoring/LibraryAuthoringPage.test.tsx b/src/library-authoring/LibraryAuthoringPage.test.tsx
index 84e50c70fc..8360513279 100644
--- a/src/library-authoring/LibraryAuthoringPage.test.tsx
+++ b/src/library-authoring/LibraryAuthoringPage.test.tsx
@@ -18,6 +18,8 @@ import {
mockXBlockFields,
} from './data/api.mocks';
import { mockContentSearchConfig } from '../search-manager/data/api.mock';
+import { studioHomeMock } from '../studio-home/__mocks__';
+import { getStudioHomeApiUrl } from '../studio-home/data/api';
import { mockBroadcastChannel } from '../generic/data/api.mock';
import { LibraryLayout } from '.';
import { getLibraryCollectionsApiUrl } from './data/api';
@@ -40,46 +42,19 @@ const returnEmptyResult = (_url, req) => {
// We have to replace the query (search keywords) in the mock results with the actual query,
// because otherwise we may have an inconsistent state that causes more queries and unexpected results.
mockEmptyResult.results[0].query = query;
- mockEmptyResult.results[2].query = query;
// And fake the required '_formatted' fields; it contains the highlighting ... around matched words
// eslint-disable-next-line no-underscore-dangle, no-param-reassign
mockEmptyResult.results[0]?.hits.forEach((hit) => { hit._formatted = { ...hit }; });
- // eslint-disable-next-line no-underscore-dangle, no-param-reassign
- mockEmptyResult.results[2]?.hits.forEach((hit) => { hit._formatted = { ...hit }; });
return mockEmptyResult;
};
-/**
- * Returns 2 components from the search query.
- * This lets us test that the StudioHome "View All" button is hidden when a
- * low number of search results are shown (<=4 by default).
-*/
-const returnLowNumberResults = (_url, req) => {
- const requestData = JSON.parse(req.body?.toString() ?? '');
- const query = requestData?.queries[0]?.q ?? '';
- const newMockResult = { ...mockResult };
- // We have to replace the query (search keywords) in the mock results with the actual query,
- // because otherwise we may have an inconsistent state that causes more queries and unexpected results.
- newMockResult.results[0].query = query;
- // Limit number of results to just 2
- newMockResult.results[0].hits = mockResult.results[0]?.hits.slice(0, 2);
- newMockResult.results[2].hits = mockResult.results[2]?.hits.slice(0, 2);
- newMockResult.results[0].estimatedTotalHits = 2;
- newMockResult.results[2].estimatedTotalHits = 2;
- // And fake the required '_formatted' fields; it contains the highlighting ... around matched words
- // eslint-disable-next-line no-underscore-dangle, no-param-reassign
- newMockResult.results[0]?.hits.forEach((hit) => { hit._formatted = { ...hit }; });
- // eslint-disable-next-line no-underscore-dangle, no-param-reassign
- newMockResult.results[2]?.hits.forEach((hit) => { hit._formatted = { ...hit }; });
- return newMockResult;
-};
-
const path = '/library/:libraryId/*';
const libraryTitle = mockContentLibrary.libraryData.title;
describe('
+ {libraryData.title} | {process.env.SITE_NAME}
+
+ {/*
+
+
+
+
+
+ {!!sidebarComponentInfo?.type && (
+
+
+
+
+
+ navigate('/libraries')}>
+
+
+ {subHeaderTitle || 'Loading...'}
+
+
+
+ +
+
+
+
+ )}
+
-
+
+
);
};
diff --git a/src/library-authoring/collections/LibraryCollections.test.tsx b/src/library-authoring/LibraryContent.test.tsx
similarity index 59%
rename from src/library-authoring/collections/LibraryCollections.test.tsx
rename to src/library-authoring/LibraryContent.test.tsx
index 43d7324cc9..d7b49320ee 100644
--- a/src/library-authoring/collections/LibraryCollections.test.tsx
+++ b/src/library-authoring/LibraryContent.test.tsx
@@ -1,15 +1,17 @@
import fetchMock from 'fetch-mock-jest';
import {
+ fireEvent,
render,
screen,
initializeMocks,
-} from '../../testUtils';
-import { getContentSearchConfigUrl } from '../../search-manager/data/api';
-import { mockContentLibrary } from '../data/api.mocks';
-import mockEmptyResult from '../../search-modal/__mocks__/empty-search-result.json';
-import { LibraryProvider } from '../common/context';
-import LibraryCollections from './LibraryCollections';
+} from '../testUtils';
+import { getContentSearchConfigUrl } from '../search-manager/data/api';
+import { mockContentLibrary } from './data/api.mocks';
+import mockEmptyResult from '../search-modal/__mocks__/empty-search-result.json';
+import { LibraryProvider } from './common/context';
+import LibraryContent from './LibraryContent';
+import { libraryComponentsMock } from './__mocks__';
const searchEndpoint = 'http://mock.meilisearch.local/multi-search';
@@ -18,8 +20,8 @@ const mockFetchNextPage = jest.fn();
const mockUseSearchContext = jest.fn();
const data = {
- totalHits: 1,
- hits: [],
+ totalContentAndCollectionHits: 0,
+ contentAndCollectionHits: [],
isFetchingNextPage: false,
hasNextPage: false,
fetchNextPage: mockFetchNextPage,
@@ -40,8 +42,8 @@ const returnEmptyResult = (_url: string, req) => {
return mockEmptyResult;
};
-jest.mock('../../search-manager', () => ({
- ...jest.requireActual('../../search-manager'),
+jest.mock('../search-manager', () => ({
+ ...jest.requireActual('../search-manager'),
useSearchContext: () => mockUseSearchContext(),
}));
@@ -58,7 +60,7 @@ const withLibraryId = (libraryId: string) => ({
),
});
-describe('
- {libraryData.title} | {process.env.SITE_NAME}
+ )}
+
+
+
+
+ {!!sidebarComponentInfo?.type && (
+ {libraryData.title} | {process.env.SITE_NAME}
-
-
+
-
-
-
- {!componentPickerMode &&
- {!!sidebarComponentInfo?.type && (
+
-
-
+
+
+ {hits.map((contentHit) => (
+ contentHit.type === 'collection' ? (
+
+ );
+};
+
+export default LibraryContent;
diff --git a/src/library-authoring/LibraryHome.tsx b/src/library-authoring/LibraryHome.tsx
deleted file mode 100644
index 170c12d3d3..0000000000
--- a/src/library-authoring/LibraryHome.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Stack } from '@openedx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
-
-import { LoadingSpinner } from '../generic/Loading';
-import { useSearchContext } from '../search-manager';
-import { NoComponents, NoSearchResults } from './EmptyStates';
-import LibraryCollections from './collections/LibraryCollections';
-import { LibraryComponents } from './components';
-import LibrarySection from './components/LibrarySection';
-import LibraryRecentlyModified from './LibraryRecentlyModified';
-import messages from './messages';
-import { useLibraryContext } from './common/context';
-
-type LibraryHomeProps = {
- tabList: { home: string, components: string, collections: string },
- handleTabChange: (key: string) => void,
-};
-
-const LibraryHome = ({ tabList, handleTabChange } : LibraryHomeProps) => {
- const intl = useIntl();
- const {
- totalHits: componentCount,
- totalCollectionHits: collectionCount,
- isLoading,
- isFiltered,
- } = useSearchContext();
- const { openAddContentSidebar } = useLibraryContext();
-
- const renderEmptyState = () => {
- if (isLoading) {
- return
- {recentItems.map((contentHit) => (
- contentHit.type === 'collection' ? (
-
- This is a text component which uses HTML.
', + metadata: { displayName: 'Introduction to Testing' }, + }; + jest.spyOn(editorCmsApi, 'fetchBlockById').mockImplementationOnce(async () => ( + { status: 200, data: snakeCaseObject(fieldsHtml) } + )); + axiosMock.onPatch(collectionComponentUrl).reply(200); + + render(collectionId); + + const textButton = screen.getByRole('button', { name: /text/i }); + fireEvent.click(textButton); + + // Component should be linked to Collection on closing editor. + const closeButton = await screen.findByRole('button', { name: 'Exit the editor' }); + fireEvent.click(closeButton); + await waitFor(() => expect(axiosMock.history.post[0].url).toEqual(url)); + await waitFor(() => expect(axiosMock.history.patch.length).toEqual(1)); + await waitFor(() => expect(axiosMock.history.patch[0].url).toEqual(collectionComponentUrl)); }); it('should render paste button if clipboard contains pastable xblock', async () => { - initializeMocks(); // Simulate having an HTML block in the clipboard: const getClipboardSpy = mockClipboardHtml.applyMock(); render(); @@ -59,7 +164,6 @@ describe('
+
+ );
+};
+
+export default CustomLibraryCollectionPage;
diff --git a/src/library-authoring/collections/LibraryCollectionComponents.tsx b/src/library-authoring/collections/LibraryCollectionComponents.tsx
index 27ffd5639c..87dacd3ab3 100644
--- a/src/library-authoring/collections/LibraryCollectionComponents.tsx
+++ b/src/library-authoring/collections/LibraryCollectionComponents.tsx
@@ -1,9 +1,9 @@
import { Stack } from '@openedx/paragon';
import { NoComponents, NoSearchResults } from '../EmptyStates';
import { useSearchContext } from '../../search-manager';
-import { LibraryComponents } from '../components';
import messages from './messages';
import { useLibraryContext } from '../common/context';
+import LibraryContent, { ContentType } from '../LibraryContent';
const LibraryCollectionComponents = () => {
const { totalHits: componentCount, isFiltered } = useSearchContext();
@@ -24,7 +24,7 @@ const LibraryCollectionComponents = () => {
return (
+
+
+ {/*
+
+
+
+ {!!sidebarComponentInfo?.type && (
+
+
+
+
+
+ navigate(`/library/${libraryId}`)}>
+
+
+ {subHeaderTitle || 'Loading...'}
+
+
+
+ +
+
+
+
+ )}
+ Content ({componentCount})
-
- ();
- const closeComponentEditor = useCallback(() => openComponentEditor(undefined), []);
+ const [componentBeingEdited, setComponentBeingEdited] = useState();
+ const closeComponentEditor = useCallback(() => {
+ setComponentBeingEdited((prev) => {
+ prev?.onClose?.();
+ return undefined;
+ });
+ }, []);
+ const openComponentEditor = useCallback((usageKey: string, onClose?: () => void) => {
+ setComponentBeingEdited({ usageKey, onClose });
+ }, []);
const [selectedComponents, setSelectedComponents] = useState([]);
diff --git a/src/library-authoring/component-info/ComponentAdvancedInfo.test.tsx b/src/library-authoring/component-info/ComponentAdvancedInfo.test.tsx
index 238be40d39..862ccfe339 100644
--- a/src/library-authoring/component-info/ComponentAdvancedInfo.test.tsx
+++ b/src/library-authoring/component-info/ComponentAdvancedInfo.test.tsx
@@ -12,6 +12,7 @@ import {
mockXBlockAssets,
mockXBlockOLX,
} from '../data/api.mocks';
+import * as apiHooks from '../data/apiHooks';
import { LibraryProvider, SidebarBodyComponentId } from '../common/context';
import { ComponentAdvancedInfo } from './ComponentAdvancedInfo';
import { getXBlockAssetsApiUrl } from '../data/api';
@@ -25,6 +26,7 @@ const setOLXspy = mockSetXBlockOLX.applyMock();
const render = (
usageKey: string = mockLibraryBlockMetadata.usageKeyPublished,
libraryId: string = mockContentLibrary.libraryId,
+ showOnlyPublished: boolean = false,
) => baseRender(
> = () => {
const intl = useIntl();
- const { readOnly, sidebarComponentInfo } = useLibraryContext();
+ const {
+ readOnly,
+ sidebarComponentInfo,
+ showOnlyPublished,
+ } = useLibraryContext();
const usageKey = sidebarComponentInfo?.id;
// istanbul ignore if: this should never happen in production
@@ -30,7 +34,10 @@ const ComponentAdvancedInfoInner: React.FC> = () => {
throw new Error('sidebarComponentUsageKey is required to render ComponentAdvancedInfo');
}
- const { data: olx, isLoading: isOLXLoading } = useXBlockOLX(usageKey);
+ const { data: olx, isLoading: isOLXLoading } = useXBlockOLX(
+ usageKey,
+ showOnlyPublished ? 'published' : 'draft',
+ );
const editorRef = React.useRef(undefined);
const [isEditingOLX, setEditingOLX] = React.useState(false);
const olxUpdater = useUpdateXBlockOLX(usageKey);
diff --git a/src/library-authoring/component-info/ComponentInfo.tsx b/src/library-authoring/component-info/ComponentInfo.tsx
index 36832fc329..43ccbd3c4a 100644
--- a/src/library-authoring/component-info/ComponentInfo.tsx
+++ b/src/library-authoring/component-info/ComponentInfo.tsx
@@ -12,7 +12,7 @@ import {
} from '@openedx/paragon/icons';
import { SidebarAdditionalActions, useLibraryContext } from '../common/context';
-import { ComponentMenu } from '../components';
+import ComponentMenu from '../components';
import { canEditComponent } from '../components/ComponentEditorModal';
import ComponentDetails from './ComponentDetails';
import ComponentManagement from './ComponentManagement';
diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx
index ba40e223e3..05c91c1468 100644
--- a/src/library-authoring/component-info/ComponentPreview.tsx
+++ b/src/library-authoring/component-info/ComponentPreview.tsx
@@ -55,7 +55,7 @@ const ComponentPreview = () => {
variant="light"
iconBefore={OpenInFull}
onClick={openModal}
- className="position-absolute right-0 zindex-10 m-1"
+ className="position-absolute right-0 zindex-1 m-1"
>
{intl.formatMessage(messages.previewExpandButtonTitle)}
diff --git a/src/library-authoring/component-info/ManageCollections.test.tsx b/src/library-authoring/component-info/ManageCollections.test.tsx
index 1bd4b0f164..abcd643dc3 100644
--- a/src/library-authoring/component-info/ManageCollections.test.tsx
+++ b/src/library-authoring/component-info/ManageCollections.test.tsx
@@ -39,14 +39,14 @@ describe('
({
},
}),
}));
+jest.mock('../../studio-home/hooks', () => ({
+ useStudioHome: () => ({
+ isLoadingPage: false,
+ isFailedLoadingPage: false,
+ librariesV2Enabled: true,
+ }),
+}));
mockContentLibrary.applyMock();
mockContentSearchConfig.applyMock();
mockGetCollectionMetadata.applyMock();
@@ -201,9 +208,8 @@ describe(' = ({
const queryParams = new URLSearchParams(location.search);
const variant = queryParams.get('variant') || 'draft';
+ const showOnlyPublished = variant === 'published';
const handleLibrarySelection = (library: string) => {
setCurrentStep('pick-components');
@@ -99,9 +102,15 @@ export const ComponentPicker: React.FC = ({
+ { showOnlyPublished
+ && (
+
+
+ )}
diff --git a/src/library-authoring/component-picker/SelectLibrary.test.tsx b/src/library-authoring/component-picker/SelectLibrary.test.tsx
index cc06fa3af6..aea3aa4b79 100644
--- a/src/library-authoring/component-picker/SelectLibrary.test.tsx
+++ b/src/library-authoring/component-picker/SelectLibrary.test.tsx
@@ -1,5 +1,6 @@
import {
initializeMocks,
+ fireEvent,
render,
screen,
} from '../../testUtils';
@@ -28,10 +29,21 @@ describe('
-
);
@@ -71,43 +83,45 @@ const SelectLibrary = ({ selectedLibrary, setSelectedLibrary }: SelectLibraryPro
value={searchQuery}
placeholder={intl.formatMessage(messages.selectLibrarySearchPlaceholder)}
/>
- setCurrentPage(page)}
- variant="secondary"
- className="align-self-center"
- />
+ {data.results.length === 0 ? () => setSelectedLibrary(e.target.value)}
+ value={selectedLibrary}
+ className="mt-4"
+ >
+ {data.results.map((library) => (
+ setSelectedLibrary(library.id)}
+ className="card-item"
+ >
+ {library.title}}
+ subtitle={`${library.org} / ${library.slug}`}
+ actions={(
+ {' '}
+ )}
+ />
+
+
+
+ ))}
+
+
);
};
diff --git a/src/library-authoring/component-picker/messages.ts b/src/library-authoring/component-picker/messages.ts
index b2791a3e18..963a761bdb 100644
--- a/src/library-authoring/component-picker/messages.ts
+++ b/src/library-authoring/component-picker/messages.ts
@@ -16,21 +16,37 @@ const messages = defineMessages({
defaultMessage: 'Library pagination',
description: 'The pagination label for the select library component',
},
- selectLibraryEmptyStateTitle: {
- id: 'course-authoring.library-authoring.pick-components.select-library.empty-state.title',
+ selectLibraryNoSearchResultsTitle: {
+ id: 'course-authoring.library-authoring.pick-components.select-library.no-search.results.title',
defaultMessage: 'We could not find any result',
- description: 'The title for the empty state in the select library component',
+ description: 'The title for the no search results state in the select library component',
},
- selectLibraryEmptyStateMessage: {
- id: 'course-authoring.library-authoring.pick-components.select-library.empty-state.message',
+ selectLibraryNoSearchResultsMessage: {
+ id: 'course-authoring.library-authoring.pick-components.select-library.no-search.message',
defaultMessage: 'There are no libraries with the current filters.',
- description: 'The message for the empty state in the select library component',
+ description: 'The message for the no search results state in the select library component',
+ },
+ selectLibraryNoLibrariesTitle: {
+ id: 'course-authoring.library-authoring.pick-components.select-library.no-libraries.title',
+ defaultMessage: 'No libraries found',
+ description: 'The title for the no libraries state in the select library component',
+ },
+ selectLibraryNoLibrariesMessage: {
+ id: 'course-authoring.library-authoring.pick-components.select-library.no-libraries.message',
+ defaultMessage: 'You don\'t have any libraries created yet, or you don\'t have access to any libraries. To '
+ + 'create a new library, go to Studio Home or contact your system administrator.',
+ description: 'The message for the no libraries state in the select library component',
},
selectLibraryNextButton: {
id: 'course-authoring.library-authoring.pick-components.select-library.next-button',
defaultMessage: 'Next',
description: 'The text for the next button in the select library component',
},
+ pickerInfoBanner: {
+ id: 'course-authoring.library-authoring.pick-components.component-picker.information-alert',
+ defaultMessage: 'Only published content is visible and available for reuse.',
+ description: 'The alert text on top of component-picker if only published content is visible.',
+ },
});
export default messages;
diff --git a/src/library-authoring/components/CollectionCard.test.tsx b/src/library-authoring/components/CollectionCard.test.tsx
index 6aa55cdfdf..eefbc7ba53 100644
--- a/src/library-authoring/components/CollectionCard.test.tsx
+++ b/src/library-authoring/components/CollectionCard.test.tsx
@@ -27,14 +27,24 @@ const CollectionHitSample: CollectionHit = {
created: 1722434322294,
modified: 1722434322294,
numChildren: 2,
+ published: {
+ numChildren: 1,
+ },
tags: {},
};
let axiosMock: MockAdapter;
let mockShowToast;
-const render = (ui: React.ReactElement) => baseRender(ui, {
- extraWrapper: ({ children }) => { children } ,
+const render = (ui: React.ReactElement, showOnlyPublished: boolean = false) => baseRender(ui, {
+ extraWrapper: ({ children }) => (
+
+ { children }
+
+ ),
});
describe('
> = () => {
if (componentBeingEdited === undefined) {
return null;
}
- const blockType = getBlockType(componentBeingEdited);
+ const blockType = getBlockType(componentBeingEdited.usageKey);
const onClose = () => {
closeComponentEditor();
- invalidateComponentData(queryClient, libraryId, componentBeingEdited);
+ invalidateComponentData(queryClient, libraryId, componentBeingEdited.usageKey);
};
return (
{
- const requestData = JSON.parse(req.body?.toString() ?? '');
- const query = requestData?.queries[0]?.q ?? '';
- // We have to replace the query (search keywords) in the mock results with the actual query,
- // because otherwise we may have an inconsistent state that causes more queries and unexpected results.
- mockEmptyResult.results[0].query = query;
- // And fake the required '_formatted' fields; it contains the highlighting ... around matched words
- // eslint-disable-next-line no-underscore-dangle, no-param-reassign
- mockEmptyResult.results[0]?.hits.forEach((hit: any) => { hit._formatted = { ...hit }; });
- return mockEmptyResult;
-};
-
-jest.mock('../../search-manager', () => ({
- ...jest.requireActual('../../search-manager'),
- useSearchContext: () => mockUseSearchContext(),
-}));
-
-const clipboardBroadcastChannelMock = {
- postMessage: jest.fn(),
- close: jest.fn(),
-};
-
-(global as any).BroadcastChannel = jest.fn(() => clipboardBroadcastChannelMock);
-
-const withLibraryId = (libraryId: string) => ({
- extraWrapper: ({ children }: { children: React.ReactNode }) => (
- {children}
- ),
-});
-
-describe('
- previewLimit
- && (
-
-
-
- )
- }
- />
-
- {children}
-
-
-);
-
-export default LibrarySection;
diff --git a/src/library-authoring/components/index.ts b/src/library-authoring/components/index.ts
index 3a928498c7..119d3de913 100644
--- a/src/library-authoring/components/index.ts
+++ b/src/library-authoring/components/index.ts
@@ -1,2 +1 @@
-export { default as LibraryComponents } from './LibraryComponents';
-export { ComponentMenu } from './ComponentCard';
+export { ComponentMenu as default } from './ComponentCard';
diff --git a/src/library-authoring/create-library/CreateLibrary.tsx b/src/library-authoring/create-library/CreateLibrary.tsx
index 1731984ec5..db81562206 100644
--- a/src/library-authoring/create-library/CreateLibrary.tsx
+++ b/src/library-authoring/create-library/CreateLibrary.tsx
@@ -12,6 +12,7 @@ import { Formik } from 'formik';
import { useNavigate } from 'react-router-dom';
import * as Yup from 'yup';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
import { REGEX_RULES } from '../../constants';
import Header from '../../header';
import FormikControl from '../../generic/FormikControl';
@@ -51,7 +52,23 @@ const CreateLibrary = () => {
}
return (
- <>
+
{
{isError && (
);
};
diff --git a/src/library-authoring/create-library/CustomCreateLibrary.tsx b/src/library-authoring/create-library/CustomCreateLibrary.tsx
new file mode 100644
index 0000000000..3584068684
--- /dev/null
+++ b/src/library-authoring/create-library/CustomCreateLibrary.tsx
@@ -0,0 +1,143 @@
+import {
+ ActionRow, Button, Container, Form, StatefulButton,
+} from '@openedx/paragon';
+import { Formik } from 'formik';
+import * as Yup from 'yup';
+import PropTypes from 'prop-types';
+import AlertError from '../../generic/alert-error';
+import FormikControl from '../../generic/FormikControl';
+import SubHeader from '../../generic/sub-header/SubHeader';
+import messages from './messages';
+
+import FormikErrorFeedback from '../../generic/FormikErrorFeedback';
+
+const CustomCreateLibrary = ({
+ formatMessage,
+ specialCharsRule,
+ noSpaceRule,
+ validSlugIdRegex,
+ mutate,
+ isOrganizationListLoading,
+ organizationListData,
+ handleOnClickCancel,
+ isLoading,
+ isError,
+ error,
+}) => (
+
+
+ mutate(values)}
+ >
+ {(formikProps) => (
+
+ )}
+
+ {isError && (
+);
+
+export default CustomCreateLibrary;
+
+CustomCreateLibrary.propTypes = {
+ formatMessage: PropTypes.func.isRequired,
+ specialCharsRule: PropTypes.instanceOf(RegExp).isRequired,
+ noSpaceRule: PropTypes.instanceOf(RegExp).isRequired,
+ validSlugIdRegex: PropTypes.instanceOf(RegExp).isRequired,
+ mutate: PropTypes.func.isRequired,
+ isOrganizationListLoading: PropTypes.bool.isRequired,
+ organizationListData: PropTypes.arrayOf(PropTypes.string),
+ handleOnClickCancel: PropTypes.func.isRequired,
+ isLoading: PropTypes.bool.isRequired,
+ isError: PropTypes.bool.isRequired,
+ error: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.object,
+ ]),
+};
+
+CustomCreateLibrary.defaultProps = {
+ organizationListData: [],
+ error: null,
+};
diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts
index 06f8c50f06..30744e93eb 100644
--- a/src/library-authoring/data/api.ts
+++ b/src/library-authoring/data/api.ts
@@ -1,5 +1,6 @@
import { camelCaseObject, getConfig, snakeCaseObject } from '@edx/frontend-platform';
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { VersionSpec } from '../LibraryBlock';
const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
@@ -52,12 +53,14 @@ export const getLibraryPasteClipboardUrl = (libraryId: string) => `${getApiBaseU
* Get the URL for the xblock fields/metadata API.
*/
export const getXBlockFieldsApiUrl = (usageKey: string) => `${getApiBaseUrl()}/api/xblock/v2/xblocks/${usageKey}/fields/`;
-export const getXBlockFieldsVersionApiUrl = (usageKey: string, version: string) => `${getApiBaseUrl()}/api/xblock/v2/xblocks/${usageKey}@${version}/fields/`;
+export const getXBlockFieldsVersionApiUrl = (usageKey: string, version: VersionSpec) => `${getApiBaseUrl()}/api/xblock/v2/xblocks/${usageKey}@${version}/fields/`;
/**
* Get the URL for the xblock OLX API
*/
export const getXBlockOLXApiUrl = (usageKey: string) => `${getLibraryBlockMetadataUrl(usageKey)}olx/`;
+export const getXBlockOLXVersionApiUrl = (usageKey: string, version: VersionSpec) => `${getApiBaseUrl()}/api/xblock/v2/xblocks/${usageKey}@${version}/olx/`;
+
/**
* Get the URL for the xblock Publish API
*/
@@ -385,7 +388,7 @@ export async function getLibraryBlockMetadata(usageKey: string): Promise {
+export async function getXBlockFields(usageKey: string, version: VersionSpec = 'draft'): Promise {
const { data } = await getAuthenticatedHttpClient().get(getXBlockFieldsVersionApiUrl(usageKey, version));
return camelCaseObject(data);
}
@@ -412,8 +415,8 @@ export async function createCollection(libraryId: string, collectionData: Create
* Fetch the OLX for the given XBlock.
*/
// istanbul ignore next
-export async function getXBlockOLX(usageKey: string): Promise {
- const { data } = await getAuthenticatedHttpClient().get(getXBlockOLXApiUrl(usageKey));
+export async function getXBlockOLX(usageKey: string, version: VersionSpec = 'draft'): Promise {
+ const { data } = await getAuthenticatedHttpClient().get(getXBlockOLXVersionApiUrl(usageKey, version));
return data.olx;
}
diff --git a/src/library-authoring/data/apiHooks.ts b/src/library-authoring/data/apiHooks.ts
index 159fc8e6d7..353ab74cef 100644
--- a/src/library-authoring/data/apiHooks.ts
+++ b/src/library-authoring/data/apiHooks.ts
@@ -45,6 +45,7 @@ import {
publishXBlock,
deleteXBlockAsset,
} from './api';
+import { VersionSpec } from '../LibraryBlock';
export const libraryQueryPredicate = (query: Query, libraryId: string): boolean => {
// Invalidate all content queries related to this library.
@@ -91,7 +92,7 @@ export const xblockQueryKeys = {
*/
xblock: (usageKey?: string) => [...xblockQueryKeys.all, usageKey],
/** Fields (i.e. the content, display name, etc.) of an XBlock */
- xblockFields: (usageKey: string, version: string = 'draft') => [...xblockQueryKeys.xblock(usageKey), 'fields', version],
+ xblockFields: (usageKey: string, version: VersionSpec = 'draft') => [...xblockQueryKeys.xblock(usageKey), 'fields', version],
/** OLX (XML representation of the fields/content) */
xblockOLX: (usageKey: string) => [...xblockQueryKeys.xblock(usageKey), 'OLX'],
/** assets (static files) */
@@ -113,6 +114,8 @@ export const xblockQueryKeys = {
export function invalidateComponentData(queryClient: QueryClient, contentLibraryId: string, usageKey: string) {
queryClient.invalidateQueries({ queryKey: xblockQueryKeys.xblockFields(usageKey) });
queryClient.invalidateQueries({ queryKey: xblockQueryKeys.componentMetadata(usageKey) });
+ // The description and display name etc. may have changed, so refresh everything in the library too:
+ queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.contentLibrary(contentLibraryId) });
queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, contentLibraryId) });
}
@@ -150,8 +153,6 @@ export const useDeleteLibraryBlock = () => {
mutationFn: deleteLibraryBlock,
onSettled: (_data, _error, variables) => {
const libraryId = getLibraryId(variables.usageKey);
- queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.contentLibrary(libraryId) });
- queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, libraryId) });
invalidateComponentData(queryClient, libraryId, variables.usageKey);
},
});
@@ -292,7 +293,7 @@ export const useLibraryBlockMetadata = (usageId: string) => (
})
);
-export const useXBlockFields = (usageKey: string, version: string = 'draft') => (
+export const useXBlockFields = (usageKey: string, version: VersionSpec = 'draft') => (
useQuery({
queryKey: xblockQueryKeys.xblockFields(usageKey, version),
queryFn: () => getXBlockFields(usageKey, version),
@@ -349,10 +350,10 @@ export const useCreateLibraryCollection = (libraryId: string) => {
};
/** Get the OLX source of a library component */
-export const useXBlockOLX = (usageKey: string) => (
+export const useXBlockOLX = (usageKey: string, version: VersionSpec) => (
useQuery({
queryKey: xblockQueryKeys.xblockOLX(usageKey),
- queryFn: () => getXBlockOLX(usageKey),
+ queryFn: () => getXBlockOLX(usageKey, version),
enabled: !!usageKey,
})
);
@@ -367,11 +368,7 @@ export const useUpdateXBlockOLX = (usageKey: string) => {
mutationFn: (newOLX: string) => setXBlockOLX(usageKey, newOLX),
onSuccess: (olxFromServer) => {
queryClient.setQueryData(xblockQueryKeys.xblockOLX(usageKey), olxFromServer);
- // Reload the other data for this component:
invalidateComponentData(queryClient, contentLibraryId, usageKey);
- // And the description and display name etc. may have changed, so refresh everything in the library too:
- queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.contentLibrary(contentLibraryId) });
- queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, contentLibraryId) });
},
});
};
diff --git a/src/library-authoring/library-team/LibraryTeam.test.tsx b/src/library-authoring/library-team/LibraryTeam.test.tsx
index 2ab5ec52ab..bdd424fc08 100644
--- a/src/library-authoring/library-team/LibraryTeam.test.tsx
+++ b/src/library-authoring/library-team/LibraryTeam.test.tsx
@@ -15,6 +15,7 @@ import {
getLibraryTeamMemberApiUrl,
} from '../data/api';
import { LibraryProvider } from '../common/context';
+import { ToastProvider } from '../../generic/toast-context';
import LibraryTeam from './LibraryTeam';
mockContentLibrary.applyMock();
@@ -28,9 +29,11 @@ describe('
- ,
+
+
+
+ ,
);
await waitFor(() => {
@@ -176,6 +179,56 @@ describe('> = () => {
accessLevel: LibraryRole.Reader.toString() as LibraryAccessLevel,
}).then(() => {
showToast(intl.formatMessage(messages.addMemberSuccess));
- }).catch(() => {
- showToast(intl.formatMessage(messages.addMemberError));
+ }).catch((addMemberError) => {
+ const errorData = typeof addMemberError === 'object' ? addMemberError.response?.data : undefined;
+ if (errorData && 'email' in errorData) {
+ showToast(intl.formatMessage(messages.addMemberEmailError));
+ } else {
+ showToast(intl.formatMessage(messages.addMemberError));
+ }
});
closeAddLibraryTeamMember();
},
diff --git a/src/library-authoring/library-team/messages.ts b/src/library-authoring/library-team/messages.ts
index 6bf6a8c363..d56d606153 100644
--- a/src/library-authoring/library-team/messages.ts
+++ b/src/library-authoring/library-team/messages.ts
@@ -124,6 +124,11 @@ const messages = defineMessages({
defaultMessage: 'Error adding Team Member',
description: 'Message shown when an error occurs while adding a Library Team member',
},
+ addMemberEmailError: {
+ id: 'course-authoring.library-authoring.library-team.add-member-email-error',
+ defaultMessage: 'Error adding Team Member. Please verify that the email is correct and belongs to a registered user.',
+ description: 'Message shown when an error occurs with email while adding a Library Team member.',
+ },
deleteMemberSuccess: {
id: 'course-authoring.library-authoring.library-team.delete-member-success',
defaultMessage: 'Team Member deleted',
diff --git a/src/library-authoring/messages.ts b/src/library-authoring/messages.ts
index 7ae8c2b210..73ffe20666 100644
--- a/src/library-authoring/messages.ts
+++ b/src/library-authoring/messages.ts
@@ -33,7 +33,7 @@ const messages = defineMessages({
},
homeTab: {
id: 'course-authoring.library-authoring.home-tab',
- defaultMessage: 'Home',
+ defaultMessage: 'All Content',
description: 'Tab label for the home tab',
},
componentsTab: {
@@ -111,6 +111,11 @@ const messages = defineMessages({
defaultMessage: 'Change Library',
description: 'Breadcrumbs link to return to library selection',
},
+ librariesV2DisabledError: {
+ id: 'authoring.alert.error.libraries.v2.disabled',
+ defaultMessage: 'This page cannot be shown: Libraries v2 are disabled.',
+ description: 'Error message shown to users when trying to load a libraries V2 page while libraries v2 are disabled.',
+ },
});
export default messages;
diff --git a/src/library/Footer/Footer.scss b/src/library/Footer/Footer.scss
new file mode 100644
index 0000000000..43f6478825
--- /dev/null
+++ b/src/library/Footer/Footer.scss
@@ -0,0 +1,73 @@
+.footer {
+ background-color: var(--c9);
+ padding: 1rem 2rem;
+ color: var(--c8);
+}
+
+.container {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ height: 15rem;
+}
+
+/* All sections default styles */
+.section {
+ flex: 1;
+ margin: 1rem;
+ min-width: 12.5rem;
+ display: flex;
+ flex-direction: column;
+ text-align: left; /* Always keep text aligned left */
+}
+
+/* Alignment classes using flex order */
+.left {
+ order: 1;
+ align-items: flex-start;
+}
+
+.center {
+ order: 2;
+ align-items: center;
+}
+
+.right {
+ order: 3;
+ align-items: flex-end;
+}
+
+.section h3 {
+ color: var(--c8);
+ margin-bottom: 1rem;
+ /* margin-left: -1.5rem; */
+}
+
+.section ul {
+ list-style: none;
+ padding: 0;
+}
+
+.section ul li {
+ margin-bottom: 0.625rem;
+}
+
+.section ul li a {
+ color: var(--c8);
+ text-decoration: none;
+}
+
+.section ul li a:hover {
+ text-decoration: underline;
+}
+
+.copyright {
+ text-align: center;
+ margin-top: 1.25rem;
+ font-size: 0.875rem;
+ color: var(--c7);
+}
+
+.h3Adjust {
+ margin-left: -1.5rem;
+}
\ No newline at end of file
diff --git a/src/library/Footer/Footer.tsx b/src/library/Footer/Footer.tsx
new file mode 100644
index 0000000000..5268fb92d0
--- /dev/null
+++ b/src/library/Footer/Footer.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import './Footer.scss';
+import { FooterProps } from '../interfaces/components';
+
+const Footer: React.FC = ({
+ contactInfo, quickLinks, exploreLinks, logoUrl, copyrights,
+}) => {
+ // Use class names directly now
+ const getAlignClass = (align: string | undefined) => align ?? 'left'; // default to 'left' class if not provided
+
+ return (
+
+ );
+};
+
+export default Footer;
diff --git a/src/library/Header/Header-Menu/HeaderMenu.scss b/src/library/Header/Header-Menu/HeaderMenu.scss
new file mode 100644
index 0000000000..cf3f08a1b7
--- /dev/null
+++ b/src/library/Header/Header-Menu/HeaderMenu.scss
@@ -0,0 +1,42 @@
+.dropdownMenu {
+ padding: 0.5rem 0;
+ background: white;
+ border-radius: 0.5rem;
+ box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
+ min-width: 200px;
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem; /* Optional: space between items */
+}
+
+.dropdownMenuItem {
+ width: 100%;
+ text-align: left;
+ font-weight: 500;
+ background-color: white;
+ border: none;
+ color: var(--c6);
+ outline: none !important;
+ border-color: #fff !important;
+}
+
+.dropdownMenuItem:hover {
+ background-color: #f0f0f0;
+}
+
+.menuButtonHeader{
+ font-weight: 600;
+ // padding-top: 1rem;
+ text-transform: uppercase;
+ color: var(--c6);
+ display: flex;
+ background-color: #fff;
+ width: 8rem;
+ outline: none !important;
+ border-color: #fff !important;
+}
+
+.btn-tertiary:focus::before {
+ border: none !important;
+ position: relative;
+}
\ No newline at end of file
diff --git a/src/library/Header/Header-Menu/HeaderMenu.tsx b/src/library/Header/Header-Menu/HeaderMenu.tsx
new file mode 100644
index 0000000000..ed4176fa8e
--- /dev/null
+++ b/src/library/Header/Header-Menu/HeaderMenu.tsx
@@ -0,0 +1,62 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import React, { useState } from 'react';
+import {
+ Button, Menu, MenuItem, ModalPopup, useToggle,
+} from '@openedx/paragon';
+import { KeyboardArrowDown, KeyboardArrowUp } from '@openedx/paragon/icons';
+import { HeaderMenuProps } from '../../interfaces/components';
+import './HeaderMenu.scss';
+
+const HeaderMenu: React.FC = ({ menu }) => {
+ const [target, setTarget] = useState(null);
+ const [isOpen, open, close] = useToggle(false);
+
+ const handleToggle = () => {
+ isOpen ? close() : open();
+ };
+
+ return (
+ <>
+
+
+
+
+
+ );
+};
+
+export default HeaderMenu;
diff --git a/src/library/Header/MainHeader.scss b/src/library/Header/MainHeader.scss
new file mode 100644
index 0000000000..e45a386a99
--- /dev/null
+++ b/src/library/Header/MainHeader.scss
@@ -0,0 +1,559 @@
+.mainHeaderContainer {
+ display: flex;
+}
+
+.navbarContainer {
+ background-color: var(--bg-surface);
+ // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+ height: 6rem;
+ position: relative;
+ display: flex;
+ align-items: center;
+ // transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+ // padding-left: 3rem;
+ padding-right: 3rem;
+ // .d-flex.align-items-center {
+ // display: flex;
+ // align-items: center;
+ // gap: 1rem;
+ // }
+
+ .navbar-brand {
+ padding: 0;
+ display: flex;
+ align-items: center;
+ margin: 0;
+
+ img {
+ max-width: 100%;
+ height: auto;
+ object-fit: contain;
+ max-height: 5rem;
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ }
+ }
+
+ .navbar-collapse {
+ background-color: var(--c8);
+ border-radius: 0 0 0.5rem 0.5rem;
+ padding: 1rem;
+ }
+
+ // Center search container
+ .d-flex.align-items-center.justify-content-center {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ width: auto;
+ z-index: 1;
+ }
+
+ .toggle-sidebar-icon {
+ display: flex;
+ align-items: center;
+ margin: 0;
+ margin-right: 1rem;
+ }
+
+ .search-field-custom {
+ max-width: 30rem;
+ }
+
+ // .icon-curved-square {
+ // display: flex;
+ // align-items: center;
+ // justify-content: center;
+ // // width: 2.5rem;
+ // // height: 2.5rem;
+ // // border-radius: 0.5rem;
+ // background-color: #f5f5f5;
+ // margin: 0 0.25rem;
+ // cursor: pointer;
+ // transition: background-color 0.2s;
+
+ // &:hover {
+ // background-color: #e5e5e5;
+ // }
+ // }
+
+ // .language-dropdown {
+ // margin: 0 0.5rem;
+ // }
+
+ // .usermenu-dropdown {
+ // margin-left: 0.5rem;
+ // }
+
+ // Mobile styles
+ @media (max-width: 767px) {
+ // padding-left: 1rem;
+ padding-right: 0.25rem;
+
+ // .d-flex.align-items-center {
+ // gap: 0.5rem;
+ // }
+
+ .navbar-brand {
+ img {
+ max-width: 5rem;
+ height: auto;
+ object-fit: contain;
+ max-height: 5rem;
+ padding-top: 0.2rem;
+ padding-bottom: 0.2rem;
+ }
+ }
+
+ .toggle-sidebar-icon {
+ margin: 0;
+ padding: 0;
+ }
+ .more-menu-dropdown {
+ position: absolute;
+ top: 100%;
+ right: 1rem;
+ background-color: #fff;
+ border-radius: 0.5rem;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ padding: 1rem;
+ z-index: 1000;
+ display: flex;
+ flex-direction: column;
+ min-width: 200px;
+
+ .more-menu-icons-row {
+ display: flex;
+ flex-direction: row;
+ gap: 0.5rem;
+ width: 100%;
+ margin-bottom: 0.5rem;
+
+ .icon-curved-square {
+ flex: 1;
+ display: flex;
+
+ .btn-icon {
+ width: 100%;
+ height: 100%;
+ padding: 0.5rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ }
+
+ .language-dropdown {
+ width: 100%;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+ }
+ }
+ // .navbar-brand,
+ // .toggle-sidebar-icon {
+ // flex: 0 0 auto;
+ // min-width: unset;
+ // max-width: unset;
+ // }
+ // .navbar-brand {
+ // margin-right: 0;
+ // padding-right: 0;
+ // img {
+ // max-width: 5rem;
+ // height: auto;
+ // object-fit: contain;
+ // max-height: 5rem;
+ // padding-top: 0.5rem;
+ // padding-bottom: 0.5rem;
+ // }
+ // }
+ .toggle-sidebar-icon {
+ margin-left: 0;
+ padding-left: 0;
+ }
+ display: flex;
+ align-items: center;
+ gap: 0.25rem;
+ height: 5rem;
+ justify-content: flex-start;
+ }
+
+ @media (max-width: 400px) {
+ // .d-flex.align-items-center {
+ // gap: 0.3rem;
+ // }
+
+ // .toggle-sidebar-icon {
+ // max-width: 2rem;
+ // min-width: 2rem;
+ // width: 2rem;
+ // height: 2rem;
+ // margin: 0 1px;
+ // padding: 0;
+ // flex-shrink: 0;
+ // }
+
+ // .navbar-brand {
+ // img {
+ // max-width: 4rem;
+ // max-height: 4rem;
+ // padding: 0.1rem 0;
+ // }
+ // }
+ // .icon-curved-square,
+ // .language-dropdown {
+ // max-width: 2rem;
+ // min-width: 2rem;
+ // width: 2rem;
+ // height: 2rem;
+ // margin: 0 1px;
+ // padding: 0;
+ // flex-shrink: 0;
+ // }
+ // .usermenu-dropdown {
+ // min-width: 0;
+ // max-width: 100%;
+ // flex-shrink: 1;
+ // margin: 0 1px;
+ // padding: 0;
+ // }
+ // .d-flex.align-items-center.gap-2.ms-auto {
+ // gap: 0.15rem !important;
+ // min-width: 0;
+ // }
+
+
+ }
+}
+
+.buttonListContainer {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: center;
+ flex: 1;
+}
+
+.navbarList {
+ display: flex;
+ gap: 2rem;
+ padding: 0;
+ margin: 0;
+ list-style-type: none;
+}
+
+.navbarList li {
+ cursor: pointer;
+ color: var(--c6);
+}
+
+.navbarList li:hover {
+ color: var(--c2);
+}
+
+.navbarButtons {
+ display: flex;
+ gap: 0.5rem;
+ margin-left: auto;
+}
+
+.navbarListLeft {
+ justify-self: start;
+ margin-left: 4rem;
+}
+
+.navbarListCenter {
+ justify-self: center;
+}
+
+.navbarListRight {
+ justify-self: end;
+ margin-right: 4rem;
+}
+
+.menuButton {
+ padding: 0.75rem 1.25rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ color: var(--c6); /* or your preferred text color */
+ background-color: #fff;
+ outline: none !important;
+ border-color: #fff !important;
+ width: 8rem;
+}
+
+.mainHeaderContainer {
+ display: flex;
+ position: relative;
+ z-index: 100;
+}
+
+// .btn-outline-primary {
+// border: none;
+// }
+
+
+.nav-gap {
+ gap: 3rem;
+}
+
+.dropdown-menu {
+ min-width: 15rem !important;
+}
+
+.search-field-custom {
+ background: var(--bg-surface);
+ border: 2px solid var(--primary-light) !important;
+ border-radius: 30px !important;
+ padding: 0.3rem 0.6rem !important;
+ display: flex;
+ align-items: center;
+ box-shadow: none !important;
+ min-height: 35px;
+
+ input {
+ background: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ color: var(--text-light) !important;
+ font-size: 1.1rem;
+ font-weight: 500;
+ &::placeholder {
+ color: var(--text-secondary, #697586) !important;
+ opacity: 1;
+ }
+ }
+
+// .btn-icon.btn-icon-primary {
+// width: 42px;
+// height: 42px;
+// border-radius: 12px;
+// }
+
+ .pgn__searchfield-form {
+ outline: none !important;
+ border: none !important;
+ }
+
+}
+
+.search-field-custom input:focus {
+ outline: none !important;
+ box-shadow: none !important;
+}
+
+.pgn__searchfield.has-focus:not(.pgn__searchfield--external)::after {
+ border: none !important;
+}
+
+.pgn__searchfield:hover, .pgn__searchfield:active {
+ border: 2px solid var(--primary) !important;
+}
+
+.icon-curved-square .btn-icon.btn-icon-primary {
+ background-color: var(--primary-light) !important;
+ margin-right: 1rem;
+ // width: 42px;
+ // height: 42px;
+ // border-radius: 12px;
+
+ &:hover {
+ background-color: var(--primary);
+ color: var(--primary-light) !important;
+ }
+}
+
+.language-dropdown {
+
+
+ .btn-tertiary {
+ background-color: var(--primary-light);
+ border-radius: 25px;
+ }
+
+ .btn-tertiary:hover {
+ background-color: var(--primary) !important;
+ color: var(--primary-light) !important;
+ }
+
+ .btn-tertiary.dropdown-toggle {
+ background-color: var(--primary-light) !important;
+ color: var(--primary) !important;
+
+ &:hover {
+ background-color: var(--primary) !important;
+ color: var(--primary-light) !important;
+ }
+ }
+}
+
+.usermenu-dropdown {
+ // margin: 0 6px;
+ margin-left: 1rem;
+
+ .btn-tertiary {
+ // background-color: var(--primary-light);
+ border-radius: 10px;
+ }
+
+ // .btn-tertiary:hover {
+ // background-color: var(--primary) !important;
+ // color: var(--primary-light) !important;
+ // }
+
+ // .btn-tertiary.dropdown-toggle {
+ // background-color: var(--primary-light) !important;
+ // color: var(--primary) !important;
+
+ // &:hover {
+ // background-color: var(--primary) !important;
+ // color: var(--primary-light) !important;
+ // }
+ // }
+}
+// .btn-icon.btn-icon-primary {
+// background-color: var(--primary-light);
+// width: 48px;
+// height: 48px;
+// border-radius: 16px;
+
+.toggle-sidebar-icon .btn-icon.btn-icon-primary {
+ background-color: var(--primary-light);
+ // width: 42px;
+ // height: 42px;
+ // border-radius: 12px;
+
+// .icon-curved-square {
+// width: 48px;
+// height: 48px;
+// display: flex;
+// align-items: center;
+// justify-content: center;
+// background: #ede7f6; /* light purple, adjust as needed */
+// border-radius: 16px; /* curved square */
+// margin: 0 6px;
+// transition: box-shadow 0.2s, background 0.2s;
+// cursor: pointer;
+// }
+
+// .icon-curved-square:hover {
+// background: #d1c4e9; /* slightly darker on hover */
+// box-shadow: 0 2px 8px rgba(80, 60, 180, 0.10);
+// }
+
+ &:focus {
+ background-color: var(--primary-light);
+ color: var(--primary);
+
+ &:hover {
+ background-color: var(--primary) !important;
+ color: var(--primary-light) !important;
+ }
+ }
+}
+
+// Search modal styles
+.search-modal {
+ .modal-content {
+ border-radius: 0.5rem;
+ }
+
+ .modal-header {
+ border-bottom: none;
+ padding: 1rem 1.5rem;
+ }
+
+ .modal-body {
+ padding: 0 1.5rem 1.5rem;
+ }
+}
+
+.fixed-search-bar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ z-index: 2000;
+ background: rgba(255,255,255,0.98);
+ box-shadow: 0 2px 8px rgba(0,0,0,0.10);
+ padding: 1rem 0.5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.fixed-search-bar-inner {
+ width: 100%;
+ max-width: 600px;
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.fixed-search-bar .close-search-bar {
+ background: none;
+ border: none;
+ font-size: 2rem;
+ color: #888;
+ margin-left: 0.5rem;
+ cursor: pointer;
+ line-height: 1;
+ transition: color 0.2s;
+}
+
+.fixed-search-bar .close-search-bar:hover {
+ color: #333;
+}
+
+.navbar-buttons .btn-icon.btn-icon-primary {
+ background-color: var(--primary-light);
+ // width: 42px;
+ // height: 42px;
+ // border-radius: 12px;
+
+ &:hover {
+ background-color: var(--primary);
+ color: var(--primary-light) !important;
+ }
+
+ &:active {
+ background-color: var(--primary) !important;
+ color: var(--primary-light) !important;
+ }
+
+ &:focus {
+ background-color: var(--primary-light);
+ color: var(--primary);
+
+ &:hover {
+ background-color: var(--primary) !important;
+ color: var(--primary-light) !important;
+ }
+ }
+}
+
+
+.usermenu-dropdown-mobile {
+ // margin: 0 6px;
+
+ .btn-tertiary {
+ background-color: var(--primary-light);
+ border-radius: 25px;
+ }
+
+ .btn-tertiary:hover {
+ background-color: var(--primary) !important;
+ color: var(--primary-light) !important;
+ }
+
+ .btn-tertiary.dropdown-toggle {
+ background-color: var(--primary-light) !important;
+ color: var(--primary) !important;
+
+ &:hover {
+ background-color: var(--primary) !important;
+ color: var(--primary-light) !important;
+ }
+ }
+}
diff --git a/src/library/Header/MainHeader.tsx b/src/library/Header/MainHeader.tsx
new file mode 100644
index 0000000000..db5ddb4378
--- /dev/null
+++ b/src/library/Header/MainHeader.tsx
@@ -0,0 +1,308 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import React, { useState, useEffect, useRef } from 'react';
+import {
+ Navbar,
+ Nav,
+ NavDropdown,
+ Button,
+ SearchField,
+ Icon,
+ IconButton,
+ IconButtonWithTooltip,
+ Dropdown,
+} from '@openedx/paragon';
+// import useIsMobileSize from '../../../hooks/useIsMobileSize';
+// import { MainHeaderProps } from '../../../interfaces/components';
+import { MainHeaderProps } from 'titaned-lib';
+// import useIsMobileSize from '../hooks/useIsMobileSize';
+// import UserMenu from '../UserMenu/UserMenu';
+// import { useSidebar } from '../../../hooks/useSidebar';
+import {
+ ExitToApp, HelpCenter, Notifications, Sync, MenuIcon, Search, MoreVert,
+} from '@openedx/paragon/icons';
+import { useSidebar } from '../hooks/useSidebar';
+// import './MainHeader.scss';
+import useIsMobileSize from '../hooks/useIsMobileSize';
+import UserMenu from '../UserMenu/UserMenu';
+import './MainHeader.scss';
+
+const MainHeader: React.FC = ({
+ logoUrl,
+ menuList,
+ loginSignupButtons,
+ authenticatedUser = null,
+ // config,
+ userMenuItems,
+ menuAlignment,
+}) => {
+ const isMobile = useIsMobileSize();
+ const { toggleSidebar, setSidebarCollapsed } = useSidebar();
+ const [selectedLanguage, setSelectedLanguage] = useState(() => localStorage.getItem('selectedLanguage') || 'EN');
+ const [showSearchModal, setShowSearchModal] = useState(false);
+ const [showMoreMenu, setShowMoreMenu] = useState(false);
+ const moreMenuRef = useRef(null);
+
+ useEffect(() => {
+ document.body.dir = selectedLanguage === 'AR' ? 'rtl' : 'ltr';
+ }, [selectedLanguage]);
+
+ useEffect(() => {
+ if (isMobile) {
+ setSidebarCollapsed(true);
+ }
+ }, []);
+
+ useEffect(() => {
+ if (!showMoreMenu) return;
+
+ function handleClickOutside(event: MouseEvent) {
+ if (moreMenuRef.current && !moreMenuRef.current.contains(event.target as Node)) {
+ setShowMoreMenu(false);
+ }
+ }
+
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [showMoreMenu]);
+
+ const handleLanguageChange = (lang: string) => {
+ setSelectedLanguage(lang);
+ localStorage.setItem('selectedLanguage', lang);
+ };
+
+ const alignmentMap: { [key: string]: string } = {
+ left: 'justify-content-start',
+ center: 'justify-content-center',
+ right: 'justify-content-end',
+ };
+
+ const alignmentClass = menuAlignment
+ ? alignmentMap[menuAlignment.toLowerCase()] || 'justify-content-start'
+ : 'justify-content-start';
+
+ const handleSearch = (value: string) => {
+ // Implement search functionality here
+ console.log('Search query:', value);
+ };
+
+ return (
+
+
+
+
+
+ {/* Fixed search bar overlay */}
+ {showSearchModal && (
+
+ );
+};
+
+export default MainHeader;
diff --git a/src/library/NavDropdownMenu/NavDropdownMenu.tsx b/src/library/NavDropdownMenu/NavDropdownMenu.tsx
new file mode 100644
index 0000000000..69c9df0f7c
--- /dev/null
+++ b/src/library/NavDropdownMenu/NavDropdownMenu.tsx
@@ -0,0 +1,60 @@
+/* eslint-disable no-console */
+/* eslint-disable linebreak-style */
+import React from 'react';
+// import PropTypes from 'prop-types';
+import {
+ Dropdown,
+ DropdownButton,
+} from '@openedx/paragon';
+
+interface NavDropdownMenuProps {
+ id: string;
+ buttonTitle: React.ReactNode;
+ items: {
+ href: string;
+ title: string;
+ }[];
+}
+
+const NavDropdownMenu: React.FC = ({
+ id,
+ buttonTitle,
+ items,
+}) => {
+ console.log('NavDropdownMenu Props:', items);
+ return (
+
+ {items.map(item => (
+
+ {/* */}
+ {item.title}
+ {/* */}
+
+
+ ))}
+
+ );
+};
+
+// NavDropdownMenu.propTypes = {
+// id: PropTypes.string.isRequired,
+// buttonTitle: PropTypes.node.isRequired,
+// items: PropTypes.arrayOf(
+// PropTypes.shape({
+// href: PropTypes.string.isRequired,
+// title: PropTypes.node.isRequired,
+// }).isRequired
+// ).isRequired,
+// };
+
+export default NavDropdownMenu;
diff --git a/src/library/Sidebar/Sidebar.scss b/src/library/Sidebar/Sidebar.scss
new file mode 100644
index 0000000000..e1ecc98027
--- /dev/null
+++ b/src/library/Sidebar/Sidebar.scss
@@ -0,0 +1,150 @@
+.sidebar {
+ width: 200px;
+ min-height: 100vh;
+ background-color: var(--bg-surface);
+ border-right: 1px solid var(--border-color);
+ position: relative;
+ // padding: 8px 4px;
+ transition: all 0.3s ease;
+ display: flex;
+ flex-direction: column;
+ padding: 0;
+ z-index: 101;
+ transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ overflow: visible;
+
+ // Collapsed state styles
+ &.collapsed {
+ width: 80px;
+ min-width: 50px;
+ padding: 0;
+ transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ .sidebar-btn {
+ padding: 14px 10px;
+ padding-right: 0px;
+ justify-content: center;
+ position: relative;
+ z-index: 25;
+ .btn-content {
+ flex-direction: column;
+ align-items: center;
+ gap: 0;
+ .btn-label {
+ display: none;
+ opacity: 0;
+ max-width: 0;
+ margin-left: 0;
+ }
+ }
+
+ // &:hover {
+ // .btn-label {
+ // /* Removed old CSS tooltip styles */
+ // }
+ // }
+ }
+ }
+
+ // Styles for non-standard routes
+ &.non-standard-route {
+ // When NOT collapsed (i.e., expanded state) on a non-standard route
+ &:not(.collapsed) {
+ width: 200px; // Expand to 200px
+ position: fixed; // Overlay content
+ // height: 100vh;
+ top: 6rem;
+ left: 0;
+ z-index: 1000; // Ensure it's above other content
+ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; // Animate transform for slide effect
+ transform: translateX(0); // Ensure it's visible
+ margin-right: 80px;
+ }
+
+ }
+
+ .sidebar-buttons {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ margin-top: 1.5rem;
+ margin-right: 1rem;
+ }
+
+ .sidebar-btn {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ width: 100%;
+ padding: 14px 10px;
+ border-radius: 0 32px 32px 0;
+ background: transparent;
+ color: #9e9e9e;
+ font-weight: 500;
+ font-size: 16px;
+ border: none;
+ transition: background 0.2s, color 0.2s;
+ margin: 2px 0;
+ text-align: left;
+
+ .btn-content {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ width: 100%;
+ }
+
+ .icon-container {
+ font-size: 22px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 28px;
+ }
+
+ .btn-label {
+ font-size: 14px;
+ font-weight: 500;
+ color: inherit;
+ white-space: nowrap;
+ transition: opacity 0.2s, max-width 0.2s, margin 0.2s;
+ opacity: 1;
+ max-width: 200px;
+ margin-left: 0.5rem;
+ }
+ }
+}
+
+.pgn-btn-active {
+ background: #3f2992 !important;
+ color: #fff !important;
+
+ &:hover {
+ background-color: var(--primary-light) !important;
+ color: var(--primary) !important;
+
+ .icon-container,
+ .btn-label {
+ color: var(--primary) !important;
+ }
+ }
+
+ .icon-container,
+ .btn-label {
+ color: #fff !important;
+ }
+}
+
+.sidebar-btn {
+ &.pgn-btn-inactive {
+ color: var(--text-secondary) !important;
+
+ &:hover {
+ color: var(--primary) !important;
+ }
+ }
+}
+
+.sidebar-extra-space {
+ width: 80px;
+ // margin-right: 80px ; // Adjust margin for full width panel
+ }
diff --git a/src/library/Sidebar/Sidebar.tsx b/src/library/Sidebar/Sidebar.tsx
new file mode 100644
index 0000000000..f613831a7e
--- /dev/null
+++ b/src/library/Sidebar/Sidebar.tsx
@@ -0,0 +1,114 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Button, OverlayTrigger, Tooltip } from '@openedx/paragon';
+import { useSidebar } from '../hooks/useSidebar';
+import './Sidebar.scss';
+
+interface SidebarProps {
+ buttons: {
+ label: string;
+ path: string;
+ icon: React.ReactElement;
+ }[];
+ onNavigate: (path: string) => void;
+ presentPath: string;
+}
+
+const Sidebar: React.FC = ({ buttons, onNavigate, presentPath }) => {
+ const { isCollapsed, setSidebarCollapsed } = useSidebar();
+ const [isStandardRoute, setIsStandardRoute] = useState(true);
+ const sidebarRef = useRef(null);
+
+ useEffect(() => {
+ // Check if current path is in the standard routes
+ const isPathStandard = buttons.some(btn => btn.path === presentPath);
+ setIsStandardRoute(isPathStandard);
+ // If not standard route and sidebar is not collapsed, collapse it initially.
+ // The slide-out panel will be shown/hidden via CSS based on isCollapsed and isStandardRoute.
+ if (!isPathStandard && !isCollapsed) {
+ setSidebarCollapsed(true);
+ }
+ }, [presentPath]);
+
+ // Effect to handle clicks outside the sidebar on non-standard routes when expanded
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ // Check if we are on a non-standard route and the sidebar is NOT collapsed (i.e., expanded overlay state)
+ // Also check if the click is outside the sidebar element
+ if (!isStandardRoute && sidebarRef.current
+ && !sidebarRef.current.contains(event.target as Node)) {
+ if (!isCollapsed) {
+ setSidebarCollapsed(true);
+ }
+ }
+ };
+
+ // Add the event listener to the document body
+ document.addEventListener('mousedown', handleClickOutside);
+
+ // Clean up the event listener
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [isStandardRoute, isCollapsed, setSidebarCollapsed]); // Re-run effect if these states change
+
+ return (
+ <>
+ {/* Main Sidebar - remains 80px wide on non-standard routes, controls panel visibility via collapsed class */}
+ = ({
+ username,
+ // studioBaseUrl,
+ // logoutUrl,
+ authenticatedUserAvatar,
+ isMobile,
+ // isAdmin,
+ menuItems,
+}) => {
+ const avatar = authenticatedUserAvatar ? (
+ 
+ ) : (
+ (undefined);
diff --git a/src/library/hooks/useIsMobileSize.ts b/src/library/hooks/useIsMobileSize.ts
new file mode 100644
index 0000000000..743c1e0acc
--- /dev/null
+++ b/src/library/hooks/useIsMobileSize.ts
@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+const useIsMobileSize = (breakpoint = 768) => {
+ const [isMobile, setIsMobile] = useState(false);
+
+ useEffect(() => {
+ const checkMobile = () => {
+ setIsMobile(window.innerWidth <= breakpoint);
+ };
+
+ checkMobile(); // Set initial value
+ window.addEventListener('resize', checkMobile);
+ return () => window.removeEventListener('resize', checkMobile);
+ }, [breakpoint]);
+
+ return isMobile;
+};
+
+export default useIsMobileSize;
diff --git a/src/library/hooks/useSidebar.ts b/src/library/hooks/useSidebar.ts
new file mode 100644
index 0000000000..d12ae09f9b
--- /dev/null
+++ b/src/library/hooks/useSidebar.ts
@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { SidebarContext } from '../contexts/SidebarContext';
+
+export const useSidebar = () => {
+ const context = useContext(SidebarContext);
+ if (context === undefined) {
+ throw new Error('useSidebar must be used within a SidebarProvider');
+ }
+ return context;
+};
diff --git a/src/library/interfaces/components.ts b/src/library/interfaces/components.ts
new file mode 100644
index 0000000000..029f377c70
--- /dev/null
+++ b/src/library/interfaces/components.ts
@@ -0,0 +1,95 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export interface TextComponentProps {
+ text: string;
+ iconName?: React.ReactNode;
+ iconPlacement?: 'before' | 'after';
+ fontClass?: string;
+ className?: string;
+}
+
+export interface ButtonComponentProps {
+ label: string;
+ variant?: 'text' | 'contained' | 'outlined';
+ color?: 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+ disabled?: boolean;
+ startIcon?: React.ReactNode;
+ endIcon?: React.ReactNode;
+ className?: string;
+ onClick?: any;
+ type?: 'button' | 'submit' | 'reset';
+}
+
+export interface AlertComponentProps {
+ open: boolean;
+ onClose: () => void;
+ severity?: 'error' | 'warning' | 'info' | 'success';
+ title?: string;
+ message: string;
+ autoHideDuration?: number;
+}
+
+export interface Menu {
+ label: string;
+ subMenu?: { label: string; value: string }[];
+}
+
+export interface TemplateData {
+ logoUrl?: string;
+ menu?: {
+ align?: 'right' | 'left' | 'center';
+ menuList: Menu[];
+ loginSignupButtons?: boolean;
+ };
+}
+
+export interface MainHeaderProps {
+ logoUrl: string;
+ menuAlignment: 'right' | 'left' | 'center';
+ menuList: { label: string; subMenu?: { label: string; value: string; }[] }[];
+ loginSignupButtons: boolean;
+}
+
+export interface HeaderMenuProps {
+ menu: {
+ label: string;
+ subMenu?: { label: string; value: string }[];
+ };
+}
+
+export interface MenuComponentProps {
+ anchorEl: HTMLElement | null;
+ open: boolean;
+ onClose: () => void;
+ menuItems: { label: string; value: string }[];
+ onSelect?: (value: string) => void;
+}
+
+type TextAlign = 'right' | 'left' | 'center';
+
+export interface FooterProps {
+ contactInfo: {
+ align: TextAlign;
+ content: {
+ shortdesc: string;
+ address1: string;
+ address2: string;
+ pincode: string;
+ location: { label: string; value: string };
+ phonenumber: string;
+ facebook: string;
+ instagram: string;
+ twitter: string;
+ linkedIn: string;
+ };
+ };
+ quickLinks: {
+ align: TextAlign;
+ content: { label: string; link: string }[];
+ };
+ exploreLinks: {
+ align: TextAlign;
+ content: { label: string; link: string }[];
+ };
+ logoUrl: string;
+ copyrights: string;
+}
diff --git a/src/library/utils/getUserMenuItems.ts b/src/library/utils/getUserMenuItems.ts
new file mode 100644
index 0000000000..0e26a29007
--- /dev/null
+++ b/src/library/utils/getUserMenuItems.ts
@@ -0,0 +1,42 @@
+/* eslint-disable linebreak-style */
+import { getConfig } from '@edx/frontend-platform';
+
+interface UserMenuItemsParams {
+ studioBaseUrl: string;
+ logoutUrl: string;
+ isAdmin: any;
+}
+
+const getUserMenuItems = ({
+ studioBaseUrl,
+ logoutUrl,
+ isAdmin,
+}: UserMenuItemsParams) => {
+ let items = [
+ {
+ href: `${studioBaseUrl}`,
+ title: 'Studio Home',
+ }, {
+ href: `${logoutUrl}`,
+ title: 'Logout',
+ },
+ ];
+ if (isAdmin) {
+ items = [
+ {
+ href: `${studioBaseUrl}`,
+ title: 'Studio Home',
+ }, {
+ href: `${getConfig().STUDIO_BASE_URL}/maintenance`,
+ title: 'Maintenance',
+ }, {
+ href: `${logoutUrl}`,
+ title: 'Logout',
+ },
+ ];
+ }
+
+ return items;
+};
+
+export default getUserMenuItems;
diff --git a/src/locales/ar.json b/src/locales/ar.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/locales/en.json b/src/locales/en.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/messages.js b/src/messages.js
index 1620914b5b..b415b8c6a8 100644
--- a/src/messages.js
+++ b/src/messages.js
@@ -10,6 +10,61 @@ const messages = defineMessages({
id: 'authoring.alert.support.text',
defaultMessage: 'Support Page',
},
+ sidebarDashboardTitle: {
+ id: 'sidebar.dashboard.title',
+ defaultMessage: 'Dashboard',
+ description: 'Title of the dashboard sidebar item',
+ },
+ sidebarCreateNewCourseTitle: {
+ id: 'sidebar.create-new-course.title',
+ defaultMessage: 'Create New Course',
+ description: 'Title of the create new course sidebar item',
+ },
+ sidebarMyCoursesTitle: {
+ id: 'sidebar.my-courses.title',
+ defaultMessage: 'My Courses',
+ description: 'Title of the my courses sidebar item',
+ },
+ sidebarContentLibrariesTitle: {
+ id: 'sidebar.content-libraries.title',
+ defaultMessage: 'Content Libraries',
+ description: 'Title of the content libraries sidebar item',
+ },
+ sidebarCalendarTitle: {
+ id: 'sidebar.calendar.title',
+ defaultMessage: 'Calendar',
+ description: 'Title of the calendar sidebar item',
+ },
+ sidebarClassPlannerTitle: {
+ id: 'sidebar.class-planner.title',
+ defaultMessage: 'Class Planner',
+ description: 'Title of the class planner sidebar item',
+ },
+ sidebarInsightsReportsTitle: {
+ id: 'sidebar.insights-reports.title',
+ defaultMessage: 'Insights & Reports',
+ description: 'Title of the insights & reports sidebar item',
+ },
+ sidebarTitanAITitle: {
+ id: 'sidebar.titan-ai.title',
+ defaultMessage: 'TitanAI Assistant',
+ description: 'Title of the titan ai assistant sidebar item',
+ },
+ sidebarSharedResourcesTitle: {
+ id: 'sidebar.shared-resources.title',
+ defaultMessage: 'Shared Resources',
+ description: 'Title of the shared resources sidebar item',
+ },
+ sidebarTaxonomiesTitle: {
+ id: 'sidebar.taxonomies.title',
+ defaultMessage: 'Taxonomies',
+ description: 'Title of the taxonomies sidebar item',
+ },
+ sidebarAssignmentsTitle: {
+ id: 'sidebar.Assignments.title',
+ defaultMessage: 'Assignments',
+ description: 'Title of the Assignments sidebar item',
+ },
});
export default messages;
diff --git a/src/my-courses/MyCourses.scss b/src/my-courses/MyCourses.scss
new file mode 100644
index 0000000000..44372a8280
--- /dev/null
+++ b/src/my-courses/MyCourses.scss
@@ -0,0 +1,80 @@
+.course-card-container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 4rem; /* Space between cards */
+ margin-bottom: 20px; /* Space below the last card */
+}
+
+.course-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 2rem;
+ padding: 0 1.25rem;
+ max-width: 1800px;
+ margin: 0 auto;
+
+ @media (min-width: 768px) {
+ grid-template-columns: repeat(2, minmax(280px, 1fr));
+ }
+
+ @media (min-width: 992px) {
+ grid-template-columns: repeat(3, minmax(280px, 1fr));
+ }
+
+ @media (min-width: 1200px) {
+ grid-template-columns: repeat(4, minmax(280px, 1fr));
+ }
+
+ @media (min-width: 1600px) {
+ grid-template-columns: repeat(5, minmax(260px, 1fr));
+ gap: 1.5rem;
+ }
+}
+
+.pagination-container {
+ margin-top: 2rem;
+ padding: 0 1.25rem;
+ margin-bottom: 1rem;
+}
+
+// Override container padding
+.container {
+ padding-left: 0;
+ padding-right: 0;
+ max-width: 1800px;
+}
+
+.filters-container {
+ padding-right: 1rem;
+ padding-left: 1.8rem;
+}
+
+.my-courses-title {
+ font-size: 22px;
+ font-weight: bold;
+ line-height: 1.2;
+ letter-spacing: normal;
+}
+
+
+.my-courses-search-field {
+ .pgn__searchfield {
+ border-radius: 8px !important;
+ border: 1px solid var(--primary) !important;
+
+ &:hover,
+ &:active {
+ border-radius: 8px !important;
+ border: 1px solid var(--primary) !important;
+ }
+ }
+
+ .pgn__searchfield-form {
+ border-radius: 8px !important;
+
+ input {
+ border-radius: 8px !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/my-courses/MyCourses.tsx b/src/my-courses/MyCourses.tsx
new file mode 100644
index 0000000000..386373e9c1
--- /dev/null
+++ b/src/my-courses/MyCourses.tsx
@@ -0,0 +1,345 @@
+import React, { useEffect, useCallback, useState } from 'react';
+import {
+ Alert, Button, Container, Icon, Pagination, Row, SearchField,
+} from '@openedx/paragon';
+import './MyCourses.scss';
+import { useDispatch, useSelector } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useLocation, useNavigate } from 'react-router';
+import AlertMessage from 'generic/alert-message';
+import { Add, Error } from '@openedx/paragon/icons';
+import messages from 'studio-home/tabs-section/messages';
+// import CourseFilter from './course-filter/CourseFilter';
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { debounce } from 'lodash';
+import { useMyCourses } from './hooks';
+import { getCourseDetail, getMyCoursesParams } from './data/selectors';
+import { fetchMyCoursesData } from './data/thunks';
+import { updateMyCoursesCoursesCustomParams } from './data/slice';
+import { LoadingSpinner } from '../generic/Loading';
+import CoursesFilters from './courses-filters';
+import CourseCard from './course-card/CourseCard';
+import ContactAdministrator from '../studio-home/tabs-section/courses-tab/contact-administrator';
+import { fetchCourseDetail } from '../data/thunks';
+
+interface Course {
+ courseKey: string;
+ displayName: string;
+ lmsLink: string;
+ org: string;
+ rerunLink: string;
+ number: string;
+ run: string;
+ url: string;
+ courseImage?: string;
+}
+
+const MyCourses = () => {
+ const dispatch = useDispatch();
+ const intl = useIntl();
+ const location = useLocation();
+ const navigate = useNavigate();
+ const courseDetails = useSelector(getCourseDetail);
+ const [isReRunEnabled, setIsReRunEnabled] = useState(false);
+ const [inputSearchValue, setInputSearchValue] = useState('');
+ const [showNoResultsAlert, setShowNoResultsAlert] = useState(false);
+
+ const myCoursesParams = useSelector(getMyCoursesParams);
+ const {
+ currentPage, isFiltered, search, order, archivedOnly, activeOnly, cleanFilters,
+ } = myCoursesParams;
+
+ const locationValue = location.search ?? '';
+
+ const {
+ myCoursesData,
+ hasAbilityToCreateNewCourse,
+ isLoadingPage: isLoadingCourses,
+ isFailedLoadingPage: isFailedCoursesPage,
+ } = useMyCourses();
+
+ const {
+ courses = [],
+ numPages = 0,
+ optimizationEnabled,
+ } = myCoursesData || {};
+
+ const handlePageSelected = useCallback((page: number) => {
+ const {
+ search: searchParam, order: orderParam, archivedOnly: archivedOnlyParam, activeOnly: activeOnlyParam,
+ } = myCoursesParams;
+ const customParams = {
+ search: searchParam, order: orderParam, archivedOnly: archivedOnlyParam, activeOnly: activeOnlyParam,
+ };
+
+ dispatch(fetchMyCoursesData(locationValue, false, { page, ...customParams }, true));
+ dispatch(updateMyCoursesCoursesCustomParams({ currentPage: page, isFiltered: true }));
+ }, [dispatch, locationValue, myCoursesParams]);
+
+ // regex to check if a string has only whitespace
+ const regexOnlyWhiteSpaces = /^\s+$/;
+
+ const handleSearchCourses = (searchValueDebounced) => {
+ const valueFormatted = searchValueDebounced.trim();
+ const filterParams = {
+ search: valueFormatted.length > 0 ? valueFormatted : undefined,
+ activeOnly,
+ archivedOnly,
+ order,
+ };
+ const hasOnlySpaces = regexOnlyWhiteSpaces.test(searchValueDebounced);
+
+ if (valueFormatted !== search && !hasOnlySpaces && !cleanFilters) {
+ dispatch(updateMyCoursesCoursesCustomParams({
+ currentPage: 1,
+ isFiltered: true,
+ cleanFilters: false,
+ ...filterParams,
+ }));
+
+ dispatch(fetchMyCoursesData(locationValue, false, { page: 1, ...filterParams }, true));
+ }
+
+ setInputSearchValue(searchValueDebounced);
+ };
+
+ const handleSearchCoursesDebounced = useCallback(
+ debounce((value) => handleSearchCourses(value), 400),
+ [activeOnly, archivedOnly, order, inputSearchValue],
+ );
+
+ const handleCleanFilters = useCallback(() => {
+ dispatch(updateMyCoursesCoursesCustomParams({
+ currentPage: 1,
+ search: undefined,
+ order: 'display_name',
+ archivedOnly: undefined,
+ activeOnly: undefined,
+ isFiltered: false,
+ cleanFilters: true,
+ }));
+ setInputSearchValue('');
+ setShowNoResultsAlert(false);
+ dispatch(fetchMyCoursesData(locationValue, false, { page: 1 }, true));
+ }, [dispatch, locationValue]);
+
+ const isNotFilteringCourses = !isFiltered && !isLoadingCourses;
+ const hasCourses = courses?.length > 0;
+
+ useEffect(() => {
+ const fetchNavigationItems = async () => {
+ try {
+ const response = await getAuthenticatedHttpClient().get(`${getConfig().STUDIO_BASE_URL}/titaned/api/v1/menu-config/`);
+ // const response = await getAuthenticatedHttpClient().get(
+ // 'https://staging.titaned.com/titaned/api/v1/menu-config/',
+ // );
+ if (response.status !== 200) {
+ throw new Error('Failed to fetch Navigation Items');
+ }
+ return response.data;
+ } catch (error) {
+ console.warn('Failed to fetch navigation items, using defaults:', error);
+ return {
+ allow_course_reruns: false,
+ };
+ }
+ };
+
+ fetchNavigationItems().then((data) => {
+ setIsReRunEnabled(data?.allow_course_reruns || false);
+ }).catch((error) => {
+ console.error('Error in fetchNavigationItems:', error);
+ setIsReRunEnabled(false);
+ });
+ }, []);
+
+ useEffect(() => {
+ courses.forEach(course => {
+ dispatch(fetchCourseDetail(course.courseKey));
+ });
+ }, [courses, dispatch]);
+
+ // Handle delayed showing of no results alert
+ useEffect(() => {
+ const hasCompletedLoading = !isLoadingCourses && !isFailedCoursesPage;
+ const shouldShowAlert = isFiltered && !hasCourses && hasCompletedLoading;
+
+ if (shouldShowAlert) {
+ // Delay showing the alert by 1.5 seconds to prevent blinking during loading
+ const timer = setTimeout(() => {
+ setShowNoResultsAlert(true);
+ }, 1000);
+
+ return () => clearTimeout(timer);
+ }
+ // Hide alert immediately if conditions are no longer met
+ setShowNoResultsAlert(false);
+ }, [isFiltered, hasCourses, isLoadingCourses, isFailedCoursesPage]);
+
+ const updatedCourses: Course[] = courses.map(course => {
+ const courseDetail = courseDetails.find(detail => detail.courseId === course.courseKey);
+ const defaultImageName = 'images_course_image.jpg';
+ const defaultImageName2 = 'pencils.jpg';
+ if (courseDetail) {
+ const imageUri = courseDetail.media.courseImage.uri;
+ const imageUrl = `${getConfig().STUDIO_BASE_URL}${imageUri}`;
+ return {
+ ...course,
+ courseImage: imageUri.includes(defaultImageName) || imageUri.includes(defaultImageName2) ? null : imageUrl,
+ };
+ }
+ return {
+ ...course,
+ courseImage: null,
+ };
+ });
+
+ if (isLoadingCourses && !isFiltered) {
+ return (
+
+
+ );
+ }
+
+ const renderErrorState = () => (
+
+ navigate('/new-course')}
+ />
+ )
+ );
+
+ const renderNoCoursesFoundAlert = () => (
+ showNoResultsAlert ? (
+
+
+ {intl.formatMessage(messages.coursesTabCourseNotFoundAlertTitle)}
+
+
+ ) : null
+ );
+
+ return (
+
+ {/* Add the filters at the top */}
+ {/*
+ );
+};
+
+export default MyCourses;
diff --git a/src/my-courses/course-card/CourseCard.scss b/src/my-courses/course-card/CourseCard.scss
new file mode 100644
index 0000000000..c298ea9f57
--- /dev/null
+++ b/src/my-courses/course-card/CourseCard.scss
@@ -0,0 +1,98 @@
+.course-card {
+ border-radius: 16px !important;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ width: 100%;
+ height: 100%;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ margin: 0 auto;
+ padding: 10px;
+ border: solid 1px #e0e0e0 !important;
+
+ &:hover {
+ box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
+ }
+
+ .card-content-section {
+ padding: 0 6px !important;
+ margin-bottom: 10px;
+
+ }
+}
+
+.course-card-image {
+ width: 100%;
+ height: 160px;
+ object-fit: cover;
+ margin-bottom: 1rem;
+
+ .pgn__card-image-cap {
+ border-radius: 12px !important;
+ }
+}
+
+.title-container {
+ height: 3rem;
+ margin-bottom: 0.5rem;
+ text-align: start;
+
+ p {
+ font-size: 14px;
+ line-height: 1.2;
+ word-break: break-word;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+}
+
+.card-title {
+ font-size: 1rem;
+ line-height: 1.2;
+ word-break: break-word;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: var(--primary);
+ margin-bottom: 4px !important;
+}
+
+.course-card-buttons {
+ margin-top: 2.5rem;
+ display: flex;
+ gap: 0.2rem;
+ justify-content: space-between;
+ flex-wrap: wrap;
+
+ @media (max-width: 340px) {
+ flex-direction: column;
+ }
+
+ button {
+ // flex: 1;
+ white-space: nowrap;
+ padding: 0 1.6rem;
+ font-size: 0.75rem;
+ min-width: max-content;
+
+ @media (max-width: 576px) {
+ width: fit-content !important;
+ }
+ }
+
+ .btn-icon-primary {
+ padding: 0 !important;
+ }
+}
+
+.course-card-buttons-without-rerun {
+
+ button {
+ padding: 0.4rem 1.6rem !important;
+ }
+}
\ No newline at end of file
diff --git a/src/my-courses/course-card/CourseCard.tsx b/src/my-courses/course-card/CourseCard.tsx
new file mode 100644
index 0000000000..20e18dc71d
--- /dev/null
+++ b/src/my-courses/course-card/CourseCard.tsx
@@ -0,0 +1,54 @@
+/* eslint-disable linebreak-style */
+import React from 'react';
+import {
+ Card, Button, IconButtonWithTooltip, Icon,
+} from '@openedx/paragon';
+import './CourseCard.scss';
+import { Repeat } from '@openedx/paragon/icons';
+
+type CourseCardProps = {
+ imageSrc?: string;
+ title: string;
+ metadata: string;
+ onViewLive?: () => void;
+ onEditCourse?: () => void;
+ onReRun?: () => void;
+ isReRunEnabled?: boolean;
+};
+
+const fallbackImage = 'https://www.generationsforpeace.org/wp-content/uploads/2018/03/empty.jpg';
+
+const CourseCard: React.FC = ({
+ imageSrc,
+ title,
+ metadata,
+ onViewLive,
+ onEditCourse,
+ onReRun,
+ isReRunEnabled = false,
+}) => (
+
+
+
*/} + {/*
+
+);
+
+export default CourseCard;
diff --git a/src/my-courses/courses-filters/__snapshots__/index.test.jsx.snap b/src/my-courses/courses-filters/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..a98777a5ed
--- /dev/null
+++ b/src/my-courses/courses-filters/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CoursesFilters snapshot 1`] = `
+
+
+ {itemMenuSelected}
+
+
+ {menuItems.map(({ id, name, value }) => (
+ handleCourseTypeSelected(name, value)}
+ data-testid={`item-menu-${id}`}
+ >
+ {name} {courseTypeSelectedIcon(name)}
+
+ ))}
+
+
+ );
+};
+
+CoursesFilterMenu.defaultProps = {
+ defaultItemSelectedText: '',
+ menuItems: [],
+};
+
+CoursesFilterMenu.propTypes = {
+ onItemMenuSelected: PropTypes.func.isRequired,
+ defaultItemSelectedText: PropTypes.string,
+ id: PropTypes.string.isRequired,
+ menuItems: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ value: PropTypes.string.isRequired,
+ }),
+ ),
+};
+
+export default CoursesFilterMenu;
diff --git a/src/my-courses/courses-filters/courses-filter-menu/index.test.jsx b/src/my-courses/courses-filters/courses-filter-menu/index.test.jsx
new file mode 100644
index 0000000000..a66f24e22e
--- /dev/null
+++ b/src/my-courses/courses-filters/courses-filter-menu/index.test.jsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { screen, fireEvent, render } from '@testing-library/react';
+
+import CoursesFilterMenu from '.';
+
+jest.mock('react-redux', () => ({
+ ...jest.requireActual('react-redux'),
+ useSelector: jest.fn(),
+}));
+
+describe('CoursesFilterMenu', () => {
+ const onCourseTypeSelectedMock = jest.fn();
+
+ const menuItemsMock = [
+ {
+ id: 'active-courses',
+ name: 'Active',
+ value: 'active-courses',
+ },
+ {
+ id: 'upcoming-courses',
+ name: 'Upcoming',
+ value: 'upcoming-courses',
+ },
+ {
+ id: 'archived-courses',
+ name: 'Archived',
+ value: 'archived-courses',
+ },
+ ];
+
+ const renderComponent = (overrideProps = {}) => render(
+
+ {children}
+
+ );
+
+ const onItemMenuSelectedMock = jest.fn();
+
+ const renderComponent = (overrideProps = {}) => render(
+
+ ,
+ );
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ useSelector.mockReturnValue({
+ currentPage: 1,
+ order: 'display_name',
+ search: '',
+ activeOnly: false,
+ archivedOnly: false,
+ cleanFilters: false,
+ });
+ });
+
+ it('snapshot', () => {
+ const { container } = renderComponent();
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should render without crashing', () => {
+ renderComponent();
+ const courseOrderMenu = screen.getByTestId('dropdown-toggle-courses-order-menu');
+ expect(courseOrderMenu).toBeInTheDocument();
+ });
+
+ it('should show the items when the menu is clicked', () => {
+ renderComponent();
+ const courseOrderMenuFilter = screen.getByTestId('dropdown-toggle-courses-order-menu');
+ fireEvent.click(courseOrderMenuFilter);
+ const { defaultMessage: ascendantCoursesMenuText } = message.coursesOrderFilterMenuAscendantCurses;
+ const { defaultMessage: descendantCoursesMenuText } = message.coursesOrderFilterMenuDescendantCurses;
+ const { defaultMessage: newWestCoursesMenuText } = message.coursesOrderFilterMenuNewestCurses;
+ const { defaultMessage: oldestCoursesMenuText } = message.coursesOrderFilterMenuOldestCurses;
+ const ascendantCoursesMenuItem = screen.getByTestId('item-menu-az-courses');
+ const descendantCoursesMenuItem = screen.getByText(descendantCoursesMenuText);
+ const newestCoursesMenuItem = screen.getByText(newWestCoursesMenuText);
+ const oldestCoursesMenuItem = screen.getByText(oldestCoursesMenuText);
+ expect(ascendantCoursesMenuItem.textContent).toContain(ascendantCoursesMenuText);
+ expect(descendantCoursesMenuItem).toBeInTheDocument();
+ expect(newestCoursesMenuItem).toBeInTheDocument();
+ expect(oldestCoursesMenuItem).toBeInTheDocument();
+ });
+
+ it('should show an icon when a menu item is selected ', () => {
+ renderComponent();
+ const courseOrderMenu = screen.getByTestId('dropdown-toggle-courses-order-menu');
+ fireEvent.click(courseOrderMenu);
+ const ascendantCoursesMenuItem = screen.getByTestId('item-menu-az-courses');
+ fireEvent.click(ascendantCoursesMenuItem);
+ fireEvent.click(courseOrderMenu);
+ expect(screen.getByTestId('menu-item-icon')).toBeInTheDocument();
+ });
+
+ it('should call onCourseTypeSelected function when a menu item is selected ', () => {
+ renderComponent();
+ const courseOrderMenu = screen.getByTestId('dropdown-toggle-courses-order-menu');
+ fireEvent.click(courseOrderMenu);
+ const ascendantCoursesMenuItem = screen.getByTestId('item-menu-az-courses');
+ fireEvent.click(ascendantCoursesMenuItem);
+ expect(onItemMenuSelectedMock).toHaveBeenCalled();
+ });
+});
diff --git a/src/my-courses/courses-filters/courses-order-filter-menu/messages.js b/src/my-courses/courses-filters/courses-order-filter-menu/messages.js
new file mode 100644
index 0000000000..4021312b4a
--- /dev/null
+++ b/src/my-courses/courses-filters/courses-order-filter-menu/messages.js
@@ -0,0 +1,22 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ coursesOrderFilterMenuAscendantCurses: {
+ id: 'course-authoring.studio-home.courses.tab.order-filter-menu.ascendant-courses',
+ defaultMessage: 'Name A-Z',
+ },
+ coursesOrderFilterMenuDescendantCurses: {
+ id: 'course-authoring.studio-home.courses.tab.order-filter-menu.descendant-courses',
+ defaultMessage: 'Name Z-A',
+ },
+ coursesOrderFilterMenuNewestCurses: {
+ id: 'course-authoring.studio-home.courses.tab.order-filter-menu.newest-courses',
+ defaultMessage: 'Newest',
+ },
+ coursesOrderFilterMenuOldestCurses: {
+ id: 'course-authoring.studio-home.courses.tab.order-filter-menu.oldest-courses',
+ defaultMessage: 'Oldest',
+ },
+});
+
+export default messages;
diff --git a/src/my-courses/courses-filters/courses-types-filter-menu/__snapshots__/index.test.jsx.snap b/src/my-courses/courses-filters/courses-types-filter-menu/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..12ba90344f
--- /dev/null
+++ b/src/my-courses/courses-filters/courses-types-filter-menu/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CoursesTypesFilterMenu snapshot 1`] = `
+
+ {children}
+
+ );
+
+ const onItemMenuSelectedMock = jest.fn();
+
+ const renderComponent = (overrideProps = {}) => render(
+
+ ,
+ );
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ useSelector.mockReturnValue({
+ currentPage: 1,
+ order: 'display_name',
+ search: '',
+ activeOnly: false,
+ archivedOnly: false,
+ cleanFilters: false,
+ });
+ });
+
+ it('snapshot', () => {
+ const { container } = renderComponent();
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should render without crashing', () => {
+ renderComponent();
+ const courseTypesMenu = screen.getByTestId('dropdown-toggle-course-type-menu');
+ expect(courseTypesMenu).toBeInTheDocument();
+ });
+
+ it('should show the items when the menu is clicked', () => {
+ renderComponent();
+ const courseTypeMenuFilter = screen.getByTestId('dropdown-toggle-course-type-menu');
+ fireEvent.click(courseTypeMenuFilter);
+ const { defaultMessage: activeCoursesMenuText } = message.coursesTypesFilterMenuActiveCurses;
+ const { defaultMessage: allCoursesMenuText } = message.coursesTypesFilterMenuAllCurses;
+ const { defaultMessage: archiveCoursesMenuText } = message.coursesTypesFilterMenuArchivedCurses;
+ const activeCoursesMenuItem = screen.getByText(activeCoursesMenuText);
+ const allCoursesMenuItem = screen.getByTestId('item-menu-all-courses');
+ const archiveCoursesMenuItem = screen.getByText(archiveCoursesMenuText);
+ expect(activeCoursesMenuItem).toBeInTheDocument();
+ expect(allCoursesMenuItem.textContent).toContain(allCoursesMenuText);
+ expect(archiveCoursesMenuItem).toBeInTheDocument();
+ });
+
+ it('should show an icon when a menu item is selected ', () => {
+ renderComponent();
+ const courseTypesMenu = screen.getByTestId('dropdown-toggle-course-type-menu');
+ fireEvent.click(courseTypesMenu);
+ const activeCoursesMenuItem = screen.getByTestId('item-menu-active-courses');
+ fireEvent.click(activeCoursesMenuItem);
+ fireEvent.click(courseTypesMenu);
+ expect(screen.getByTestId('menu-item-icon')).toBeInTheDocument();
+ });
+
+ it('should call onCourseTypeSelected function when a menu item is selected ', () => {
+ renderComponent();
+ const courseTypesMenu = screen.getByTestId('dropdown-toggle-course-type-menu');
+ fireEvent.click(courseTypesMenu);
+ const activeCoursesMenuItem = screen.getByTestId('item-menu-active-courses');
+ fireEvent.click(activeCoursesMenuItem);
+ expect(onItemMenuSelectedMock).toHaveBeenCalled();
+ });
+});
diff --git a/src/my-courses/courses-filters/courses-types-filter-menu/messages.js b/src/my-courses/courses-filters/courses-types-filter-menu/messages.js
new file mode 100644
index 0000000000..f75aad8b08
--- /dev/null
+++ b/src/my-courses/courses-filters/courses-types-filter-menu/messages.js
@@ -0,0 +1,18 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ coursesTypesFilterMenuAllCurses: {
+ id: 'course-authoring.studio-home.courses.tab.types-filter-menu.all-courses',
+ defaultMessage: 'All courses',
+ },
+ coursesTypesFilterMenuActiveCurses: {
+ id: 'course-authoring.studio-home.courses.tab.types-filter-menu.active-courses',
+ defaultMessage: 'Active',
+ },
+ coursesTypesFilterMenuArchivedCurses: {
+ id: 'course-authoring.studio-home.courses.tab.types-filter-menu.archived-courses',
+ defaultMessage: 'Archived',
+ },
+});
+
+export default messages;
diff --git a/src/my-courses/courses-filters/index.jsx b/src/my-courses/courses-filters/index.jsx
new file mode 100644
index 0000000000..90773b94d4
--- /dev/null
+++ b/src/my-courses/courses-filters/index.jsx
@@ -0,0 +1,118 @@
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import CoursesTypesFilterMenu from './courses-types-filter-menu';
+import CoursesOrderFilterMenu from './courses-order-filter-menu';
+import './index.scss';
+import { getMyCoursesParams } from '../data/selectors';
+import { updateMyCoursesCoursesCustomParams } from '../data/slice';
+import { fetchMyCoursesData } from '../data/thunks';
+
+/* regex to check if a string has only whitespace
+ example " "
+*/
+// const regexOnlyWhiteSpaces = /^\s+$/;
+
+const CoursesFilters = ({
+ dispatch,
+ locationValue,
+ // onSubmitSearchField,
+ isLoading,
+}) => {
+ const myCoursesParams = useSelector(getMyCoursesParams);
+ const {
+ order,
+ search,
+ activeOnly,
+ archivedOnly,
+ // cleanFilters,
+ } = myCoursesParams;
+ // const [inputSearchValue, setInputSearchValue] = useState('');
+
+ const getFilterTypeData = (baseFilters) => ({
+ archivedCourses: { ...baseFilters, archivedOnly: true, activeOnly: undefined },
+ activeCourses: { ...baseFilters, activeOnly: true, archivedOnly: undefined },
+ allCourses: { ...baseFilters, archivedOnly: undefined, activeOnly: undefined },
+ azCourses: { ...baseFilters, order: 'display_name' },
+ zaCourses: { ...baseFilters, order: '-display_name' },
+ newestCourses: { ...baseFilters, order: '-created' },
+ oldestCourses: { ...baseFilters, order: 'created' },
+ });
+
+ const handleMenuFilterItemSelected = (filterType) => {
+ const baseFilters = {
+ currentPage: 1,
+ search,
+ order,
+ isFiltered: true,
+ archivedOnly,
+ activeOnly,
+ cleanFilters: false,
+ };
+
+ const filterParams = getFilterTypeData(baseFilters);
+ const filterParamsFormat = filterParams[filterType] || baseFilters;
+ const {
+ coursesOrderLabel,
+ coursesTypesLabel,
+ isFiltered,
+ orderTypeLabel,
+ cleanFilters: cleanFilterParams,
+ currentPage,
+ ...customParams
+ } = filterParamsFormat;
+ dispatch(updateMyCoursesCoursesCustomParams(filterParamsFormat));
+ dispatch(fetchMyCoursesData(locationValue, false, { page: 1, ...customParams }, true));
+ };
+
+ // const handleSearchCourses = (searchValueDebounced) => {
+ // const valueFormatted = searchValueDebounced.trim();
+ // const filterParams = {
+ // search: valueFormatted.length > 0 ? valueFormatted : undefined,
+ // activeOnly,
+ // archivedOnly,
+ // order,
+ // };
+ // const hasOnlySpaces = regexOnlyWhiteSpaces.test(searchValueDebounced);
+
+ // if (valueFormatted !== search && !hasOnlySpaces && !cleanFilters) {
+ // dispatch(updateMyCoursesCoursesCustomParams({
+ // currentPage: 1,
+ // isFiltered: true,
+ // cleanFilters: false,
+ // ...filterParams,
+ // }));
+
+ // dispatch(fetchMyCoursesData(locationValue, false, { page: 1, ...filterParams }, true));
+ // }
+
+ // setInputSearchValue(searchValueDebounced);
+ // };
+
+ // const handleSearchCoursesDebounced = useCallback(
+ // debounce((value) => handleSearchCourses(value), 400),
+ // [activeOnly, archivedOnly, order, inputSearchValue],
+ // );
+
+ return (
+
+ {children}
+
+ );
+
+ const renderComponent = (overrideProps = {}) => render(
+
+ ,
+
+ );
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ useSelector.mockReturnValue({
+ currentPage: 1,
+ order: 'display_name',
+ search: '',
+ activeOnly: false,
+ archivedOnly: false,
+ cleanFilters: false,
+ });
+ });
+
+ it('snapshot', () => {
+ const { container } = renderComponent();
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should render without crashing', () => {
+ renderComponent();
+ const searchInput = screen.getByTestId('input-filter-courses-search');
+ expect(searchInput).toBeInTheDocument();
+ });
+
+ it('should render type courses menu and order curses menu', () => {
+ renderComponent();
+ const courseTypeMenuFilter = screen.getByTestId('dropdown-toggle-course-type-menu');
+ const courseOrderMenuFilter = screen.getByTestId('dropdown-toggle-courses-order-menu');
+ expect(courseTypeMenuFilter).toBeInTheDocument();
+ expect(courseOrderMenuFilter).toBeInTheDocument();
+ });
+
+ it('should call dispatch when the search input changes', async () => {
+ renderComponent();
+ const searchInput = screen.getByRole('searchbox');
+ fireEvent.change(searchInput, { target: { value: 'test' } });
+ await waitFor(() => expect(dispatchMock).toHaveBeenCalled());
+ });
+
+ it('should call dispatch when a menu item of course type menu is selected', () => {
+ renderComponent();
+ const courseTypeMenuFilter = screen.getByTestId('dropdown-toggle-course-type-menu');
+ fireEvent.click(courseTypeMenuFilter);
+ const activeCoursesMenuItem = screen.getByTestId('item-menu-active-courses');
+ fireEvent.click(activeCoursesMenuItem);
+ expect(dispatchMock).toHaveBeenCalled();
+ });
+
+ it('should call dispatch when a menu item of course order menu is selected', () => {
+ renderComponent();
+ const courseOrderMenuFilter = screen.getByTestId('dropdown-toggle-courses-order-menu');
+ fireEvent.click(courseOrderMenuFilter);
+ const descendantCoursesMenuItem = screen.getByTestId('item-menu-za-courses');
+ fireEvent.click(descendantCoursesMenuItem);
+ expect(dispatchMock).toHaveBeenCalled();
+ });
+
+ it('should clear the search input when cleanFilters is true', () => {
+ useSelector.mockReturnValue({
+ cleanFilters: true,
+ });
+ renderComponent();
+ const searchInput = screen.getByRole('searchbox');
+ expect(searchInput.value).toBe('');
+ });
+
+ it('should call dispatch with the correct parameters when a menu item of course type menu is selected', () => {
+ renderComponent();
+ const courseTypeMenuFilter = screen.getByTestId('dropdown-toggle-course-type-menu');
+ fireEvent.click(courseTypeMenuFilter);
+ const activeCoursesMenuItem = screen.getByTestId('item-menu-active-courses');
+ fireEvent.click(activeCoursesMenuItem);
+
+ // Check that updateStudioHomeCoursesCustomParams is called with the correct payload
+ expect(dispatchMock).toHaveBeenNthCalledWith(1, expect.objectContaining({
+ payload: {
+ currentPage: 1,
+ search: '',
+ order: 'display_name',
+ isFiltered: true,
+ archivedOnly: undefined,
+ activeOnly: true,
+ cleanFilters: false,
+ },
+ }));
+ });
+
+ it('should handle search input submission', () => {
+ const handleSubmit = jest.fn();
+ renderComponent({ onSubmitSearchField: handleSubmit });
+ const searchInput = screen.getByRole('searchbox');
+ userEvent.type(searchInput, 'testing{enter}');
+ expect(handleSubmit).toHaveBeenCalled();
+ });
+
+ it('should call dispatch after debounce delay when the search input changes', async () => {
+ renderComponent();
+ const searchInput = screen.getByRole('searchbox');
+ fireEvent.change(searchInput, { target: { value: 'test' } });
+ await waitFor(() => expect(dispatchMock).toHaveBeenCalled(), { timeout: 500 });
+ expect(dispatchMock).toHaveBeenCalledWith(expect.anything());
+ });
+
+ it('should not call dispatch when the search input contains only spaces', async () => {
+ renderComponent();
+ const searchInput = screen.getByRole('searchbox');
+ fireEvent.change(searchInput, { target: { value: ' ' } });
+ await waitFor(() => expect(dispatchMock).not.toHaveBeenCalled(), { timeout: 500 });
+ expect(dispatchMock).not.toHaveBeenCalled();
+ });
+
+ it('should display the loading spinner when isLoading is true', () => {
+ renderComponent({ isLoading: true });
+ const spinner = screen.getByTestId('loading-search-spinner');
+ expect(spinner).toBeInTheDocument();
+ });
+
+ it('should not display the loading spinner when isLoading is false', () => {
+ renderComponent({ isLoading: false });
+ const spinner = screen.queryByTestId('loading-search-spinner');
+ expect(spinner).not.toBeInTheDocument();
+ });
+
+ it('should clear the search input and call dispatch when the reset button is clicked', async () => {
+ renderComponent();
+ const searchInput = screen.getByRole('searchbox');
+ fireEvent.change(searchInput, { target: { value: 'test' } });
+ const form = searchInput.closest('form');
+ const resetButton = form.querySelector('button[type="reset"]');
+ fireEvent.click(resetButton);
+ expect(searchInput.value).toBe('');
+ });
+});
diff --git a/src/my-courses/data/api.js b/src/my-courses/data/api.js
new file mode 100644
index 0000000000..5b3fd56bf7
--- /dev/null
+++ b/src/my-courses/data/api.js
@@ -0,0 +1,61 @@
+// @ts-check
+import { camelCaseObject, snakeCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+export const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+export const getStudioHomeApiUrl = () => new URL('api/contentstore/v1/home', getApiBaseUrl()).href;
+export const getRequestCourseCreatorUrl = () => new URL('request_course_creator', getApiBaseUrl()).href;
+export const getCourseNotificationUrl = (url) => new URL(url, getApiBaseUrl()).href;
+
+/**
+ * Get's studio home data.
+ * @returns {Promise
)}
-
+
);
};
diff --git a/src/styles/conditional-styles.css b/src/styles/conditional-styles.css
new file mode 100644
index 0000000000..def1892a42
--- /dev/null
+++ b/src/styles/conditional-styles.css
@@ -0,0 +1,10 @@
+/* Conditional styles - only apply in new UI */
+
+/* Simple class-based UI mode switching */
+.old-ui {
+ /* Old UI mode - no custom styles loaded */
+}
+
+.new-ui {
+ /* New UI mode - custom styles dynamically loaded */
+}
diff --git a/src/styles/styles-overrides.scss b/src/styles/styles-overrides.scss
new file mode 100644
index 0000000000..c0075612cb
--- /dev/null
+++ b/src/styles/styles-overrides.scss
@@ -0,0 +1,2580 @@
+// @import "./global-overrides";
+
+body {
+ overflow: hidden !important;
+}
+
+// Mixins
+@mixin card-style1 {
+ border-radius: 1rem;
+ border: 1px solid var(--border-color);
+ background-color: var(--bg-surface);
+}
+
+@mixin card-style2 {
+ border-radius: 12px;
+ border: 1px solid var(--border-color);
+ background-color: var(--bg-surface);
+}
+
+@mixin card-style3 {
+ border-radius: 8px;
+ border: 1px solid var(--border-color);
+ background-color: var(--bg-surface);
+}
+
+@mixin sub-header-title-style1 {
+ font-size: 20px !important;
+ font-weight: 600 !important;
+ line-height: 1.2 !important;
+ letter-spacing: normal !important;
+}
+
+@mixin section-title-style1 {
+ font-size: 18px !important;
+ font-weight: 500 !important;
+ line-height: 1.2 !important;
+ letter-spacing: normal !important;
+}
+
+@mixin section-title-style2 {
+ font-size: 16px !important;
+ font-weight: 500 !important;
+ line-height: 1.2 !important;
+ letter-spacing: normal !important;
+}
+
+@mixin section-title-style3 {
+ font-size: 16px !important;
+ font-weight: 400 !important;
+ line-height: 1.2 !important;
+ letter-spacing: normal !important;
+}
+
+// Mobile screen responsiveness
+@media (max-width: 414px) {
+ .ca-sidebar {
+ display: none;
+ }
+
+ .help-sidebar {
+ display: none !important;
+ }
+
+ .ca-main-content {
+ .col-9 {
+ flex: none !important;
+ max-width: none !important;
+ word-wrap: break-word;
+ }
+
+ .course-updates-new-wrapper {
+ .align-items-center {
+ flex-direction: column;
+ }
+ }
+ }
+}
+
+// Help Sidebar styles
+.help-sidebar {
+ @include card-style1;
+ // background-color: white;
+ padding: 1rem;
+ // border-radius: 1rem;
+ margin-top: 0 !important;
+ // border: 1px solid #ced4da;
+
+ .help-sidebar-about-descriptions,
+ .help-sidebar-other-links {
+ padding: 7px;
+ border: 1px solid #ced4da;
+ border-radius: 10px;
+ margin-bottom: 0.5rem !important;
+ }
+
+ .help-sidebar-about-title,
+ .help-sidebar-other-title {
+ margin-bottom: 0.5rem !important;
+ }
+
+ hr {
+ display: none;
+ }
+
+ // @media (max-width: 576px) {
+ // display: none;
+ // }
+}
+
+// K styles start
+
+//Grading Sub Header styles
+.sub-header-content {
+ margin-top: 0rem;
+
+ .sub-header-content-title {
+ font-size: 2rem;
+ color: #000000;
+ font-weight: 700;
+ line-height: 1.25;
+ }
+}
+
+//Grading Horizontal bar (below sub-header) styles
+.border-bottom {
+ border: transparent !important;
+}
+
+.grading-sub-header {
+ display: block;
+ height: 1px;
+ background-color: #ced4da;
+ margin: 10px 0;
+ margin-left: -1rem !important;
+ margin-right: -1rem !important;
+}
+
+// Grading Section sub-header styles
+.section-sub-header {
+ border-bottom: 0;
+
+ h2 {
+ // margin-bottom: 0rem;
+ }
+}
+
+.grading-scale {
+ margin-bottom: 3rem;
+
+ .btn-icon.btn-icon-primary {
+ background-color: var(--bg-surface);
+ border: 1.5px solid #ced4da;
+ color: var(--text-secondary);
+ width: 2.5rem;
+ height: 2.5rem;
+
+ // RTL styles
+ [dir="rtl"] & {
+ z-index: 10;
+ // margin-left: 1rem !important;
+ }
+ }
+
+ [dir="rtl"] & {
+ gap: 2rem !important;
+ }
+
+
+
+ .grading-scale-segments-and-ticks {
+ border: none;
+ border-radius: 1rem !important;
+
+ // overflow: hidden;
+ .grading-scale-tick {
+ margin-top: 3rem !important;
+ }
+ }
+}
+
+.grading-description {
+ // display: none !important; // uncomment it when description to be hidden
+}
+
+// Assignment Types Styles
+.course-grading-assignment-wrapper {
+ background-color: var(--bg-body);
+ border: none;
+ border-radius: 10px;
+
+ @media (max-width: 414px) {
+ padding: 2px;
+
+ .course-grading-assignment-items {
+ display: block;
+ }
+ }
+}
+
+.grading {
+
+ // Margin for Alert container
+ .mt-5 {
+ margin-top: 0rem !important;
+ }
+
+ // Grading Main container styles
+ .setting-items {
+ article {
+ background-color: var(--bg-surface);
+ padding: 1rem;
+ border-radius: 1rem;
+ border: 1px solid #ced4da;
+ height: 100%;
+ }
+
+ // Assignment header styles
+ header {
+ display: block;
+
+ h2 {
+ margin-bottom: 0rem;
+ }
+ }
+
+ }
+}
+
+// Course Updates styles
+
+// Course Updates Main container styles
+.setting-items {
+ article {
+ background-color: var(--bg-surface);
+ padding: 1rem;
+ border-radius: 1rem;
+ border: solid 1px var(--border-color) !important;
+ }
+}
+
+// Header subtitle content style
+.sub-header {
+ .sub-header-title-subtitle {
+ display: none;
+ }
+}
+
+.sub-header-instructions {
+ color: var(--text-secondary) !important;
+ font-size: 18px;
+ position: relative;
+}
+
+.sub-header-instructions::after {
+ color: #ced4da !important;
+ font-size: 18px;
+ content: "";
+ display: block;
+ height: 1px;
+ background-color: #ced4da;
+ margin-top: 8px;
+ margin-left: -1rem !important;
+ margin-right: -1rem !important;
+}
+
+// Custom styles for CustomCourseUpdates tabs
+.course-updates-new-wrapper .nav-tabs {
+ border-bottom: none !important;
+ // margin-bottom: 1.5rem;
+ box-shadow: none !important;
+}
+
+.course-updates-new-wrapper .nav-tabs .nav-link {
+ border: none !important;
+ border-radius: 2rem !important;
+ margin-right: 0.5rem;
+ color: #111;
+ background: var(--bg-surface);
+ padding: 0.35rem 1.5rem;
+ font-weight: 500;
+ transition: background 0.2s, color 0.2s;
+}
+
+.course-updates-new-wrapper .nav-tabs .nav-link.active,
+.course-updates-new-wrapper .nav-tabs .nav-link:focus {
+ background: var(--primary-light) !important;
+ color: #111 !important;
+ font-weight: 600;
+ outline: none !important;
+ box-shadow: none !important;
+ border-color: transparent !important;
+}
+
+.updates-handouts-container {
+ padding: 16px;
+ border-radius: 12px;
+ border: solid 1px var(--border-color);
+ background-color: #f2f5ff;
+}
+
+.updates-container {
+ grid-template-columns: none;
+ border-radius: 12px !important;
+ border: solid 1px var(--border-color) !important;
+ box-shadow: none;
+
+ .pgn__action-row-spacer {
+ height: 10rem;
+ }
+
+ .p-4\.5 {
+ padding: 1rem !important;
+ }
+
+ .update-card,
+ .update-form {
+ background-color: #f2f5ff !important;
+ // border: none !important;
+ }
+
+ .custom-card-style {
+ background: #f5f5f5;
+ border-radius: 1rem;
+ padding: 1rem;
+ margin-bottom: 1rem;
+ border: solid 1px var(--border-color);
+ }
+}
+
+.updates-section {
+ .update-form {
+ padding: 1rem;
+ border-radius: 12px;
+ background-color: #f2f5ff !important;
+ // padding: 1rem !important;
+ box-shadow: none !important;
+ // border: solid 1px var(--border-color) !important;
+
+ .tox {
+ border: solid 1px var(--border-color) !important;
+ border-radius: 8px !important;
+ }
+ }
+
+ .datepicker-field {
+ font-size: 1rem;
+ // font-weight: 500;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ .datepicker-float-labels {
+ position: initial !important;
+ background: none;
+ display: none;
+ }
+ }
+}
+
+.updates-handouts-container {
+ .update-form {
+ box-shadow: none !important;
+ border: none !important;
+ background-color: #f2f5ff !important;
+ padding: 1rem !important;
+ }
+
+ .tox {
+ border: solid 1px var(--border-color) !important;
+ border-radius: 8px !important;
+ }
+}
+
+.recent-updates,
+.course-handouts .course-handouts-header .course-handouts-header__title {
+ color: #111;
+ font-size: 1.40625rem;
+ font-weight: 400;
+}
+
+.card-style {
+ display: flex;
+ justify-content: space-between;
+ align-items: stretch;
+ position: relative;
+
+ .card-content {
+ margin-right: 1rem;
+
+ @media (min-width: 1600px) {
+ margin-right: 1.5rem;
+ }
+ }
+
+ .vert-bar {
+ position: absolute;
+ top: -1rem;
+ bottom: -1rem;
+ left: calc(95% - 0.5px);
+ width: 1px;
+ background-color: var(--border-color);
+
+ @media (max-width: 414px) {
+ display: none;
+ }
+ }
+
+ .pages_bar {
+ content: "";
+ display: block;
+ height: 1px;
+ background-color: var(--border-color);
+ margin: 1rem -1rem 1rem -6px;
+
+ @media (max-width: 414px) {
+ display: none;
+ }
+
+ @media (min-width: 1600px) {
+ margin: 1rem -1rem 1rem -22px;
+ }
+
+ }
+}
+
+.course-update {
+
+ .course-update-header {
+ margin-bottom: 0rem;
+ display: block;
+ }
+
+ .course-update-header__action {
+ display: flex;
+ flex-direction: column;
+ }
+
+ // @media (max-width: 414px) {
+ // .course-updates-new-wrapper {
+ //
+ // }
+ // }
+}
+
+// Course export styles
+.export {
+
+ .setting-items {
+ article {
+ background-color: var(--bg-surface);
+ padding: 1rem;
+ border-radius: 1rem;
+ border: 1px solid #ced4da;
+ height: 100%;
+ }
+ }
+
+ .export-warning {
+ padding: 12px 16px;
+ border-radius: 8px;
+ border: solid 1px #ffdc9a;
+ background-color: #fff8eb;
+ }
+
+ .export-card {
+ padding: 16px 16px 24px 15px;
+ border-radius: 12px;
+ background-color: var(--bg-body);
+
+ a {
+ margin-left: 0rem !important;
+ }
+
+ .card,
+ .collapsible-card,
+ .collapsible-card-lg {
+ background-color: var(--bg-body);
+ margin-top: -1rem !important;
+ }
+
+ .course-card-header {
+ margin-top: -1rem !important;
+ margin-bottom: 1rem !important;
+ padding-left: 0rem !important;
+ padding-right: 0rem !important;
+ }
+
+ .course-card-section {
+ padding-left: 0rem !important;
+ padding-right: 0rem !important;
+ }
+
+ .course-card-section::after {
+ content: "";
+ display: block;
+ height: 1px;
+ background-color: #ced4da;
+ margin-top: 1.5rem;
+ }
+
+ .course-stepper {
+ display: flex;
+ justify-content: space-between;
+ // margin: 0rem -7rem 0rem -1rem;
+
+ .course-stepper__step {
+ flex-direction: column;
+
+ &:not(:last-child) {
+ border-bottom: transparent !important;
+ }
+ }
+
+ .course-stepper__step-icon {
+ margin-left: 2rem;
+
+ .course-stepper__icon-line {
+ display: block;
+ height: 4px;
+ width: 100%;
+ background: var(--primary) !important;
+ margin-left: 3rem;
+ margin-right: 8px;
+ border-radius: 2px;
+ }
+
+ & svg {
+ // color: #2cc84d;
+ color: var(--primary) !important;
+ }
+ }
+ }
+ }
+
+ .done {
+ width: 100% !important;
+ }
+
+ .course-stepper .course-stepper__step .course-stepper__step-title {
+ color: var(--primary) !important;
+ width: min-content;
+ }
+
+ .course-stepper__step-description {
+ display: none;
+ }
+
+ footer {
+ background-color: #f5f5f5;
+ margin: 0rem;
+ padding: 1rem;
+ border-radius: 1rem;
+
+ @media (max-width: 414px) {
+ .row {
+ flex-direction: column !important;
+
+ .col-5 {
+ max-width: none;
+ }
+
+ div {
+ margin-bottom: 1rem;
+ }
+ }
+ }
+ }
+
+ @media (max-width: 414px) {
+ .pgn__card .pgn__card-header .pgn__card-header-content {
+ overflow: inherit;
+ }
+
+ .course-stepper {
+ display: grid !important;
+ margin-bottom: 1.5rem;
+
+ .course-stepper__step {
+ flex-direction: row !important;
+ padding: 2px !important;
+
+ .course-stepper__step-info {
+ margin-top: 1rem;
+ }
+ }
+
+ .course-stepper__step-icon {
+ margin-left: 0 !important;
+
+ .course-stepper__icon-line {
+ height: 2rem !important;
+ width: 2px !important;
+ margin-left: 0 !important;
+ margin-right: 8px;
+ position: relative;
+ top: 1rem;
+ left: 2rem;
+ }
+ }
+ }
+ }
+}
+
+
+
+
+// Files & Uploads styles
+
+.files_and_uploads {
+ background-color: var(--bg-surface);
+ // padding: 1rem;
+ padding: 1rem 1rem 1rem 1rem;
+ border-radius: 1rem;
+ border: 1px solid #ced4da;
+ height: 100%;
+ // margin: 0rem 1rem;
+}
+
+.files-table {
+
+ .pgn__data-table__selectable-card {
+ justify-content: space-evenly;
+ }
+
+ .pgn__data-table th {
+ background-color: #e7ebfa !important;
+
+ .pgn__icon {
+ display: none !important;
+ }
+ }
+
+ .pgn__data-table.is-striped tr:nth-child(even) {
+ background-color: transparent !important;
+ }
+
+ hr {
+ margin: 0px -1rem 0px -1rem;
+ }
+
+ .files-card-section {
+ .btn-icon {
+ width: 2rem !important;
+ height: 2rem !important;
+ border-radius: 50%;
+ margin-right: 2px !important;
+ // padding: 0 !important;
+ // display: inline-flex;
+ // justify-content: center;
+ // border: none;
+ }
+
+ .files-card-header {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .header-truncate {
+ word-break: break-word;
+ margin-left: 8px;
+ }
+
+ .files-action {
+ margin-right: -8px
+ }
+ }
+
+
+ .pgn__data-table-wrapper .pgn__data-table-card-view {
+ margin-left: 0 !important;
+ }
+
+ .bg-light-200 {
+ background-color: var(--bg-surface) !important;
+ }
+
+ @media (max-width: 414px) {
+
+ hr {
+ .mb-5 {
+ margin-bottom: 0;
+ }
+ }
+
+ .pgn__data-table-status-bar {
+ padding: 0;
+ }
+
+ .pgn__data-table-wrapper {
+
+ .pgn__data-table-card-view .pgn__card-grid__card-item {
+ padding: 6px !important;
+
+ .pgn__data-table__controlled-select {
+ padding: 1rem 0rem;
+ }
+ }
+
+ .pgn__data-table-actions {
+ flex-direction: column;
+
+ .pgn__data-table-actions-left {
+ margin-top: -2.5rem;
+ }
+
+ .pgn__data-table-actions-right {
+ .mx-2 {
+ margin-left: 0 !important;
+ }
+
+ .pgn__bulk-actions,
+ .pgn__table-actions {
+ display: block;
+ }
+ }
+ }
+ }
+
+ .pgn__table-actions {
+ flex-direction: column;
+
+ div {
+ margin: 0.5rem 0;
+ }
+ }
+
+ .pgn__data-table-card-view {
+ padding: 0;
+
+ .row {
+ margin-left: 0;
+ }
+ }
+
+ .pgn__data-table__selectable-card.selection-left {
+ flex-direction: column-reverse;
+ }
+
+ }
+
+ @media (min-width: 1200px) {
+ .col-xl-2 {
+ max-width: 33%;
+ }
+ }
+
+ @media (min-width: 1400px) {
+ .col-xl-2 {
+ max-width: 25%;
+ }
+ }
+
+ .btn-icon.btn-icon-primary-active,
+ .btn-icon:focus {
+ background-color: var(--primary) !important;
+ color: white !important;
+ }
+
+ .btn-icon.btn-icon-primary-active.focus,
+ .btn-icon.btn-icon-primary-active:focus {
+ background-color: var(--primary-light) !important;
+ }
+}
+
+.ted-card {
+ background-color: #e8edff;
+ width: 200px;
+}
+
+.files-card-section {
+ padding: 0.5rem 0.5rem 0.5rem 0.5rem !important;
+
+ @media (max-width: 414px) {
+ .justify-content-center {
+ justify-content: flex-start !important;
+ }
+ }
+}
+
+
+// Pages & Resources
+
+.resources {
+ display: block !important;
+ background-color: var(--bg-surface);
+ // padding: 1rem;
+ border-radius: 1rem;
+ border: 1px solid #ced4da;
+ height: 100%;
+ // margin-left: 1rem !important;
+
+ .pages_bar {
+ content: "";
+ display: block;
+ height: 1px;
+ background-color: #ced4da;
+ margin: 24px -12px 16px -12px;
+ }
+
+ .card {
+ border: 1px solid #ced4da;
+ display: block !important;
+ }
+
+ .pgn__card .pgn__card-header .pgn__card-header-content {
+ margin-top: 1rem !important;
+ flex-direction: row !important;
+ }
+
+ .pgn__card .pgn__card-header .pgn__card-header-title-sm {
+ padding-right: 1rem;
+ }
+
+ .pgn__card .pgn__card-header .pgn__card-header-actions {
+ margin-top: 11px;
+ }
+
+ @media (max-width: 414px) {
+ .pgn__card .pgn__card-header {
+ padding: 0 0.3rem;
+ }
+
+ .pgn__card .pgn__card-section {
+ padding: 0 0.3rem;
+ }
+ }
+}
+
+// Textbooks
+.textbook-card {
+
+ .sub-header {
+ .sub-header-actions {
+ margin-bottom: 1rem;
+ }
+ }
+
+ padding: 0rem !important;
+
+ .setting-items {
+ article {
+ background-color: var(--bg-surface);
+ padding: 1rem;
+ border-radius: 1rem;
+ border: 1px solid #ced4da;
+ height: 100%;
+ margin-right: -0.5rem;
+ }
+ }
+
+ .pages_bar {
+ content: "";
+ display: block;
+ height: 1px;
+ background-color: #ced4da;
+ margin: -1rem -1rem 1rem -1rem;
+ }
+
+ .textbook-form {
+ background-color: var(--bg-body);
+ box-shadow: none;
+
+ .form-chapters-fields {
+ display: block;
+ }
+
+ .pgn__action-row {
+ justify-content: flex-start;
+ }
+
+ .btn-icon.btn-icon-sm {
+ height: 2.5rem;
+ }
+
+ .button-style {
+ border: 1px solid #ced4da;
+ margin-bottom: 0.5rem;
+ border-radius: 8px;
+ margin-right: 6px;
+ }
+
+ .cancel-button {
+ border: 1px solid var(--primary);
+ border-radius: 8px;
+ }
+ }
+
+ @media (max-width: 414px) {
+ .sub-header {
+ flex-direction: column;
+ justify-content: flex-start;
+ gap: 1rem;
+ }
+
+ .textbooks-empty-placeholder {
+ flex-direction: column;
+ }
+
+ .textbook-form {
+ padding: 0.5rem;
+ }
+ }
+}
+
+// Custom pages
+.view_live_button:hover {
+ text-decoration: none;
+}
+
+.custom-pages {
+ padding: 0 1rem !important;
+
+ .setting-items {
+ article {
+ background-color: var(--bg-surface);
+ padding: 1rem;
+ border-radius: 1rem;
+ border: 1px solid #ced4da;
+ height: 100%;
+ margin-right: -0.5rem;
+ }
+
+ hr {
+ margin: 1rem -1rem 1rem -1rem;
+ }
+
+ .page-note {
+ // @include card-style1;
+ background-color: #f5f5f5;
+ padding: 1rem;
+ border-radius: 0.5rem;
+ margin-top: 0 !important;
+ // border: 1px solid #ced4da;
+ }
+
+ .card-border {
+ padding: 7px;
+ border: 1px solid #ced4da;
+ border-radius: 10px;
+ margin-bottom: 0.5rem !important;
+ }
+
+ .pgn__modal-header {
+ position: sticky;
+ }
+
+ .pgn__modal-body {
+ padding: 1rem !important;
+ overflow: none !important;
+ }
+
+ .fixed-bottom {
+ position: sticky;
+ }
+
+ .edit-modal {
+ position: 'relative';
+ height: '50%';
+ top: '50%';
+ left: '50%';
+ right: 0;
+ bottom: 0;
+ overflow-y: 'scroll';
+ background-color: var(--bg-surface);
+ z-index: 10;
+ transform: 'translate(-50%, -114%)';
+ box-shadow: '0 0 10px rgba(0,0,0,0.3)';
+ border-radius: '8px';
+ }
+ }
+
+ @media (max-width: 414px) {
+ .pgn__action-row {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ div {
+ .row {
+ padding: 1rem !important;
+
+ .pgn__action-row {
+ button {
+ align-items: center;
+ }
+ }
+ }
+ }
+
+ .pgn__hyperlink {
+ margin-top: 1rem;
+ margin-bottom: 0.5rem;
+ }
+ }
+}
+
+// Import page
+
+.import {
+
+ margin-top: 0rem !important;
+
+ article {
+ height: 100%;
+
+ p {
+ color: var(--text-secondary);
+ }
+ }
+
+ .pgn__dropzone {
+ height: auto;
+ border-radius: 8px;
+ border: 1px dashed var(--primary);
+ }
+
+ .pages_bar {
+ content: "";
+ display: block;
+ height: 1px;
+ background-color: #ced4da;
+ margin: 2rem -1rem 0rem -1rem;
+ }
+
+ .course-stepper .course-stepper__step.done svg,
+ .course-stepper .course-stepper__step.done .course-stepper__step-title {
+ color: var(--primary) !important;
+ }
+
+ .course-stepper {
+ display: flex !important;
+ justify-content: space-between !important;
+ padding: 0 1rem !important;
+
+ .course-stepper__step-icon .course-stepper__icon-line {
+ display: block;
+ height: 4px;
+ width: 150%;
+ background: var(--primary) !important;
+ border-radius: 2px;
+ margin-left: 3rem;
+ margin-right: 8px;
+ }
+
+ .course-stepper__step {
+ flex-direction: column !important;
+ padding-right: 5rem !important;
+
+ .course-stepper__step-info {
+ margin-left: 0 !important;
+ }
+ }
+
+ .course-stepper__step:not(:last-child) {
+ border-bottom: transparent !important;
+ }
+
+ .course-stepper__step-description {
+ display: none;
+ }
+ }
+
+ .import-stepper-area {
+
+ .pgn__card .pgn__card-header .pgn__card-header-content {
+ margin-top: 1rem !important;
+ }
+
+ margin-top: 1rem;
+ // padding: 16px 16px 24px 15px !important;
+ border-radius: 12px !important;
+ background-color: var(--bg-body) !important;
+
+ .card {
+ background-color: var(--bg-body) !important;
+ }
+
+ .import-stepper {
+ padding: 0 2rem 1rem 1rem !important;
+
+ .btn {
+ margin-left: 0 !important;
+ }
+ }
+ }
+
+}
+
+// K styles end
+
+// S Styles Start
+
+.course-team {
+ article {
+ @include card-style1;
+ padding: 1rem;
+ width: 100%;
+ height: 100%;
+ }
+
+ // .help-sidebar {
+ // @include card-style1;
+ // padding: 1rem;
+ // margin-top: 0 !important;
+ // }
+
+ .course-team-sidebar {
+ hr {
+ border-top: none !important;
+ }
+ }
+
+ .course-team-container {
+ margin-top: 0 !important;
+ }
+
+ .course-team-custom-sub-header {
+ display: flex;
+ justify-content: space-between;
+ // align-items: center;
+ margin-top: 0 !important;
+ height: 3rem;
+ margin-bottom: 0.5rem;
+
+ span {
+ font-size: 20px;
+ font-weight: bold;
+ line-height: 1.2;
+ letter-spacing: normal;
+ }
+
+ }
+
+ .course-team-custom-header {
+ hr {
+ margin-left: -1rem !important;
+ margin-right: -1rem !important;
+ }
+
+ }
+
+ .sub-header-title {
+ display: none;
+ }
+
+ .course-team-member {
+ background-color: var(--bg-body) !important;
+ border-radius: 8px !important;
+
+ .member-hint {
+ margin-right: 0 !important;
+ width: 60% !important;
+ }
+ }
+
+ .add-team-member {
+ @include card-style3;
+ background-color: var(--bg-surface) !important;
+ }
+
+ .add-user-form {
+ @include card-style3;
+ background-color: var(--bg-body) !important;
+
+ .form-field {
+ padding: 1.25rem !important;
+ padding-bottom: 0.5rem !important;
+ }
+
+ .form-title {
+ margin-bottom: 1rem !important;
+ font-size: 20px !important;
+ }
+
+ .form-helper-text {
+ display: none !important;
+ }
+ }
+
+ .pgn__action-row {
+ padding-top: 0 !important;
+ border-top: none !important;
+ padding-left: 1.25rem !important;
+
+ button {
+ padding-left: 1rem !important;
+ padding-right: 1rem !important;
+ }
+ }
+}
+
+.advanced-settings {
+
+ .setting-header {
+ margin-top: 0 !important;
+ }
+
+ .setting-items {
+ article {
+ @include card-style1;
+ padding: 1rem;
+
+ .advanced-settings-custom-header {
+ hr {
+ margin-left: -1rem !important;
+ margin-right: -1rem !important;
+ }
+
+ .warning-message-container {
+ margin: 1rem 0;
+ }
+ }
+
+ .advanced-settings-custom-sub-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .custom-setting-items-deprecated-setting {
+ margin-top: -1rem;
+ }
+
+ .border-bottom {
+ display: block !important;
+
+ .sub-header-title {
+ font-size: 20px !important;
+ font-weight: 600 !important;
+ line-height: 1.2 !important;
+ letter-spacing: normal !important;
+ }
+
+ .sub-header-content-title {
+ font-size: 16px !important;
+ font-weight: 400 !important;
+ line-height: 1.2 !important;
+ letter-spacing: normal !important;
+ }
+ }
+ }
+
+
+
+ .setting-items-list {
+ .setting-card {
+ background-color: var(--bg-body) !important;
+ border-radius: 8px !important;
+ margin-bottom: 1rem !important;
+
+ .pgn__card-header .pgn__card-header-title-md {
+ font-size: 16px !important;
+ line-height: 1.2 !important;
+ font-weight: 400 !important;
+
+ button {
+ color: var(--text-secondary) !important;
+ // margin-left: 0rem !important;
+
+ span {
+ height: 1.25rem !important;
+ width: 1.25rem !important;
+ }
+ }
+ }
+ }
+
+ .pgn__card-header-content {
+ margin-top: 1.438rem !important;
+ margin-bottom: 1.438rem !important;
+ }
+
+ .custom-setting-card.show-deprecated-style .setting-card {
+ background-color: #ffe3e0 !important;
+ border: solid 1px #e0e0e0 !important;
+
+ .pgn__card-status.pgn__card-status__danger {
+ display: none !important;
+ }
+ }
+
+ .custom-setting-card.show-deprecated-style {
+ position: relative;
+
+ .deprecated-label {
+ position: absolute;
+ left: 1.5rem;
+ /* aligns with card content padding */
+ bottom: 0.4rem;
+ /* just above the card's bottom padding */
+ color: #e53e3e;
+ background: none;
+ font-size: 13px;
+ font-weight: 400;
+ z-index: 2;
+ pointer-events: none;
+ }
+
+ .setting-card {
+ position: relative; // ensure the card is the positioning context
+ }
+ }
+ }
+ }
+
+ // .border-bottom {
+ // display: none !important;
+ // }
+ }
+}
+
+.alert-toast {
+ width: 75.6% !important;
+ padding-left: 28px;
+}
+
+.certificates {
+ article {
+ @include card-style1;
+ padding: 1rem;
+
+ .certificates-custom-sub-header-title {
+
+ .border-bottom {
+ margin-bottom: 0 !important;
+ }
+
+ .sub-header {
+ .sub-header-title {
+ @include sub-header-title-style1;
+ padding-top: 0.5rem;
+ }
+
+ .sub-header-actions {
+ margin-bottom: 0 !important;
+
+ button,
+ a {
+ padding: 0.4rem 1.5rem;
+ font-size: 1rem !important;
+ }
+ }
+ }
+
+ }
+
+ .certificates-custom-header {
+ margin-bottom: 1rem;
+
+ hr {
+ margin-left: -1rem !important;
+ margin-right: -1rem !important;
+ }
+ }
+
+ .certificates-custom-sub-header {
+ margin-bottom: 1rem;
+ }
+
+ .card {
+ @include card-style3;
+ background-color: var(--bg-body) !important;
+
+ .pgn__action-row {
+ button {
+ padding: 0.4rem 1.5rem;
+ font-size: 1rem !important;
+ }
+ }
+ }
+
+ .certificates-card-form {
+
+ .pgn__vstack {
+ gap: 0 !important;
+ }
+
+ .section-title {
+ @include section-title-style1;
+ }
+
+ label {
+ @include section-title-style3;
+ }
+
+ .pgn__form-control-description {
+ margin-top: 0rem !important;
+
+ span {
+ font-size: 12px !important;
+ }
+ }
+
+ .certificate-details {
+ padding-bottom: 1rem !important;
+ margin-bottom: 1rem !important;
+ border-bottom: 1px solid var(--border-color);
+
+ hr {
+ display: none !important;
+ }
+
+ .section-title {
+ @include section-title-style1;
+ }
+
+ .certificate-details__info-paragraph {
+ strong {
+ @include section-title-style2;
+ }
+
+ margin-bottom: 0.5rem !important;
+ @include section-title-style3;
+ }
+
+ // .certificate-details__info {}
+ }
+
+ .pgn__card-footer {
+ button {
+ padding: 0.4rem 1.5rem;
+ font-size: 1rem !important;
+ }
+ }
+ }
+
+ .certificate-signatories {
+ hr {
+ display: none !important;
+ }
+
+ p {
+ @include section-title-style3;
+ color: var(--text-secondary) !important;
+ }
+
+ .signatory-form {
+ @include card-style1;
+ background-color: var(--bg-surface) !important;
+ padding: 1rem !important;
+ margin-bottom: 1rem !important;
+
+ .section-title {
+ margin-bottom: -1rem !important;
+ }
+
+ .pgn__stack-gap--2 {
+ button {
+ margin-top: -0.5rem !important;
+ padding: 0.4rem 1.5rem;
+ font-size: 1rem !important;
+ }
+ }
+ }
+
+ .btn-outline-primary {
+ padding: 0.4rem 1rem;
+ font-size: 1rem !important;
+ width: fit-content !important;
+ margin-top: 0 !important;
+ }
+
+ .signatory {
+ @include card-style1;
+ background-color: var(--bg-surface) !important;
+ margin-bottom: 1rem !important;
+
+ .signatory__text {
+ b {
+ @include section-title-style2;
+ }
+
+ @include section-title-style3;
+ color: var(--text-primary) !important;
+ }
+ }
+ }
+ }
+
+ .help-sidebar-about {
+ margin-bottom: 1rem !important;
+ }
+}
+
+.custom-checklist-container {
+ @include card-style1;
+ padding: 1rem;
+ margin-left: 1rem !important;
+ width: 98% !important;
+
+ .sub-header-title {
+ @include sub-header-title-style1;
+ margin-bottom: 0 !important;
+ }
+
+ .custom-checklist-divider {
+ margin-left: -1rem !important;
+ margin-right: -1rem !important;
+ margin-bottom: 1rem !important;
+ }
+
+ .custom-checklist-sections {
+
+ .container-fluid {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+
+ .lead {
+ @include section-title-style1;
+ }
+
+ .custom-checklist-section-title {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .lead {
+ margin-bottom: 0 !important;
+ }
+ }
+ }
+
+ .custom-checklist-section-progress-bar {
+ margin-top: 0.5rem;
+ height: 1rem;
+ border-radius: 24px;
+ background-color: #e0e0e0 !important;
+ border: none !important;
+ margin-bottom: 2rem;
+
+ .progress-bar {
+ background-color: var(--primary) !important;
+ border: none !important;
+ border-radius: 24px !important;
+ }
+ }
+
+ .checklist-item-complete {
+ @include card-style3;
+ border: 1px solid var(--border-color) !important;
+ background-color: var(--bg-body) !important;
+ }
+
+ .checklist-item-card {
+ @include card-style3;
+ border: 1px solid var(--border-color) !important;
+ background-color: var(--bg-surface);
+ // margin-bottom: 1rem !important;
+ }
+}
+
+.custom-create-library-container {
+ @include card-style1;
+ padding: 1rem;
+ margin-left: 1rem !important;
+ width: 97% !important;
+ margin-right: 1rem !important;
+ max-width: 100% !important;
+ margin-top: 1.5rem !important;
+
+ hr {
+ margin-left: -1rem !important;
+ margin-right: -1rem !important;
+ margin-bottom: 0.5rem !important;
+ }
+
+ .sub-header-title {
+ @include sub-header-title-style1;
+ }
+
+ .sub-header {
+ margin-bottom: -0.5rem !important;
+ }
+
+ .bottom-button-container {
+ button {
+ padding: 0.5rem 1.5rem;
+ font-size: 1rem !important;
+ }
+ }
+
+ .btn-icon.btn-icon-secondary:hover {
+ background-color: var(--secondary-hover) !important;
+ }
+
+ .pgn__form-control-decorator-group {
+ padding-bottom: 0 !important;
+ }
+}
+
+.custom-libraries-container {
+ padding: 1.5rem;
+ // padding-right: 0.5rem !important;
+ padding-top: 1rem !important;
+
+ .sub-header-title {
+ @include sub-header-title-style1;
+ }
+
+ .sub-header {
+ margin-bottom: -0.5rem !important;
+ }
+
+ .libraries-header-filters-container {
+ .dropdown {
+ border: 1px solid var(--primary) !important;
+ border-radius: 8px !important;
+ font-weight: 500 !important;
+ font-size: 14px !important;
+ margin-right: 1rem !important;
+
+
+ button {
+ color: var(--primary) !important;
+ }
+
+ button:hover {
+ background-color: var(--primary) !important;
+ color: white !important;
+ }
+ }
+
+ .pgn__searchfield {
+ border: none !important;
+ border-radius: 8px !important;
+ }
+
+ .pgn__searchfield-form {
+ border: 1px solid var(--border-color) !important;
+ border-radius: 8px !important;
+
+ .form-control {
+ border: none !important;
+ border-radius: 8px !important;
+ }
+ }
+
+ .pgn__searchfield:hover,
+ .pgn__searchfield:active {
+ border-radius: 8px !important;
+ border: 1px solid var(--primary) !important;
+ }
+ }
+
+ .library-cards-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 1.5rem;
+ padding: 0 0;
+ max-width: 1800px;
+ margin: 0 auto;
+
+ @media (min-width: 768px) {
+ grid-template-columns: repeat(2, minmax(280px, 1fr));
+ }
+
+ @media (min-width: 992px) {
+ grid-template-columns: repeat(3, minmax(280px, 1fr));
+ }
+
+ @media (min-width: 1200px) {
+ grid-template-columns: repeat(4, minmax(280px, 1fr));
+ }
+
+ @media (min-width: 1600px) {
+ grid-template-columns: repeat(5, minmax(260px, 1fr));
+ gap: 1.5rem;
+ }
+ }
+
+ .library-card-container {
+ background: var(--bg-surface);
+ border-radius: 12px;
+ // box-shadow: 0 2px 8px rgba(16, 30, 54, 0.08);
+ border: solid 1px #e0e0e0;
+ padding: 24px;
+ width: 300px;
+ height: 11rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ gap: 1rem;
+ box-sizing: border-box;
+ overflow: hidden;
+
+ &:hover {
+ box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
+ }
+ }
+
+ .library-card-title {
+ font-weight: 600;
+ font-size: 1.2rem;
+ color: var(--text-primary);
+ word-break: break-word;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: 1.4;
+ }
+
+ .library-card-info-container {
+ display: flex;
+ gap: 3rem;
+ margin-top: 0.5rem;
+ }
+
+ .library-card-info-label {
+ font-size: 0.8rem;
+ color: var(--text-secondary);
+ letter-spacing: 1;
+ font-weight: 500;
+ }
+
+ .library-card-info-value {
+ font-size: 1rem;
+ color: var(--text-primary);
+ margin-top: 2px;
+ }
+
+ .alert-message-container {
+ background-color: var(--bg-surface) !important;
+ border-radius: 12px !important;
+ border: solid 1px var(--border-color) !important;
+ }
+}
+
+.library-authoring-page-container {
+ // margin-right: -20px !important;
+
+ .library-authoring-page-content {
+ padding: 1rem;
+
+ .ca-breadcrumb-bg {
+ margin-left: -2rem !important;
+ margin-right: -1rem !important;
+ margin-bottom: 1rem !important;
+ }
+
+ .collection-breadcrumb-icon:hover {
+ cursor: pointer;
+ color: var(--primary) !important;
+ }
+
+ .custom-icon {
+ margin-top: -4px;
+ }
+
+ .ca-breadcrumb-current {
+ cursor: default;
+ }
+ }
+
+ // .library-authoring-sidebar {
+ // right: -20px !important;
+ // }
+
+ .library-breadcrumb-title {
+ font-size: 1.5rem !important;
+ }
+
+ .library-authoring-page {
+ @include card-style1;
+ padding: 1rem;
+ // margin: 0 1rem;
+
+ hr {
+ margin-left: -1rem !important;
+ margin-right: -1rem !important;
+ margin-top: 0.9rem !important;
+ margin-bottom: 1rem !important;
+ }
+
+ .library-component-card {
+ .card {
+ border: 1px solid var(--border-color) !important;
+ border-radius: 12px !important;
+ background-color: var(--bg-surface) !important;
+ box-shadow: 0 2px 4px -2px rgba(10, 13, 18, 0.06), 0 4px 8px -2px rgba(10, 13, 18, 0.1) !important;
+
+ .library-component-header {
+ background-color: var(--primary-light) !important;
+
+ .pgn__card-header-content {
+ margin-top: 0.3rem !important;
+ }
+
+ .library-component-header-icon {
+ color: var(--text-primary) !important;
+ width: 2rem !important;
+ height: 2rem !important;
+ }
+
+ .btn-icon {
+ width: 2rem !important;
+ height: 2rem !important;
+ color: var(--text-primary) !important;
+
+ .pgn__icon {
+ color: var(--text-primary) !important;
+ }
+
+ .pgn__icon:hover {
+ // background-color: var(--primary-hover) !important;
+ color: var(--primary) !important;
+ }
+
+ .btn-icon:active {
+ color: var(--bg-surface) !important;
+ }
+
+ .pgn__icon:active {
+ color: var(--bg-surface) !important;
+ }
+ }
+
+ .btn-icon:focus {
+ background-color: transparent;
+ }
+
+
+ }
+ }
+
+ .pgn__card.clickable:focus::before {
+ border: solid 2px var(--primary) !important;
+ }
+ }
+
+ .sub-header-container {
+ .pgn__searchfield {
+ border: none !important;
+ border-radius: 8px !important;
+ border: 1px solid var(--border-color) !important;
+ }
+
+ .pgn__searchfield-form {
+ border: 1px solid var(--border-color) !important;
+ border-radius: 8px !important;
+
+ .form-control {
+ border: none !important;
+ border-radius: 8px !important;
+ }
+ }
+
+ .pgn__searchfield:hover,
+ .pgn__searchfield:active {
+ border-radius: 8px !important;
+ border: 1px solid var(--primary) !important;
+ }
+
+ .btn-outline-primary,
+ .btn-primary {
+ border-radius: 8px !important;
+ }
+ }
+ }
+}
+
+.custom-taxonomy-list-page-container {
+ padding: 1.5rem;
+ padding-top: 1rem;
+
+ .custom-taxonomy-list-page-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1rem;
+ padding: 0 1rem;
+
+ .custom-taxonomy-list-page-header-actions {
+ display: flex;
+ gap: 1rem;
+ }
+
+ }
+
+ .custom-taxonomy-list-page-content {
+ background-color: var(--bg-body);
+
+ .custom-taxonomy-list-page-content-container {
+ padding: 0 !important;
+ }
+
+ .pgn__data-table-wrapper {
+ background-color: var(--bg-body) !important;
+ }
+
+ .taxonomy-card {
+ height: 10rem !important;
+ // width: 100% !important;
+ padding: 1rem !important;
+ border-radius: 8px !important;
+ // border: solid 1px var(--border-color) !important;
+ background-color: var(--bg-surface) !important;
+ // box-shadow: 0 2px 4px -2px rgba(10, 13, 18, 0.06), 0 4px 8px -2px rgba(10, 13, 18, 0.1) !important;
+
+
+
+ .pgn__card-header {
+ padding: 0 !important;
+ margin-bottom: 1rem !important;
+
+ .pgn__card-header-title-md {
+ font-size: 18px !important;
+ }
+
+ .pgn__card-header-subtitle-md {
+ font-size: 14px !important;
+ }
+
+ .system-defined-badge {
+ border-radius: 12px !important;
+ }
+
+ .pgn__card-header-content {
+ margin-top: 0 !important;
+ }
+
+ .pgn__card-header-actions {
+ margin-top: 0 !important;
+
+ .btn-icon-primary {
+ height: 2rem !important;
+ width: 2rem !important;
+ }
+ }
+ }
+
+ .pgn__card-section {
+ padding: 0 !important;
+ }
+
+ .taxonomy-card-body {
+ font-size: 14px !important;
+ line-height: 1.2 !important;
+ letter-spacing: normal !important;
+ color: var(--text-secondary) !important;
+ -webkit-line-clamp: 3 !important;
+ line-clamp: 3 !important;
+ -webkit-box-orient: vertical !important;
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ }
+ }
+
+ .taxonomy-card:hover {
+ box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
+ }
+
+ .pgn__card.clickable:focus::before {
+ border: none !important;
+ }
+ }
+
+}
+
+.custom-taxonomy-detail-page-container {
+ padding: 1rem;
+
+ .custom-taxonomy-detail-page-header {
+ padding-right: 0 !important;
+
+ .ca-breadcrumb-bg {
+ margin-left: -1rem !important;
+ // margin-right: -3rem !important;
+ margin-bottom: 1.5rem !important;
+ }
+
+ .ca-breadcrumb-container {
+ padding-right: 0 !important;
+ }
+
+ .collection-breadcrumb-icon:hover {
+ cursor: pointer;
+ color: var(--primary) !important;
+ }
+
+ .custom-icon {
+ margin-top: -4px;
+ }
+
+ .ca-breadcrumb-current {
+ cursor: default;
+ }
+
+ .library-breadcrumb-title {
+ // background-color: #2cc84d;
+ font-size: 1.5rem !important;
+ display: flex;
+ justify-content: space-between;
+ }
+
+ // .custom-taxonomy-detail-page-header-title-actions {
+ // margin-right: -1rem;
+ // }
+
+
+ .custom-taxonomy-detail-page-header-title-actions {
+ .btn-primary:focus {
+ color: var(--text-white) !important;
+ background-color: var(--primary) !important;
+ }
+ }
+ }
+
+ .custom-taxonomy-detail-page-content {
+ .tag-list-table {
+
+ .pgn__data-table {
+ border-radius: 16px !important;
+ }
+
+ .pgn__data-table th {
+ background-color: var(--bg-surface) !important;
+ color: var(--text-primary) !important;
+ margin-left: -1rem !important;
+ margin-right: -1rem !important;
+ }
+
+ .btn-link:focus {
+ color: var(--primary) !important;
+ }
+
+ .btn-link {
+ color: var(--primary) !important;
+ }
+
+ .btn-link:hover {
+ color: var(--primary) !important;
+ }
+
+
+ .is-striped {
+ tbody {
+ tr {
+ background-color: var(--bg-body) !important;
+ border: solid 1px var(--border-color) !important;
+ border-radius: 8px !important;
+
+ td {
+ font-size: 16px !important;
+ }
+ }
+
+ .pgn__data-table-row {
+ background-color: var(--bg-surface) !important;
+ }
+ }
+ }
+
+ .pgn__data-table-wrapper {
+ border-radius: 12px !important;
+
+ .pgn__data-table-container {
+ border-radius: 12px !important;
+ padding: 1rem !important;
+
+ .pgn__data-table-cell-wrap {
+ padding: 1.5rem !important;
+ // border: solid 1px #e0e0e0 !important;
+ }
+ }
+ }
+ }
+
+ .custom-taxonomy-detail-page-side-card {
+ .pgn__card {
+ border-radius: 12px !important;
+ box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.06), 0 1px 3px 0 rgba(10, 13, 18, 0.1) !important;
+
+ .pgn__card-header {
+ padding: 0 1rem !important;
+
+ .pgn__card-header-content {
+ margin-top: 1rem !important;
+ overflow-y: hidden !important;
+
+ .pgn__card-header-title-md {
+ @include section-title-style1;
+ }
+ }
+ }
+
+ .pgn__card-section {
+ .pgn__card-section-title {
+ color: var(--text-secondary) !important;
+ font-size: 14px !important;
+ font-weight: 200 !important;
+ line-height: 1.2 !important;
+ letter-spacing: normal !important;
+ margin-bottom: 0 !important;
+ }
+
+ }
+ }
+ }
+
+ }
+}
+
+.course-rerun-content {
+ @include card-style1;
+ padding: 1rem;
+
+ .course-rerun-title {
+ @include section-title-style1;
+ }
+}
+
+.course-rerun-form {
+ @include card-style2;
+ background-color: var(--bg-body) !important;
+ padding: 1rem;
+
+ button {
+ margin-top: 1rem;
+ }
+}
+
+.learning-outcomes-section {
+ .form-group-custom {
+ margin-bottom: 1rem !important;
+ }
+}
+
+.error-content {
+ .error-code {
+ h1 {
+ // background: linear-gradient(45deg, var(--primary), var(--secondary)) !important;
+ background: linear-gradient(45deg, var(--primary), var(--secondary)) !important;
+ -webkit-background-clip: text !important;
+ -webkit-text-fill-color: transparent !important;
+ background-clip: text !important;
+ }
+ }
+
+ .error-actions {
+ gap: 1rem !important;
+ /* margin-inline: 1rem; */
+ /* margin-right: 1rem; */
+ display: flex;
+ justify-content: center;
+ }
+
+ .error-message {
+ h2 {
+ color: var(--text-primary) !important;
+ }
+
+ p {
+ color: var(--text-muted) !important;
+ }
+ }
+
+ .error-help {
+ p {
+ color: var(--text-secondary) !important;
+ }
+ }
+}
+
+select.form-control {
+ option {
+ &:active {
+ background-color: var(--primary) !important;
+ }
+ }
+}
+
+// S Styles End
+
+// N Styles Start
+.group-configurations {
+ .row:first-child {
+ margin-left: 0px;
+ margin-right: 0px;
+ }
+
+ .configuration-card .configuration-card-header .configuration-card-header__button:hover {
+ padding: 10px;
+ }
+
+ .row>div:first-child {
+ background-color: var(--text-white);
+ padding: 1rem;
+ border-radius: 1rem;
+ border: solid 1px var(--border-color);
+ }
+
+ .row>div:first-child>hr {
+ margin-left: -1rem;
+ margin-right: -1rem;
+ }
+
+ .group-configurations-empty-placeholder {
+ border-radius: 8px;
+ background-color: var(--bg-body) !important;
+ box-shadow: none !important;
+ justify-content: space-between;
+ }
+
+ .configuration-card .configuration-card-header .configuration-card-header__badge {
+ border-radius: 12px;
+ background-color: #e5fbff !important;
+ }
+
+ .configuration-card .configuration-card-header .configuration-card-header__badge span:last-child {
+ color: #0c83f2;
+ }
+
+ .configuration-card {
+ border-radius: 8px;
+ box-shadow: 0 2px 4px 0 rgba(24, 29, 38, 0.08), 0 0 1px 0 rgba(24, 29, 38, 0.24);
+ background-color: var(--bg-body);
+ }
+
+ .configuration-card-header__title div {
+ font-size: 16px;
+ font-weight: bold;
+ }
+
+ .configuration-section-name {
+ font-size: 16px;
+ font-weight: 500;
+ }
+
+ .certificates-custom-sub-header-title .sub-header-title {
+ color: #222121;
+ }
+
+ .configuration-card .pgn__action-row {
+ justify-content: flex-start;
+ }
+
+ .configuration-card .configuration-card-header .pgn__action-row {
+ justify-content: flex-end;
+ }
+
+ .configuration-card-header h3 {
+ font-size: 14px;
+ font-weight: normal;
+ color: #222121;
+ }
+
+ .configuration-card .pgn__action-row .btn-tertiary {
+ border-radius: 6px;
+ // border: solid 1px #616061 !important;
+ color: var(--primary) !important;
+ }
+}
+
+.course-outline-container {
+
+ // header{
+ // background-color: white;
+ // padding: 1rem;
+ // border-radius: 1rem;
+ // border: solid 1px var(--border-color);
+ // }
+ .outline-status-bar {
+ margin-bottom: 1rem;
+ }
+
+ article {
+ background-color: var(--text-white);
+ padding: 1rem;
+ border-radius: 1rem;
+ border: solid 1px var(--border-color);
+ }
+
+ .help-sidebar {
+ background-color: var(--text-white);
+ padding: 1rem;
+ border-radius: 1rem;
+ border: solid 1px var(--border-color);
+ margin-top: 0px !important;
+
+ .outline-sidebar-section {
+ // border: 1px solid var(--border-color);
+ border-radius: 8px;
+ // padding: 8px;
+ margin-bottom: 12px;
+
+ hr {
+ display: none;
+ }
+ }
+ }
+
+ .sub-header .btn-primary {
+ border-radius: 8px;
+ }
+
+ .course-outline-section .btn-outline-primary {
+ border-radius: 8px;
+ // border: solid 1px #616061;
+ // color: var(--text-muted);
+ }
+
+ .sub-header .sub-header-actions .ml-auto {
+ margin-right: auto !important;
+ margin-left: 1rem !important;
+ margin-top: 1rem;
+ }
+
+ .sub-header .sub-header-actions {
+ border-top: 1px solid var(--border-color);
+ margin-left: -1rem !important;
+ margin-right: -1rem !important;
+ }
+
+ .section-card .section-card__subsections .btn-outline-primary {
+ border: 1px solid var(--border-color);
+ }
+
+ .item-card-header .m-0 .form-control {
+ border: 1px solid var(--border-color);
+ }
+
+ .section-card .section-card__subsections .subsection-card__units .extend-margin .btn-icon-primary {
+ color: var(--text-primary) !important;
+ }
+
+ .row .btn-icon-secondary {
+ color: var(--text-primary) !important;
+ }
+
+ .section-card__subsections .extend-margin .subsection-card .btn-icon-primary {
+ // color: var(--text-primary) !important;
+ }
+
+ .item-card-header .btn-icon-primary {
+ color: var(--text-primary) !important;
+ }
+
+ .pt-4 .mx-0 {
+ background-color: #f2f5ff !important;
+ }
+}
+
+@media (max-width: 576px) {
+ .course-outline-container .outline-status-bar {
+ flex-direction: column;
+ }
+
+ .course-outline-container .sub-header .sub-header-actions .ml-auto {
+ display: grid
+ }
+}
+
+.custom-schedule-details {
+ margin-top: -1.5rem;
+ margin-bottom: 1.5rem;
+ padding-left: 1.2rem !important;
+
+ .schedule-alert-msg {
+ margin-top: 27px;
+ }
+
+ .pgn__card .pgn__card-header .pgn__card-header-content {
+ margin-top: 1rem !important;
+ }
+
+ .section-sub-header {
+ display: block;
+ border-bottom: 1px solid var(--border-color);
+ padding-bottom: 1rem;
+ margin-left: -1rem;
+ margin-right: -1rem;
+ }
+
+ .lead {
+ margin-bottom: 0rem;
+ font-size: 1rem;
+ margin-left: 1rem;
+ }
+
+ .section-sub-header span {
+ font-size: 0.9rem;
+ margin-left: 1rem;
+ }
+
+ .course-form .row .col-cs {
+ border-radius: 16px;
+ border: solid 1px var(--border-color);
+ background-color: var(--text-white);
+ padding: 1rem;
+ }
+
+ .title-class {
+ padding-bottom: 1rem;
+ // border-bottom: 1px solid var(--border-color);
+ // font-weight: 600;
+ }
+
+ .section-container ul li h4 {
+ color: var(--text-secondary);
+ font-size: 14px;
+ text-transform: uppercase;
+ font-weight: 500;
+ }
+
+ .section-container .card {
+ background-color: var(--bg-body);
+ }
+
+ .pacing-section .pgn__form-group .pgn__form-control-set {
+ padding-left: 0rem;
+ padding-top: 0rem;
+ }
+}
+
+.customHr {
+ border: 'none';
+ border-top: 1px solid var(--border-color) ;
+ margin: '0 0 0 0';
+}
+
+.courseOutlineh2 {
+ color: 'var(--text-primary)';
+ margin-bottom: '1rem'
+}
+
+.viewLiveSlot {
+ height: '6%';
+ width: '11%';
+ font-size: '0.75rem';
+ margin-top: '10px';
+}
+
+.viewLiveDiv {
+ font-size: 1rem;
+}
+
+.viewLiveCustom {
+ font-size: 0.75rem;
+}
+
+.customFooterTextAlign {
+ text-align: center;
+}
+
+.create-new-course-form .row:first-child {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+
+// .scrollable-sidebar-content {
+// overflow-y: auto;
+// height: 100%;
+// }
+
+.usermenu-dropdown {
+ .dropdown-menu {
+ min-width: 12.7rem !important;
+ }
+}
+
+// N Styles End
+
+
+.pgn__form-text-invalid {
+ color: #C32D3A !important;
+ font-size: 87.5% !important;
+}
+
+.pgn__form-checkbox-input:checked,
+.pgn__form-radio-input:checked {
+ background-color: var(--bg-surface) !important;
+}
+
+.configure-modal {
+ height: 34rem;
+}
+
+.configure-modal__body {
+ height: 24rem;
+}
+
+.alert {
+ margin-bottom: 6px;
+}
+
+.instructors-list {
+ .form-row {
+ display: block !important;
+ margin-left: 0 !important;
+ }
+
+ .pgn__dropzone {
+ height: auto !important;
+ padding: 1rem !important;
+ }
+}
+
+.ai-suggestions-icon {
+ position: absolute;
+ bottom: 6px;
+ right: 10px;
+ width: 16px;
+ height: 18px;
+}
+
+@media (min-width: 576px) {
+ .pgn__form-control-decorator-group {
+ margin-inline-end: 0;
+ }
+}
+
+.pgn__form-control-decorator {
+ height: calc(1.3333em + 1.125rem + -3px);
+}
+
+.pgn__form-control-decorator .btn-icon:hover {
+ background-color: var(--primary-light) !important;
+}
+
+.text-success-500 {
+ color: var(--primary) !important;
+}
+
+.pgn__modal-body-content {
+ .pgn__form-group .pgn__form-label {
+ font-size: 18px !important;
+ font-weight: 500 !important;
+ color: var(--text-primary) !important;
+ }
+
+ .helper-text {
+ font-size: 18px !important;
+ }
+}
+
+//So start
+
+.react-datepicker__day--selected {
+ background-color: var(--primary) !important;
+
+ &:hover {
+ background-color: var(--primary-hover) !important;
+ }
+}
+
+li.react-datepicker__time-list-item--selected{
+ background-color: var(--primary) !important;
+}
+.pgn__menu .pgn__menu-item{
+ &:hover{
+ background-color: var(--primary-light);
+ }
+}
+
+.badge-info{
+ background-color: var(--primary);
+}
+.btn-primary.disabled{
+ background-color: var(--disabled) !important;
+ border: var(--border-color) !important;
+}
+option{
+ &:hover{
+ background-color: var(--primary-light);
+ }
+}
+a{
+ color: var(--primary);
+ &:hover{
+ color: var(--primary-light);
+ cursor: pointer;
+ }
+}
+
+//so end
\ No newline at end of file
diff --git a/src/taxonomy/CustomTaxonomyListPage.jsx b/src/taxonomy/CustomTaxonomyListPage.jsx
new file mode 100644
index 0000000000..61697a1977
--- /dev/null
+++ b/src/taxonomy/CustomTaxonomyListPage.jsx
@@ -0,0 +1,79 @@
+/* eslint-disable react/prop-types */
+import { Helmet } from 'react-helmet';
+import {
+ CardView, Container, DataTable, Spinner,
+} from '@openedx/paragon';
+import getPageHeadTitle from '../generic/utils';
+import messages from './messages';
+import TaxonomyCard from './taxonomy-card';
+
+const CustomTaxonomyListPage = ({
+ intl,
+ taxonomyListHeaderButtons,
+ getOrgSelect,
+ taxonomyListData,
+ isLoaded,
+}) => (
+
- {!componentPickerMode && (
-
-
- openCollectionInfoSidebar(collectionId)}
- />
- )}
- breadcrumbs={breadcumbs}
- headerActions={ openCollectionInfoSidebar(collectionId)}
+ />,
+ breadcrumbTitle: collectionData.title,
+ breadcumbs,
+ headerActions:
+
);
};
diff --git a/src/library-authoring/collections/LibraryCollections.tsx b/src/library-authoring/collections/LibraryCollections.tsx
deleted file mode 100644
index 84b868a550..0000000000
--- a/src/library-authoring/collections/LibraryCollections.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { LoadingSpinner } from '../../generic/Loading';
-import { useLoadOnScroll } from '../../hooks';
-import { useSearchContext } from '../../search-manager';
-import { NoComponents, NoSearchResults } from '../EmptyStates';
-import CollectionCard from '../components/CollectionCard';
-import { LIBRARY_SECTION_PREVIEW_LIMIT } from '../components/LibrarySection';
-import messages from './messages';
-import { useLibraryContext } from '../common/context';
-
-type LibraryCollectionsProps = {
- variant: 'full' | 'preview',
-};
-
-/**
- * Library Collections to show collections grid
- *
- * Use style to:
- * - 'full': Show all collections with Infinite scroll pagination.
- * - 'preview': Show first 4 collections without pagination.
- */
-const LibraryCollections = ({ variant }: LibraryCollectionsProps) => {
- const {
- collectionHits,
- totalCollectionHits,
- isFetchingNextPage,
- hasNextPage,
- fetchNextPage,
- isLoading,
- isFiltered,
- } = useSearchContext();
-
- const { openCreateCollectionModal } = useLibraryContext();
-
- const collectionList = variant === 'preview' ? collectionHits.slice(0, LIBRARY_SECTION_PREVIEW_LIMIT) : collectionHits;
-
- useLoadOnScroll(
- hasNextPage,
- isFetchingNextPage,
- fetchNextPage,
- variant === 'full',
- );
-
- if (isLoading) {
- return
+
+ {!!sidebarComponentInfo?.type && (
+
+ {!componentPickerMode && (
+
- {!!sidebarComponentInfo?.type && (
-
-
-
-
+
+ openCollectionInfoSidebar(collectionId)}
+ />
+ )}
+ breadcrumbs={breadcumbs}
+ headerActions={
+
+
- )}
-
+
+
+
+ )}
+
- {collectionList.map((collectionHit) => (
-
- );
-};
-
-export default LibraryCollections;
diff --git a/src/library-authoring/collections/messages.ts b/src/library-authoring/collections/messages.ts
index 29fe9e280d..1dfaecd4a1 100644
--- a/src/library-authoring/collections/messages.ts
+++ b/src/library-authoring/collections/messages.ts
@@ -63,7 +63,7 @@ const messages = defineMessages({
},
noSearchResultsInCollection: {
id: 'course-authoring.library-authoring.collections-pag.no-search-results.text',
- defaultMessage: 'No matching components found in this collections.',
+ defaultMessage: 'No matching components found in this collection.',
description: 'Message displayed when no matching components are found in collection',
},
newContentButton: {
diff --git a/src/library-authoring/common/context.tsx b/src/library-authoring/common/context.tsx
index be229065f5..ef1fb7ef1c 100644
--- a/src/library-authoring/common/context.tsx
+++ b/src/library-authoring/common/context.tsx
@@ -68,6 +68,11 @@ export interface SidebarComponentInfo {
additionalAction?: SidebarAdditionalActions;
}
+export interface ComponentEditorInfo {
+ usageKey: string;
+ onClose?: () => void;
+}
+
export enum SidebarAdditionalActions {
JumpToAddCollections = 'jump-to-add-collections',
}
@@ -99,9 +104,10 @@ export type LibraryContextData = {
// Current collection
openCollectionInfoSidebar: (collectionId: string, additionalAction?: SidebarAdditionalActions) => void;
// Editor modal - for editing some component
- /** If the editor is open and the user is editing some component, this is its usageKey */
- componentBeingEdited: string | undefined;
- openComponentEditor: (usageKey: string) => void;
+ /** If the editor is open and the user is editing some component, this is the component being edited. */
+ componentBeingEdited: ComponentEditorInfo | undefined;
+ /** If an onClose callback is provided, it will be called when the editor is closed. */
+ openComponentEditor: (usageKey: string, onClose?: () => void) => void;
closeComponentEditor: () => void;
resetSidebarAdditionalActions: () => void;
} & ComponentPickerType;
@@ -174,8 +180,16 @@ export const LibraryProvider = ({
);
const [isLibraryTeamModalOpen, openLibraryTeamModal, closeLibraryTeamModal] = useToggle(false);
const [isCreateCollectionModalOpen, openCreateCollectionModal, closeCreateCollectionModal] = useToggle(false);
- const [componentBeingEdited, openComponentEditor] = useState
-
- {data.results.length === 0 && () => setSelectedLibrary(e.target.value)}
- value={selectedLibrary}
- >
- {data.results.map((library) => (
- setSelectedLibrary(library.id)}
- className="card-item"
- >
- {library.title}}
- subtitle={`${library.org} / ${library.slug}`}
- actions={(
- {' '}
- )}
- />
-
-
-
- ))}
-
-
- {library.description}
-{library.description}
+
- { componentList.map((contentHit) => (
-
- );
-};
-
-export default LibraryComponents;
diff --git a/src/library-authoring/components/LibrarySection.tsx b/src/library-authoring/components/LibrarySection.tsx
deleted file mode 100644
index 14b6f8c592..0000000000
--- a/src/library-authoring/components/LibrarySection.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { Card, ActionRow, Button } from '@openedx/paragon';
-
-export const LIBRARY_SECTION_PREVIEW_LIMIT = 4;
-
-const LibrarySection: React.FC<{
- title: string,
- viewAllAction?: () => void,
- contentCount: number,
- previewLimit?: number,
- children: React.ReactNode,
-}> = ({
- title,
- viewAllAction,
- contentCount,
- previewLimit = LIBRARY_SECTION_PREVIEW_LIMIT,
- children,
-}) => (
- +
{/* ✅ Global class name */}
+
+
+
+
+ 
+
+
+
+ {authenticatedUser !== null && (
+ <>
+ {isMobile ? (
+
+ e.stopPropagation()}
+ />
+
+
+
+ ) : (
+ <>
+
+ setShowSearchModal(true)}
+ />
+ e.stopPropagation()}
+ onClick={() => setShowMoreMenu(prev => !prev)}
+ />
+ {showMoreMenu && (
+
+
+
+
+
+
+ {selectedLanguage}
+
+
+ handleLanguageChange('EN')}>EN
+ handleLanguageChange('AR')}>AR
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {selectedLanguage}
+
+
+ handleLanguageChange('EN')}>EN
+ handleLanguageChange('AR')}>AR
+
+
+
+
+ )}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ {authenticatedUser === null && loginSignupButtons && (
+ <>
+
+
+
+ )}
+
+ {authenticatedUser !== null && (
+ <>
+
+
+ {selectedLanguage}
+
+
+ handleLanguageChange('EN')}>EN
+ handleLanguageChange('AR')}>AR
+
+
+
+
+
+ {authenticatedUser === null && (
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ )}
+
+
+
+
+
+ {/* The sidebar-extra-space div is for layout purposes if needed, not the overlay panel itself */}
+ {!isStandardRoute && !isCollapsed && (
+
+ )}
+
+ );
+};
+
+export default Sidebar;
diff --git a/src/library/UserMenu/UserMenu.scss b/src/library/UserMenu/UserMenu.scss
new file mode 100644
index 0000000000..a6dd9df8ec
--- /dev/null
+++ b/src/library/UserMenu/UserMenu.scss
@@ -0,0 +1,3 @@
+.btn-tertiary.dropdown-toggle {
+ background-color: var(--primary-light) !important;
+}
diff --git a/src/library/UserMenu/UserMenu.tsx b/src/library/UserMenu/UserMenu.tsx
new file mode 100644
index 0000000000..388692304e
--- /dev/null
+++ b/src/library/UserMenu/UserMenu.tsx
@@ -0,0 +1,76 @@
+/* eslint-disable react/jsx-curly-brace-presence */
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable linebreak-style */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+// import PropTypes from 'prop-types';
+import {
+ Avatar,
+} from '@openedx/paragon';
+import NavDropdownMenu from '../NavDropdownMenu/NavDropdownMenu';
+
+interface UserMenuProps {
+ username: string;
+ studioBaseUrl?: string;
+ logoutUrl?: string;
+ authenticatedUserAvatar?: string | null;
+ isMobile?: boolean;
+ isAdmin?: any;
+ menuItems: {
+ href: string;
+ title: string;
+ }[];
+}
+
+const UserMenu: React.FC
+ {buttons.map((btn) => {
+ const isActive = btn.path === presentPath || (presentPath.includes('/course') && btn.path === '/my-courses');
+ // Wrap button with OverlayTrigger for tooltip
+ return (
+
+ {btn.label}
+
+ )}
+ // Only show tooltip when sidebar is collapsed
+ show={isCollapsed ? undefined : false}
+ // container={sidebarRef.current}
+ popperConfig={{
+ modifiers: [
+ {
+ name: 'preventOverflow',
+ options: {
+ altAxis: true,
+ boundary: 'viewport',
+ },
+ },
+ ],
+ }}
+ >
+
+
+ );
+ })}
+
+
+ {updatedCourses.map((course) => (
+
+ {numPages > 1 && (
+
+ window.open(course.lmsLink ?? '#', '_blank')}
+ onEditCourse={() => navigate(course.url ?? '#')}
+ onReRun={() => navigate(course.rerunLink ?? '#')}
+ isReRunEnabled={isReRunEnabled}
+ />
+
+ ))}
+
+
+ )}
+
+ );
+
+ const renderEmptyState = () => (
+ !optimizationEnabled && isNotFilteringCourses && (
+ + {intl.formatMessage(messages.coursesTabCourseNotFoundAlertMessage)} +
+ +
+ {/* {isShowProcessing && !isEnabledPagination &&
+
+ ) : (
+ <>
+ {hasCourses ? renderCourseGrid() : renderEmptyState()}
+ {renderNoCoursesFoundAlert()}
+
+ )}
+
+ )}
+
+
+ {isLoadingCourses && isFiltered ? (
+ My Courses
+
+
+
+
+
+
+ {/* {title}
+{metadata}
+*/} + {/*
{metadata}
*/} +
+
+
+ {isReRunEnabled && (
+
+
+
+`;
diff --git a/src/my-courses/courses-filters/courses-filter-menu/__snapshots__/index.test.jsx.snap b/src/my-courses/courses-filters/courses-filter-menu/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..1e4a3c3778
--- /dev/null
+++ b/src/my-courses/courses-filters/courses-filter-menu/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CoursesFilterMenu snapshot 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/src/my-courses/courses-filters/courses-filter-menu/index.jsx b/src/my-courses/courses-filters/courses-filter-menu/index.jsx
new file mode 100644
index 0000000000..af4cc7b39d
--- /dev/null
+++ b/src/my-courses/courses-filters/courses-filter-menu/index.jsx
@@ -0,0 +1,75 @@
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { Icon, Dropdown } from '@openedx/paragon';
+import { Check } from '@openedx/paragon/icons';
+import { getMyCoursesParams } from '../../data/selectors';
+
+const CoursesFilterMenu = ({
+ id: idProp,
+ menuItems,
+ onItemMenuSelected,
+ defaultItemSelectedText,
+}) => {
+ const [itemMenuSelected, setItemMenuSelected] = useState(defaultItemSelectedText);
+ const { cleanFilters } = useSelector(getMyCoursesParams);
+ const handleCourseTypeSelected = (name, value) => {
+ setItemMenuSelected(name);
+ onItemMenuSelected(value);
+ };
+
+ const courseTypeSelectedIcon = (itemValue) => (itemValue === itemMenuSelected ? (
+
+
+
+`;
diff --git a/src/my-courses/courses-filters/courses-order-filter-menu/index.jsx b/src/my-courses/courses-filters/courses-order-filter-menu/index.jsx
new file mode 100644
index 0000000000..837d11dca9
--- /dev/null
+++ b/src/my-courses/courses-filters/courses-order-filter-menu/index.jsx
@@ -0,0 +1,56 @@
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+import CoursesFilterMenu from '../courses-filter-menu';
+
+const CoursesOrderFilterMenu = ({ onItemMenuSelected }) => {
+ const intl = useIntl();
+
+ const courseOrders = useMemo(
+ () => [
+ {
+ id: 'az-courses',
+ name: intl.formatMessage(messages.coursesOrderFilterMenuAscendantCurses),
+ value: 'azCourses',
+ },
+ {
+ id: 'za-courses',
+ name: intl.formatMessage(messages.coursesOrderFilterMenuDescendantCurses),
+ value: 'zaCourses',
+ },
+ {
+ id: 'newest-courses',
+ name: intl.formatMessage(messages.coursesOrderFilterMenuNewestCurses),
+ value: 'newestCourses',
+ },
+ {
+ id: 'oldest-courses',
+ name: intl.formatMessage(messages.coursesOrderFilterMenuOldestCurses),
+ value: 'oldestCourses',
+ },
+ ],
+ [intl],
+ );
+
+ const handleCourseTypeSelected = (courseOrder) => {
+ onItemMenuSelected(courseOrder);
+ };
+
+ return (
+
+
+
+`;
diff --git a/src/my-courses/courses-filters/courses-types-filter-menu/index.jsx b/src/my-courses/courses-filters/courses-types-filter-menu/index.jsx
new file mode 100644
index 0000000000..70189e8fed
--- /dev/null
+++ b/src/my-courses/courses-filters/courses-types-filter-menu/index.jsx
@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+import CoursesFilterMenu from '../courses-filter-menu';
+
+const CoursesTypesFilterMenu = ({ onItemMenuSelected }) => {
+ const intl = useIntl();
+
+ const courseTypes = useMemo(
+ () => [
+ {
+ id: 'all-courses',
+ name: intl.formatMessage(messages.coursesTypesFilterMenuAllCurses),
+ value: 'allCourses',
+ },
+ {
+ id: 'active-courses',
+ name: intl.formatMessage(messages.coursesTypesFilterMenuActiveCurses),
+ value: 'activeCourses',
+ },
+ {
+ id: 'archived-courses',
+ name: intl.formatMessage(messages.coursesTypesFilterMenuArchivedCurses),
+ value: 'archivedCourses',
+ },
+ ],
+ [intl],
+ );
+
+ const handleCourseTypeSelected = (courseType) => {
+ onItemMenuSelected(courseType);
+ };
+
+ return (
+
+
+ );
+};
+
+CoursesFilters.defaultProps = {
+ locationValue: '',
+ // onSubmitSearchField: () => {},
+ isLoading: false,
+};
+
+CoursesFilters.propTypes = {
+ dispatch: PropTypes.func.isRequired,
+ locationValue: PropTypes.string,
+ // onSubmitSearchField: PropTypes.func,
+ isLoading: PropTypes.bool,
+};
+
+export default CoursesFilters;
diff --git a/src/my-courses/courses-filters/index.scss b/src/my-courses/courses-filters/index.scss
new file mode 100644
index 0000000000..68902f2b44
--- /dev/null
+++ b/src/my-courses/courses-filters/index.scss
@@ -0,0 +1,4 @@
+.search-field-loading {
+ margin-left: -25%;
+ margin-top: .5rem;
+}
diff --git a/src/my-courses/courses-filters/index.test.jsx b/src/my-courses/courses-filters/index.test.jsx
new file mode 100644
index 0000000000..02d69e284a
--- /dev/null
+++ b/src/my-courses/courses-filters/index.test.jsx
@@ -0,0 +1,167 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import {
+ screen, fireEvent, render, waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import CoursesFilters from '.';
+
+jest.mock('react-redux', () => ({
+ ...jest.requireActual('react-redux'),
+ useSelector: jest.fn(),
+}));
+
+describe('CoursesFilters', () => {
+ const dispatchMock = jest.fn();
+
+ // eslint-disable-next-line react/prop-types
+ const IntlProviderWrapper = ({ children }) => (
+
+
+ {intl.formatMessage(messages.headerTitle)}
+
+ {getOrgSelect()}
+ {taxonomyListHeaderButtons}
+
+
+
+
+ {isLoaded && taxonomyListData && (
+
+ TaxonomyCard(row)}
+ />
+
+ )}
+ {!isLoaded && (
+
+
+ )}
+
+
-
+
+
{ alertProps && (
{
/>
)}
+
{toastMessage && (
isOrgSelected(ALL_TAXONOMIES)}
onClick={() => setSelectedOrgFilter(ALL_TAXONOMIES)}
>
@@ -109,7 +110,7 @@ const OrganizationFilterSelector = ({
,