feat(explore): display metrics and columns in alphabetical order

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

@@ -32,6 +32,8 @@ import DatasourcePanel, {
 import {
   columns,
   metrics,
+  columnsUnsorted,
+  metricsUnsorted,
 } from 'src/explore/components/DatasourcePanel/fixtures';
 import { DatasourceType } from '@superset-ui/core';
 import DatasourceControl from 'src/explore/components/controls/DatasourceControl';
@@ -101,6 +103,12 @@ const datasourceWithFolders: IDatasource = {
   ],
 };
 
+const datasourceUnsorted: IDatasource = {
+  ...datasource,
+  columns: columnsUnsorted,
+  metrics: metricsUnsorted,
+};
+
 const mockUser = {
   createdOn: '2021-04-27T18:12:38.952304',
   email: 'admin',
@@ -492,3 +500,43 @@ test('Default Metrics and Columns folders dont render when all metrics and colum
   expect(screen.getAllByTestId('DatasourcePanelDragOption').length).toEqual(5);
   expect(screen.getAllByTestId('datasource-panel-divider').length).toEqual(1);
 });
+
+test('Displays metrics and columns in alphabetical order', () => {
+  const panelProps = {
+    ...props,
+    datasource: datasourceUnsorted,
+    controls: {
+      ...props.controls,
+      datasource: {
+        ...props.controls.datasource,
+        datasource: datasourceUnsorted,
+      },
+    },
+  };
+
+  render(
+    <ExploreContainer>
+      <DatasourcePanel {...panelProps} />
+      <DndMetricSelect {...metricProps} />
+    </ExploreContainer>,
+    {
+      useRedux: true,
+      useDnd: true,
+    },
+  );
+
+  const items = screen.getAllByTestId('DatasourcePanelDragOption');
+  expect(items.map(it => it.textContent)).toEqual([
+    'ee (certified)',
+    'aa',
+    'bb',
+    'cc (has empty verbose_name)',
+    'dd',
+    'yyy (certified)',
+    'BBB (has empty verbose_name)',
+    'Cbb',
+    'ccc',
+    'Cdd',
+    'Www',
+  ]);
+});

superset-frontend/src/explore/components/DatasourcePanel/fixtures.tsx

@@ -97,7 +97,165 @@ const metricsFiltered = {
   ],
 };
 
+export const columnsUnsorted = [
+  {
+    column_name: 'ccc',
+    description: null,
+    expression: null,
+    filterable: true,
+    groupby: true,
+    id: 100,
+    uuid: '100',
+    is_dttm: false,
+    python_date_format: null,
+    type: 'VARCHAR',
+    type_generic: GenericDataType.String,
+    verbose_name: 'ccc',
+  },
+  {
+    column_name: 'aaa',
+    description: null,
+    expression: null,
+    filterable: true,
+    groupby: true,
+    id: 101,
+    uuid: '101',
+    is_dttm: false,
+    python_date_format: null,
+    type: 'DOUBLE',
+    type_generic: GenericDataType.Numeric,
+    verbose_name: 'Www',
+  },
+  {
+    column_name: 'Cbb',
+    description: null,
+    expression: null,
+    filterable: true,
+    groupby: true,
+    id: 102,
+    uuid: '102',
+    is_dttm: false,
+    python_date_format: null,
+    type: 'INT',
+    type_generic: GenericDataType.Numeric,
+    verbose_name: null,
+  },
+  {
+    column_name: 'BBB (has empty verbose_name)',
+    description: null,
+    expression: null,
+    filterable: true,
+    groupby: true,
+    id: 102,
+    uuid: '102',
+    is_dttm: false,
+    python_date_format: null,
+    type: 'INT',
+    type_generic: GenericDataType.Numeric,
+    verbose_name: '',
+  },
+  {
+    column_name: 'yyy',
+    is_certified: 1,
+    description: null,
+    expression: null,
+    filterable: true,
+    groupby: true,
+    id: 103,
+    uuid: '103',
+    is_dttm: false,
+    python_date_format: null,
+    type: 'INT',
+    type_generic: GenericDataType.Numeric,
+    verbose_name: 'yyy (certified)',
+  },
+  {
+    column_name: 'Cdd',
+    description: null,
+    expression: null,
+    filterable: true,
+    groupby: true,
+    id: 104,
+    uuid: '104',
+    is_dttm: false,
+    python_date_format: null,
+    type: 'INT',
+    type_generic: GenericDataType.Numeric,
+    verbose_name: null,
+  },
+];
+
+const metricsFilteredUnsorted = {
+  certified: [
+    {
+      certification_details: null,
+      certified_by: 'user',
+      d3format: null,
+      description: null,
+      expression: '',
+      id: 59,
+      uuid: '59',
+      is_certified: true,
+      metric_name: 'ee (certified)',
+      warning_text: null,
+    },
+  ],
+  uncertified: [
+    {
+      certification_details: null,
+      d3format: null,
+      description: null,
+      expression: '',
+      id: 56,
+      uuid: '56',
+      is_certified: false,
+      metric_name: 'dd',
+      warning_text: null,
+    },
+    {
+      certification_details: null,
+      d3format: null,
+      description: null,
+      expression: '',
+      id: 57,
+      uuid: '57',
+      is_certified: false,
+      metric_name: 'ee',
+      verbose_name: 'aa',
+      warning_text: null,
+    },
+    {
+      certification_details: null,
+      d3format: null,
+      description: null,
+      expression: '',
+      id: 57,
+      uuid: '57',
+      is_certified: false,
+      metric_name: 'cc (has empty verbose_name)',
+      verbose_name: '',
+      warning_text: null,
+    },
+    {
+      certification_details: null,
+      d3format: null,
+      description: null,
+      expression: '',
+      id: 58,
+      uuid: '58',
+      is_certified: false,
+      metric_name: 'bb',
+      warning_text: null,
+    },
+  ],
+};
+
 export const metrics = [
   ...metricsFiltered.certified,
   ...metricsFiltered.uncertified,
 ];
+
+export const metricsUnsorted = [
+  ...metricsFilteredUnsorted.certified,
+  ...metricsFilteredUnsorted.uncertified,
+];

superset-frontend/src/explore/components/DatasourcePanel/index.tsx

@@ -122,19 +122,6 @@ const StyledInfoboxWrapper = styled.div`
 
 const BORDER_WIDTH = 2;
 
-const sortColumns = (slice: DatasourcePanelColumn[]) =>
-  [...slice]
-    .sort((col1, col2) => {
-      if (col1?.is_dttm && !col2?.is_dttm) {
-        return -1;
-      }
-      if (col2?.is_dttm && !col1?.is_dttm) {
-        return 1;
-      }
-      return 0;
-    })
-    .sort((a, b) => (b?.is_certified ?? 0) - (a?.is_certified ?? 0));
-
 export default function DataSourcePanel({
   datasource,
   formData,
@@ -222,28 +209,19 @@ export default function DataSourcePanel({
         },
       ],
       keepDiacritics: true,
-      baseSort: (a, b) =>
-        Number(b?.item?.is_certified ?? 0) -
-          Number(a?.item?.is_certified ?? 0) ||
-        String(a?.rankedValue ?? '').localeCompare(b?.rankedValue ?? ''),
     });
   }, [allowedMetrics, searchKeyword]);
 
-  const sortedColumns = useMemo(
-    () => sortColumns(filteredColumns),
-    [filteredColumns],
-  );
-
   const folders = useMemo(
     () =>
       transformDatasourceWithFolders(
         filteredMetrics,
-        sortedColumns,
+        filteredColumns,
         _folders,
         allowedMetrics,
         allowedColumns,
       ),
-    [_folders, filteredMetrics, sortedColumns],
+    [_folders, filteredMetrics, filteredColumns],
   );
 
   const showInfoboxCheck = () => {

superset-frontend/src/explore/components/DatasourcePanel/transformDatasourceFolders.ts

@@ -25,6 +25,26 @@ import {
   MetricItem,
 } from './types';
 
+const sortMetrics = (arr: MetricItem[]) =>
+  arr.sort((a, b) => {
+    const certCmp = Number(b?.is_certified ?? 0) - Number(a?.is_certified ?? 0);
+    if (certCmp) return certCmp;
+
+    const aName = (a.verbose_name || a.metric_name) ?? '';
+    const bName = (b.verbose_name || b.metric_name) ?? '';
+    return aName.localeCompare(bName, undefined, { sensitivity: 'base' });
+  });
+
+const sortColumns = (arr: ColumnItem[]) =>
+  arr.sort((a, b) => {
+    const certCmp = Number(b?.is_certified ?? 0) - Number(a?.is_certified ?? 0);
+    if (certCmp) return certCmp;
+
+    const aName = (a.verbose_name || a.column_name) ?? '';
+    const bName = (b.verbose_name || b.column_name) ?? '';
+    return aName.localeCompare(bName, undefined, { sensitivity: 'base' });
+  });
+
 const transformToFolderStructure = (
   metricsToDisplay: MetricItem[],
   columnsToDisplay: ColumnItem[],
@@ -102,15 +122,15 @@ const transformToFolderStructure = (
         id: 'metrics-default',
         name: t('Metrics'),
         isCollapsed: false,
-        items: metricsToDisplay,
+        items: sortMetrics(metricsToDisplay.slice()),
         totalItems: allMetrics.length,
         showingItems: metricsToDisplay.length,
       },
       {
         id: 'columns-default',
         name: t('Columns'),
         isCollapsed: false,
-        items: columnsToDisplay,
+        items: sortColumns(columnsToDisplay.slice()),
         totalItems: allColumns.length,
         showingItems: columnsToDisplay.length,
       },

superset-frontend/src/explore/components/DatasourcePanel/types.ts

@@ -44,6 +44,7 @@ export type DatasourcePanelColumn = {
   expression?: string | null;
   is_certified?: number | null;
   column_name?: string | null;
+  verbose_name?: string | null;
   name?: string | null;
   type?: string;
 };