From 435cd2705e22248ff0d6a856e78179338c427654 Mon Sep 17 00:00:00 2001
From: Antonio Rivero <38889534+Antonio-RiveroMartnez@users.noreply.github.com>
Date: Mon, 12 Feb 2024 14:51:04 +0100
Subject: [PATCH] feat(plugins): Update custom controls for BigNumber with Time
 Comparison chart (#27054)

---
 .../src/plugin/controlPanel.ts                | 61 +++++++++++++------
 1 file changed, 43 insertions(+), 18 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/controlPanel.ts b/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/controlPanel.ts
index 82379745f..89afdb483 100644
--- a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/controlPanel.ts
+++ b/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/controlPanel.ts
@@ -16,12 +16,27 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, validateNonEmpty } from '@superset-ui/core';
+import { ensureIsArray, t, validateNonEmpty } from '@superset-ui/core';
 import {
   ControlPanelConfig,
+  ControlPanelState,
+  ControlState,
   sharedControls,
 } from '@superset-ui/chart-controls';
 
+const validateTimeComparisonRangeValues = (
+  timeRangeValue?: any,
+  controlValue?: any,
+) => {
+  const isCustomTimeRange = timeRangeValue === 'c';
+  const isCustomControlEmpty = controlValue?.every(
+    (val: any) => ensureIsArray(val).length === 0,
+  );
+  return isCustomTimeRange && isCustomControlEmpty
+    ? [t('Filters for comparison must have a value')]
+    : [];
+};
+
 const config: ControlPanelConfig = {
   controlPanelSections: [
     {
@@ -54,6 +69,33 @@ const config: ControlPanelConfig = {
                 ['r', 'Range'],
                 ['c', 'Custom'],
               ],
+              rerender: ['adhoc_custom'],
+            },
+          },
+        ],
+        [
+          {
+            name: `adhoc_custom`,
+            config: {
+              ...sharedControls.adhoc_filters,
+              label: t('Filters for Comparison'),
+              description:
+                'This only applies when selecting the Range for Comparison Type: Custom',
+              visibility: ({ controls }) =>
+                controls?.time_comparison?.value === 'c',
+              mapStateToProps: (
+                state: ControlPanelState,
+                controlState: ControlState,
+              ) => ({
+                ...(sharedControls.adhoc_filters.mapStateToProps?.(
+                  state,
+                  controlState,
+                ) || {}),
+                externalValidationErrors: validateTimeComparisonRangeValues(
+                  state.controls?.time_comparison?.value,
+                  controlState.value,
+                ),
+              }),
             },
           },
         ],
@@ -65,23 +107,6 @@ const config: ControlPanelConfig = {
         ],
       ],
     },
-    {
-      label: t('Custom Time Range'),
-      expanded: true,
-      controlSetRows: [
-        [
-          {
-            name: `adhoc_custom`,
-            config: {
-              ...sharedControls.adhoc_filters,
-              label: t('FILTERS (Custom)'),
-              description:
-                'This only applies when selecting the Range for Comparison Type- Custom',
-            },
-          },
-        ],
-      ],
-    },
     {
       label: t('Chart Options'),
       expanded: true,