update StandaloneQueryWrapper to support a card or table configuratio…

…n output. feeding it a QueryWrapperPlotNav config should show the appropriate rendering

apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx

@@ -3,13 +3,11 @@ import {
   PortalSearchTabs,
 } from '@sage-bionetworks/synapse-portal-framework/components/PortalSearch/PortalSearchTabs'
 import { PortalFullTextSearchField } from '@sage-bionetworks/synapse-portal-framework/components/PortalSearch/PortalFullTextSearchField'
-
+import { SearchParamAwareStandaloneQueryWrapper } from '@sage-bionetworks/synapse-portal-framework/components/PortalSearch/SearchParamAwareStandaloneQueryWrapper'
 import { Box } from '@mui/material'
 import RedirectWithQuery from '@sage-bionetworks/synapse-portal-framework/components/RedirectWithQuery'
-import { useGetPortalComponentSearchParams } from '@sage-bionetworks/synapse-portal-framework/utils/UseGetPortalComponentSearchParams'
 import { Outlet, RouteObject } from 'react-router-dom'
 import { grantQueryWrapperPlotNavProps } from 'src/config/synapseConfigs/grants'
-import { QueryWrapperPlotNav } from 'synapse-react-client'
 export const searchPageTabs: PortalSearchTabConfig[] = [
   {
     title: 'Grants',
@@ -25,13 +23,16 @@ export const searchPageChildRoutes: RouteObject[] = [
   },
   {
     path: searchPageTabs[0].path,
-    element: <QueryWrapperPlotNav {...grantQueryWrapperPlotNavProps} />,
+    element: (
+      <SearchParamAwareStandaloneQueryWrapper
+        {...grantQueryWrapperPlotNavProps}
+      />
+    ),
   },
 ]
 
 export function CCKPSearchPage(props: React.PropsWithChildren) {
   const { children } = props
-  const searchParams = useGetPortalComponentSearchParams()
   // on search field value update, update the special search parameter FTS_SEARCH_TERM, which the QueryWrapperPlotNav will load as the search term
   return (
     <Box sx={{ p: { xs: '10px', lg: '50px' } }}>

packages/synapse-react-client/src/components/StandaloneQueryWrapper/StandaloneQueryWrapper.tsx

@@ -18,6 +18,7 @@ import {
 import { QueryWrapper, QueryWrapperProps } from '../QueryWrapper/QueryWrapper'
 import {
   Operator,
+  QueryWrapperPlotNavProps,
   SearchParams,
 } from '../QueryWrapperPlotNav/QueryWrapperPlotNav'
 import { RowSetView } from '../QueryWrapperPlotNav/RowSetView'
@@ -51,7 +52,8 @@ type StandaloneQueryWrapperOwnProps = {
   Pick<
     QueryWrapperProps,
     'fileIdColumnName' | 'fileNameColumnName' | 'fileVersionColumnName'
-  >
+  > &
+  Pick<QueryWrapperPlotNavProps, 'cardConfiguration' | 'tableConfiguration'>
 
 export type StandaloneQueryWrapperProps = SynapseTableConfiguration &
   SearchParams &
@@ -100,6 +102,8 @@ function StandaloneQueryWrapper(props: StandaloneQueryWrapperProps) {
     noContentPlaceholderType = showTopLevelControls
       ? NoContentPlaceholderType.INTERACTIVE
       : NoContentPlaceholderType.STATIC,
+    cardConfiguration,
+    tableConfiguration,
     ...rest
   } = props
 
@@ -184,12 +188,19 @@ function StandaloneQueryWrapper(props: StandaloneQueryWrapperProps) {
                       {showTopLevelControls && (
                         <TotalQueryResults frontText={''} />
                       )}
+
                       <RowSetView
-                        tableConfiguration={{
-                          showAccessColumn: showAccessColumn,
-                          hideAddToDownloadListColumn,
-                          ...rest,
-                        }}
+                        tableConfiguration={
+                          cardConfiguration
+                            ? undefined
+                            : {
+                                ...tableConfiguration, // if exist, use tableConfiguration property
+                                showAccessColumn: showAccessColumn,
+                                hideAddToDownloadListColumn,
+                                ...rest,
+                              }
+                        }
+                        cardConfiguration={cardConfiguration} // if exist, use the cardConfiguration property
                       />
                     </>
                   )