From 76e5c140278b9981a9466326359dcdc7b570717a Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 21 Oct 2024 11:14:20 +0530
Subject: [PATCH] refactor: remove next button from component picker

Jump to component selection on library selection
---
 .../component-picker/ComponentPicker.test.tsx | 10 ---------
 .../component-picker/ComponentPicker.tsx      | 22 ++++++-------------
 .../component-picker/SelectLibrary.tsx        |  6 +----
 3 files changed, 8 insertions(+), 30 deletions(-)

diff --git a/src/library-authoring/component-picker/ComponentPicker.test.tsx b/src/library-authoring/component-picker/ComponentPicker.test.tsx
index d811e9d3f4..7ec097cb05 100644
--- a/src/library-authoring/component-picker/ComponentPicker.test.tsx
+++ b/src/library-authoring/component-picker/ComponentPicker.test.tsx
@@ -39,8 +39,6 @@ describe('<ComponentPicker />', () => {
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
 
-    fireEvent.click(screen.getByText('Next'));
-
     // Wait for the content library to load
     await screen.findByText(/Change Library/i);
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
@@ -61,8 +59,6 @@ describe('<ComponentPicker />', () => {
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
 
-    fireEvent.click(screen.getByText('Next'));
-
     // Wait for the content library to load
     await screen.findByText(/Change Library/i);
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
@@ -88,8 +84,6 @@ describe('<ComponentPicker />', () => {
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
 
-    fireEvent.click(screen.getByText('Next'));
-
     // Wait for the content library to load
     await screen.findByText(/Change Library/i);
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
@@ -125,8 +119,6 @@ describe('<ComponentPicker />', () => {
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
 
-    fireEvent.click(screen.getByText('Next'));
-
     // Wait for the content library to load
     await screen.findByText(/Change Library/i);
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
@@ -167,8 +159,6 @@ describe('<ComponentPicker />', () => {
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
 
-    fireEvent.click(screen.getByText('Next'));
-
     // Wait for the content library to load
     await screen.findByText(/Change Library/i);
     fireEvent.click(screen.getByText(/Change Library/i));
diff --git a/src/library-authoring/component-picker/ComponentPicker.tsx b/src/library-authoring/component-picker/ComponentPicker.tsx
index 9e9d15c07c..372506d4cd 100644
--- a/src/library-authoring/component-picker/ComponentPicker.tsx
+++ b/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,7 +39,7 @@ 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">
@@ -46,15 +47,6 @@ export const ComponentPicker = () => {
           <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>
   );
 };
diff --git a/src/library-authoring/component-picker/SelectLibrary.tsx b/src/library-authoring/component-picker/SelectLibrary.tsx
index 4c4f1754c5..e6d97c5591 100644
--- a/src/library-authoring/component-picker/SelectLibrary.tsx
+++ b/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);