- dispatch(actions.setItemSelectedBoolean(ASSESSMENT, id, value))
- }
- />
- );
- }
-
- renderCategoryTree(category) {
- const { dispatch, selectedItems, categoryDisabled } = this.props;
- const { id, title, tabs } = category;
- const checked = !!selectedItems[CATEGORY][id];
-
- return (
-
-
-
- {title}
-
- }
- onChange={(e, value) =>
- dispatch(actions.setItemSelectedBoolean(CATEGORY, id, value))
- }
- >
-
-
- {tabs.map((tab) => this.renderTabTree(tab))}
-
- );
- }
-
- renderTabTree(tab) {
- const { dispatch, selectedItems, tabDisabled } = this.props;
- const { id, title, assessments } = tab;
- const checked = !!selectedItems[TAB][id];
-
- return (
-
-
-
- {title}
-
- }
- onChange={(e, value) =>
- dispatch(actions.setItemSelectedBoolean(TAB, id, value))
- }
- >
-
-
- {assessments.map((assessment) => this.renderAssessmentTree(assessment))}
-
- );
- }
-
- render() {
- const { categories } = this.props;
- if (!categories) {
- return null;
- }
-
- return (
- <>
-
-
-
- {categories.length > 0 ? (
- categories.map((category) => this.renderCategoryTree(category))
- ) : (
-
-
-
- )}
-
- );
- }
-}
-
-AssessmentsSelector.propTypes = {
- categories: PropTypes.arrayOf(categoryShape),
- selectedItems: PropTypes.shape({}),
- tabDisabled: PropTypes.bool,
- categoryDisabled: PropTypes.bool,
-
- dispatch: PropTypes.func.isRequired,
-};
-
-const mapStateToProps = (state) => {
- const destinationCourse = destinationCourseSelector(state);
- const duplication = state.duplication;
-
- return {
- categories: duplication.assessmentsComponent,
- selectedItems: duplication.selectedItems,
- tabDisabled:
- duplication.sourceCourse.unduplicableObjectTypes.includes(TAB) ||
- destinationCourse.unduplicableObjectTypes.includes(TAB),
- categoryDisabled:
- duplication.sourceCourse.unduplicableObjectTypes.includes(CATEGORY) ||
- destinationCourse.unduplicableObjectTypes.includes(CATEGORY),
- };
-};
-
-export default connect(mapStateToProps)(AssessmentsSelector);
diff --git a/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/AssessmentsSelector.tsx b/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/AssessmentsSelector.tsx
new file mode 100644
index 00000000000..3b4817e9590
--- /dev/null
+++ b/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/AssessmentsSelector.tsx
@@ -0,0 +1,164 @@
+import { FC } from 'react';
+import { defineMessages } from 'react-intl';
+import { ListSubheader, Typography } from '@mui/material';
+
+import BulkSelectors from 'course/duplication/components/BulkSelectors';
+import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
+import TypeBadge from 'course/duplication/components/TypeBadge';
+import UnpublishedIcon from 'course/duplication/components/UnpublishedIcon';
+import {
+ selectDestinationCourse,
+ selectDuplicationStore,
+} from 'course/duplication/selectors';
+import { actions } from 'course/duplication/store';
+import {
+ DuplicationAssessmentData,
+ DuplicationCategoryData,
+ DuplicationTabData,
+} from 'course/duplication/types';
+import componentTranslations from 'course/translations';
+import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
+import useTranslation from 'lib/hooks/useTranslation';
+
+const translations = defineMessages({
+ noItems: {
+ id: 'course.duplication.Duplication.ItemsSelector.AssessmentsSelector.noItems',
+ defaultMessage: 'There are no assessment items to duplicate.',
+ },
+});
+
+const AssessmentsSelector: FC = () => {
+ const {
+ assessmentsComponent: categories,
+ selectedItems,
+ sourceCourse,
+ } = useAppSelector(selectDuplicationStore);
+ const dispatch = useAppDispatch();
+ const { t } = useTranslation();
+ const destinationCourse = useAppSelector(selectDestinationCourse);
+
+ if (!categories) return null;
+
+ const tabDisabled =
+ sourceCourse.unduplicableObjectTypes.includes('TAB') ||
+ !!destinationCourse?.unduplicableObjectTypes.includes('TAB');
+ const categoryDisabled =
+ sourceCourse.unduplicableObjectTypes.includes('CATEGORY') ||
+ !!destinationCourse?.unduplicableObjectTypes.includes('CATEGORY');
+
+ const tabSetAll =
+ (tab: DuplicationTabData) =>
+ (value: boolean): void => {
+ if (!tabDisabled) {
+ dispatch(actions.setItemSelectedBoolean('TAB', tab.id, value));
+ }
+ tab.assessments.forEach((assessment) => {
+ dispatch(
+ actions.setItemSelectedBoolean('ASSESSMENT', assessment.id, value),
+ );
+ });
+ };
+
+ const categorySetAll =
+ (category: DuplicationCategoryData) =>
+ (value: boolean): void => {
+ if (!categoryDisabled) {
+ dispatch(
+ actions.setItemSelectedBoolean('CATEGORY', category.id, value),
+ );
+ }
+ category.tabs.forEach((tab) => tabSetAll(tab)(value));
+ };
+
+ const renderAssessmentTree = (
+ assessment: DuplicationAssessmentData,
+ ): JSX.Element => {
+ const { id, title, published } = assessment;
+ const checked = !!selectedItems.ASSESSMENT[id];
+ return (
+
+
+ {published || }
+ {title}
+
+ }
+ onChange={(_, value) =>
+ dispatch(actions.setItemSelectedBoolean('ASSESSMENT', id, value))
+ }
+ />
+ );
+ };
+
+ const renderTabTree = (tab: DuplicationTabData): JSX.Element => {
+ const { id, title, assessments } = tab;
+ const checked = !!selectedItems.TAB[id];
+ return (
+
+
+
+ {title}
+
+ }
+ onChange={(_, value) =>
+ dispatch(actions.setItemSelectedBoolean('TAB', id, value))
+ }
+ >
+
+
+ {assessments.map(renderAssessmentTree)}
+
+ );
+ };
+
+ const renderCategoryTree = (
+ category: DuplicationCategoryData,
+ ): JSX.Element => {
+ const { id, title, tabs } = category;
+ const checked = !!selectedItems.CATEGORY[id];
+ return (
+
+
+
+ {title}
+
+ }
+ onChange={(_, value) =>
+ dispatch(actions.setItemSelectedBoolean('CATEGORY', id, value))
+ }
+ >
+
+
+ {tabs.map(renderTabTree)}
+
+ );
+ };
+
+ return (
+ <>
+
+ {t(componentTranslations.course_assessments_component)}
+
+ {categories.length > 0 ? (
+ categories.map(renderCategoryTree)
+ ) : (
+ {t(translations.noItems)}
+ )}
+
+ );
+};
+
+export default AssessmentsSelector;
diff --git a/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/MaterialsSelector.jsx b/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/MaterialsSelector.jsx
deleted file mode 100644
index 227a946ca80..00000000000
--- a/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/MaterialsSelector.jsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { Component } from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-import { ListSubheader, Typography } from '@mui/material';
-import PropTypes from 'prop-types';
-
-import BulkSelectors from 'course/duplication/components/BulkSelectors';
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
-import TypeBadge from 'course/duplication/components/TypeBadge';
-import { duplicableItemTypes } from 'course/duplication/constants';
-import { folderShape } from 'course/duplication/propTypes';
-import { actions } from 'course/duplication/store';
-import componentTranslations from 'course/translations';
-
-const { FOLDER, MATERIAL } = duplicableItemTypes;
-
-const translations = defineMessages({
- noItems: {
- id: 'course.duplication.Duplication.ItemsSelector.MaterialsSelector.noItems',
- defaultMessage: 'There are no materials to duplicate.',
- },
-});
-
-class MaterialsSelector extends Component {
- folderSetAll = (folder) => (value) => {
- this.props.dispatch(
- actions.setItemSelectedBoolean(FOLDER, folder.id, value),
- );
- folder.subfolders.forEach((subfolder) =>
- this.folderSetAll(subfolder)(value),
- );
- folder.materials.forEach((material) => {
- this.props.dispatch(
- actions.setItemSelectedBoolean(MATERIAL, material.id, value),
- );
- });
- };
-
- renderFolder(folder, indentLevel) {
- const { dispatch, selectedItems } = this.props;
- const { id, name, materials, subfolders } = folder;
- const checked = !!selectedItems[FOLDER][folder.id];
- const hasChildren = materials.length + subfolders.length > 0;
-
- return (
-
-
-
- {name}
-
- }
- onChange={(e, value) =>
- dispatch(actions.setItemSelectedBoolean(FOLDER, id, value))
- }
- {...{ checked, indentLevel }}
- >
- {hasChildren ? (
-
- ) : null}
-
- {materials.map((material) =>
- this.renderMaterial(material, indentLevel + 1),
- )}
- {subfolders.map((subfolder) =>
- this.renderFolder(subfolder, indentLevel + 1),
- )}
-
- );
- }
-
- renderMaterial(material, indentLevel) {
- const { dispatch, selectedItems } = this.props;
- const checked = !!selectedItems[MATERIAL][material.id];
-
- return (
-
-
- {material.name}
-
- }
- onChange={(e, value) =>
- dispatch(actions.setItemSelectedBoolean(MATERIAL, material.id, value))
- }
- {...{ checked, indentLevel }}
- />
- );
- }
-
- render() {
- const { folders } = this.props;
- if (!folders) {
- return null;
- }
-
- return (
- <>
-
-
-
- {folders.length > 0 ? (
- folders.map((rootFolder) => this.renderFolder(rootFolder, 0))
- ) : (
-
-
-
- )}
-
- );
- }
-}
-
-MaterialsSelector.propTypes = {
- folders: PropTypes.arrayOf(folderShape),
- selectedItems: PropTypes.shape(),
-
- dispatch: PropTypes.func.isRequired,
-};
-
-export default connect(({ duplication }) => ({
- folders: duplication.materialsComponent,
- selectedItems: duplication.selectedItems,
-}))(MaterialsSelector);
diff --git a/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/MaterialsSelector.tsx b/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/MaterialsSelector.tsx
new file mode 100644
index 00000000000..9d6c22a01ad
--- /dev/null
+++ b/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/MaterialsSelector.tsx
@@ -0,0 +1,120 @@
+import { FC } from 'react';
+import { defineMessages } from 'react-intl';
+import { ListSubheader, Typography } from '@mui/material';
+
+import BulkSelectors from 'course/duplication/components/BulkSelectors';
+import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
+import TypeBadge from 'course/duplication/components/TypeBadge';
+import { selectDuplicationStore } from 'course/duplication/selectors';
+import { actions } from 'course/duplication/store';
+import {
+ DuplicationFolderData,
+ DuplicationMaterialData,
+} from 'course/duplication/types';
+import componentTranslations from 'course/translations';
+import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
+import useTranslation from 'lib/hooks/useTranslation';
+
+const translations = defineMessages({
+ noItems: {
+ id: 'course.duplication.Duplication.ItemsSelector.MaterialsSelector.noItems',
+ defaultMessage: 'There are no materials to duplicate.',
+ },
+});
+
+const MaterialsSelector: FC = () => {
+ const { materialsComponent: folders, selectedItems } = useAppSelector(
+ selectDuplicationStore,
+ );
+ const dispatch = useAppDispatch();
+ const { t } = useTranslation();
+
+ if (!folders) return null;
+
+ const folderSetAll =
+ (folder: DuplicationFolderData) =>
+ (value: boolean): void => {
+ dispatch(actions.setItemSelectedBoolean('FOLDER', folder.id, value));
+ folder.subfolders.forEach((subfolder) => folderSetAll(subfolder)(value));
+ folder.materials.forEach((material) => {
+ dispatch(
+ actions.setItemSelectedBoolean('MATERIAL', material.id, value),
+ );
+ });
+ };
+
+ const renderMaterial = (
+ material: DuplicationMaterialData,
+ indentLevel: number,
+ ): JSX.Element => {
+ const checked = !!selectedItems.MATERIAL[material.id];
+ return (
+
+
+ {material.name}
+
+ }
+ onChange={(_, value) =>
+ dispatch(
+ actions.setItemSelectedBoolean('MATERIAL', material.id, value),
+ )
+ }
+ />
+ );
+ };
+
+ const renderFolder = (
+ folder: DuplicationFolderData,
+ indentLevel: number,
+ ): JSX.Element => {
+ const { id, name, materials, subfolders } = folder;
+ const checked = !!selectedItems.FOLDER[id];
+ const hasChildren = materials.length + subfolders.length > 0;
+
+ return (
+
+
+
+ {name}
+
+ }
+ onChange={(_, value) =>
+ dispatch(actions.setItemSelectedBoolean('FOLDER', id, value))
+ }
+ >
+ {hasChildren ? (
+
+ ) : null}
+
+ {materials.map((material) => renderMaterial(material, indentLevel + 1))}
+ {subfolders.map((subfolder) =>
+ renderFolder(subfolder, indentLevel + 1),
+ )}
+
+ );
+ };
+
+ return (
+ <>
+
+ {t(componentTranslations.course_materials_component)}
+
+ {folders.length > 0 ? (
+ folders.map((rootFolder) => renderFolder(rootFolder, 0))
+ ) : (
+ {t(translations.noItems)}
+ )}
+
+ );
+};
+
+export default MaterialsSelector;
diff --git a/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/SurveysSelector.jsx b/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/SurveysSelector.jsx
deleted file mode 100644
index 0127124c92d..00000000000
--- a/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/SurveysSelector.jsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Component } from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-import { ListSubheader, Typography } from '@mui/material';
-import PropTypes from 'prop-types';
-
-import BulkSelectors from 'course/duplication/components/BulkSelectors';
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
-import TypeBadge from 'course/duplication/components/TypeBadge';
-import UnpublishedIcon from 'course/duplication/components/UnpublishedIcon';
-import { duplicableItemTypes } from 'course/duplication/constants';
-import { surveyShape } from 'course/duplication/propTypes';
-import { actions } from 'course/duplication/store';
-import componentTranslations from 'course/translations';
-
-const translations = defineMessages({
- noItems: {
- id: 'course.duplication.Duplication.ItemsSelector.SurveysSelector.noItems',
- defaultMessage: 'There are no surveys to duplicate.',
- },
-});
-
-class SurveysSelector extends Component {
- setAllSurveysSelection = (value) => {
- const { dispatch, surveys } = this.props;
-
- surveys.forEach((survey) => {
- dispatch(
- actions.setItemSelectedBoolean(
- duplicableItemTypes.SURVEY,
- survey.id,
- value,
- ),
- );
- });
- };
-
- renderBody() {
- const { surveys } = this.props;
-
- if (surveys.length < 1) {
- return (
-
-
-
- );
- }
-
- return (
- <>
- {surveys.length > 1 ? (
-
- ) : null}
- {surveys.map((survey) => this.renderRow(survey))}
-
- );
- }
-
- renderRow(survey) {
- const { dispatch, selectedItems } = this.props;
- const checked = !!selectedItems[duplicableItemTypes.SURVEY][survey.id];
- const label = (
-
-
- {survey.published || }
- {survey.title}
-
- );
-
- return (
-
- dispatch(
- actions.setItemSelectedBoolean(
- duplicableItemTypes.SURVEY,
- survey.id,
- value,
- ),
- )
- }
- />
- );
- }
-
- render() {
- const { surveys } = this.props;
- if (!surveys) {
- return null;
- }
-
- return (
- <>
-
-
-
- {this.renderBody()}
-
- );
- }
-}
-
-SurveysSelector.propTypes = {
- surveys: PropTypes.arrayOf(surveyShape),
- selectedItems: PropTypes.shape({}),
-
- dispatch: PropTypes.func.isRequired,
-};
-
-export default connect(({ duplication }) => ({
- surveys: duplication.surveyComponent,
- selectedItems: duplication.selectedItems,
-}))(SurveysSelector);
diff --git a/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/SurveysSelector.tsx b/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/SurveysSelector.tsx
new file mode 100644
index 00000000000..1c1a6a77068
--- /dev/null
+++ b/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/SurveysSelector.tsx
@@ -0,0 +1,87 @@
+import { FC } from 'react';
+import { defineMessages } from 'react-intl';
+import { ListSubheader, Typography } from '@mui/material';
+
+import BulkSelectors from 'course/duplication/components/BulkSelectors';
+import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
+import TypeBadge from 'course/duplication/components/TypeBadge';
+import UnpublishedIcon from 'course/duplication/components/UnpublishedIcon';
+import { selectDuplicationStore } from 'course/duplication/selectors';
+import { actions } from 'course/duplication/store';
+import { DuplicationSurveyData } from 'course/duplication/types';
+import componentTranslations from 'course/translations';
+import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
+import useTranslation from 'lib/hooks/useTranslation';
+
+const translations = defineMessages({
+ noItems: {
+ id: 'course.duplication.Duplication.ItemsSelector.SurveysSelector.noItems',
+ defaultMessage: 'There are no surveys to duplicate.',
+ },
+});
+
+const SurveysSelector: FC = () => {
+ const { surveyComponent: surveys, selectedItems } = useAppSelector(
+ selectDuplicationStore,
+ );
+ const dispatch = useAppDispatch();
+ const { t } = useTranslation();
+
+ if (!surveys) return null;
+
+ const setAllDuplicationSurveyDatasSelection = (value: boolean): void => {
+ surveys.forEach((survey) => {
+ dispatch(actions.setItemSelectedBoolean('SURVEY', survey.id, value));
+ });
+ };
+
+ const renderRow = (survey: DuplicationSurveyData): JSX.Element => {
+ const checked = !!selectedItems.SURVEY[survey.id];
+ return (
+
+
+ {survey.published || }
+ {survey.title}
+
+ }
+ onChange={(_, value) =>
+ dispatch(actions.setItemSelectedBoolean('SURVEY', survey.id, value))
+ }
+ />
+ );
+ };
+
+ const renderBody = (): JSX.Element => {
+ if (surveys.length < 1) {
+ return (
+ {t(translations.noItems)}
+ );
+ }
+ return (
+ <>
+ {surveys.length > 1 && (
+
+ )}
+ {surveys.map(renderRow)}
+
+ );
+ };
+
+ return (
+ <>
+
+ {t(componentTranslations.course_survey_component)}
+
+ {renderBody()}
+
+ );
+};
+
+export default SurveysSelector;
diff --git a/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/VideosSelector.jsx b/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/VideosSelector.jsx
deleted file mode 100644
index c18fdc34637..00000000000
--- a/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/VideosSelector.jsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { Component } from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-import { ListSubheader, Typography } from '@mui/material';
-import PropTypes from 'prop-types';
-
-import BulkSelectors from 'course/duplication/components/BulkSelectors';
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
-import TypeBadge from 'course/duplication/components/TypeBadge';
-import UnpublishedIcon from 'course/duplication/components/UnpublishedIcon';
-import { duplicableItemTypes } from 'course/duplication/constants';
-import { videoTabShape } from 'course/duplication/propTypes';
-import { actions } from 'course/duplication/store';
-import componentTranslations from 'course/translations';
-
-const { VIDEO_TAB, VIDEO } = duplicableItemTypes;
-
-const translations = defineMessages({
- noItems: {
- id: 'course.duplication.Duplication.ItemsSelector.VideosSelector.noItems',
- defaultMessage: 'There are no videos to duplicate.',
- },
-});
-
-class VideosSelector extends Component {
- setAllInTab = (tab) => (value) => {
- const { dispatch } = this.props;
- dispatch(actions.setItemSelectedBoolean(VIDEO_TAB, tab.id, value));
- tab.videos.forEach((video) => {
- dispatch(actions.setItemSelectedBoolean(VIDEO, video.id, value));
- });
- };
-
- setEverything = (value) => {
- const { tabs } = this.props;
- tabs.forEach((tab) => this.setAllInTab(tab)(value));
- };
-
- renderBody() {
- const { tabs } = this.props;
-
- if (tabs.length < 1) {
- return (
-
-
-
- );
- }
-
- return (
- <>
- {tabs.length > 1 ? (
-
- ) : null}
- {tabs.map((tab) => this.renderTabTree(tab))}
-
- );
- }
-
- renderTabTree(tab) {
- const { dispatch, selectedItems } = this.props;
- const { id, title, videos } = tab;
- const checked = !!selectedItems[VIDEO_TAB][id];
-
- return (
-
-
-
- {title}
-
- }
- onChange={(e, value) =>
- dispatch(actions.setItemSelectedBoolean(VIDEO_TAB, id, value))
- }
- >
-
-
- {videos.map((video) => this.renderVideo(video))}
-
- );
- }
-
- renderVideo(video) {
- const { dispatch, selectedItems } = this.props;
- const checked = !!selectedItems[VIDEO][video.id];
-
- return (
-
-
- {video.published || }
- {video.title}
-
- }
- onChange={(e, value) =>
- dispatch(actions.setItemSelectedBoolean(VIDEO, video.id, value))
- }
- />
- );
- }
-
- render() {
- const { tabs } = this.props;
- if (!tabs) {
- return null;
- }
-
- return (
- <>
-
-
-
- {this.renderBody()}
-
- );
- }
-}
-
-VideosSelector.propTypes = {
- tabs: PropTypes.arrayOf(videoTabShape),
- selectedItems: PropTypes.shape({}),
-
- dispatch: PropTypes.func.isRequired,
-};
-
-export default connect(({ duplication }) => ({
- tabs: duplication.videosComponent,
- selectedItems: duplication.selectedItems,
-}))(VideosSelector);
diff --git a/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/VideosSelector.tsx b/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/VideosSelector.tsx
new file mode 100644
index 00000000000..25ab8fa9505
--- /dev/null
+++ b/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/VideosSelector.tsx
@@ -0,0 +1,123 @@
+import { FC } from 'react';
+import { defineMessages } from 'react-intl';
+import { ListSubheader, Typography } from '@mui/material';
+
+import BulkSelectors from 'course/duplication/components/BulkSelectors';
+import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
+import TypeBadge from 'course/duplication/components/TypeBadge';
+import UnpublishedIcon from 'course/duplication/components/UnpublishedIcon';
+import { selectDuplicationStore } from 'course/duplication/selectors';
+import { actions } from 'course/duplication/store';
+import {
+ DuplicationVideoData,
+ DuplicationVideoTabData,
+} from 'course/duplication/types';
+import componentTranslations from 'course/translations';
+import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
+import useTranslation from 'lib/hooks/useTranslation';
+
+const translations = defineMessages({
+ noItems: {
+ id: 'course.duplication.Duplication.ItemsSelector.VideosSelector.noItems',
+ defaultMessage: 'There are no videos to duplicate.',
+ },
+});
+
+const VideosSelector: FC = () => {
+ const { videosComponent: tabs, selectedItems } = useAppSelector(
+ selectDuplicationStore,
+ );
+ const dispatch = useAppDispatch();
+ const { t } = useTranslation();
+
+ if (!tabs) return null;
+
+ const setAllInTab =
+ (tab: DuplicationVideoTabData) =>
+ (value: boolean): void => {
+ dispatch(actions.setItemSelectedBoolean('VIDEO_TAB', tab.id, value));
+ tab.videos.forEach((video) => {
+ dispatch(actions.setItemSelectedBoolean('VIDEO', video.id, value));
+ });
+ };
+
+ const setEverything = (value: boolean): void => {
+ tabs.forEach((tab) => setAllInTab(tab)(value));
+ };
+
+ const renderVideo = (video: DuplicationVideoData): JSX.Element => {
+ const checked = !!selectedItems.VIDEO[video.id];
+ return (
+
+
+ {video.published || }
+ {video.title}
+
+ }
+ onChange={(_, value) =>
+ dispatch(actions.setItemSelectedBoolean('VIDEO', video.id, value))
+ }
+ />
+ );
+ };
+
+ const renderTabTree = (tab: DuplicationVideoTabData): JSX.Element => {
+ const { id, title, videos } = tab;
+ const checked = !!selectedItems.VIDEO_TAB[id];
+ return (
+
+
+
+ {title}
+
+ }
+ onChange={(_, value) =>
+ dispatch(actions.setItemSelectedBoolean('VIDEO_TAB', id, value))
+ }
+ >
+
+
+ {videos.map(renderVideo)}
+
+ );
+ };
+
+ const renderBody = (): JSX.Element => {
+ if (tabs.length < 1) {
+ return (
+ {t(translations.noItems)}
+ );
+ }
+ return (
+ <>
+ {tabs.length > 1 && (
+
+ )}
+ {tabs.map(renderTabTree)}
+
+ );
+ };
+
+ return (
+ <>
+
+ {t(componentTranslations.course_videos_component)}
+
+ {renderBody()}
+
+ );
+};
+
+export default VideosSelector;
diff --git a/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/index.jsx b/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/index.jsx
deleted file mode 100644
index a155c65e8e2..00000000000
--- a/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/index.jsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { defineMessages, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-import { Typography } from '@mui/material';
-import PropTypes from 'prop-types';
-
-import { itemSelectorPanels } from 'course/duplication/constants';
-import { courseShape } from 'course/duplication/propTypes';
-import destinationCourseSelector from 'course/duplication/selectors/destinationCourse';
-
-import AchievementsSelector from './AchievementsSelector';
-import AssessmentsSelector from './AssessmentsSelector';
-import MaterialsSelector from './MaterialsSelector';
-import SurveysSelector from './SurveysSelector';
-import VideosSelector from './VideosSelector';
-
-const translations = defineMessages({
- pleaseSelectItems: {
- id: 'course.duplication.Duplication.ItemsSelector.pleaseSelectItems',
- defaultMessage: 'Please select items to duplicate via the sidebar.',
- },
- componentDisabled: {
- id: 'course.duplication.Duplication.ItemsSelector.componentDisabled',
- defaultMessage: 'This component is not enabled for the destination course.',
- },
-});
-
-const ItemsSelector = (props) => {
- const { currentPanel, destinationCourse } = props;
-
- if (!currentPanel) {
- return (
-
-
-
- );
- }
-
- if (!destinationCourse.enabledComponents.includes(currentPanel)) {
- return (
-
-
-
- );
- }
-
- const CurrentPanel = ItemsSelector.panelComponentMap[currentPanel];
- return ;
-};
-
-ItemsSelector.panelComponentMap = {
- [itemSelectorPanels.ASSESSMENTS]: AssessmentsSelector,
- [itemSelectorPanels.SURVEYS]: SurveysSelector,
- [itemSelectorPanels.ACHIEVEMENTS]: AchievementsSelector,
- [itemSelectorPanels.MATERIALS]: MaterialsSelector,
- [itemSelectorPanels.VIDEOS]: VideosSelector,
-};
-
-ItemsSelector.propTypes = {
- currentPanel: PropTypes.string,
- destinationCourse: courseShape,
-};
-
-export default connect((state) => ({
- currentPanel: state.duplication.currentItemSelectorPanel,
- destinationCourse: destinationCourseSelector(state),
-}))(ItemsSelector);
diff --git a/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/index.tsx b/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/index.tsx
new file mode 100644
index 00000000000..25bc38dfb94
--- /dev/null
+++ b/client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/index.tsx
@@ -0,0 +1,68 @@
+import { FC } from 'react';
+import { defineMessages } from 'react-intl';
+import { Typography } from '@mui/material';
+
+import {
+ selectDestinationCourse,
+ selectDuplicationStore,
+} from 'course/duplication/selectors';
+import { useAppSelector } from 'lib/hooks/store';
+import useTranslation from 'lib/hooks/useTranslation';
+
+import AchievementsSelector from './AchievementsSelector';
+import AssessmentsSelector from './AssessmentsSelector';
+import MaterialsSelector from './MaterialsSelector';
+import SurveysSelector from './SurveysSelector';
+import VideosSelector from './VideosSelector';
+
+const translations = defineMessages({
+ pleaseSelectItems: {
+ id: 'course.duplication.Duplication.ItemsSelector.pleaseSelectItems',
+ defaultMessage: 'Please select items to duplicate via the sidebar.',
+ },
+ componentDisabled: {
+ id: 'course.duplication.Duplication.ItemsSelector.componentDisabled',
+ defaultMessage: 'This component is not enabled for the destination course.',
+ },
+});
+
+const PanelComponentMapper = {
+ ASSESSMENTS: AssessmentsSelector,
+ SURVEYS: SurveysSelector,
+ ACHIEVEMENTS: AchievementsSelector,
+ MATERIALS: MaterialsSelector,
+ VIDEOS: VideosSelector,
+};
+
+const ItemsSelector: FC = () => {
+ const { currentItemSelectorPanel: currentPanel } = useAppSelector(
+ selectDuplicationStore,
+ );
+ const destinationCourse = useAppSelector(selectDestinationCourse);
+ const { t } = useTranslation();
+
+ if (!destinationCourse) {
+ return null;
+ }
+
+ if (!currentPanel) {
+ return (
+
+ {t(translations.pleaseSelectItems)}
+
+ );
+ }
+
+ if (!destinationCourse.enabledComponents.includes(currentPanel)) {
+ return (
+
+ {t(translations.componentDisabled)}
+
+ );
+ }
+
+ const CurrentPanel = PanelComponentMapper[currentPanel];
+ return ;
+};
+
+export default ItemsSelector;
diff --git a/client/app/bundles/course/duplication/pages/Duplication/ItemsSelectorMenu/index.jsx b/client/app/bundles/course/duplication/pages/Duplication/ItemsSelectorMenu/index.jsx
deleted file mode 100644
index a91172df79c..00000000000
--- a/client/app/bundles/course/duplication/pages/Duplication/ItemsSelectorMenu/index.jsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import { Component } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-import {
- Avatar,
- List,
- ListItem,
- ListItemAvatar,
- ListItemText,
-} from '@mui/material';
-import { cyan } from '@mui/material/colors';
-import PropTypes from 'prop-types';
-
-import {
- duplicableItemTypes,
- itemSelectorPanels as panels,
-} from 'course/duplication/constants';
-import { courseShape } from 'course/duplication/propTypes';
-import { actions } from 'course/duplication/store';
-import componentTranslations from 'course/translations';
-
-import DuplicateButton from '../DuplicateButton';
-
-const {
- TAB,
- ASSESSMENT,
- CATEGORY,
- SURVEY,
- ACHIEVEMENT,
- FOLDER,
- MATERIAL,
- VIDEO_TAB,
- VIDEO,
-} = duplicableItemTypes;
-
-const styles = {
- countAvatar: {
- height: '30px',
- width: '30px',
- margin: 5,
- },
- duplicateButton: {
- display: 'flex',
- justifyContent: 'center',
- },
-};
-
-class ItemsSelectorMenu extends Component {
- renderSidebarItem(panelKey, titleKey, count, className) {
- const { dispatch, enabledComponents } = this.props;
- if (!enabledComponents.includes(panelKey)) {
- return null;
- }
- if (enabledComponents.length === 1) {
- dispatch(actions.setItemSelectorPanel(panelKey));
- }
-
- return (
- dispatch(actions.setItemSelectorPanel(panelKey))}
- >
-
- 0 ? cyan[500] : null,
- }}
- >
- {count}
-
-
-
-
-
-
- );
- }
-
- render() {
- const { selectedItems, courses, destinationCourseId } = this.props;
- // Disabled models for cherry pick duplication as defined in `disabled_cherrypickable_types`.
- const unduplicableObjectTypes = courses.find(
- (course) => course.id === destinationCourseId,
- ).unduplicableObjectTypes;
-
- const counts = {};
- Object.keys(selectedItems).forEach((key) => {
- const idsHash = selectedItems[key];
- counts[key] = Object.keys(idsHash).reduce(
- (count, id) => (idsHash[id] ? count + 1 : count),
- 0,
- );
- });
-
- const assessmentsComponentCount =
- counts[TAB] + counts[ASSESSMENT] + counts[CATEGORY];
- const videosComponentCount = counts[VIDEO] + counts[VIDEO_TAB];
-
- return (
-
- {unduplicableObjectTypes.includes('ASSESSMENT')
- ? null
- : this.renderSidebarItem(
- panels.ASSESSMENTS,
- 'course_assessments_component',
- assessmentsComponentCount,
- 'items-selector-menu-assessment',
- )}
- {unduplicableObjectTypes.includes('SURVEY')
- ? null
- : this.renderSidebarItem(
- panels.SURVEYS,
- 'course_survey_component',
- counts[SURVEY],
- 'items-selector-menu-survey',
- )}
- {unduplicableObjectTypes.includes('ACHIEVEMENT')
- ? null
- : this.renderSidebarItem(
- panels.ACHIEVEMENTS,
- 'course_achievements_component',
- counts[ACHIEVEMENT],
- 'items-selector-menu-achievement',
- )}
- {unduplicableObjectTypes.includes('MATERIAL')
- ? null
- : this.renderSidebarItem(
- panels.MATERIALS,
- 'course_materials_component',
- counts[FOLDER] + counts[MATERIAL],
- 'items-selector-menu-material',
- )}
- {unduplicableObjectTypes.includes('VIDEO')
- ? null
- : this.renderSidebarItem(
- panels.VIDEOS,
- 'course_videos_component',
- videosComponentCount,
- 'items-selector-menu-video',
- )}
-
-
-
-
- );
- }
-}
-
-ItemsSelectorMenu.propTypes = {
- selectedItems: PropTypes.shape({}),
- enabledComponents: PropTypes.arrayOf(PropTypes.string),
- destinationCourseId: PropTypes.number,
- courses: PropTypes.arrayOf(courseShape),
- dispatch: PropTypes.func.isRequired,
-};
-
-export default connect(({ duplication }) => ({
- selectedItems: duplication.selectedItems,
- enabledComponents: duplication.sourceCourse.enabledComponents,
- destinationCourseId: duplication.destinationCourseId,
- courses: duplication.destinationCourses,
-}))(ItemsSelectorMenu);
diff --git a/client/app/bundles/course/duplication/pages/Duplication/ItemsSelectorMenu/index.tsx b/client/app/bundles/course/duplication/pages/Duplication/ItemsSelectorMenu/index.tsx
new file mode 100644
index 00000000000..a5a62b71bc6
--- /dev/null
+++ b/client/app/bundles/course/duplication/pages/Duplication/ItemsSelectorMenu/index.tsx
@@ -0,0 +1,140 @@
+import { FC } from 'react';
+import {
+ Avatar,
+ List,
+ ListItem,
+ ListItemAvatar,
+ ListItemButton,
+ ListItemText,
+} from '@mui/material';
+
+import { selectDuplicationStore } from 'course/duplication/selectors';
+import { actions } from 'course/duplication/store';
+import {
+ DUPLICABLE_ITEM_TYPES,
+ DuplicableItemType,
+ ItemSelectorPanel,
+} from 'course/duplication/types';
+import componentTranslations from 'course/translations';
+import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
+import useTranslation from 'lib/hooks/useTranslation';
+
+import DuplicateButton from '../DuplicateButton';
+
+interface ItemsSelectorSidebarItemProps {
+ panelKey: ItemSelectorPanel;
+ titleKey: string;
+ count: number;
+ className: string;
+}
+
+const ItemsSelectorSidebarItem: FC = ({
+ panelKey,
+ titleKey,
+ count,
+ className,
+}) => {
+ const dispatch = useAppDispatch();
+ const { t } = useTranslation();
+
+ return (
+ dispatch(actions.setItemSelectorPanel(panelKey))}
+ >
+
+ 0 ? 'bg-cyan-500' : ''}`}>
+ {count}
+
+
+ {t(componentTranslations[titleKey])}
+
+ );
+};
+
+const ItemsSelectorMenu: FC = () => {
+ const {
+ selectedItems,
+ destinationCourses,
+ destinationCourseId,
+ sourceCourse: { enabledComponents },
+ } = useAppSelector(selectDuplicationStore);
+
+ // Disabled models for cherry pick duplication as defined in `disabled_cherrypickable_types`.
+ const unduplicableObjectTypes =
+ destinationCourses.find((course) => course.id === destinationCourseId)
+ ?.unduplicableObjectTypes ?? DUPLICABLE_ITEM_TYPES;
+
+ const counts: Record = {} as Record<
+ DuplicableItemType,
+ number
+ >;
+ DUPLICABLE_ITEM_TYPES.forEach((itemType) => {
+ const idsHash = selectedItems[itemType];
+ counts[itemType] = Object.keys(idsHash).reduce(
+ (count, id) => (idsHash[id] ? count + 1 : count),
+ 0,
+ );
+ });
+
+ const assessmentsComponentCount =
+ counts.TAB + counts.ASSESSMENT + counts.CATEGORY;
+ const videosComponentCount = counts.VIDEO + counts.VIDEO_TAB;
+
+ const shouldRenderSidebarItem = (
+ panelKey: ItemSelectorPanel,
+ objectKey: DuplicableItemType,
+ ): boolean =>
+ !unduplicableObjectTypes.includes(objectKey) &&
+ enabledComponents.includes(panelKey);
+
+ return (
+
+ {shouldRenderSidebarItem('ASSESSMENTS', 'ASSESSMENT') && (
+
+ )}
+ {shouldRenderSidebarItem('SURVEYS', 'SURVEY') && (
+
+ )}
+ {shouldRenderSidebarItem('ACHIEVEMENTS', 'ACHIEVEMENT') && (
+
+ )}
+ {shouldRenderSidebarItem('MATERIALS', 'MATERIAL') && (
+
+ )}
+ {shouldRenderSidebarItem('VIDEOS', 'VIDEO') && (
+
+ )}
+
+
+
+
+ );
+};
+
+export default ItemsSelectorMenu;
diff --git a/client/app/bundles/course/duplication/pages/Duplication/__test__/DestinationCourseSelector.test.tsx b/client/app/bundles/course/duplication/pages/Duplication/__test__/DestinationCourseSelector.test.tsx
new file mode 100644
index 00000000000..1cb1d705540
--- /dev/null
+++ b/client/app/bundles/course/duplication/pages/Duplication/__test__/DestinationCourseSelector.test.tsx
@@ -0,0 +1,135 @@
+import { createMockAdapter } from 'mocks/axiosMock';
+import { store } from 'store';
+import { fireEvent, render, screen, waitFor } from 'test-utils';
+
+import CourseAPI from 'api/course';
+import { loadObjectsList } from 'course/duplication/store';
+
+import ObjectDuplication from '../index';
+
+const client = CourseAPI.duplication.client;
+const mock = createMockAdapter(client);
+const url = `/courses/${global.courseId}/object_duplication/new`;
+const defaultInstance = {
+ id: 1,
+ name: 'Default',
+ host: 'example.org',
+};
+
+const baseData = {
+ sourceCourse: {
+ id: 5,
+ title: 'Source Course',
+ start_at: '2024-01-01',
+ duplicationModesAllowed: ['COURSE', 'OBJECT'],
+ enabledComponents: ['ASSESSMENTS'],
+ unduplicableObjectTypes: [],
+ },
+ metadata: { currentInstanceId: 1, currentInstanceHost: 'coursemology.org' },
+ destinationInstances: [defaultInstance],
+ destinationCourses: [],
+ materialsComponent: [],
+ assessmentsComponent: [],
+ surveyComponent: [],
+ achievementsComponent: [],
+ videosComponent: [],
+};
+
+const waitForCombobox = (): Promise =>
+ screen.findByRole('combobox', { name: /destination instance/i });
+
+beforeEach(() => {
+ mock.reset();
+ store.dispatch(loadObjectsList(baseData));
+});
+
+describe(' instance dropdown', () => {
+ it('pre-fills instance dropdown with current instance when it is a valid destination', async () => {
+ const testData = {
+ ...baseData,
+ metadata: {
+ currentInstanceId: 1,
+ currentInstanceHost: 'coursemology.org',
+ },
+ destinationInstances: [defaultInstance],
+ };
+ store.dispatch(loadObjectsList(testData));
+ mock.onGet(url).reply(200, testData);
+
+ render();
+ const combobox = await waitForCombobox();
+
+ expect(combobox).toHaveValue('Default');
+ });
+
+ it('does not pre-fill instance dropdown when current instance is not a valid destination', async () => {
+ const testData = {
+ ...baseData,
+ metadata: {
+ currentInstanceId: 99,
+ currentInstanceHost: 'other.coursemology.org',
+ },
+ destinationInstances: [defaultInstance],
+ };
+ store.dispatch(loadObjectsList(testData));
+ mock.onGet(url).reply(200, testData);
+
+ render();
+ const combobox = await waitForCombobox();
+
+ expect(combobox).toHaveValue('');
+ });
+
+ it('MyLocation button sets the Autocomplete to the current instance', async () => {
+ const testData = {
+ ...baseData,
+ metadata: {
+ currentInstanceId: 1,
+ currentInstanceHost: 'coursemology.org',
+ },
+ destinationInstances: [
+ defaultInstance,
+ { id: 2, name: 'Other', host: 'other.org' },
+ ],
+ };
+ store.dispatch(loadObjectsList(testData));
+ mock.onGet(url).reply(200, testData);
+
+ render();
+ const combobox = await waitForCombobox();
+ await waitFor(() => expect(combobox).toHaveValue('Default'));
+
+ // Click MyLocation to confirm it sets the current instance
+ fireEvent.click(
+ screen.getByRole('button', { name: /select current instance/i }),
+ );
+
+ // Combobox should show the current instance name
+ await waitFor(() => expect(combobox).toHaveValue('Default'));
+ });
+
+ /**
+ * The MyLocation IconButton is currently only disabled when `isDuplicating` is true,
+ * but it should also be disabled when the current instance is not a valid destination.
+ */
+ it('disables MyLocation button when current instance is not a valid destination', async () => {
+ const testData = {
+ ...baseData,
+ metadata: {
+ currentInstanceId: 99,
+ currentInstanceHost: 'other.coursemology.org',
+ },
+ destinationInstances: [defaultInstance],
+ };
+ store.dispatch(loadObjectsList(testData));
+ mock.onGet(url).reply(200, testData);
+
+ render();
+ await waitForCombobox();
+
+ const locationButton = screen.getByRole('button', {
+ name: /select current instance/i,
+ });
+ expect(locationButton).toBeDisabled();
+ });
+});
diff --git a/client/app/bundles/course/duplication/pages/Duplication/__test__/DuplicateButton.test.tsx b/client/app/bundles/course/duplication/pages/Duplication/__test__/DuplicateButton.test.tsx
index 7c49e3a4e81..7fb5c86e368 100644
--- a/client/app/bundles/course/duplication/pages/Duplication/__test__/DuplicateButton.test.tsx
+++ b/client/app/bundles/course/duplication/pages/Duplication/__test__/DuplicateButton.test.tsx
@@ -1,15 +1,14 @@
import { store } from 'store';
-import { fireEvent, render } from 'test-utils';
+import { fireEvent, render, screen, within } from 'test-utils';
import CourseAPI from 'api/course';
-import { duplicableItemTypes } from 'course/duplication/constants';
import { loadObjectsList } from 'course/duplication/store';
import DuplicateButton from '../DuplicateButton';
const data = {
sourceCourse: { id: 37 },
- metadata: { canDuplicateToAnotherInstance: false, currentInstanceId: 0 },
+ metadata: { currentInstanceId: 0 },
destinationCourseId: 9,
destinationCourses: [
{
@@ -21,9 +20,15 @@ const data = {
],
destinationInstances: [{ id: 0, name: 'default', host: 'example.org' }],
selectedItems: {
- [duplicableItemTypes.TAB]: { 3: true, 4: true, 5: false },
- [duplicableItemTypes.CATEGORY]: { 6: false },
- [duplicableItemTypes.ASSESSMENT]: { 7: true },
+ ASSESSMENT: { 7: true },
+ TAB: { 3: true, 4: true, 5: false },
+ CATEGORY: { 6: false },
+ SURVEY: { 10: true },
+ ACHIEVEMENT: { 11: true, 12: false },
+ FOLDER: { 13: true },
+ MATERIAL: { 14: true },
+ VIDEO: { 15: true },
+ VIDEO_TAB: { 16: true },
},
materialsComponent: [],
assessmentsComponent: [
@@ -54,7 +59,19 @@ const data = {
],
},
],
- videosComponent: [],
+ surveyComponent: [{ id: 10, title: 'Survey 10', published: true }],
+ achievementsComponent: [
+ { id: 11, title: 'Achievement 11', published: true, url: '/badges/11' },
+ { id: 12, title: 'Achievement 12', published: true, url: '/badges/12' },
+ ],
+ videosComponent: [
+ {
+ id: 16,
+ title: 'Video Tab 16',
+ parent_id: null,
+ videos: [{ id: 15, title: 'Video 15', published: true }],
+ },
+ ],
};
const expectedPayload = {
@@ -62,6 +79,12 @@ const expectedPayload = {
items: {
ASSESSMENT: ['7'],
TAB: ['3', '4'],
+ SURVEY: ['10'],
+ ACHIEVEMENT: ['11'],
+ FOLDER: ['13'],
+ MATERIAL: ['14'],
+ VIDEO: ['15'],
+ VIDEO_TAB: ['16'],
},
destination_course_id: 9,
},
@@ -79,4 +102,43 @@ describe('', () => {
expect(spy).toHaveBeenCalledWith(data.sourceCourse.id, expectedPayload);
});
+
+ it('shows only selected items in the confirmation dialog and sends the correct request', async () => {
+ const spy = jest.spyOn(CourseAPI.duplication, 'duplicateItems');
+
+ store.dispatch(loadObjectsList(data));
+ const page = render();
+
+ fireEvent.click(
+ await page.findByRole('button', { name: /duplicate items/i }),
+ );
+
+ const dialog = await screen.findByRole('dialog');
+ const d = within(dialog);
+
+ // Destination course card
+ expect(d.getByText('destination')).toBeInTheDocument();
+
+ // Selected assessments and tabs appear; unselected ones do not
+ expect(d.getByText('Assessment 7')).toBeInTheDocument();
+ expect(d.getByText('Tab 3')).toBeInTheDocument();
+ expect(d.getByText('Tab 4')).toBeInTheDocument();
+ expect(d.queryByText('Tab 5')).not.toBeInTheDocument();
+ expect(d.queryByText('Category 6')).not.toBeInTheDocument();
+
+ // Selected survey appears
+ expect(d.getByText('Survey 10')).toBeInTheDocument();
+
+ // Selected achievement appears; unselected one does not
+ expect(d.getByText('Achievement 11')).toBeInTheDocument();
+ expect(d.queryByText('Achievement 12')).not.toBeInTheDocument();
+
+ // Selected video and video tab appear
+ expect(d.getByText('Video Tab 16')).toBeInTheDocument();
+ expect(d.getByText('Video 15')).toBeInTheDocument();
+
+ // Clicking Duplicate sends the correct API request
+ fireEvent.click(d.getByRole('button', { name: 'Duplicate' }));
+ expect(spy).toHaveBeenCalledWith(data.sourceCourse.id, expectedPayload);
+ });
});
diff --git a/client/app/bundles/course/duplication/pages/Duplication/__test__/ObjectDuplication.test.jsx b/client/app/bundles/course/duplication/pages/Duplication/__test__/ObjectDuplication.test.jsx
deleted file mode 100644
index e0afa3e9f43..00000000000
--- a/client/app/bundles/course/duplication/pages/Duplication/__test__/ObjectDuplication.test.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { createMockAdapter } from 'mocks/axiosMock';
-import { store } from 'store';
-import { render, waitFor } from 'test-utils';
-
-import CourseAPI from 'api/course';
-
-import ObjectDuplication from '../index';
-
-const client = CourseAPI.duplication.client;
-const mock = createMockAdapter(client);
-
-const responseData = {
- sourceCourse: { id: 5 },
- metadata: { canDuplicateToAnotherInstance: false, currentInstanceId: 0 },
- destinationInstances: [{ id: 0, name: 'default', host: 'example.org' }],
- destinationCourses: [
- { id: 54, title: 'Course B', path: '/courses/54' },
- { id: 55, title: 'Course A', path: '/courses/55' },
- { id: 56, title: 'Course C', path: '/courses/56' },
- ],
- materialsComponent: [
- { id: 91, parent_id: 93, name: 'L2' },
- { id: 92, parent_id: null, name: 'Root' },
- { id: 93, parent_id: 92, name: 'L1' },
- ],
-};
-
-beforeEach(() => {
- mock.reset();
-});
-
-describe('', () => {
- it('fetches and receives sorted data', async () => {
- const spy = jest.spyOn(CourseAPI.duplication, 'fetch');
- const url = `/courses/${global.courseId}/object_duplication/new`;
- mock.onGet(url).reply(200, responseData);
-
- render();
-
- await waitFor(() => expect(spy).toHaveBeenCalled());
-
- const data = store.getState().duplication;
- const courseTitles = data.destinationCourses.map((course) => course.title);
- const rootFolder = data.materialsComponent[0];
-
- expect(courseTitles).toEqual(['Course A', 'Course B', 'Course C']);
- expect(data.materialsComponent).toHaveLength(1);
- expect(rootFolder.name).toBe('Root');
- expect(rootFolder.subfolders[0].name).toBe('L1');
- expect(rootFolder.subfolders[0].subfolders[0].name).toBe('L2');
- });
-});
diff --git a/client/app/bundles/course/duplication/pages/Duplication/__test__/ObjectDuplication.test.tsx b/client/app/bundles/course/duplication/pages/Duplication/__test__/ObjectDuplication.test.tsx
new file mode 100644
index 00000000000..cf66a84f3c5
--- /dev/null
+++ b/client/app/bundles/course/duplication/pages/Duplication/__test__/ObjectDuplication.test.tsx
@@ -0,0 +1,176 @@
+import { createMockAdapter } from 'mocks/axiosMock';
+import { store } from 'store';
+import { render, screen, waitFor } from 'test-utils';
+
+import CourseAPI from 'api/course';
+import { loadObjectsList } from 'course/duplication/store';
+import { DuplicationData } from 'course/duplication/types';
+
+import ObjectDuplication from '../index';
+
+const client = CourseAPI.duplication.client;
+const mock = createMockAdapter(client);
+const url = `/courses/${global.courseId}/object_duplication/new`;
+
+const defaultInstance = {
+ id: 1,
+ name: 'Default',
+ host: 'example.org',
+};
+
+const baseData = {
+ sourceCourse: {
+ id: 5,
+ title: 'Source Course',
+ start_at: '2024-01-01',
+ duplicationModesAllowed: ['COURSE', 'OBJECT'],
+ enabledComponents: ['ASSESSMENTS'],
+ unduplicableObjectTypes: [],
+ },
+ metadata: { currentInstanceId: 2, currentInstanceHost: 'coursemology.org' },
+ destinationInstances: [defaultInstance],
+ destinationCourses: [],
+ materialsComponent: [],
+ assessmentsComponent: [],
+ surveyComponent: [],
+ achievementsComponent: [],
+ videosComponent: [],
+};
+
+beforeEach(() => {
+ mock.reset();
+ store.dispatch(loadObjectsList(baseData));
+});
+
+describe('', () => {
+ it('fetches and receives sorted data', async () => {
+ const spy = jest.spyOn(CourseAPI.duplication, 'fetch');
+ mock.onGet(url).reply(200, {
+ sourceCourse: { id: 5 },
+ metadata: { currentInstanceId: 0 },
+ destinationInstances: [defaultInstance],
+ destinationCourses: [
+ { id: 54, title: 'Course B', path: '/courses/54' },
+ { id: 55, title: 'Course A', path: '/courses/55' },
+ { id: 56, title: 'Course C', path: '/courses/56' },
+ ],
+ materialsComponent: [
+ { id: 91, parent_id: 93, name: 'L2' },
+ { id: 92, parent_id: null, name: 'Root' },
+ { id: 93, parent_id: 92, name: 'L1' },
+ ],
+ });
+
+ render();
+
+ await waitFor(() => expect(spy).toHaveBeenCalled());
+
+ const data = store.getState().duplication as DuplicationData;
+ const courseTitles = data.destinationCourses.map((course) => course.title);
+ const rootFolder = data.materialsComponent[0];
+
+ expect(courseTitles).toEqual(['Course A', 'Course B', 'Course C']);
+ expect(data.materialsComponent).toHaveLength(1);
+ expect(rootFolder.name).toBe('Root');
+ expect(rootFolder.subfolders[0].name).toBe('L1');
+ expect(rootFolder.subfolders[0].subfolders[0].name).toBe('L2');
+ });
+
+ it('hides alert when current instance is a valid destination', async () => {
+ mock.onGet(url).reply(200, {
+ ...baseData,
+ metadata: {
+ currentInstanceId: 1,
+ currentInstanceHost: 'coursemology.org',
+ },
+ destinationInstances: [defaultInstance],
+ });
+
+ render();
+ await screen.findByRole('radio', { name: /new course/i });
+
+ expect(
+ screen.queryByText(/cannot duplicate to a new course/i),
+ ).not.toBeInTheDocument();
+ });
+
+ it('shows alert when current instance is not a valid destination', async () => {
+ mock.onGet(url).reply(200, {
+ ...baseData,
+ metadata: {
+ currentInstanceId: 99,
+ currentInstanceHost: 'other.coursemology.org',
+ },
+ destinationInstances: [defaultInstance],
+ });
+
+ render();
+
+ await screen.findByText(/cannot duplicate to a new course/i);
+ });
+
+ it('disables New Course radio when there are no destination instances', async () => {
+ mock.onGet(url).reply(200, {
+ ...baseData,
+ destinationInstances: [],
+ });
+
+ render();
+ await screen.findByRole('radio', { name: /new course/i });
+
+ expect(screen.getByRole('radio', { name: /new course/i })).toBeDisabled();
+ expect(
+ screen.getByRole('radio', { name: /existing course/i }),
+ ).not.toBeDisabled();
+ });
+
+ it('enables both mode radios when destination instances exist', async () => {
+ mock.onGet(url).reply(200, {
+ ...baseData,
+ destinationInstances: [defaultInstance],
+ });
+
+ render();
+ await screen.findByRole('radio', { name: /new course/i });
+
+ expect(
+ screen.getByRole('radio', { name: /new course/i }),
+ ).not.toBeDisabled();
+ expect(
+ screen.getByRole('radio', { name: /existing course/i }),
+ ).not.toBeDisabled();
+ });
+
+ it('shows loading indicator while data is being fetched', async () => {
+ mock.onGet(url).reply(() => new Promise(() => {}));
+
+ render();
+ await screen.findByTestId('CircularProgress');
+
+ expect(screen.queryByRole('radio')).not.toBeInTheDocument();
+ });
+
+ it('shows duplication disabled message when no modes are allowed', async () => {
+ mock.onGet(url).reply(200, {
+ ...baseData,
+ sourceCourse: { ...baseData.sourceCourse, duplicationModesAllowed: [] },
+ });
+
+ render();
+
+ await screen.findByText(/duplication is disabled for this course/i);
+ });
+
+ it('shows no components message when all components are disabled', async () => {
+ mock.onGet(url).reply(200, {
+ ...baseData,
+ sourceCourse: { ...baseData.sourceCourse, enabledComponents: [] },
+ });
+
+ render();
+
+ await screen.findByText(
+ /all components with duplicable items are disabled/i,
+ );
+ });
+});
diff --git a/client/app/bundles/course/duplication/pages/Duplication/index.jsx b/client/app/bundles/course/duplication/pages/Duplication/index.jsx
deleted file mode 100644
index a9d07ed9e92..00000000000
--- a/client/app/bundles/course/duplication/pages/Duplication/index.jsx
+++ /dev/null
@@ -1,253 +0,0 @@
-import { Component } from 'react';
-import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-import {
- FormControlLabel,
- ListSubheader,
- Paper,
- Radio,
- RadioGroup,
- Typography,
-} from '@mui/material';
-import PropTypes from 'prop-types';
-
-import { duplicationModes } from 'course/duplication/constants';
-import { fetchObjectsList } from 'course/duplication/operations';
-import { sourceCourseShape } from 'course/duplication/propTypes';
-import { actions } from 'course/duplication/store';
-import Page from 'lib/components/core/layouts/Page';
-import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-
-import DestinationCourseSelector from './DestinationCourseSelector';
-import DuplicateAllButton from './DuplicateAllButton';
-import ItemsSelector from './ItemsSelector';
-import ItemsSelectorMenu from './ItemsSelectorMenu';
-
-const translations = defineMessages({
- duplicateData: {
- id: 'course.duplication.Duplication.duplicateData',
- defaultMessage: 'Duplicate Data',
- },
- fromCourse: {
- id: 'course.duplication.Duplication.fromCourse',
- defaultMessage: 'Duplicate data from {courseTitle}',
- },
- toCourse: {
- id: 'course.duplication.Duplication.toCourse',
- defaultMessage: 'To',
- },
- items: {
- id: 'course.duplication.Duplication.items',
- defaultMessage: 'Selected Items',
- },
- newCourse: {
- id: 'course.duplication.Duplication.newCourse',
- defaultMessage: 'New Course',
- },
- existingCourse: {
- id: 'course.duplication.Duplication.existingCourse',
- defaultMessage: 'Existing Course',
- },
- duplicationDisabled: {
- id: 'course.duplication.Duplication.duplicationDisabled',
- defaultMessage: 'Duplication is disabled for this course.',
- },
- noComponentsEnabled: {
- id: 'course.duplication.Duplication.noComponentsEnabled',
- defaultMessage:
- 'All components with duplicable items are disabled. \
- You may enable them under course settings.',
- },
-});
-
-const styles = {
- bodyGrid: {
- display: 'grid',
- gridTemplateColumns: '210px auto',
- gridTemplateRows: 'auto',
- },
- itemsSidebarHeader: {
- padding: '25px 20px 0px 20px',
- },
- mainPanel: {
- marginTop: 15,
- padding: '5px 40px 20px 40px',
- },
- radioButtonGroup: {
- marginTop: 20,
- },
- duplicateAllButton: {
- marginTop: 30,
- },
-};
-
-class Duplication extends Component {
- componentDidMount() {
- this.props.dispatch(fetchObjectsList());
- }
-
- renderBody() {
- const {
- isLoading,
- isCourseSelected,
- duplicationMode,
- modesAllowed,
- enabledComponents,
- } = this.props;
- if (isLoading) {
- return ;
- }
-
- if (!modesAllowed || modesAllowed.length < 1) {
- return (
-
-
-
- );
- }
- if (!enabledComponents || enabledComponents.length < 1) {
- return (
-
-
-
- );
- }
-
- return (
-
-
{this.renderToCourseSidebar()}
-
-
-
-
-
- {this.renderItemsSelectorSidebar()}
-
- {duplicationMode === duplicationModes.OBJECT && isCourseSelected ? (
-
-
-
- ) : (
-
- )}
-
-
-
-
-
-
- );
- }
- return ;
- }
-
- renderToCourseModeSelector() {
- const { dispatch, duplicationMode } = this.props;
- return (
- dispatch(actions.setDuplicationMode(mode))}
- style={styles.radioButtonGroup}
- value={duplicationMode}
- >
- }
- label={}
- value={duplicationModes.COURSE}
- />
- }
- label={}
- value={duplicationModes.OBJECT}
- />
-
- );
- }
-
- renderToCourseSidebar() {
- const { dispatch, modesAllowed } = this.props;
- const header = (
-
-
-
- );
-
- const isSingleValidMode =
- modesAllowed &&
- modesAllowed.length === 1 &&
- duplicationModes[modesAllowed[0]];
- if (isSingleValidMode) {
- dispatch(actions.setDuplicationMode(modesAllowed[0]));
- return header;
- }
-
- return (
- <>
- {header}
- {this.renderToCourseModeSelector()}
-
- );
- }
-
- render() {
- const { sourceCourse } = this.props;
- return (
-
- }
- >
- {this.renderBody()}
-
- );
- }
-}
-
-Duplication.propTypes = {
- isLoading: PropTypes.bool.isRequired,
- isCourseSelected: PropTypes.bool.isRequired,
- isChangingCourse: PropTypes.bool.isRequired,
- duplicationMode: PropTypes.string.isRequired,
- modesAllowed: PropTypes.arrayOf(PropTypes.string),
- enabledComponents: PropTypes.arrayOf(PropTypes.string),
- currentHost: PropTypes.string.isRequired,
- currentCourseId: PropTypes.number,
- sourceCourse: sourceCourseShape.isRequired,
-
- dispatch: PropTypes.func.isRequired,
- intl: PropTypes.object,
-};
-
-const handle = translations.duplicateData;
-
-export default Object.assign(
- connect(({ duplication }) => ({
- isLoading: duplication.isLoading,
- isChangingCourse: duplication.isChangingCourse,
- isCourseSelected: !!duplication.destinationCourseId,
- duplicationMode: duplication.duplicationMode,
- modesAllowed: duplication.sourceCourse.duplicationModesAllowed,
- enabledComponents: duplication.sourceCourse.enabledComponents,
- currentHost: duplication.currentHost,
- currentCourseId: duplication.currentCourseId,
- sourceCourse: duplication.sourceCourse,
- }))(injectIntl(Duplication)),
- { handle },
-);
diff --git a/client/app/bundles/course/duplication/pages/Duplication/index.tsx b/client/app/bundles/course/duplication/pages/Duplication/index.tsx
new file mode 100644
index 00000000000..d28cc799830
--- /dev/null
+++ b/client/app/bundles/course/duplication/pages/Duplication/index.tsx
@@ -0,0 +1,255 @@
+import { FC, useEffect } from 'react';
+import { defineMessages } from 'react-intl';
+import {
+ Alert,
+ FormControlLabel,
+ ListSubheader,
+ Paper,
+ Radio,
+ RadioGroup,
+ Typography,
+} from '@mui/material';
+
+import { fetchObjectsList } from 'course/duplication/operations';
+import { selectDuplicationStore } from 'course/duplication/selectors';
+import { actions } from 'course/duplication/store';
+import { DuplicationMode } from 'course/duplication/types';
+import Page from 'lib/components/core/layouts/Page';
+import Link from 'lib/components/core/Link';
+import LoadingIndicator from 'lib/components/core/LoadingIndicator';
+import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
+import useTranslation from 'lib/hooks/useTranslation';
+
+import DestinationCourseSelector from './DestinationCourseSelector';
+import DuplicateAllButton from './DuplicateAllButton';
+import ItemsSelector from './ItemsSelector';
+import ItemsSelectorMenu from './ItemsSelectorMenu';
+
+const translations = defineMessages({
+ duplicateData: {
+ id: 'course.duplication.Duplication.duplicateData',
+ defaultMessage: 'Duplicate Data',
+ },
+ fromCourse: {
+ id: 'course.duplication.Duplication.fromCourse',
+ defaultMessage: 'Duplicate data from {courseTitle}',
+ },
+ toCourse: {
+ id: 'course.duplication.Duplication.toCourse',
+ defaultMessage: 'To',
+ },
+ items: {
+ id: 'course.duplication.Duplication.items',
+ defaultMessage: 'Selected Items',
+ },
+ newCourse: {
+ id: 'course.duplication.Duplication.newCourse',
+ defaultMessage: 'New Course',
+ },
+ existingCourse: {
+ id: 'course.duplication.Duplication.existingCourse',
+ defaultMessage: 'Existing Course',
+ },
+ duplicationDisabled: {
+ id: 'course.duplication.Duplication.duplicationDisabled',
+ defaultMessage: 'Duplication is disabled for this course.',
+ },
+ noComponentsEnabled: {
+ id: 'course.duplication.Duplication.noComponentsEnabled',
+ defaultMessage:
+ 'All components with duplicable items are disabled. \
+ You may enable them under course settings.',
+ },
+ cannotDuplicateToNewCourseInThisInstance: {
+ id: 'course.duplication.Duplication.cannotDuplicateToNewCourseInThisInstance',
+ defaultMessage:
+ 'You cannot duplicate to a new course in {instanceHost} because you are not an instructor here. {duplicationLink}',
+ },
+ requestInstanceInstructorRole: {
+ id: 'course.duplication.Duplication.requestInstanceInstructorRole',
+ defaultMessage: 'Request to be an instructor',
+ },
+});
+
+const DuplicationModeSelector: FC<{
+ duplicationMode: DuplicationMode;
+ modesAllowed: DuplicationMode[];
+}> = ({ duplicationMode, modesAllowed }) => {
+ const dispatch = useAppDispatch();
+ const { t } = useTranslation();
+
+ const singleValidMode =
+ modesAllowed && modesAllowed.length === 1 && modesAllowed[0];
+
+ useEffect(() => {
+ if (singleValidMode) {
+ dispatch(actions.setDuplicationMode(singleValidMode));
+ }
+ }, [dispatch, singleValidMode]);
+
+ return (
+ <>
+
+ {t(translations.toCourse)}
+
+ dispatch(actions.setDuplicationMode(mode))}
+ value={duplicationMode}
+ >
+ }
+ disabled={!modesAllowed.includes('COURSE')}
+ label={t(translations.newCourse)}
+ value="COURSE"
+ />
+ }
+ disabled={!modesAllowed.includes('OBJECT')}
+ label={t(translations.existingCourse)}
+ value="OBJECT"
+ />
+
+
+ );
+};
+
+const ItemsSelectorSidebar: FC = () => {
+ const { duplicationMode, destinationCourseId } = useAppSelector(
+ selectDuplicationStore,
+ );
+ const { t } = useTranslation();
+
+ const isCourseSelected = !!destinationCourseId;
+
+ if (duplicationMode === 'OBJECT' && isCourseSelected) {
+ return (
+
+
+ {t(translations.items)}
+
+
+
+ );
+ }
+ return null;
+};
+
+const DuplicationBody: FC = () => {
+ const {
+ isLoading,
+ sourceCourse: { duplicationModesAllowed, enabledComponents },
+ destinationCourseId,
+ duplicationMode,
+ metadata: { currentInstanceId, currentInstanceHost },
+ destinationInstances,
+ } = useAppSelector(selectDuplicationStore);
+ const { t } = useTranslation();
+
+ const isCourseSelected = !!destinationCourseId;
+ const modesAllowed = duplicationModesAllowed.filter(
+ (mode) => Object.keys(destinationInstances).length > 0 || mode === 'OBJECT',
+ );
+
+ if (isLoading) {
+ return ;
+ }
+
+ if (!modesAllowed || modesAllowed.length < 1) {
+ return (
+
+ {t(translations.duplicationDisabled)}
+
+ );
+ }
+
+ if (!enabledComponents || enabledComponents.length < 1) {
+ return (
+
+ {t(translations.noComponentsEnabled)}
+
+ );
+ }
+
+ return (
+ <>
+ {!(currentInstanceId in destinationInstances) && (
+
+ {t(translations.cannotDuplicateToNewCourseInThisInstance, {
+ instanceHost: currentInstanceHost,
+ duplicationLink: (
+ <>
+
+
+ {t(translations.requestInstanceInstructorRole)}
+
+
+ ),
+ })}
+
+ )}
+
+
+
+ {duplicationMode === 'COURSE' && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {duplicationMode === 'OBJECT' && isCourseSelected && (
+
+
+
+ )}
+
+