fix: Invalid error tooltip if control label is function (#34698)

superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx

@@ -299,3 +299,170 @@ test('does omit hiddenFormData when query_mode is not enabled', async () => {
     expect(formData[key]).toBeUndefined();
   });
 });
+
+// Component tests for the errorMessage behavior
+test('does not show error indicator when no controls have validation errors', async () => {
+  getChartControlPanelRegistry().registerValue('table', {
+    controlPanelSections: [],
+  });
+  const customState = {
+    ...reduxState,
+    explore: {
+      ...reduxState.explore,
+      controls: {
+        ...reduxState.explore.controls,
+        metric: { value: 'count', label: 'Metric' },
+        groupby: { value: ['category'], label: 'Group by' },
+      },
+    },
+  };
+
+  renderWithRouter({ initialState: customState });
+
+  await waitFor(() => {
+    const errorIndicator = screen.queryByTestId('query-error-tooltip-trigger');
+    expect(errorIndicator).not.toBeInTheDocument();
+  });
+});
+
+test('shows error indicator when controls have validation errors', async () => {
+  getChartControlPanelRegistry().registerValue('table', {
+    controlPanelSections: [],
+  });
+  const customState = {
+    ...reduxState,
+    explore: {
+      ...reduxState.explore,
+      controls: {
+        ...reduxState.explore.controls,
+        metric: {
+          value: '',
+          label: 'Metric',
+          validationErrors: ['Metric is required'],
+        },
+      },
+    },
+  };
+
+  renderWithRouter({ initialState: customState });
+
+  const errorIndicator = await screen.findByTestId(
+    'query-error-tooltip-trigger',
+  );
+
+  userEvent.hover(errorIndicator);
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toBeInTheDocument();
+
+  const errorMessage = await screen.findByText(/Metric is required/);
+  expect(errorMessage).toBeInTheDocument();
+});
+
+test('shows error indicator for multiple controls with validation errors', async () => {
+  getChartControlPanelRegistry().registerValue('table', {
+    controlPanelSections: [],
+  });
+  const customState = {
+    ...reduxState,
+    explore: {
+      ...reduxState.explore,
+      controls: {
+        ...reduxState.explore.controls,
+        metric: {
+          value: '',
+          label: 'Metric',
+          validationErrors: ['Field is required'],
+        },
+        groupby: {
+          value: [],
+          label: 'Group by',
+          validationErrors: ['Field is required'],
+        },
+      },
+    },
+  };
+
+  renderWithRouter({ initialState: customState });
+
+  const errorIndicator = await screen.findByTestId(
+    'query-error-tooltip-trigger',
+  );
+
+  userEvent.hover(errorIndicator);
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toBeInTheDocument();
+
+  expect(await screen.findByText(/Field is required/)).toBeInTheDocument();
+});
+
+test('shows error indicator for control with multiple validation errors', async () => {
+  getChartControlPanelRegistry().registerValue('table', {
+    controlPanelSections: [],
+  });
+  const customState = {
+    ...reduxState,
+    explore: {
+      ...reduxState.explore,
+      controls: {
+        ...reduxState.explore.controls,
+        metric: {
+          value: '',
+          label: 'Metric',
+          validationErrors: ['Field is required', 'Invalid format'],
+        },
+      },
+    },
+  };
+
+  renderWithRouter({ initialState: customState });
+
+  const errorIndicator = await screen.findByTestId(
+    'query-error-tooltip-trigger',
+  );
+
+  userEvent.hover(errorIndicator);
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toBeInTheDocument();
+
+  expect(await screen.findByText(/Field is required/)).toBeInTheDocument();
+  expect(await screen.findByText(/Invalid format/)).toBeInTheDocument();
+});
+
+test('shows error indicator with function labels', async () => {
+  getChartControlPanelRegistry().registerValue('table', {
+    controlPanelSections: [],
+  });
+  // Ensure the explore state passed to the label function contains the expected property
+  const customState = {
+    ...reduxState,
+    explore: {
+      ...reduxState.explore,
+      someState: 'test',
+      controls: {
+        ...reduxState.explore.controls,
+        metric: {
+          value: '',
+          label: (exploreState: { someState: string }) =>
+            `Dynamic Metric (${exploreState.someState})`,
+          validationErrors: ['Metric is required'],
+        },
+      },
+    },
+  };
+
+  renderWithRouter({ initialState: customState });
+
+  const errorIndicator = await screen.findByTestId(
+    'query-error-tooltip-trigger',
+  );
+
+  userEvent.hover(errorIndicator);
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toBeInTheDocument();
+
+  expect(await screen.findByText(/Metric is required/)).toBeInTheDocument();
+});

superset-frontend/src/explore/components/ExploreViewContainer/index.jsx

@@ -541,7 +541,11 @@ function ExploreViewContainer(props) {
       .map(message => {
         const matchingLabels = controlsWithErrors
           .filter(control => control.validationErrors?.includes(message))
-          .map(control => control.label);
+          .map(control =>
+            typeof control.label === 'function'
+              ? control.label(props.exploreState)
+              : control.label,
+          );
         return [matchingLabels, message];
       })
       .map(([labels, message]) => (