fix(explore): don't discard controls on deprecated (#30447)

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.test.tsx

@@ -16,7 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import { render, screen, within } from 'spec/helpers/testing-library';
 import {
   DndColumnSelect,
   DndColumnSelectProps,
@@ -63,3 +64,52 @@ test('renders adhoc column', async () => {
   expect(await screen.findByText('adhoc column')).toBeVisible();
   expect(screen.getByLabelText('calculator')).toBeVisible();
 });
+
+test('warn selected custom metric when metric gets removed from dataset', async () => {
+  const columnValues = ['column1', 'column2'];
+
+  const { rerender, container } = render(
+    <DndColumnSelect
+      {...defaultProps}
+      options={[
+        {
+          column_name: 'column1',
+        },
+        {
+          column_name: 'column2',
+        },
+      ]}
+      value={columnValues}
+    />,
+    {
+      useDnd: true,
+      useRedux: true,
+    },
+  );
+
+  rerender(
+    <DndColumnSelect
+      {...defaultProps}
+      options={[
+        {
+          column_name: 'column3',
+        },
+        {
+          column_name: 'column2',
+        },
+      ]}
+      value={columnValues}
+    />,
+  );
+  expect(screen.getByText('column2')).toBeVisible();
+  expect(screen.queryByText('column1')).toBeInTheDocument();
+  const warningIcon = within(
+    screen.getByText('column1').parentElement ?? container,
+  ).getByRole('button');
+  expect(warningIcon).toBeInTheDocument();
+  userEvent.hover(warningIcon);
+  const warningTooltip = await screen.findByText(
+    'This column might be incompatible with current dataset',
+  );
+  expect(warningTooltip).toBeInTheDocument();
+});