Fix sorting and add tests (#19045)

frontend/src/metabase/admin/databases/components/widgets/EngineWidget/EngineWidget.jsx

@@ -20,6 +20,8 @@ import {
   EngineSearchRoot,
 } from "./EngineWidget.styled";
 
+const DEFAULT_OPTIONS_COUNT = 6;
+
 const EngineWidget = ({ field, options, isHosted }) => {
   if (field.value) {
     return <EngineInfo field={field} options={options} />;
@@ -63,6 +65,7 @@ const EngineSearch = ({ field, options, isHosted }) => {
   const [searchText, setSearchText] = useState("");
   const [isExpanded, setIsExpanded] = useState(false);
   const isSearching = searchText.length > 0;
+  const hasMoreOptions = options.length > DEFAULT_OPTIONS_COUNT;
 
   const sortedOptions = useMemo(() => {
     return getSortedOptions(options);
@@ -85,7 +88,7 @@ const EngineSearch = ({ field, options, isHosted }) => {
       ) : (
         <EngineEmptyState isHosted={isHosted} />
       )}
-      {!isSearching && (
+      {!isSearching && hasMoreOptions && (
         <EngineToggle
           isExpanded={isExpanded}
           onExpandedChange={setIsExpanded}
@@ -188,6 +191,8 @@ const getSortedOptions = options => {
       return a.index - b.index;
     } else if (a.index >= 0) {
       return -1;
+    } else if (b.index >= 0) {
+      return 1;
     } else {
       return a.name.localeCompare(b.name);
     }
@@ -200,7 +205,7 @@ const getVisibleOptions = (options, isExpanded, isSearching, searchText) => {
   } else if (isExpanded) {
     return options;
   } else {
-    return options.filter(e => e.index >= 0);
+    return options.slice(0, DEFAULT_OPTIONS_COUNT);
   }
 };
 

frontend/src/metabase/admin/databases/components/widgets/EngineWidget/EngineWidget.unit.spec.js

@@ -32,13 +32,13 @@ describe("EngineWidget", () => {
 
     userEvent.click(screen.getByText("Show more options"));
     expect(screen.getByText("MySQL")).toBeInTheDocument();
-    expect(screen.getByText("PostgreSQL")).toBeInTheDocument();
-    expect(screen.getByText("SQL Server")).toBeInTheDocument();
+    expect(screen.getByText("H2")).toBeInTheDocument();
+    expect(screen.getByText("Presto")).toBeInTheDocument();
 
     userEvent.click(screen.getByText("Show less options"));
     expect(screen.getByText("MySQL")).toBeInTheDocument();
-    expect(screen.getByText("PostgreSQL")).toBeInTheDocument();
-    expect(screen.queryByText("SQL Server")).not.toBeInTheDocument();
+    expect(screen.getByText("H2")).toBeInTheDocument();
+    expect(screen.queryByText("Presto")).not.toBeInTheDocument();
   });
 
   it("should allow searching for a database", () => {
@@ -86,18 +86,35 @@ const getOptions = () => [
     name: "MySQL",
     value: "mysql",
     index: 1,
-    official: true,
+  },
+  {
+    name: "PostgreSQL",
+    value: "postgres",
+    index: 2,
   },
   {
     name: "SQL Server",
     value: "sqlserver",
+    index: 3,
+  },
+  {
+    name: "Amazon Redshift",
+    value: "redshift",
+    index: 4,
+  },
+  {
+    name: "Snowflake",
+    value: "snowflake",
+    index: 5,
+  },
+  {
+    name: "H2",
+    value: "h2",
     index: -1,
-    official: true,
   },
   {
-    name: "PostgreSQL",
-    value: "postgres",
-    index: 0,
-    official: false,
+    name: "Presto",
+    value: "presto-jdbc",
+    index: -1,
   },
 ];

frontend/src/metabase/lib/engine.js

@@ -61,7 +61,7 @@ export function getElevatedEngines() {
     "postgres",
     "sqlserver",
     "redshift",
-    "bigquery",
+    "bigquery-cloud-sdk",
     "snowflake",
   ];
 }