From 49efecf0936ae11055cad17a04950f84ca447937 Mon Sep 17 00:00:00 2001
From: Diego Medina <diegomedina24@gmail.com>
Date: Fri, 8 Jul 2022 17:50:16 -0300
Subject: [PATCH] fix: X Axis should be called Y Axis when using the Bar Chart
 V2 on Horizontal mode

---
 .../src/shared-controls/constants.tsx         | 22 +++++++++++++++++--
 .../superset-ui-chart-controls/src/types.ts   | 18 +++++++++++++--
 .../components/ControlPanelsContainer.tsx     | 19 +++++++++++++++-
 .../translations/nl/LC_MESSAGES/messages.json |  2 ++
 4 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/constants.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/constants.tsx
index d8a80f8af2bf9..cdd07f15e0930 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/constants.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/constants.tsx
@@ -25,7 +25,16 @@ import {
 import { ControlPanelState, ControlState } from '../types';
 
 export const xAxisControlConfig = {
-  label: t('X-axis'),
+  label: (state: ControlPanelState) => {
+    if (
+      isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) &&
+      state?.form_data?.orientation === 'horizontal'
+    ) {
+      return t('Y-axis');
+    }
+
+    return t('X-axis');
+  },
   default: (
     control: ControlState,
     controlPanel: Partial<ControlPanelState>,
@@ -43,6 +52,15 @@ export const xAxisControlConfig = {
     return null;
   },
   multi: false,
-  description: t('Dimension to use on x-axis.'),
+  description: (state: ControlPanelState) => {
+    if (
+      isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) &&
+      state?.form_data?.orientation === 'horizontal'
+    ) {
+      return t('Dimension to use on y-axis.');
+    }
+
+    return t('Dimension to use on x-axis.');
+  },
   validators: [validateNonEmpty],
 };
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/types.ts b/superset-frontend/packages/superset-ui-chart-controls/src/types.ts
index 5ae2f26c4f776..9c3a110fe4748 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/types.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/types.ts
@@ -204,8 +204,22 @@ export interface BaseControlConfig<
   V = JsonValue,
 > extends AnyDict {
   type: T;
-  label?: ReactNode;
-  description?: ReactNode;
+  label?:
+    | ReactNode
+    | ((
+        state: ControlPanelState,
+        controlState: ControlState,
+        // TODO: add strict `chartState` typing (see superset-frontend/src/explore/types)
+        chartState?: AnyDict,
+      ) => ReactNode);
+  description?:
+    | ReactNode
+    | ((
+        state: ControlPanelState,
+        controlState: ControlState,
+        // TODO: add strict `chartState` typing (see superset-frontend/src/explore/types)
+        chartState?: AnyDict,
+      ) => ReactNode);
   default?: V;
   renderTrigger?: boolean;
   validators?: ControlValueValidator<T, O, V>[];
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index 144ea3cc7b374..e1e1b6e40c270 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -329,7 +329,12 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
           undefined),
       name,
     };
-    const { validationErrors, ...restProps } = controlData as ControlState & {
+    const {
+      validationErrors,
+      label: baseLabel,
+      description: baseDescription,
+      ...restProps
+    } = controlData as ControlState & {
       validationErrors?: any[];
     };
 
@@ -337,10 +342,22 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
       ? visibility.call(config, props, controlData)
       : undefined;
 
+    const label =
+      typeof baseLabel === 'function'
+        ? baseLabel(exploreState, controls[name], chart)
+        : baseLabel;
+
+    const description =
+      typeof baseDescription === 'function'
+        ? baseDescription(exploreState, controls[name], chart)
+        : baseDescription;
+
     return (
       <Control
         key={`control-${name}`}
         name={name}
+        label={label}
+        description={description}
         validationErrors={validationErrors}
         actions={props.actions}
         isVisible={isVisible}
diff --git a/superset/translations/nl/LC_MESSAGES/messages.json b/superset/translations/nl/LC_MESSAGES/messages.json
index f69b2dce23bb2..43bbd87a9e58f 100644
--- a/superset/translations/nl/LC_MESSAGES/messages.json
+++ b/superset/translations/nl/LC_MESSAGES/messages.json
@@ -2454,6 +2454,8 @@
       ],
       "X-axis": [""],
       "Dimension to use on x-axis.": [""],
+      "Y-axis": [""],
+      "Dimension to use on y-axis.": [""],
       "Percentage threshold": [""],
       "Minimum threshold in percentage points for showing labels.": [""],
       "Rich tooltip": [""],