feat(plugins): Update custom controls for BigNumber with Time Compari…

…son chart (apache#27054)

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,32 +69,42 @@ const config: ControlPanelConfig = {
                 ['r', 'Range'],
                 ['c', 'Custom'],
               ],
+              rerender: ['adhoc_custom'],
             },
           },
         ],
-        [
-          {
-            name: 'row_limit',
-            config: sharedControls.row_limit,
-          },
-        ],
-      ],
-    },
-    {
-      label: t('Custom Time Range'),
-      expanded: true,
-      controlSetRows: [
         [
           {
             name: `adhoc_custom`,
             config: {
               ...sharedControls.adhoc_filters,
-              label: t('FILTERS (Custom)'),
+              label: t('Filters for Comparison'),
               description:
-                'This only applies when selecting the Range for Comparison Type- Custom',
+                '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,
+                ),
+              }),
             },
           },
         ],
+        [
+          {
+            name: 'row_limit',
+            config: sharedControls.row_limit,
+          },
+        ],
       ],
     },
     {