diff --git a/frontend/src/metabase/admin/databases/components/widgets/EngineWidget/EngineWidget.jsx b/frontend/src/metabase/admin/databases/components/widgets/EngineWidget/EngineWidget.jsx index 28388778df9d96d0e52242da6dfc222fec9b3e89..0384c6f028c2d9e02cf52f26f396c730510a4c6e 100644 --- a/frontend/src/metabase/admin/databases/components/widgets/EngineWidget/EngineWidget.jsx +++ b/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); } }; diff --git a/frontend/src/metabase/admin/databases/components/widgets/EngineWidget/EngineWidget.unit.spec.js b/frontend/src/metabase/admin/databases/components/widgets/EngineWidget/EngineWidget.unit.spec.js index 86f00dc192a8fa600f0166bbdaf0c51523eb9e79..fe16e28de6423f11969ada0413d84c3887f15823 100644 --- a/frontend/src/metabase/admin/databases/components/widgets/EngineWidget/EngineWidget.unit.spec.js +++ b/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, }, ]; diff --git a/frontend/src/metabase/lib/engine.js b/frontend/src/metabase/lib/engine.js index c71269cd772374d128275fb4581f7a4e6f169287..4518e090ebe2505f1441bb0fd4951ed3cc7c6493 100644 --- a/frontend/src/metabase/lib/engine.js +++ b/frontend/src/metabase/lib/engine.js @@ -61,7 +61,7 @@ export function getElevatedEngines() { "postgres", "sqlserver", "redshift", - "bigquery", + "bigquery-cloud-sdk", "snowflake", ]; }