web: Default sql limit, url for config

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",
     },
     {

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,18 +28,20 @@ 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");
 }
 
 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);
 }

web/components/pageComponents/ConfigurationPage/Form.tsx

@@ -26,15 +26,16 @@ export default function Form(props: Props) {
     <div className={css.databaseForm}>
       <Loader loaded={!state.loading} />
       <div className={css.databaseConfig}>
-        <form
-          onSubmit={async e =>
-            onSubmit(
-              e,
-              `mysql://${state.username}:${state.password}@${state.host}:${state.port}/${state.database}`,
-            )
-          }
-        >
+        <form onSubmit={onSubmit}>
           <h3>Set up new connection</h3>
+          <FormInput
+            value={state.connectionUrl}
+            onChangeString={c => setState({ connectionUrl: c })}
+            label="URL"
+            placeholder="mysql://[username]:[password]@[host]/[database]"
+            horizontal
+          />
+          <div className={css.or}>OR</div>
           <FormInput
             label="Host"
             value={state.host}
@@ -107,7 +108,12 @@ export default function Form(props: Props) {
             onCancel={onCancel}
             cancelText={props.hasDatabaseEnv ? "cancel" : "clear"}
           >
-            <Button type="submit" disabled={!state.host || !state.username}>
+            <Button
+              type="submit"
+              disabled={
+                !state.connectionUrl && (!state.host || !state.username)
+              }
+            >
               Launch Workbench
             </Button>
           </ButtonsWithError>

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;
+}

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<Partial<ConfigState>>;
 
 type ReturnType = {
-  onSubmit: (e: SyntheticEvent, url: string) => Promise<void>;
+  onSubmit: (e: SyntheticEvent) => Promise<void>;
   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,
         }),
       );