Skip to content

Commit d2314aa

Browse files
ChrisChVChrisChV
committed
refactor: Move the Import Course button to the Import Home page
1 parent 84ba64c commit d2314aa

8 files changed

Lines changed: 160 additions & 158 deletions

File tree

‎src/library-authoring/LibraryAuthoringPage.tsx‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
} from 'react';
88
import { Helmet } from 'react-helmet';
99
import classNames from 'classnames';
10-
import { getConfig } from '@edx/frontend-platform';
1110
import { StudioFooterSlot } from '@edx/frontend-component-footer';
1211
import { useIntl } from '@edx/frontend-platform/i18n';
1312
import {
@@ -20,7 +19,6 @@ import {
2019
Stack,
2120
Tab,
2221
Tabs,
23-
useToggle,
2422
} from '@openedx/paragon';
2523
import { Add, InfoOutline } from '@openedx/paragon/icons';
2624
import { Link, useLocation, useNavigate } from 'react-router-dom';
@@ -51,10 +49,8 @@ import { useLibraryContext } from './common/context/LibraryContext';
5149
import { SidebarBodyItemId, useSidebarContext } from './common/context/SidebarContext';
5250
import { allLibraryPageTabs, ContentType, useLibraryRoutes } from './routes';
5351
import messages from './messages';
54-
import tempMessages from './course-import/messages';
5552
import LibraryFilterByPublished from './generic/filter-by-published';
5653
import { libraryQueryPredicate } from './data/apiHooks';
57-
import { ImportStepperModal } from './course-import/ImportStepperModal';
5854

5955
const HeaderActions = () => {
6056
const intl = useIntl();
@@ -151,7 +147,6 @@ const LibraryAuthoringPage = ({
151147
const params = new URLSearchParams(location.search);
152148
const { showToast } = useContext(ToastContext);
153149
const queryClient = useQueryClient();
154-
const [importModalIsOpen, openImportModal, closeImportModal] = useToggle(false);
155150

156151
// Get migration status every second if applicable
157152
const migrationId = params.get('migration_task');
@@ -360,11 +355,6 @@ const LibraryAuthoringPage = ({
360355
extraFilter={extraFilter}
361356
overrideTypesFilter={overrideTypesFilter}
362357
>
363-
{getConfig().ENABLE_COURSE_IMPORT_IN_LIBRARY === 'true' && (
364-
<Button onClick={openImportModal}>
365-
{intl.formatMessage(tempMessages.importCourseButton)}
366-
</Button>
367-
)}
368358
<SubHeader
369359
title={<SubHeaderTitle title={libraryData.title} />}
370360
subtitle={!componentPickerMode ? intl.formatMessage(messages.headingSubtitle) : undefined}
@@ -408,11 +398,6 @@ const LibraryAuthoringPage = ({
408398
<LibrarySidebar />
409399
</div>
410400
)}
411-
<ImportStepperModal
412-
isOpen={importModalIsOpen}
413-
onClose={closeImportModal}
414-
libraryKey={libraryId}
415-
/>
416401
</div>
417402
);
418403
};

‎src/library-authoring/course-import/messages.ts‎

Lines changed: 0 additions & 92 deletions
This file was deleted.

‎src/library-authoring/import-course/CourseImportHomePage.tsx‎

Lines changed: 65 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1+
import { Helmet } from 'react-helmet';
12
import {
23
Button,
34
Card,
45
Container,
56
Layout,
67
Stack,
8+
useToggle,
79
} from '@openedx/paragon';
810
import { Add } from '@openedx/paragon/icons';
9-
import { Helmet } from 'react-helmet';
10-
11+
import { getConfig } from '@edx/frontend-platform';
1112
import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
1213
import Loading from '@src/generic/Loading';
1314
import SubHeader from '@src/generic/sub-header/SubHeader';
@@ -17,6 +18,7 @@ import { useLibraryContext } from '../common/context/LibraryContext';
1718
import { useCourseImports } from '../data/apiHooks';
1819
import { HelpSidebar } from './HelpSidebar';
1920
import { ImportedCourseCard } from './ImportedCourseCard';
21+
import { ImportStepperModal } from './stepper/ImportStepperModal';
2022
import messages from './messages';
2123

2224
const EmptyState = () => (
@@ -35,59 +37,74 @@ const EmptyState = () => (
3537
export const CourseImportHomePage = () => {
3638
const intl = useIntl();
3739
const { libraryId, libraryData, readOnly } = useLibraryContext();
40+
const [importModalIsOpen, openImportModal, closeImportModal] = useToggle(false);
3841
const { data: courseImports } = useCourseImports(libraryId);
3942

4043
if (!courseImports || !libraryData) {
4144
return <Loading />;
4245
}
4346

4447
return (
45-
<div className="d-flex">
46-
<div className="flex-grow-1">
47-
<Helmet>
48-
<title>{libraryData.title} | {process.env.SITE_NAME}</title>
49-
</Helmet>
50-
<Header
51-
number={libraryData.slug}
52-
title={libraryData.title}
53-
org={libraryData.org}
54-
contextId={libraryId}
55-
isLibrary
56-
readOnly={readOnly}
57-
containerProps={{
58-
size: undefined,
59-
}}
60-
/>
61-
<Container className="mt-4 mb-5">
62-
<div className="px-4 bg-light-200 border-bottom">
63-
<SubHeader
64-
title={intl.formatMessage(messages.pageTitle)}
65-
subtitle={intl.formatMessage(messages.pageSubtitle)}
66-
hideBorder
67-
/>
68-
</div>
69-
<Layout xs={[{ span: 9 }, { span: 3 }]}>
70-
<Layout.Element>
71-
{courseImports.length ? (
72-
<Stack gap={3} className="pl-4 mt-4">
73-
<h3>
74-
<FormattedMessage {...messages.courseImportPreviousImports} />
75-
</h3>
76-
{courseImports.map((courseImport) => (
77-
<ImportedCourseCard
78-
key={courseImport.source.key}
79-
courseImport={courseImport}
80-
/>
81-
))}
82-
</Stack>
83-
) : (<EmptyState />)}
84-
</Layout.Element>
85-
<Layout.Element>
86-
<HelpSidebar />
87-
</Layout.Element>
88-
</Layout>
89-
</Container>
48+
<>
49+
<div className="d-flex">
50+
<div className="flex-grow-1">
51+
<Helmet>
52+
<title>{libraryData.title} | {process.env.SITE_NAME}</title>
53+
</Helmet>
54+
<Header
55+
number={libraryData.slug}
56+
title={libraryData.title}
57+
org={libraryData.org}
58+
contextId={libraryId}
59+
isLibrary
60+
readOnly={readOnly}
61+
containerProps={{
62+
size: undefined,
63+
}}
64+
/>
65+
<Container className="mt-4 mb-5">
66+
<div className="px-4 bg-light-200 border-bottom">
67+
<SubHeader
68+
title={intl.formatMessage(messages.pageTitle)}
69+
subtitle={intl.formatMessage(messages.pageSubtitle)}
70+
hideBorder
71+
headerActions={
72+
getConfig().ENABLE_COURSE_IMPORT_IN_LIBRARY === 'true' && (
73+
<Button onClick={openImportModal}>
74+
{intl.formatMessage(messages.importCourseButton)}
75+
</Button>
76+
)
77+
}
78+
/>
79+
</div>
80+
<Layout xs={[{ span: 9 }, { span: 3 }]}>
81+
<Layout.Element>
82+
{courseImports.length ? (
83+
<Stack gap={3} className="pl-4 mt-4">
84+
<h3>
85+
<FormattedMessage {...messages.courseImportPreviousImports} />
86+
</h3>
87+
{courseImports.map((courseImport) => (
88+
<ImportedCourseCard
89+
key={courseImport.source.key}
90+
courseImport={courseImport}
91+
/>
92+
))}
93+
</Stack>
94+
) : (<EmptyState />)}
95+
</Layout.Element>
96+
<Layout.Element>
97+
<HelpSidebar />
98+
</Layout.Element>
99+
</Layout>
100+
</Container>
101+
</div>
90102
</div>
91-
</div>
103+
<ImportStepperModal
104+
isOpen={importModalIsOpen}
105+
onClose={closeImportModal}
106+
libraryKey={libraryId}
107+
/>
108+
</>
92109
);
93110
};

‎src/library-authoring/import-course/messages.ts‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,92 @@ const messages = defineMessages({
7373
+ '<p>For additional details you can review the Library Import documentation.</p>',
7474
description: 'Body of the second question in the Help & Support sidebar',
7575
},
76+
importCourseModalTitle: {
77+
id: 'course-authoring.library-authoring.import-course.modal.title',
78+
defaultMessage: 'Import Course to Library',
79+
description: 'Title for the modal to import a course into a library.',
80+
},
81+
importCourseButton: {
82+
id: 'course-authoring.library-authoring.import-course.button.text',
83+
defaultMessage: 'Import Course',
84+
description: 'Label of the button to open the modal to import a course into a library.',
85+
},
86+
importCourseSelectCourseStep: {
87+
id: 'course-authoring.library-authoring.import-course.select-course.title',
88+
defaultMessage: 'Select Course',
89+
description: 'Title for the step to select course in the modal to import a course into a library.',
90+
},
91+
importCourseReviewDetailsStep: {
92+
id: 'course-authoring.library-authoring.import-course.review-details.title',
93+
defaultMessage: 'Review Import Details',
94+
description: 'Title for the step to review import details in the modal to import a course into a library.',
95+
},
96+
importCourseCalcel: {
97+
id: 'course-authoring.library-authoring.import-course.cancel.text',
98+
defaultMessage: 'Cancel',
99+
description: 'Label of the button to cancel the course import.',
100+
},
101+
importCourseNext: {
102+
id: 'course-authoring.library-authoring.import-course.next.text',
103+
defaultMessage: 'Next step',
104+
description: 'Label of the button go to the next step in the course import modal.',
105+
},
106+
importCourseBack: {
107+
id: 'course-authoring.library-authoring.import-course.back.text',
108+
defaultMessage: 'Back',
109+
description: 'Label of the button to go to the previous step in the course import modal.',
110+
},
111+
importCourseInProgressStatusTitle: {
112+
id: 'course-authoring.library-authoring.import-course.review-details.in-progress.title',
113+
defaultMessage: 'Import Analysis in Progress',
114+
description: 'Titile for the info card with the in-progress status in the course import modal.',
115+
},
116+
importCourseInProgressStatusBody: {
117+
id: 'course-authoring.library-authoring.import-course.review-details.in-progress.body',
118+
defaultMessage: '{courseName} is being analyzed for review prior to import. For large courses, this may take some time.'
119+
+ ' Please remain on this page.',
120+
description: 'Body of the info card with the in-progress status in the course import modal.',
121+
},
122+
importCourseAnalysisSummary: {
123+
id: 'course-authoring.library-authoring.import-course.review-details.analysis-symmary.title',
124+
defaultMessage: 'Analysis Summary',
125+
description: 'Title of the card for the analysis summary of a imported course.',
126+
},
127+
importCourseTotalBlocks: {
128+
id: 'course-authoring.library-authoring.import-course.review-details.analysis-symmary.total-blocks',
129+
defaultMessage: 'Total Blocks',
130+
description: 'Label title for the total blocks in the analysis summary of a imported course.',
131+
},
132+
importCourseSections: {
133+
id: 'course-authoring.library-authoring.import-course.review-details.analysis-symmary.sections',
134+
defaultMessage: 'Sections',
135+
description: 'Label title for the number of sections in the analysis summary of a imported course.',
136+
},
137+
importCourseSubsections: {
138+
id: 'course-authoring.library-authoring.import-course.review-details.analysis-symmary.subsections',
139+
defaultMessage: 'Subsections',
140+
description: 'Label title for the number of subsections in the analysis summary of a imported course.',
141+
},
142+
importCourseUnits: {
143+
id: 'course-authoring.library-authoring.import-course.review-details.analysis-symmary.units',
144+
defaultMessage: 'Units',
145+
description: 'Label title for the number of units in the analysis summary of a imported course.',
146+
},
147+
importCourseComponents: {
148+
id: 'course-authoring.library-authoring.import-course.review-details.analysis-symmary.components',
149+
defaultMessage: 'Components',
150+
description: 'Label title for the number of components in the analysis summary of a imported course.',
151+
},
152+
importCourseDetailsTitle: {
153+
id: 'course-authoring.library-authoring.import-course.review-details.import-details.title',
154+
defaultMessage: 'Import Details',
155+
description: 'Title of the card for the import details of a imported course.',
156+
},
157+
importCourseDetailsLoadingBody: {
158+
id: 'course-authoring.library-authoring.import-course.review-details.import-details.loading.body',
159+
defaultMessage: 'The selected course is being analyzed for import and review',
160+
description: 'Body of the card in loading state for the import details of a imported course.',
161+
},
76162
});
77163

78164
export default messages;

src/library-authoring/course-import/ImportStepperModal.test.tsx renamed to src/library-authoring/import-course/stepper/ImportStepperModal.test.tsx

File renamed without changes.

0 commit comments

Comments
 (0)