ui: add optional white background to PageConfig

Previously, the PageConfig component had a fixed grey
background to match the page background, since it is a sticky
component that needs a background color to cover content that
scrolls beneath it. However, the background color is changing
to white in CockroachCloud, so the background color needs to
be able to match the new background. Until we apply the layout
changes to `db-console`, this change allows us to specify a
different background color in CockroachCloud.

This change uses CockroachCloudContext to determine whether or
not the PageConfig background color should be white.

Release note: None

Release justification: ui change for cluster-ui components used
in cockroach cloud

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

@@ -8,9 +8,10 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import React from "react";
+import React, { useContext } from "react";
 import classnames from "classnames/bind";
 import styles from "./pageConfig.module.scss";
+import { CockroachCloudContext } from "../contexts";
 
 export interface PageConfigProps {
   layout?: "list" | "spread";
@@ -20,13 +21,15 @@ export interface PageConfigProps {
 const cx = classnames.bind(styles);
 
 export function PageConfig(props: PageConfigProps): React.ReactElement {
+  const isCockroachCloud = useContext(CockroachCloudContext);
+
   const classes = cx({
     "page-config__list": props.layout !== "spread",
     "page-config__spread": props.layout === "spread",
   });
 
   return (
-    <div className={cx("page-config")}>
+    <div className={cx("page-config", { "page-config__white-background": isCockroachCloud })}>
       <ul className={classes}>{props.children}</ul>
     </div>
   );