diff --git a/src/legacy-libraries-migration/LegacyLibMigrationPage.test.tsx b/src/legacy-libraries-migration/LegacyLibMigrationPage.test.tsx index f019c1669..a752dc686 100644 --- a/src/legacy-libraries-migration/LegacyLibMigrationPage.test.tsx +++ b/src/legacy-libraries-migration/LegacyLibMigrationPage.test.tsx @@ -162,9 +162,20 @@ describe('', () => { }); it('should back to select legacy libraries', async () => { + const user = userEvent.setup(); renderPage(); - expect(await screen.findByText('Migrate Legacy Libraries')).toBeInTheDocument(); + // The filter is Unmigrated by default + const filterButton = await screen.findByRole('button', { name: /unmigrated/i }); + expect(filterButton).toBeInTheDocument(); + + // Clear filter to show all + await user.click(filterButton); + const clearButton = await screen.findByRole('button', { name: /clear filter/i }); + await user.click(clearButton); + expect(await screen.findByText('MBA')).toBeInTheDocument(); + expect(await screen.findByText('Legacy library 1')).toBeInTheDocument(); + expect(await screen.findByText('MBA 1')).toBeInTheDocument(); const legacyLibrary = screen.getByRole('checkbox', { name: 'MBA' }); legacyLibrary.click(); @@ -178,7 +189,13 @@ describe('', () => { const backButton = screen.getByRole('button', { name: /back/i }); backButton.click(); + // The selected legacy library remains checked + expect(legacyLibrary).toBeChecked(); + + // The filter remains the same expect(await screen.findByText('MBA')).toBeInTheDocument(); + expect(await screen.findByText('Legacy library 1')).toBeInTheDocument(); + expect(await screen.findByText('MBA 1')).toBeInTheDocument(); }); it('should select a library destination', async () => { @@ -230,6 +247,8 @@ describe('', () => { backButton.click(); expect(await screen.findByText('Test Library 1')).toBeInTheDocument(); + // The selected v2 library remains checked + expect(radioButton).toBeChecked(); }); it('should open the create new library modal', async () => { diff --git a/src/legacy-libraries-migration/LegacyLibMigrationPage.tsx b/src/legacy-libraries-migration/LegacyLibMigrationPage.tsx index 306a695af..e031ac9f7 100644 --- a/src/legacy-libraries-migration/LegacyLibMigrationPage.tsx +++ b/src/legacy-libraries-migration/LegacyLibMigrationPage.tsx @@ -80,6 +80,7 @@ export const LegacyLibMigrationPage = () => { const [currentStep, setCurrentStep] = useState('select-libraries'); const [isExitModalOpen, openExitModal, closeExitModal] = useToggle(false); const [legacyLibraries, setLegacyLibraries] = useState([]); + const [migrationFilter, setMigrationFilter] = useState([Filter.unmigrated]); const [destinationLibrary, setDestination] = useState(); const [confirmationButtonState, setConfirmationButtonState] = useState('default'); const migrate = useUpdateContainerCollections(); @@ -127,7 +128,6 @@ export const LegacyLibMigrationPage = () => { openExitModal(); break; case 'select-destination': - setDestination(undefined); setCurrentStep('select-libraries'); break; case 'confirmation-view': @@ -193,7 +193,8 @@ export const LegacyLibMigrationPage = () => { selectedIds={legacyLibrariesIds} handleCheck={handleUpdateLegacyLibraries} hideMigationAlert - initialFilter={[Filter.unmigrated]} + migrationFilter={migrationFilter} + setMigrationFilter={setMigrationFilter} setSelectedLibraries={setLegacyLibraries} /> @@ -221,7 +222,7 @@ export const LegacyLibMigrationPage = () => { - + {currentStep === 'select-libraries' ? intl.formatMessage(messages.cancel) diff --git a/src/legacy-libraries-migration/index.scss b/src/legacy-libraries-migration/index.scss index d958c8b0c..454fbd2bc 100644 --- a/src/legacy-libraries-migration/index.scss +++ b/src/legacy-libraries-migration/index.scss @@ -49,6 +49,8 @@ position: sticky; top: 0; right: 0; + height: 100vh; + overflow-y: auto; hr { width: 100%; diff --git a/src/legacy-libraries-migration/messages.ts b/src/legacy-libraries-migration/messages.ts index 9864143c5..cfde78223 100644 --- a/src/legacy-libraries-migration/messages.ts +++ b/src/legacy-libraries-migration/messages.ts @@ -72,8 +72,9 @@ const messages = defineMessages({ confirmationViewAlert: { id: 'legacy-libraries-migration.select-destination.alert.text', defaultMessage: 'These {count, plural, one {{count} legacy library} other {{count} legacy libraries}}' - + ' will be migrated to {libraryName} and organized as collections. Any legacy libraries that are used in' - + ' problem banks will maintain their link with migrated content the first time they are migrated.', + + ' will be migrated to {libraryName} and organized as collections. Legacy library content used' + + ' in courses will continue to work as-is. To receive any future changes to migrated content,' + + ' you must update these references within your course.', description: 'Alert text in the confirmation step of the legacy libraries migration page.', }, previouslyMigratedAlert: { diff --git a/src/studio-home/tabs-section/index.tsx b/src/studio-home/tabs-section/index.tsx index 4dd575065..129eccf33 100644 --- a/src/studio-home/tabs-section/index.tsx +++ b/src/studio-home/tabs-section/index.tsx @@ -14,7 +14,7 @@ import { useNavigate, useLocation } from 'react-router-dom'; import { RequestStatus } from '@src/data/constants'; import { getLoadingStatuses, getStudioHomeData } from '../data/selectors'; import messages from './messages'; -import { LibrariesList } from './libraries-tab'; +import { BaseFilterState, Filter, LibrariesList } from './libraries-tab'; import LibrariesV2List from './libraries-v2-tab/index'; import CoursesTab from './courses-tab'; import { WelcomeLibrariesV2Alert } from './libraries-v2-tab/WelcomeLibrariesV2Alert'; @@ -29,6 +29,7 @@ const TabsSection = ({ const intl = useIntl(); const navigate = useNavigate(); const { pathname } = useLocation(); + const [migrationFilter, setMigrationFilter] = useState(BaseFilterState); const TABS_LIST = { courses: 'courses', libraries: 'libraries', @@ -121,7 +122,10 @@ const TabsSection = ({ : messages.librariesTabTitle, )} > - + , ); } @@ -137,7 +141,7 @@ const TabsSection = ({ } return tabs; - }, [showNewCourseContainer, isLoadingCourses]); + }, [showNewCourseContainer, isLoadingCourses, migrationFilter]); const handleSelectTab = (tab: TabKeyType) => { if (tab === TABS_LIST.courses) { diff --git a/src/studio-home/tabs-section/libraries-tab/index.tsx b/src/studio-home/tabs-section/libraries-tab/index.tsx index 856ca24b5..00fa31ae5 100644 --- a/src/studio-home/tabs-section/libraries-tab/index.tsx +++ b/src/studio-home/tabs-section/libraries-tab/index.tsx @@ -70,7 +70,7 @@ export enum Filter { unmigrated = 'unmigrated', } -const BaseFilterState = Object.values(Filter); +export const BaseFilterState = Object.values(Filter); interface MigrationFilterProps { filters: Filter[]; @@ -146,7 +146,12 @@ interface LibrariesListProps { handleCheck?: (library: LibraryV1Data, action: 'add' | 'remove') => void; setSelectedLibraries?: (libraries: LibraryV1Data[]) => void; hideMigationAlert?: boolean; - initialFilter?: Filter[]; + // We lift `migrationFilter` and `setMigrationFilter` into props + // so that the filter state is maintained consistently across different + // steps of the legacy libraries migration flow, and to allow + // parent components to control and persist the filter context. + migrationFilter: Filter[]; + setMigrationFilter: React.Dispatch>; } export const LibrariesList = ({ @@ -154,13 +159,13 @@ export const LibrariesList = ({ handleCheck, setSelectedLibraries, hideMigationAlert = false, - initialFilter = BaseFilterState, + migrationFilter, + setMigrationFilter, }: LibrariesListProps) => { const intl = useIntl(); const { isPending, data, isError } = useLibrariesV1Data(); const [currentPage, setCurrentPage] = useState(1); const [search, setSearch] = useState(''); - const [migrationFilter, setMigrationFilter] = useState(initialFilter); let filteredData = findInValues(data?.libraries, search || '') || []; if (migrationFilter.length === 1) {