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

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

@@ -17,7 +17,13 @@
  * under the License.
  */
 
-import { render, fireEvent } from 'spec/helpers/testing-library';
+import {
+  render,
+  fireEvent,
+  screen,
+  userEvent,
+  within,
+} from 'spec/helpers/testing-library';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import ColumnSelectPopover, {
@@ -116,3 +122,123 @@ test('open with Custom SQL tab selected when there is a custom SQL selected', ()
   expect(getByText('Simple')).toHaveAttribute('aria-selected', 'false');
   expect(getByText('Custom SQL')).toHaveAttribute('aria-selected', 'true');
 });
+
+test('Should filter simple columns by column_name and verbose_name', async () => {
+  renderPopover({
+    columns: [
+      { column_name: 'revenue_amount', verbose_name: 'Total Sales' },
+      { column_name: 'user_id', verbose_name: 'User Identifier' },
+      { column_name: 'created_at', verbose_name: 'Creation Date' },
+      { column_name: 'order_status', verbose_name: 'Status' },
+      { column_name: 'updated_at', verbose_name: 'Last Update' },
+    ],
+    editedColumn: undefined,
+    getCurrentTab: jest.fn(),
+    onChange: jest.fn(),
+  });
+
+  const combobox = screen.getByRole('combobox', {
+    name: 'Columns and metrics',
+  });
+
+  await userEvent.type(combobox, 'revenue');
+
+  let dropdown = document.querySelector('.rc-virtual-list') as HTMLElement;
+  expect(within(dropdown).getByText('Total Sales')).toBeInTheDocument();
+  expect(
+    within(dropdown).queryByText('User Identifier'),
+  ).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Creation Date')).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Status')).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Last Update')).not.toBeInTheDocument();
+
+  await userEvent.clear(combobox);
+  await userEvent.type(combobox, 'Identifier');
+
+  dropdown = document.querySelector('.rc-virtual-list') as HTMLElement;
+  expect(within(dropdown).getByText('User Identifier')).toBeInTheDocument();
+  expect(within(dropdown).queryByText('Total Sales')).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Creation Date')).not.toBeInTheDocument();
+
+  await userEvent.clear(combobox);
+  await userEvent.type(combobox, '_at');
+
+  dropdown = document.querySelector('.rc-virtual-list') as HTMLElement;
+  expect(within(dropdown).getByText('Creation Date')).toBeInTheDocument();
+  expect(within(dropdown).getByText('Last Update')).toBeInTheDocument();
+  expect(within(dropdown).queryByText('Total Sales')).not.toBeInTheDocument();
+  expect(
+    within(dropdown).queryByText('User Identifier'),
+  ).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Status')).not.toBeInTheDocument();
+});
+
+test('Should filter saved expressions by column_name and verbose_name', async () => {
+  const { container } = renderPopover({
+    columns: [
+      {
+        column_name: 'calc_revenue',
+        verbose_name: 'Total Sales',
+        expression: 'price * quantity',
+      },
+      {
+        column_name: 'calc_tax',
+        verbose_name: 'Tax Amount',
+        expression: 'price * 0.1',
+      },
+      {
+        column_name: 'calc_profit',
+        verbose_name: 'Net Profit',
+        expression: 'revenue - cost',
+      },
+      {
+        column_name: 'calc_margin',
+        verbose_name: 'Profit Margin',
+        expression: 'profit / revenue',
+      },
+      {
+        column_name: 'calc_discount',
+        verbose_name: 'Discount Rate',
+        expression: 'discount / price',
+      },
+    ],
+    editedColumn: undefined,
+    getCurrentTab: jest.fn(),
+    onChange: jest.fn(),
+  });
+
+  const savedTab = container.querySelector('#adhoc-metric-edit-tabs-tab-saved');
+  expect(savedTab).not.toBeNull();
+  fireEvent.click(savedTab!);
+
+  const combobox = screen.getByRole('combobox', {
+    name: 'Saved expressions',
+  });
+
+  await userEvent.type(combobox, 'revenue');
+
+  let dropdown = document.querySelector('.rc-virtual-list') as HTMLElement;
+  expect(within(dropdown).getByText('Total Sales')).toBeInTheDocument();
+  expect(within(dropdown).queryByText('Tax Amount')).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Net Profit')).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Profit Margin')).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Discount Rate')).not.toBeInTheDocument();
+
+  await userEvent.clear(combobox);
+  await userEvent.type(combobox, 'Rate');
+
+  dropdown = document.querySelector('.rc-virtual-list') as HTMLElement;
+  expect(within(dropdown).getByText('Discount Rate')).toBeInTheDocument();
+  expect(within(dropdown).queryByText('Total Sales')).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Tax Amount')).not.toBeInTheDocument();
+
+  await userEvent.clear(combobox);
+  await userEvent.type(combobox, 'profit');
+
+  dropdown = document.querySelector('.rc-virtual-list') as HTMLElement;
+  expect(within(dropdown).getByText('Net Profit')).toBeInTheDocument();
+  expect(within(dropdown).getByText('Profit Margin')).toBeInTheDocument();
+  expect(within(dropdown).queryByText('Total Sales')).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Tax Amount')).not.toBeInTheDocument();
+  expect(within(dropdown).queryByText('Discount Rate')).not.toBeInTheDocument();
+});

superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx

@@ -427,8 +427,12 @@ const ColumnSelectPopover = ({
                                   />
                                 ),
                                 key: calculatedColumn.column_name,
+                                column_name: calculatedColumn.column_name,
+                                verbose_name:
+                                  calculatedColumn.verbose_name ?? '',
                               }),
                             )}
+                            optionFilterProps={['column_name', 'verbose_name']}
                           />
                         </FormItem>
                       ) : datasourceType === DatasourceType.Table ? (
@@ -544,6 +548,8 @@ const ColumnSelectPopover = ({
                             />
                           ),
                           key: `column-${simpleColumn.column_name}`,
+                          column_name: simpleColumn.column_name,
+                          verbose_name: simpleColumn.verbose_name ?? '',
                         })),
                         ...availableMetrics.map(metric => ({
                           value: metric.metric_name,
@@ -556,8 +562,15 @@ const ColumnSelectPopover = ({
                             </MetricOptionContainer>
                           ),
                           key: `metric-${metric.metric_name}`,
+                          metric_name: metric.metric_name,
+                          verbose_name: metric.verbose_name ?? '',
                         })),
                       ]}
+                      optionFilterProps={[
+                        'column_name',
+                        'verbose_name',
+                        'metric_name',
+                      ]}
                     />
                   </FormItem>
                 )}