diff --git a/web/components/DatabaseTableHeader/utils.test.ts b/web/components/DatabaseTableHeader/utils.test.ts index 81f2bbce..1390daec 100644 --- a/web/components/DatabaseTableHeader/utils.test.ts +++ b/web/components/DatabaseTableHeader/utils.test.ts @@ -1,4 +1,4 @@ -import { sampleQuery } from "./utils"; +import { DEFAULT_LIMIT, sampleQuery } from "./utils"; describe("tests sampleQuery", () => { const tests: Array<{ @@ -8,22 +8,22 @@ describe("tests sampleQuery", () => { }> = [ { desc: "Keyless table", - expectedQuery: `SELECT * FROM \`Keyless table\``, + expectedQuery: `SELECT * FROM \`Keyless table\`\nLIMIT ${DEFAULT_LIMIT};`, tableName: "Keyless table", }, { desc: "One key and data", - expectedQuery: `SELECT * FROM \`One key and data table\``, + expectedQuery: `SELECT * FROM \`One key and data table\`\nLIMIT ${DEFAULT_LIMIT};`, tableName: "One key and data table", }, { desc: "Two Key", - expectedQuery: `SELECT * FROM \`Two Keys table\``, + expectedQuery: `SELECT * FROM \`Two Keys table\`\nLIMIT ${DEFAULT_LIMIT};`, tableName: "Two Keys table", }, { desc: "Two Keys and data", - expectedQuery: `SELECT * FROM \`Two Keys and data table\``, + expectedQuery: `SELECT * FROM \`Two Keys and data table\`\nLIMIT ${DEFAULT_LIMIT};`, tableName: "Two Keys and data table", }, { diff --git a/web/components/DatabaseTableHeader/utils.ts b/web/components/DatabaseTableHeader/utils.ts index b31fd409..93de9327 100644 --- a/web/components/DatabaseTableHeader/utils.ts +++ b/web/components/DatabaseTableHeader/utils.ts @@ -1,5 +1,6 @@ import { isDoltSystemTable } from "@lib/doltSystemTables"; +export const DEFAULT_LIMIT = 1000; const exampleCreateTable = `CREATE TABLE tablename (pk INT, col1 VARCHAR(255), PRIMARY KEY (pk));`; export function getSqlString( @@ -27,8 +28,7 @@ export function getEditorString( return query ?? sampleQuery(tableName ?? ""); } -function addEmptyLines(firstLine: string): string { - const lines = [firstLine]; +function addEmptyLines(lines: string[]): string { // eslint-disable-next-line no-empty while (lines.push("") < 5) {} return lines.join("\n"); @@ -36,9 +36,12 @@ function addEmptyLines(firstLine: string): string { export function sampleQuery(tableName?: string): string { if (!tableName || isDoltSystemTable(tableName)) { - return addEmptyLines("SHOW TABLES;"); + return addEmptyLines(["SHOW TABLES;"]); } - return addEmptyLines(`SELECT * FROM \`${tableName}\`;`); + return addEmptyLines([ + `SELECT * FROM \`${tableName}\``, + `LIMIT ${DEFAULT_LIMIT};`, + ]); } export function sampleCreateQueryForEmpty(): string { @@ -50,5 +53,5 @@ export function sampleCreateQueryForEmpty(): string { ");", ]; - return lines.join("\n"); + return addEmptyLines(lines); } diff --git a/web/components/pageComponents/ConfigurationPage/Form.tsx b/web/components/pageComponents/ConfigurationPage/Form.tsx index c2ed36ab..ba305b8b 100644 --- a/web/components/pageComponents/ConfigurationPage/Form.tsx +++ b/web/components/pageComponents/ConfigurationPage/Form.tsx @@ -26,15 +26,16 @@ export default function Form(props: Props) {
-
- onSubmit( - e, - `mysql://${state.username}:${state.password}@${state.host}:${state.port}/${state.database}`, - ) - } - > +

Set up new connection

+ setState({ connectionUrl: c })} + label="URL" + placeholder="mysql://[username]:[password]@[host]/[database]" + horizontal + /> +
OR
- diff --git a/web/components/pageComponents/ConfigurationPage/index.module.css b/web/components/pageComponents/ConfigurationPage/index.module.css index 1db3dee7..69f214e4 100644 --- a/web/components/pageComponents/ConfigurationPage/index.module.css +++ b/web/components/pageComponents/ConfigurationPage/index.module.css @@ -31,3 +31,7 @@ @apply mr-2; } } + +.or { + @apply font-semibold text-center w-full my-5 text-lg; +} diff --git a/web/components/pageComponents/ConfigurationPage/useConfig.ts b/web/components/pageComponents/ConfigurationPage/useConfig.ts index ae71762e..9e6e18aa 100644 --- a/web/components/pageComponents/ConfigurationPage/useConfig.ts +++ b/web/components/pageComponents/ConfigurationPage/useConfig.ts @@ -10,6 +10,7 @@ const defaultState = { username: "root", password: "", database: "", + connectionUrl: "", hideDoltFeatures: false, useSSL: true, showAdvancedSettings: false, @@ -20,7 +21,7 @@ type ConfigState = typeof defaultState; type ConfigDispatch = Dispatch>; type ReturnType = { - onSubmit: (e: SyntheticEvent, url: string) => Promise; + onSubmit: (e: SyntheticEvent) => Promise; state: ConfigState; setState: ConfigDispatch; error?: Error | undefined; @@ -47,9 +48,12 @@ export default function useConfig(): ReturnType { sessionStorage.removeItem("db-config"); }; - const onSubmit = async (e: SyntheticEvent, url: string) => { + const onSubmit = async (e: SyntheticEvent) => { e.preventDefault(); setState({ loading: true }); + const url = + state.connectionUrl || + `mysql://${state.username}:${state.password}@${state.host}:${state.port}/${state.database}`; try { const db = await addDb({ @@ -71,6 +75,7 @@ export default function useConfig(): ReturnType { username: state.username, database: state.database, hideDoltFeatures: state.hideDoltFeatures, + connectionUrl: state.connectionUrl, useSSL: state.useSSL, }), );