refactor: remove next button from component picker

Jump to component selection on library selection

src/library-authoring/component-picker/ComponentPicker.tsx

@@ -1,12 +1,10 @@
 import React, { useState } from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button, Stepper } from '@openedx/paragon';
+import { Stepper } from '@openedx/paragon';
 
 import { LibraryProvider, useLibraryContext } from '../common/context';
 import LibraryAuthoringPage from '../LibraryAuthoringPage';
 import LibraryCollectionPage from '../collections/LibraryCollectionPage';
 import SelectLibrary from './SelectLibrary';
-import messages from './messages';
 
 interface LibraryComponentPickerProps {
   returnToLibrarySelection: () => void;
@@ -23,11 +21,14 @@ const InnerComponentPicker: React.FC<LibraryComponentPickerProps> = ({ returnToL
 
 // eslint-disable-next-line import/prefer-default-export
 export const ComponentPicker = () => {
-  const intl = useIntl();
-
   const [currentStep, setCurrentStep] = useState('select-library');
   const [selectedLibrary, setSelectedLibrary] = useState('');
 
+  const handleLibrarySelection = (library: string) => {
+    setCurrentStep('pick-components');
+    setSelectedLibrary(library);
+  };
+
   const returnToLibrarySelection = () => {
     setCurrentStep('select-library');
     setSelectedLibrary('');
@@ -38,23 +39,14 @@ export const ComponentPicker = () => {
       activeKey={currentStep}
     >
       <Stepper.Step eventKey="select-library" title="Select a library">
-        <SelectLibrary selectedLibrary={selectedLibrary} setSelectedLibrary={setSelectedLibrary} />
+        <SelectLibrary selectedLibrary={selectedLibrary} setSelectedLibrary={handleLibrarySelection} />
       </Stepper.Step>
 
       <Stepper.Step eventKey="pick-components" title="Pick some components">
         <LibraryProvider libraryId={selectedLibrary} componentPickerMode>
           <InnerComponentPicker returnToLibrarySelection={returnToLibrarySelection} />
         </LibraryProvider>
       </Stepper.Step>
-
-      <div className="p-5">
-        <Stepper.ActionRow eventKey="select-library">
-          <Stepper.ActionRow.Spacer />
-          <Button onClick={() => setCurrentStep('pick-components')} disabled={!selectedLibrary}>
-            {intl.formatMessage(messages.selectLibraryNextButton)}
-          </Button>
-        </Stepper.ActionRow>
-      </div>
     </Stepper>
   );
 };

src/library-authoring/component-picker/SelectLibrary.tsx

@@ -7,7 +7,7 @@ import {
   SearchField,
   Stack,
 } from '@openedx/paragon';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import Loading from '../../generic/Loading';
 import AlertError from '../../generic/alert-error';
@@ -36,10 +36,6 @@ const SelectLibrary = ({ selectedLibrary, setSelectedLibrary }: SelectLibraryPro
   const [searchQuery, setSearchQuery] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
 
-  useEffect(() => {
-    setSelectedLibrary('');
-  }, [currentPage, searchQuery]);
-
   const handleSearch = useCallback((search: string) => {
     setSearchQuery(search);
     setCurrentPage(1);