refactor(charts): filter saved metrics by key and label (#37136)

superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/AdhocMetricEditPopover.test.tsx

@@ -21,6 +21,7 @@ import {
   screen,
   selectOption,
   userEvent,
+  within,
 } from 'spec/helpers/testing-library';
 import AdhocMetric from 'src/explore/components/controls/MetricControl/AdhocMetric';
 import AdhocMetricEditPopover from '.';
@@ -248,3 +249,160 @@ test('Should render "Custom SQL" tab correctly', async () => {
 
   expect(await screen.findByRole('textbox')).toBeInTheDocument();
 });
+
+test('Should filter saved metrics by metric_name and verbose_name', async () => {
+  const props = {
+    ...createProps(),
+    savedMetricsOptions: [
+      {
+        id: 1,
+        metric_name: 'count',
+        expression: 'COUNT(*)',
+        verbose_name: 'Total Count',
+      },
+      {
+        id: 2,
+        metric_name: 'revenue_sum',
+        expression: 'sum(revenue)',
+        verbose_name: 'Gross Revenue',
+      },
+      {
+        id: 3,
+        metric_name: 'avg_price',
+        expression: 'AVG(price)',
+        verbose_name: 'Average Price',
+      },
+      {
+        id: 4,
+        metric_name: 'user_count',
+        expression: 'COUNT(DISTINCT user_id)',
+        verbose_name: 'Unique Users',
+      },
+      {
+        id: 5,
+        metric_name: 'total_quantity',
+        expression: 'SUM(quantity)',
+        verbose_name: 'Total Quantity',
+      },
+    ],
+  };
+  render(<AdhocMetricEditPopover {...props} />);
+
+  const combobox = screen.getByRole('combobox', {
+    name: 'Select saved metrics',
+  });
+  userEvent.click(combobox);
+
+  await userEvent.type(combobox, 'revenue');
+
+  let dropdown = document.querySelector('.rc-virtual-list') as HTMLElement;
+  expect(within(dropdown).getByText('Gross Revenue')).toBeInTheDocument();
+  expect(within(dropdown).queryByText('Total Count')).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Average Price')).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Unique Users')).not.toBeInTheDocument();
+  expect(
+    within(dropdown).queryByText('Total Quantity'),
+  ).not.toBeInTheDocument();
+
+  await userEvent.clear(combobox);
+  await userEvent.type(combobox, 'Unique');
+
+  dropdown = document.querySelector('.rc-virtual-list') as HTMLElement;
+  expect(within(dropdown).getByText('Unique Users')).toBeInTheDocument();
+  expect(within(dropdown).queryByText('Total Count')).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Gross Revenue')).not.toBeInTheDocument();
+
+  await userEvent.clear(combobox);
+  await userEvent.type(combobox, 'total');
+
+  dropdown = document.querySelector('.rc-virtual-list') as HTMLElement;
+  expect(within(dropdown).getByText('Total Count')).toBeInTheDocument();
+  expect(within(dropdown).getByText('Total Quantity')).toBeInTheDocument();
+  expect(within(dropdown).queryByText('Gross Revenue')).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Average Price')).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Unique Users')).not.toBeInTheDocument();
+});
+
+test('Should filter columns by column_name and verbose_name in Simple tab', async () => {
+  const props = {
+    ...createProps(),
+    columns: [
+      {
+        id: 1,
+        column_name: 'user_id',
+        verbose_name: 'User Identifier',
+        type: 'INTEGER',
+      },
+      {
+        id: 2,
+        column_name: 'created_at',
+        verbose_name: 'Creation Timestamp',
+        type: 'DATETIME',
+      },
+      {
+        id: 3,
+        column_name: 'order_total',
+        verbose_name: 'Order Amount',
+        type: 'DECIMAL',
+      },
+      {
+        id: 4,
+        column_name: 'product_name',
+        verbose_name: 'Product Title',
+        type: 'STRING',
+      },
+      {
+        id: 5,
+        column_name: 'updated_at',
+        verbose_name: 'Last Modified',
+        type: 'DATETIME',
+      },
+    ],
+  };
+  props.getCurrentTab.mockImplementation(tab => {
+    props.adhocMetric.expressionType = tab;
+  });
+  render(<AdhocMetricEditPopover {...props} />);
+
+  const tab = screen.getByRole('tab', { name: 'Simple' }).parentElement!;
+  userEvent.click(tab);
+
+  const columnCombobox = screen.getByRole('combobox', {
+    name: 'Select column',
+  });
+
+  await userEvent.type(columnCombobox, 'product');
+
+  let dropdown = document.querySelector('.rc-virtual-list') as HTMLElement;
+  expect(within(dropdown).getByText('Product Title')).toBeInTheDocument();
+  expect(
+    within(dropdown).queryByText('User Identifier'),
+  ).not.toBeInTheDocument();
+  expect(
+    within(dropdown).queryByText('Creation Timestamp'),
+  ).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Order Amount')).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Last Modified')).not.toBeInTheDocument();
+
+  await userEvent.clear(columnCombobox);
+  await userEvent.type(columnCombobox, 'Modified');
+
+  dropdown = document.querySelector('.rc-virtual-list') as HTMLElement;
+  expect(within(dropdown).getByText('Last Modified')).toBeInTheDocument();
+  expect(
+    within(dropdown).queryByText('User Identifier'),
+  ).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Product Title')).not.toBeInTheDocument();
+
+  await userEvent.clear(columnCombobox);
+  await userEvent.type(columnCombobox, '_at');
+
+  dropdown = document.querySelector('.rc-virtual-list') as HTMLElement;
+  expect(within(dropdown).getByText('Creation Timestamp')).toBeInTheDocument();
+  expect(within(dropdown).getByText('Last Modified')).toBeInTheDocument();
+  expect(
+    within(dropdown).queryByText('User Identifier'),
+  ).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Order Amount')).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Product Title')).not.toBeInTheDocument();
+});

superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.tsx

@@ -450,8 +450,11 @@ export default class AdhocMetricEditPopover extends PureComponent<
                           value: savedMetric.metric_name,
                           label: this.renderMetricOption(savedMetric),
                           key: savedMetric.id,
+                          metric_name: savedMetric.metric_name,
+                          verbose_name: savedMetric.verbose_name ?? '',
                         }),
                       )}
+                      optionFilterProps={['metric_name', 'verbose_name']}
                       {...savedSelectProps}
                     />
                   </FormItem>
@@ -509,7 +512,10 @@ export default class AdhocMetricEditPopover extends PureComponent<
                         value: column.column_name,
                         key: (column as { id?: unknown }).id,
                         label: this.renderColumnOption(column),
+                        column_name: column.column_name,
+                        verbose_name: column.verbose_name ?? '',
                       }))}
+                      optionFilterProps={['column_name', 'verbose_name']}
                       {...columnSelectProps}
                     />
                   </FormItem>