DS Picker: Ignore capitalization when sorting by name (#72665)

public/app/features/datasources/components/picker/utils.test.ts

@@ -32,15 +32,27 @@ describe('isDataSourceMatch', () => {
 describe('getDataSouceCompareFn', () => {
   const dataSources = [
     { uid: 'c', name: 'c', meta: { builtIn: false } },
+    { uid: 'D', name: 'D', meta: { builtIn: false } },
     { uid: 'a', name: 'a', meta: { builtIn: true } },
     { uid: 'b', name: 'b', meta: { builtIn: false } },
   ] as DataSourceInstanceSettings[];
 
+  it('sorts data sources alphabetically ignoring captitalization', () => {
+    dataSources.sort(getDataSourceCompareFn(undefined, [], []));
+    expect(dataSources).toEqual([
+      { uid: 'b', name: 'b', meta: { builtIn: false } },
+      { uid: 'c', name: 'c', meta: { builtIn: false } },
+      { uid: 'D', name: 'D', meta: { builtIn: false } },
+      { uid: 'a', name: 'a', meta: { builtIn: true } },
+    ] as DataSourceInstanceSettings[]);
+  });
+
   it('sorts built in datasources last and other data sources alphabetically', () => {
     dataSources.sort(getDataSourceCompareFn(undefined, [], []));
     expect(dataSources).toEqual([
       { uid: 'b', name: 'b', meta: { builtIn: false } },
       { uid: 'c', name: 'c', meta: { builtIn: false } },
+      { uid: 'D', name: 'D', meta: { builtIn: false } },
       { uid: 'a', name: 'a', meta: { builtIn: true } },
     ] as DataSourceInstanceSettings[]);
   });
@@ -50,6 +62,7 @@ describe('getDataSouceCompareFn', () => {
     expect(dataSources).toEqual([
       { uid: 'c', name: 'c', meta: { builtIn: false } },
       { uid: 'b', name: 'b', meta: { builtIn: false } },
+      { uid: 'D', name: 'D', meta: { builtIn: false } },
       { uid: 'a', name: 'a', meta: { builtIn: true } },
     ] as DataSourceInstanceSettings[]);
   });
@@ -60,6 +73,7 @@ describe('getDataSouceCompareFn', () => {
       { uid: 'a', name: 'a', meta: { builtIn: true } },
       { uid: 'c', name: 'c', meta: { builtIn: false } },
       { uid: 'b', name: 'b', meta: { builtIn: false } },
+      { uid: 'D', name: 'D', meta: { builtIn: false } },
     ] as DataSourceInstanceSettings[]);
   });
 
@@ -68,6 +82,7 @@ describe('getDataSouceCompareFn', () => {
     expect(dataSources).toEqual([
       { uid: 'b', name: 'b', meta: { builtIn: false } },
       { uid: 'c', name: 'c', meta: { builtIn: false } },
+      { uid: 'D', name: 'D', meta: { builtIn: false } },
       { uid: 'a', name: 'a', meta: { builtIn: true } },
     ] as DataSourceInstanceSettings[]);
   });
@@ -78,7 +93,7 @@ describe('getDataSouceCompareFn', () => {
       { uid: 'b', name: 'b', meta: { builtIn: false } },
       { uid: 'c', name: 'c', meta: { builtIn: false } },
       { uid: 'e', name: 'e', meta: { builtIn: false } },
-      { uid: 'd', name: 'd', meta: { builtIn: false } },
+      { uid: 'D', name: 'D', meta: { builtIn: false } },
       { uid: 'f', name: 'f', meta: { builtIn: false } },
     ] as DataSourceInstanceSettings[];
 
@@ -87,7 +102,7 @@ describe('getDataSouceCompareFn', () => {
       { uid: 'c', name: 'c', meta: { builtIn: false } },
       { uid: 'e', name: 'e', meta: { builtIn: false } },
       { uid: 'b', name: 'b', meta: { builtIn: false } },
-      { uid: 'd', name: 'd', meta: { builtIn: false } },
+      { uid: 'D', name: 'D', meta: { builtIn: false } },
       { uid: 'f', name: 'f', meta: { builtIn: false } },
       { uid: 'a', name: 'a', meta: { builtIn: true } },
     ] as DataSourceInstanceSettings[]);

public/app/features/datasources/components/picker/utils.ts

@@ -44,6 +44,9 @@ export function getDataSourceCompareFn(
   dataSourceVariablesIDs: string[]
 ) {
   const cmpDataSources = (a: DataSourceInstanceSettings, b: DataSourceInstanceSettings) => {
+    const nameA = a.name.toUpperCase();
+    const nameB = b.name.toUpperCase();
+
     // Sort the current ds before everything else.
     if (current && isDataSourceMatch(a, current)) {
       return -1;
@@ -68,8 +71,6 @@ export function getDataSourceCompareFn(
       return -1;
     } else if (bIsVariable && !aIsVariable) {
       return 1;
-    } else if (bIsVariable && aIsVariable) {
-      return a.name < b.name ? -1 : 1;
     }
 
     // Sort built in DataSources to the bottom and alphabetically by name.
@@ -77,12 +78,10 @@ export function getDataSourceCompareFn(
       return 1;
     } else if (b.meta.builtIn && !a.meta.builtIn) {
       return -1;
-    } else if (a.meta.builtIn && b.meta.builtIn) {
-      return a.name < b.name ? -1 : 1;
     }
 
     // Sort the rest alphabetically by name.
-    return a.name < b.name ? -1 : 1;
+    return nameA < nameB ? -1 : 1;
   };
 
   return cmpDataSources;