Run on Enter Preference (#2573)

src/app/core/utils/keyboard.ts

@@ -0,0 +1,7 @@
+import React from "react"
+import env from "../env"
+
+export function cmdOrCtrl(e: React.KeyboardEvent) {
+  if (env.isMac) return e.metaKey
+  else return e.ctrlKey
+}

src/app/query-home/search-area/editor/query-editor.tsx

@@ -4,6 +4,9 @@ import {useEditorView} from "./use-editor-view"
 import {useDispatch} from "src/app/core/state"
 import SearchBar from "src/js/state/SearchBar"
 import submitSearch from "../../flows/submit-search"
+import {useSelector} from "react-redux"
+import Config from "src/js/state/Config"
+import {cmdOrCtrl} from "src/app/core/utils/keyboard"
 
 const EditorWrap = styled.div<{isDisabled?: boolean}>`
   height: 100%;
@@ -21,15 +24,18 @@ type Props = {
 }
 
 const QueryEditor = ({value, disabled}: Props) => {
+  const runOnEnter = useSelector(Config.getRunOnEnter)
   const dispatch = useDispatch()
   const onChange = useCallback(
     (s: string) => dispatch(SearchBar.changeSearchBarInput(s)),
     []
   )
-  const onKeyDown = (e) => {
+  const onKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault()
-      dispatch(submitSearch())
+      if ((runOnEnter && !e.shiftKey) || (!runOnEnter && cmdOrCtrl(e))) {
+        e.preventDefault()
+        dispatch(submitSearch())
+      }
     }
   }
   const ref = useEditorView({value, disabled, onChange})

src/js/brim/form.test.ts

@@ -3,6 +3,7 @@ import {FormConfig} from "./form"
 
 const sampleConfig = (): FormConfig => ({
   username: {
+    type: "string",
     label: "Username",
     name: "username",
     defaultValue: "joe",

src/js/brim/form.ts

@@ -1,11 +1,7 @@
-import {ConfigItemType} from "../state/Configs"
-
-export type FormFieldConfig = {
-  configName?: string
-  defaultValue?: string
-  type?: ConfigItemType
+type Common = {
   name: string
   label: string
+  configName?: string
   check?: (arg0: string) => FormCheckResult
   submit?: (arg0: string) => void
   enum?: string[]
@@ -14,6 +10,16 @@ export type FormFieldConfig = {
     url: string
   }
 }
+export type StringField = Common & {type: "string"; defaultValue: string}
+export type BooleanField = Common & {type: "boolean"; defaultValue: boolean}
+export type FileField = Common & {type: "file"; defaultValue: string}
+export type DirectoryField = Common & {type: "directory"; defaultValue: string}
+
+export type FormFieldConfig =
+  | StringField
+  | BooleanField
+  | FileField
+  | DirectoryField
 
 export type FormConfig = {
   [key: string]: FormFieldConfig
@@ -62,7 +68,7 @@ function getFields(el, config) {
     const input = el.elements.namedItem(name)
     if (!input) continue
 
-    const value = input.value
+    const value = input.type === "checkbox" ? input.checked : input.value
     const safeCheck = check || ((_) => [true, ""])
     const safeSubmit = submit || ((_) => {})
 

src/js/components/LakeModals/LakeForm.tsx

@@ -95,6 +95,8 @@ const LakeForm = ({onClose, lake}: Props) => {
     host: {
       name: "host",
       label: "Lake URL",
+      type: "string",
+      defaultValue: "",
       check: (value) => {
         if (isEmpty(value)) return [false, "must not be blank"]
         try {
@@ -113,6 +115,8 @@ const LakeForm = ({onClose, lake}: Props) => {
     name: {
       name: "name",
       label: "Name",
+      type: "string",
+      defaultValue: "",
       check: (value) => [!isEmpty(value), "must not be blank"],
     },
   }

src/js/components/Preferences/DataDirInput.tsx

@@ -1,11 +1,11 @@
 import React from "react"
 
-import {FormFieldConfig} from "../../brim/form"
+import {DirectoryField} from "../../brim/form"
 import FileInput from "../common/forms/FileInput"
 import InputLabel from "../common/forms/InputLabel"
 
 type Props = {
-  config: FormFieldConfig
+  config: DirectoryField
 }
 
 export default function DataDirInput({config}: Props) {

src/js/components/Preferences/Preferences.tsx

@@ -45,6 +45,18 @@ function ConfigFormItems(props: {configs: FormConfig}) {
 
     const val = get(configVals, [c.configName, c.name], undefined)
     switch (c.type) {
+      case "boolean":
+        return (
+          <div className="setting-panel" key={name}>
+            {itemLabel}
+            <input
+              id={name}
+              type="checkbox"
+              name={name}
+              defaultChecked={val === undefined ? defaultValue : val}
+            />
+          </div>
+        )
       case "file":
         return (
           <div key={name} className="setting-panel">
@@ -112,7 +124,6 @@ export default function Preferences() {
   const [errors, setErrors] = useState([])
 
   const configsForm = useConfigsForm()
-
   const onClose = () => setErrors([])
 
   const onSubmit = useCallback(

src/js/components/Preferences/SuricataRunner.tsx

@@ -1,11 +1,11 @@
 import React, {useState} from "react"
 
-import {FormFieldConfig} from "../../brim/form"
+import {FileField} from "../../brim/form"
 import FileInput from "../common/forms/FileInput"
 import InputLabel from "../common/forms/InputLabel"
 
 type Props = {
-  config: FormFieldConfig
+  config: FileField
 }
 
 export default function SuricataRunner({config}: Props) {

src/js/components/Preferences/SuricataUpdater.tsx

@@ -1,11 +1,11 @@
 import React, {useState} from "react"
 
-import {FormFieldConfig} from "../../brim/form"
+import {FileField} from "../../brim/form"
 import FileInput from "../common/forms/FileInput"
 import InputLabel from "../common/forms/InputLabel"
 
 type Props = {
-  config: FormFieldConfig
+  config: FileField
 }
 
 export default function SuricataUpdater({config}: Props) {

src/js/components/Preferences/ZeekRunner.tsx

@@ -1,12 +1,12 @@
 import React, {useState} from "react"
 
-import {FormFieldConfig} from "../../brim/form"
+import {FileField} from "../../brim/form"
 import FileInput from "../common/forms/FileInput"
 import InputLabel from "../common/forms/InputLabel"
 import Link from "../common/Link"
 
 type Props = {
-  config: FormFieldConfig
+  config: FileField
 }
 
 const DOCS = "https://github.com/brimdata/brim/wiki/Zeek-Customization"

src/js/components/Preferences/usePreferencesForm.ts

@@ -2,7 +2,7 @@ import {useSelector} from "react-redux"
 import {useDispatch} from "src/app/core/state"
 import ConfigPropValues from "src/js/state/ConfigPropValues"
 import Configs from "src/js/state/Configs"
-import {FormConfig} from "../../brim/form"
+import {FormConfig, FormFieldConfig} from "../../brim/form"
 import {executeCommand} from "../../flows/executeCommand"
 import lib from "../../lib"
 
@@ -17,7 +17,6 @@ const checkFile = (path) => {
 export const useConfigsForm = (): FormConfig => {
   const dispatch = useDispatch()
   const configs = useSelector(Configs.all)
-
   const formConfig: FormConfig = {}
   configs.forEach((config) => {
     Object.values(config.properties).forEach((prop) => {
@@ -56,7 +55,7 @@ export const useConfigsForm = (): FormConfig => {
         submit,
         check,
         helpLink,
-      }
+      } as FormFieldConfig
     })
   })
 

src/js/state/Config/selectors.ts

@@ -4,3 +4,7 @@ import {State} from "../types"
 export const getPoolNameDelimeter = (state: State): string => {
   return ConfigPropValues.get("pools", "nameDelimeter")(state)
 }
+
+export const getRunOnEnter = (state: State): string => {
+  return ConfigPropValues.get("editor", "runQueryOnEnter")(state)
+}

src/js/state/Configs/index.ts

@@ -1,7 +1,7 @@
 import {createEntityAdapter, createSlice} from "@reduxjs/toolkit"
 import {State} from "../types"
 
-export type ConfigItemType = "file" | "string" | "directory" // | "number" | "boolean"
+export type ConfigItemType = "file" | "string" | "directory" | "boolean" // | "number" | "boolean"
 
 export type ConfigItem = {
   name: string
@@ -12,7 +12,7 @@ export type ConfigItem = {
     url: string
   }
   command?: string
-  defaultValue?: string
+  defaultValue?: string | boolean
   enum?: string[]
 }
 

src/plugins/core/index.ts

@@ -49,6 +49,18 @@ export function activate(api: BrimApi) {
       },
     },
   })
+  api.configs.add({
+    name: "editor",
+    title: "Editor",
+    properties: {
+      runQueryOnEnter: {
+        name: "runQueryOnEnter",
+        label: "Run Query on Enter",
+        type: "boolean",
+        defaultValue: true,
+      },
+    },
+  })
 }
 
 export function deactivate() {}