Handle custom colors in pivot tables (#21936)

enterprise/frontend/src/metabase-enterprise/settings/selectors.js

@@ -11,7 +11,7 @@ const getApplicationColors = state =>
   state.settings.values["application-colors"] ||
   state.settings.values.application_colors;
 
-const getHasCustomColors = createSelector(
+export const getHasCustomColors = createSelector(
   [getApplicationColors],
   applicationColors => Object.keys(applicationColors || {}).length > 0,
 );
@@ -21,7 +21,7 @@ export const getHasCustomLogo = createSelector(
   logoUrl => logoUrl !== DEFAULT_LOGO_URL,
 );
 
-export const getIsWhitelabeled = createSelector(
+export const getHasCustomBranding = createSelector(
   [getHasCustomLogo, getHasCustomColors],
   (hasCustomLogo, hasCustomColors) => hasCustomLogo || hasCustomColors,
 );

enterprise/frontend/src/metabase-enterprise/whitelabel/index.js

@@ -10,7 +10,8 @@ import { t } from "ttag";
 
 import { hasPremiumFeature } from "metabase-enterprise/settings";
 import {
-  getIsWhitelabeled,
+  getHasCustomBranding,
+  getHasCustomColors,
   getHasCustomLogo,
 } from "metabase-enterprise/settings/selectors";
 import MetabaseSettings from "metabase/lib/settings";
@@ -75,7 +76,6 @@ if (hasPremiumFeature("whitelabel")) {
 }
 
 // these selectors control whitelabeling UI
-PLUGIN_SELECTORS.getShowBrandLogo = state => !getIsWhitelabeled(state);
-PLUGIN_SELECTORS.getShowBrandScene = state => !getIsWhitelabeled(state);
-PLUGIN_SELECTORS.getLogoBackgroundClass = state =>
-  getHasCustomLogo(state) ? "bg-brand" : "bg-white";
+PLUGIN_SELECTORS.getHasCustomLogo = getHasCustomLogo;
+PLUGIN_SELECTORS.getHasCustomColors = getHasCustomColors;
+PLUGIN_SELECTORS.getHasCustomBranding = getHasCustomBranding;

frontend/src/metabase/auth/containers/AuthLayout/AuthLayout.tsx

@@ -4,7 +4,7 @@ import AuthLayout from "../../components/AuthLayout";
 import { State } from "metabase-types/store";
 
 const mapStateToProps = (state: State) => ({
-  showScene: PLUGIN_SELECTORS.getShowBrandScene(state),
+  showScene: !PLUGIN_SELECTORS.getHasCustomBranding(state),
 });
 
 export default connect(mapStateToProps)(AuthLayout);

frontend/src/metabase/home/homepage/containers/HomeGreeting/HomeGreeting.tsx

@@ -6,7 +6,7 @@ import HomeGreeting from "../../components/HomeGreeting";
 
 const mapStateToProps = (state: State) => ({
   user: getUser(state),
-  showLogo: PLUGIN_SELECTORS.getShowBrandLogo(state),
+  showLogo: !PLUGIN_SELECTORS.getHasCustomBranding(state),
 });
 
 export default connect(mapStateToProps)(HomeGreeting);

frontend/src/metabase/home/homepage/containers/HomeLayout/HomeLayout.tsx

@@ -4,7 +4,7 @@ import { State } from "metabase-types/store";
 import HomeLayout from "../../components/HomeLayout";
 
 const mapStateToProps = (state: State) => ({
-  showScene: PLUGIN_SELECTORS.getShowBrandScene(state),
+  showScene: !PLUGIN_SELECTORS.getHasCustomBranding(state),
 });
 
 export default connect(mapStateToProps)(HomeLayout);

frontend/src/metabase/plugins/index.ts

@@ -66,9 +66,9 @@ export const PLUGIN_SHOW_CHANGE_PASSWORD_CONDITIONS = [];
 
 // selectors that customize behavior between app versions
 export const PLUGIN_SELECTORS = {
-  getShowBrandLogo: (state: State) => true,
-  getShowBrandScene: (state: State) => true,
-  getLogoBackgroundClass: (state: State) => "bg-white",
+  getHasCustomLogo: (state: State) => false,
+  getHasCustomColors: (state: State) => false,
+  getHasCustomBranding: (state: State) => false,
 };
 
 export const PLUGIN_FORM_WIDGETS = {};

frontend/src/metabase/visualizations/visualizations/PivotTable.jsx

@@ -6,7 +6,7 @@ import _ from "underscore";
 import { getIn, updateIn } from "icepick";
 import { Grid, Collection, ScrollSync, AutoSizer } from "react-virtualized";
 
-import { color, lighten } from "metabase/lib/colors";
+import { darken, lighten } from "metabase/lib/colors";
 import "metabase/visualizations/components/TableInteractive.css";
 import { getScrollBarSize } from "metabase/lib/dom";
 
@@ -25,9 +25,13 @@ import { formatColumn } from "metabase/lib/formatting";
 import { columnSettings } from "metabase/visualizations/lib/settings/column";
 
 import { findDOMNode } from "react-dom";
+import { connect } from "react-redux";
+import { PLUGIN_SELECTORS } from "metabase/plugins";
 
-const getBgLightColor = () => lighten(color("brand"), 0.65);
-const getBgDarkColor = () => lighten(color("brand"), 0.6);
+const getBgLightColor = hasCustomColors =>
+  hasCustomColors ? darken("white", 0.01) : lighten("brand", 0.65);
+const getBgDarkColor = hasCustomColors =>
+  hasCustomColors ? darken("white", 0.035) : lighten("brand", 0.6);
 
 const partitions = [
   {
@@ -60,6 +64,11 @@ const CELL_HEIGHT = 25;
 const LEFT_HEADER_LEFT_SPACING = 24;
 const LEFT_HEADER_CELL_WIDTH = 145;
 
+const mapStateToProps = state => ({
+  hasCustomColors: PLUGIN_SELECTORS.getHasCustomColors(state),
+});
+
+@connect(mapStateToProps)
 export default class PivotTable extends Component {
   static uiName = t`Pivot Table`;
   static identifier = "pivot";
@@ -230,7 +239,13 @@ export default class PivotTable extends Component {
   }
 
   render() {
-    const { settings, data, width, onUpdateVisualizationSettings } = this.props;
+    const {
+      settings,
+      data,
+      width,
+      hasCustomColors,
+      onUpdateVisualizationSettings,
+    } = this.props;
     if (data == null || !data.cols.some(isPivotGroupColumn)) {
       return null;
     }
@@ -286,7 +301,10 @@ export default class PivotTable extends Component {
       return (
         <div
           key={key}
-          style={{ ...style, backgroundColor: getBgLightColor() }}
+          style={{
+            ...style,
+            backgroundColor: getBgLightColor(hasCustomColors),
+          }}
           className={cx("overflow-hidden", {
             "border-right border-medium": !hasChildren,
           })}
@@ -296,6 +314,7 @@ export default class PivotTable extends Component {
             value={value}
             isSubtotal={isSubtotal}
             isGrandTotal={isGrandTotal}
+            hasCustomColors={hasCustomColors}
             onClick={this.getCellClickHander(clicked)}
             icon={
               (isSubtotal || hasSubtotal) && (
@@ -378,6 +397,7 @@ export default class PivotTable extends Component {
               value={value}
               isSubtotal={isSubtotal}
               isGrandTotal={isGrandTotal}
+              hasCustomColors={hasCustomColors}
               isBody
               onClick={this.getCellClickHander(clicked)}
             />
@@ -398,7 +418,7 @@ export default class PivotTable extends Component {
                     "border-right border-bottom border-medium": leftHeaderWidth,
                   })}
                   style={{
-                    backgroundColor: getBgLightColor(),
+                    backgroundColor: getBgLightColor(hasCustomColors),
                     // add left spacing unless the header width is 0
                     paddingLeft: leftHeaderWidth && LEFT_HEADER_LEFT_SPACING,
                     width: leftHeaderWidth,
@@ -410,6 +430,7 @@ export default class PivotTable extends Component {
                       key={rowIndex}
                       value={this.getColumnTitle(rowIndex)}
                       style={{ width: LEFT_HEADER_CELL_WIDTH }}
+                      hasCustomColors={hasCustomColors}
                       icon={
                         // you can only collapse before the last column
                         index < rowIndexes.length - 1 &&
@@ -418,6 +439,7 @@ export default class PivotTable extends Component {
                             value={index + 1}
                             settings={settings}
                             updateSettings={onUpdateVisualizationSettings}
+                            hasCustomColors={hasCustomColors}
                           />
                         )
                       }
@@ -508,6 +530,7 @@ function RowToggleIcon({
   updateSettings,
   hideUnlessCollapsed,
   rowIndex,
+  hasCustomColors,
 }) {
   if (value == null) {
     return null;
@@ -565,7 +588,9 @@ function RowToggleIcon({
       style={{
         padding: "4px",
         borderRadius: "4px",
-        backgroundColor: isCollapsed ? getBgLightColor() : getBgDarkColor(),
+        backgroundColor: isCollapsed
+          ? getBgLightColor(hasCustomColors)
+          : getBgDarkColor(hasCustomColors),
       }}
       onClick={e => {
         e.stopPropagation();
@@ -588,6 +613,7 @@ function Cell({
   isBody = false,
   className,
   icon,
+  hasCustomColors,
 }) {
   return (
     <div
@@ -595,7 +621,9 @@ function Cell({
         lineHeight: `${CELL_HEIGHT}px`,
         ...(isGrandTotal ? { borderTop: "1px solid white" } : {}),
         ...style,
-        ...(isSubtotal ? { backgroundColor: getBgDarkColor() } : {}),
+        ...(isSubtotal
+          ? { backgroundColor: getBgDarkColor(hasCustomColors) }
+          : {}),
       }}
       className={cx(
         "shrink-below-content-size flex-full flex-basis-none TableInteractive-cellWrapper",