diff --git a/src/legacy-libraries-migration/LegacyLibMigrationPage.test.tsx b/src/legacy-libraries-migration/LegacyLibMigrationPage.test.tsx index db1d24a27..f019c1669 100644 --- a/src/legacy-libraries-migration/LegacyLibMigrationPage.test.tsx +++ b/src/legacy-libraries-migration/LegacyLibMigrationPage.test.tsx @@ -53,9 +53,9 @@ describe('', () => { // Should render the title expect(await screen.findByText('Migrate Legacy Libraries')).toBeInTheDocument(); // Should render the Migration Steps Viewer - expect(screen.getByText(/select legacy libraries/i)).toBeInTheDocument(); - expect(screen.getByText(/select destination/i)).toBeInTheDocument(); - expect(screen.getByText(/confirm/i)).toBeInTheDocument(); + expect(screen.getByText('Select Legacy Libraries')).toBeInTheDocument(); + expect(screen.getByText('Select Destination')).toBeInTheDocument(); + expect(screen.getByText('Confirm')).toBeInTheDocument(); }); it('should cancel the migration', async () => { @@ -401,4 +401,12 @@ describe('', () => { ); expect(mockShowToast).toHaveBeenCalledWith('Legacy libraries migration failed.'); }); + + it('should show help sidebar', async () => { + renderPage(); + expect(await screen.findByText('Help & Support')).toBeInTheDocument(); + expect(screen.getByText('What’s different in the new Content Libraries experience?')).toBeInTheDocument(); + expect(screen.getByText('What happens when I migrate my Legacy Libraries?')).toBeInTheDocument(); + expect(screen.getByText('How do I migrate my Legacy Libraries?')).toBeInTheDocument(); + }); }); diff --git a/src/legacy-libraries-migration/LegacyLibMigrationPage.tsx b/src/legacy-libraries-migration/LegacyLibMigrationPage.tsx index 168c8673b..306a695af 100644 --- a/src/legacy-libraries-migration/LegacyLibMigrationPage.tsx +++ b/src/legacy-libraries-migration/LegacyLibMigrationPage.tsx @@ -12,6 +12,7 @@ import { ActionRow, Button, Container, + Layout, ModalDialog, StatefulButton, Stepper, @@ -27,6 +28,7 @@ import { Filter, LibrariesList } from '@src/studio-home/tabs-section/libraries-t import messages from './messages'; import { SelectDestinationView } from './SelectDestinationView'; import { ConfirmationView } from './ConfirmationView'; +import { LegacyMigrationHelpSidebar } from './LegacyMigrationHelpSidebar'; import { useUpdateContainerCollections } from './data/apiHooks'; export type MigrationStep = 'select-libraries' | 'select-destination' | 'confirmation-view'; @@ -164,79 +166,90 @@ export const LegacyLibMigrationPage = () => { return ( <> + + + {intl.formatMessage(messages.siteTitle)} + + +
- - - {intl.formatMessage(messages.siteTitle)} - - -
- -
- - - - - - - - - - - {destinationLibrary && ( - + +
+ +
+ + + + + + + + + + + {destinationLibrary && ( + + )} + + +
+
+
+ + {currentStep !== 'confirmation-view' ? ( + + ) : ( + )} - - -
- -
- - {currentStep !== 'confirmation-view' ? ( - - ) : ( - - )} -
+
+
+ + + + +
{chunk}
; +export const Paragraph = (chunk: string[]) =>

{chunk}

; + +export const LegacyMigrationHelpSidebar = () => ( +
+ + + + + + +
+ + + + + + + + + +
+ + + + + + + + +
+ + + + + + + + +
+
+); diff --git a/src/legacy-libraries-migration/index.scss b/src/legacy-libraries-migration/index.scss index 92d63cb7a..d958c8b0c 100644 --- a/src/legacy-libraries-migration/index.scss +++ b/src/legacy-libraries-migration/index.scss @@ -1,5 +1,8 @@ .legacy-library-migration-page { .migration-container { + // Calculate all the screen size subtracting the height of the header and top/bottom margins + min-height: calc(calc(100vh - 60px) - calc(var(--pgn-spacing-spacer-base) * 6)); + .courses-tab-container { min-height: auto; } @@ -25,7 +28,29 @@ .content-buttons { width: 100%; - position: fixed; + position: sticky; bottom: 0; } + + .row { + margin-right: 0; // To avoid create a horizontal scroll using Layout + } + + [class*="col-"] { + // To avoid create an empty gray space between the main content and the sidebar + padding-right: 0; + padding-left: 0; + } +} + +.legacy-libraries-migration-help { + z-index: 1000; // same as header + flex: 350px 0 0; + position: sticky; + top: 0; + right: 0; + + hr { + width: 100%; + } } diff --git a/src/legacy-libraries-migration/messages.ts b/src/legacy-libraries-migration/messages.ts index 2da5b485d..9864143c5 100644 --- a/src/legacy-libraries-migration/messages.ts +++ b/src/legacy-libraries-migration/messages.ts @@ -82,6 +82,58 @@ const messages = defineMessages({ + ' moved will be migrated to {libraryName}', description: 'Alert text when the legacy library is already migrated.', }, + helpAndSupportTitle: { + id: 'legacy-libraries-migration.helpAndSupport.title', + defaultMessage: 'Help & Support', + description: 'Title of the Help & Support sidebar', + }, + helpAndSupportFirstQuestionTitle: { + id: 'legacy-libraries-migration.helpAndSupport.q1.title', + defaultMessage: 'What’s different in the new Content Libraries experience?', + description: 'Title of the first question in the Help & Support sidebar', + }, + helpAndSupportFirstQuestionBody: { + id: 'legacy-libraries-migration.helpAndSupport.q1.body', + defaultMessage: 'In the new Content Libraries experience, you can author sections,' + + ' subsections, units, and many types of components. Library content can be reused across many courses,' + + ' and kept up-to-date. Content libraries now support increased collaboration across authoring teams.', + description: 'Body of the first question in the Help & Support sidebar', + }, + helpAndSupportSecondQuestionTitle: { + id: 'legacy-libraries-migration.helpAndSupport.q2.title', + defaultMessage: 'What happens when I migrate my Legacy Libraries?', + description: 'Title of the second question in the Help & Support sidebar', + }, + helpAndSupportSecondQuestionBody: { + id: 'legacy-libraries-migration.helpAndSupport.q2.body', + defaultMessage: 'All legacy library content is supported in the new experience.' + + ' Content from legacy libraries will be migrated to its own collection in the new Content Libraries experience.' + + ' This collection will have the same name as your original library. Courses that use legacy library content will' + + ' continue to function as usual, linked to the migrated version within the new libraries experience.', + description: 'Body of the second question in the Help & Support sidebar', + }, + helpAndSupportThirdQuestionTitle: { + id: 'legacy-libraries-migration.helpAndSupport.q3.title', + defaultMessage: 'How do I migrate my Legacy Libraries?', + description: 'Title of the third question in the Help & Support sidebar', + }, + helpAndSupportThirdQuestionBody: { + id: 'legacy-libraries-migration.helpAndSupport.q3.body.2', + defaultMessage: '

There are three steps to migrating legacy libraries:

' + + '

1 - Select Legacy Libraries
' + + 'You can select up to 50 legacy libraries for migration in this step. By default, only libraries that have' + + ' not yet been migrated are shown. To see all libraries, remove the filter.' + + ' You can select up to 50 legacy libraries for migration, but only one destination' + + ' v2 Content Library per migration.

' + + '

2 - Select Destination
' + + 'You can migrate legacy libraries to an existing Content Library in the new experience,' + + ' or you can create a new destination. You can only select one v2 Content Library per migration.' + + ' All your content will be migrated, and kept organized in collections.

' + + '

3 - Confirm
' + + 'In this step, review your migration. Once you confirm, migration will begin.' + + ' It may take some time to complete.

', + description: 'Part 2 of the Body of the third question in the Help & Support sidebar', + }, migrationInProgress: { id: 'legacy-libraries-migration.confirmation-step.toast.migration-in-progress', defaultMessage: '{count, plural, one {{count} legacy library is} other {{count} legacy libraries are}} being migrated.',