Disable pagination UI when filtering is enabled

We disable the UI rather than removing it, as removing it causes layout wobbles when toggling the filter checkbox.

Author: asgerf

extensions/ql-vscode/src/view/results/ResultTables.tsx

@@ -240,8 +240,11 @@ export function ResultTables(props: ResultTablesProps) {
 
   return (
     <div>
-      <ResultTablesHeader {...props} selectedTable={selectedTable} />
-      <div className={tableHeaderClassName}></div>
+      <ResultTablesHeader
+        {...props}
+        selectedTable={selectedTable}
+        disablePagination={selectionFilter != null}
+      />
       <div
         className={tableHeaderClassName}
         style={{ justifyContent: "flex-end" }}

extensions/ql-vscode/src/view/results/ResultTablesHeader.tsx

@@ -13,6 +13,7 @@ interface Props {
   queryPath: string;
   parsedResultSets: ParsedResultSets;
   selectedTable: string;
+  disablePagination?: boolean;
 }
 
 const Container = styled.span`
@@ -57,7 +58,13 @@ const OpenQueryLink = styled(TextButton)`
 `;
 
 export function ResultTablesHeader(props: Props) {
-  const { queryPath, queryName, parsedResultSets, selectedTable } = props;
+  const {
+    queryPath,
+    queryName,
+    parsedResultSets,
+    selectedTable,
+    disablePagination,
+  } = props;
 
   const [selectedPage, setSelectedPage] = useState(
     `${parsedResultSets.pageNumber + 1}`,
@@ -145,19 +152,26 @@ export function ResultTablesHeader(props: Props) {
 
   return (
     <Container>
-      <PaginationButton onClick={prevPageHandler}>&#xab;</PaginationButton>
+      <PaginationButton disabled={disablePagination} onClick={prevPageHandler}>
+        &#xab;
+      </PaginationButton>
       <PageNumberInput
         type="number"
         size={3}
-        value={selectedPage}
+        value={disablePagination ? 1 : selectedPage}
         min="1"
-        max={numPages}
+        max={disablePagination ? 1 : numPages}
+        disabled={disablePagination}
         onChange={onChangeHandler}
         onBlur={onBlurHandler}
         onKeyDown={onKeyDownHandler}
       />
-      <span>/&nbsp;{numPages}</span>
-      <PaginationButton value=">" onClick={nextPageHandler}>
+      <span>/&nbsp;{disablePagination ? 1 : numPages}</span>
+      <PaginationButton
+        disabled={disablePagination}
+        value=">"
+        onClick={nextPageHandler}
+      >
         &#xbb;
       </PaginationButton>
       <div className={tableHeaderItemClassName}>{queryName}</div>