32017 Add all filter options to column selection

- Fixed bug where the query builder added options in column selector were not toggling off correctly on the first page load
AAFC-BICoE · Nov 23, 2023 · c338189 · c338189
1 parent 1e0ed4b
commit c338189
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 14 deletions.
diff --git a/packages/common-ui/lib/list-page/QueryPage.tsx b/packages/common-ui/lib/list-page/QueryPage.tsx
@@ -338,9 +338,8 @@ export function QueryPage<TData extends KitsuResource>({
     group: groups
   };
 
-  const [queryBuilderColumns, setQueryBuilderColumns] = useState<
-    TableColumn<TData>[]
-  >([]);
+  // Combined columns from passed in columns + queryBuilderColumns
+  const [totalColumns, setTotalColumns] = useState<TableColumn<TData>[]>([]);
 
   useEffect(() => {
     if (viewMode && selectedResources?.length) {
@@ -389,16 +388,14 @@ export function QueryPage<TData extends KitsuResource>({
       parameters,
       dinaFormatMessage
     );
-    setQueryBuilderColumns(queryColumns);
+    const combinedColumns = [...columns, ...queryColumns];
+    setTotalColumns(combinedColumns);
 
     queryDSL = applyRootQuery(queryDSL);
     queryDSL = applyGroupFilters(queryDSL, groups);
     queryDSL = applyPagination(queryDSL, pageSize, pageOffset);
-    queryDSL = applySortingRules(queryDSL, sortingRules, [
-      ...columns,
-      ...queryColumns
-    ]);
-    queryDSL = applySourceFiltering(queryDSL, [...columns, ...queryColumns]);
+    queryDSL = applySortingRules(queryDSL, sortingRules, combinedColumns);
+    queryDSL = applySourceFiltering(queryDSL, combinedColumns);
 
     // Do not search when the query has no content. (It should at least have pagination.)
     if (!queryDSL || !Object.keys(queryDSL).length) {
@@ -652,7 +649,7 @@ export function QueryPage<TData extends KitsuResource>({
       : reactTableProps;
 
   const columnVisibility = compact(
-    columns.map((col) =>
+    totalColumns.map((col) =>
       col.isColumnVisible === false
         ? { id: col.id, visibility: false }
         : undefined
@@ -688,8 +685,7 @@ export function QueryPage<TData extends KitsuResource>({
           }
         ]
       : []),
-    ...columns,
-    ...queryBuilderColumns
+    ...totalColumns
   ];
 
   // Columns generated for the selected resources, only in selection mode.
@@ -869,7 +865,7 @@ export function QueryPage<TData extends KitsuResource>({
                       totalRecords={totalRecords}
                       query={elasticSearchQuery}
                       indexName={indexName}
-                      columns={columns}
+                      columns={totalColumns}
                     />
                   )}
                   {bulkSplitPath && (

diff --git a/packages/common-ui/lib/table/ReactTable.tsx b/packages/common-ui/lib/table/ReactTable.tsx
@@ -269,7 +269,10 @@ export function ReactTable<TData>({
     if (setReactTable) {
       setReactTable(table);
     }
-  }, [...table.getAllLeafColumns().map((column) => column.getIsVisible())]);
+  }, [
+    ...table.getAllLeafColumns().map((column) => column.getIsVisible()),
+    table.getAllLeafColumns().length
+  ]);
 
   return !hideTable ? (
     <div