Dashboard add-question sidebar is limited to showing 50 questions per collection (#24086)

Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Rubens Rafael <70234898+RubensRafael@users.noreply.github.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>
Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: Gh0sT <coolmagnas@gmail.com>
Co-authored-by: GitStart <1501599+gitstart@users.noreply.github.com>
Co-authored-by: Benjamin Mayanja <vibenjamin6@gmail.com>

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: Rubens Rafael <70234898+RubensRafael@users.noreply.github.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>
Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: Gh0sT <coolmagnas@gmail.com>
Co-authored-by: Benjamin Mayanja <vibenjamin6@gmail.com>

frontend/src/metabase/dashboard/components/add-card-sidebar/QuestionList.jsx

-import React from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { t } from "ttag";
 
@@ -8,8 +8,14 @@ import EmptyState from "metabase/components/EmptyState";
 import Search from "metabase/entities/search";
 import SelectList from "metabase/components/SelectList";
 import { DEFAULT_SEARCH_LIMIT } from "metabase/lib/constants";
+import PaginationControls from "metabase/components/PaginationControls";
+import { usePagination } from "metabase/hooks/use-pagination";
 
-import { EmptyStateContainer, QuestionListItem } from "./QuestionList.styled";
+import {
+  EmptyStateContainer,
+  QuestionListItem,
+  PaginationControlsContainer,
+} from "./QuestionList.styled";
 
 QuestionList.propTypes = {
   searchText: PropTypes.string,
@@ -24,6 +30,14 @@ export function QuestionList({
   onSelect,
   hasCollections,
 }) {
+  const [queryOffset, setQueryOffset] = useState(0);
+  const { handleNextPage, handlePreviousPage, page, setPage } = usePagination();
+
+  useEffect(() => {
+    setQueryOffset(0);
+    setPage(0);
+  }, [searchText, collectionId, setPage]);
+
   if (collectionId === "personal" && !searchText) {
     return null;
   }
@@ -38,12 +52,23 @@ export function QuestionList({
   query = {
     ...query,
     models: ["card", "dataset"],
+    offset: queryOffset,
     limit: DEFAULT_SEARCH_LIMIT,
   };
 
+  const handleClickNextPage = () => {
+    setQueryOffset(queryOffset + DEFAULT_SEARCH_LIMIT);
+    handleNextPage();
+  };
+
+  const handleClickPreviousPage = () => {
+    setQueryOffset(queryOffset - DEFAULT_SEARCH_LIMIT);
+    handlePreviousPage();
+  };
+
   return (
     <Search.ListLoader entityQuery={query} wrapped>
-      {({ list }) => {
+      {({ list, metadata }) => {
         const shouldShowEmptyState =
           list.length === 0 && (isSearching || !hasCollections);
         if (shouldShowEmptyState) {
@@ -55,23 +80,36 @@ export function QuestionList({
         }
 
         return (
-          <SelectList>
-            {list.map(item => (
-              <QuestionListItem
-                key={item.id}
-                id={item.id}
-                name={item.getName()}
-                icon={{
-                  name: item.getIcon().name,
-                  size: item.model === "dataset" ? 18 : 16,
-                }}
-                onSelect={onSelect}
-                rightIcon={PLUGIN_MODERATION.getStatusIcon(
-                  item.moderated_status,
-                )}
+          <>
+            <SelectList>
+              {list.map(item => (
+                <QuestionListItem
+                  key={item.id}
+                  id={item.id}
+                  name={item.getName()}
+                  icon={{
+                    name: item.getIcon().name,
+                    size: item.model === "dataset" ? 18 : 16,
+                  }}
+                  onSelect={onSelect}
+                  rightIcon={PLUGIN_MODERATION.getStatusIcon(
+                    item.moderated_status,
+                  )}
+                />
+              ))}
+            </SelectList>
+            <PaginationControlsContainer>
+              <PaginationControls
+                showTotal
+                total={metadata.total}
+                itemsLength={list.length}
+                page={page}
+                pageSize={DEFAULT_SEARCH_LIMIT}
+                onNextPage={handleClickNextPage}
+                onPreviousPage={handleClickPreviousPage}
               />
-            ))}
-          </SelectList>
+            </PaginationControlsContainer>
+          </>
         );
       }}
     </Search.ListLoader>

frontend/src/metabase/dashboard/components/add-card-sidebar/QuestionList.styled.jsx

@@ -10,3 +10,8 @@ export const QuestionListItem = styled(SelectList.Item)`
     justify-self: start;
   }
 `;
+
+export const PaginationControlsContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;