ui: sort items in the sql activity dropdown menu

Fixes cockroachdb#78081.

Previously, app names in the dropdown menu for the stmts, txns, and
sessions pages were unsorted. This change sorts these app names.

Release note (ui change): app names and database names in the dropdown
menu are sorted.

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx

@@ -112,7 +112,7 @@ function getSessionAppFilterOptions(sessions: SessionInfo[]): string[] {
     ),
   );
 
-  return Array.from(uniqueAppNames);
+  return Array.from(uniqueAppNames).sort();
 }
 
 export class SessionsPage extends React.Component<

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.selectors.ts

@@ -81,7 +81,9 @@ export const selectApps = createSelector(sqlStatsSelector, sqlStatsState => {
       }
     },
   );
-  return [].concat(sawBlank ? ["(unset)"] : []).concat(Object.keys(apps));
+  return []
+    .concat(sawBlank ? ["(unset)"] : [])
+    .concat(Object.keys(apps).sort());
 });
 
 // selectDatabases returns the array of all databases with statement statistics present
@@ -99,7 +101,9 @@ export const selectDatabases = createSelector(
           s.key.key_data.database ? s.key.key_data.database : "(unset)",
         ),
       ),
-    ).filter((dbName: string) => dbName !== null && dbName.length > 0);
+    )
+      .filter((dbName: string) => dbName !== null && dbName.length > 0)
+      .sort();
   },
 );
 

pkg/ui/workspaces/cluster-ui/src/transactionsPage/utils.ts

@@ -45,7 +45,7 @@ export const getTrxAppFilterOptions = (
       .map(t => (t.stats_data.app ? t.stats_data.app : "(unset)")),
   );
 
-  return Array.from(uniqueAppNames);
+  return Array.from(uniqueAppNames).sort();
 };
 
 export const collectStatementsText = (statements: Statement[]): string =>

pkg/ui/workspaces/db-console/src/views/statements/statements.spec.tsx

@@ -214,7 +214,7 @@ describe("selectApps", () => {
 
     const result = selectApps(state);
 
-    assert.deepEqual(result, ["(unset)", "foobar", "cockroach sql"]);
+    assert.deepEqual(result, ["(unset)", "cockroach sql", "foobar"]);
   });
 });
 

pkg/ui/workspaces/db-console/src/views/statements/statementsPage.tsx

@@ -188,7 +188,10 @@ export const selectApps = createSelector(
         }
       },
     );
-    return [].concat(sawBlank ? ["(unset)"] : []).concat(Object.keys(apps));
+    return []
+      .concat(sawBlank ? ["(unset)"] : [])
+      .concat(Object.keys(apps))
+      .sort();
   },
 );
 
@@ -206,7 +209,9 @@ export const selectDatabases = createSelector(
           s.key.key_data.database ? s.key.key_data.database : "(unset)",
         ),
       ),
-    ).filter((dbName: string) => dbName !== null && dbName.length > 0);
+    )
+      .filter((dbName: string) => dbName !== null && dbName.length > 0)
+      .sort();
   },
 );