ui: add optional white background to PageConfig

pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.module.scss

@@ -17,6 +17,10 @@
   z-index: 2;
   background-color: $colors--background;
 
+  &__white-background {
+    background-color: $colors--white
+  }
+
   &__list {
     display: flex;
     justify-content: flex-start;

pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.tsx

@@ -15,6 +15,7 @@ import styles from "./pageConfig.module.scss";
 export interface PageConfigProps {
   layout?: "list" | "spread";
   children?: React.ReactNode;
+  pageHasWhiteBackground?: boolean;
 }
 
 const cx = classnames.bind(styles);
@@ -26,7 +27,7 @@ export function PageConfig(props: PageConfigProps): React.ReactElement {
   });
 
   return (
-    <div className={cx("page-config")}>
+    <div className={cx("page-config", { "page-config__white-background": props.pageHasWhiteBackground })}>
       <ul className={classes}>{props.children}</ul>
     </div>
   );

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx

@@ -133,6 +133,7 @@ export interface StatementsPageStateProps {
   search: string;
   isTenant?: UIConfigState["isTenant"];
   hasViewActivityRedactedRole?: UIConfigState["hasViewActivityRedactedRole"];
+  pageHasWhiteBackground?: UIConfigState["pageHasWhiteBackground"];
 }
 
 export interface StatementsPageState {
@@ -624,6 +625,7 @@ export class StatementsPage extends React.Component<
       databases,
       search,
       isTenant,
+      pageHasWhiteBackground,
       nodeRegions,
     } = this.props;
 
@@ -649,7 +651,7 @@ export class StatementsPage extends React.Component<
 
     return (
       <div className={cx("root", "table-area")}>
-        <PageConfig>
+        <PageConfig pageHasWhiteBackground={pageHasWhiteBackground}>
           <PageConfigItem>
             <Search
               onSubmit={this.onSubmitSearchField as any}

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPageConnected.tsx

@@ -39,6 +39,7 @@ import {
 import {
   selectIsTenant,
   selectHasViewActivityRedactedRole,
+  selectPageHasWhiteBackground,
 } from "../store/uiConfig";
 import { nodeRegionsByIDSelector } from "../store/nodes";
 import { StatementsRequest } from "src/api/statementsApi";
@@ -68,6 +69,7 @@ export const ConnectedStatementsPage = withRouter(
       filters: selectFilters(state),
       isTenant: selectIsTenant(state),
       hasViewActivityRedactedRole: selectHasViewActivityRedactedRole(state),
+      pageHasWhiteBackground: selectPageHasWhiteBackground(state),
       lastReset: selectLastReset(state),
       nodeRegions: selectIsTenant(state) ? {} : nodeRegionsByIDSelector(state),
       search: selectSearch(state),

pkg/ui/workspaces/cluster-ui/src/store/uiConfig/uiConfig.reducer.ts

@@ -20,6 +20,7 @@ export type UIConfigState = {
   isTenant: boolean;
   userSQLRoles: string[];
   hasViewActivityRedactedRole: boolean;
+  pageHasWhiteBackground: boolean;
   pages: {
     statementDetails: {
       showStatementDiagnosticsLink: boolean;
@@ -34,6 +35,7 @@ const initialState: UIConfigState = {
   isTenant: false,
   userSQLRoles: [],
   hasViewActivityRedactedRole: false,
+  pageHasWhiteBackground: false,
   pages: {
     statementDetails: {
       showStatementDiagnosticsLink: true,
@@ -76,4 +78,9 @@ export const selectHasViewActivityRedactedRole = createSelector(
   uiConfig => uiConfig.userSQLRoles.includes("VIEWACTIVITYREDACTED"),
 );
 
+export const selectPageHasWhiteBackground = createSelector(
+  selectUIConfig,
+  uiConfig => uiConfig.pageHasWhiteBackground,
+);
+
 export const { actions, reducer } = uiConfigSlice;

pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx

@@ -88,6 +88,7 @@ export interface TransactionsPageStateProps {
   error?: Error | null;
   filters: Filters;
   isTenant?: UIConfigState["isTenant"];
+  pageHasWhiteBackground?: UIConfigState["pageHasWhiteBackground"];
   nodeRegions: { [nodeId: string]: string };
   pageSize?: number;
   search: string;
@@ -350,6 +351,7 @@ export class TransactionsPage extends React.Component<
       columns: userSelectedColumnsToShow,
       sortSetting,
       search,
+      pageHasWhiteBackground,
     } = this.props;
     const internal_app_name_prefix = data?.internal_app_name_prefix || "";
     const statements = data?.statements || [];
@@ -397,7 +399,7 @@ export class TransactionsPage extends React.Component<
 
     return (
       <>
-        <PageConfig>
+        <PageConfig pageHasWhiteBackground={pageHasWhiteBackground}>
           <PageConfigItem>
             <Search
               onSubmit={this.onSubmitSearchField as any}

pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPageConnected.tsx

@@ -27,7 +27,7 @@ import {
   selectFilters,
   selectSearch,
 } from "./transactionsPage.selectors";
-import { selectIsTenant } from "../store/uiConfig";
+import { selectIsTenant, selectPageHasWhiteBackground } from "../store/uiConfig";
 import { nodeRegionsByIDSelector } from "../store/nodes";
 import { selectTimeScale } from "src/statementsPage/statementsPage.selectors";
 import { StatementsRequest } from "src/api/statementsApi";
@@ -49,6 +49,7 @@ export const TransactionsPageConnected = withRouter(
       error: selectTransactionsLastError(state),
       filters: selectFilters(state),
       isTenant: selectIsTenant(state),
+      pageHasWhiteBackground: selectPageHasWhiteBackground(state),
       nodeRegions: nodeRegionsByIDSelector(state),
       search: selectSearch(state),
       sortSetting: selectSortSetting(state),