From d4e9a6bec293bf516ea5f176511854c250b9f5dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Thu, 7 Nov 2024 00:05:57 -0300
Subject: [PATCH] fix: add spacing to searchbar and simplify render conditions
 (#1476)

Adds padding between the search bar and the library list.

Also, the render method was refactored to be a bit simpler.

Backport of #1461
---
 .../component-picker/SelectLibrary.tsx        | 76 +++++++++----------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/library-authoring/component-picker/SelectLibrary.tsx b/src/library-authoring/component-picker/SelectLibrary.tsx
index 6ebf11a2e..2181d5c1f 100644
--- a/src/library-authoring/component-picker/SelectLibrary.tsx
+++ b/src/library-authoring/component-picker/SelectLibrary.tsx
@@ -83,44 +83,44 @@ const SelectLibrary = ({ selectedLibrary, setSelectedLibrary }: SelectLibraryPro
         value={searchQuery}
         placeholder={intl.formatMessage(messages.selectLibrarySearchPlaceholder)}
       />
-      <div>
-        {data.results.length === 0 && (<EmptyState hasSearchQuery={!!searchQuery} />)}
-        <Form.RadioSet
-          name="selected-library"
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSelectedLibrary(e.target.value)}
-          value={selectedLibrary}
-        >
-          {data.results.map((library) => (
-            <Card
-              key={library.id}
-              isClickable
-              onClick={() => setSelectedLibrary(library.id)}
-              className="card-item"
-            >
-              <Card.Header
-                size="sm"
-                title={<span className="card-item-title">{library.title}</span>}
-                subtitle={`${library.org} / ${library.slug}`}
-                actions={(
-                  <Form.Radio value={library.id} name={`select-library-${library.id}`}>{' '}</Form.Radio>
-                )}
-              />
-              <Card.Body>
-                <p>{library.description}</p>
-              </Card.Body>
-            </Card>
-          ))}
-        </Form.RadioSet>
-      </div>
-      {data.results.length !== 0 && (
-        <Pagination
-          paginationLabel={intl.formatMessage(messages.selectLibraryPaginationLabel)}
-          pageCount={data!.numPages}
-          currentPage={data!.currentPage}
-          onPageSelect={(page: number) => setCurrentPage(page)}
-          variant="secondary"
-          className="align-self-center"
-        />
+      {data.results.length === 0 ? (<EmptyState hasSearchQuery={!!searchQuery} />) : (
+        <>
+          <Form.RadioSet
+            name="selected-library"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSelectedLibrary(e.target.value)}
+            value={selectedLibrary}
+            className="mt-4"
+          >
+            {data.results.map((library) => (
+              <Card
+                key={library.id}
+                isClickable
+                onClick={() => setSelectedLibrary(library.id)}
+                className="card-item"
+              >
+                <Card.Header
+                  size="sm"
+                  title={<span className="card-item-title">{library.title}</span>}
+                  subtitle={`${library.org} / ${library.slug}`}
+                  actions={(
+                    <Form.Radio value={library.id} name={`select-library-${library.id}`}>{' '}</Form.Radio>
+                  )}
+                />
+                <Card.Body>
+                  <p>{library.description}</p>
+                </Card.Body>
+              </Card>
+            ))}
+          </Form.RadioSet>
+          <Pagination
+            paginationLabel={intl.formatMessage(messages.selectLibraryPaginationLabel)}
+            pageCount={data!.numPages}
+            currentPage={data!.currentPage}
+            onPageSelect={setCurrentPage}
+            variant="secondary"
+            className="align-self-center"
+          />
+        </>
       )}
     </Stack>
   );