Web console: Improve the lookup view UX

web-console/script/create-sql-docs.js

@@ -23,7 +23,7 @@ const fs = require('fs-extra');
 const readfile = '../docs/querying/sql.md';
 const writefile = 'lib/sql-docs.js';
 
-const MINIMUM_EXPECTED_NUMBER_OF_FUNCTIONS = 134;
+const MINIMUM_EXPECTED_NUMBER_OF_FUNCTIONS = 152;
 const MINIMUM_EXPECTED_NUMBER_OF_DATA_TYPES = 14;
 
 function unwrapMarkdownLinks(str) {
@@ -37,7 +37,7 @@ const readDoc = async () => {
   const functionDocs = [];
   const dataTypeDocs = [];
   for (let line of lines) {
-    const functionMatch = line.match(/^\|`(\w+)\(([^|]*)\)`\|([^|]+)\|(?:([^|]+)\|)?$/);
+    const functionMatch = line.match(/^\|\s*`(\w+)\(([^|]*)\)`\s*\|([^|]+)\|(?:([^|]+)\|)?$/);
     if (functionMatch) {
       functionDocs.push([
         functionMatch[1],

web-console/src/components/auto-form/auto-form.tsx

@@ -20,7 +20,7 @@ import { Button, ButtonGroup, FormGroup, Intent, NumericInput } from '@blueprint
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
 
-import { deepDelete, deepGet, deepSet } from '../../utils';
+import { deepDelete, deepGet, deepSet, durationSanitizer } from '../../utils';
 import { ArrayInput } from '../array-input/array-input';
 import { FormGroupWithInfo } from '../form-group-with-info/form-group-with-info';
 import { IntervalInput } from '../interval-input/interval-input';
@@ -281,15 +281,16 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
     );
   }
 
-  private renderStringInput(field: Field<T>, sanitize?: (str: string) => string): JSX.Element {
+  private renderStringInput(field: Field<T>, sanitizer?: (str: string) => string): JSX.Element {
     const { model, large, onFinalize } = this.props;
     const { required, defaultValue, modelValue } = AutoForm.computeFieldValues(model, field);
 
     return (
       <SuggestibleInput
         value={modelValue != null ? modelValue : defaultValue || ''}
+        sanitizer={sanitizer}
+        issueWithValue={field.issueWithValue}
         onValueChange={v => {
-          if (sanitize && typeof v === 'string') v = sanitize(v);
           this.fieldChange(field, v);
         }}
         onBlur={() => {
@@ -397,9 +398,7 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
       case 'string':
         return this.renderStringInput(field);
       case 'duration':
-        return this.renderStringInput(field, (str: string) =>
-          str.toUpperCase().replace(/[^0-9PYMDTHS.,]/g, ''),
-        );
+        return this.renderStringInput(field, durationSanitizer);
       case 'boolean':
         return this.renderBooleanInput(field);
       case 'string-array':

web-console/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap

@@ -13,7 +13,7 @@ exports[`form group with info matches snapshot 1`] = `
       class="bp3-text-muted"
     >
       <span
-        class="bp3-popover2-target"
+        class="info-popover bp3-popover2-target"
       >
         <span
           class="bp3-icon bp3-icon-info-sign"

web-console/src/components/form-group-with-info/form-group-with-info.scss

@@ -24,7 +24,7 @@
   .bp3-form-content {
     position: relative;
 
-    & > .bp3-popover2-target {
+    & > .info-popover {
       position: absolute;
       right: 0;
       top: 5px;

web-console/src/components/form-group-with-info/form-group-with-info.tsx

@@ -36,7 +36,7 @@ export const FormGroupWithInfo = React.memo(function FormGroupWithInfo(
   const { label, info, inlineInfo, children } = props;
 
   const popover = (
-    <Popover2 content={info} position="left-bottom">
+    <Popover2 className="info-popover" content={info} position="left-bottom">
       <Icon icon={IconNames.INFO_SIGN} iconSize={14} />
     </Popover2>
   );

web-console/src/components/formatted-input/__snapshots__/formatted-input.spec.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormattedInput matches snapshot on undefined value 1`] = `
+<div
+  class="formatted-input"
+>
+  <div
+    class="bp3-input-group"
+  >
+    <input
+      class="bp3-input"
+      type="text"
+      value=""
+    />
+  </div>
+</div>
+`;
+
+exports[`FormattedInput matches snapshot with escaped value 1`] = `
+<div
+  class="formatted-input"
+>
+  <div
+    class="bp3-input-group"
+  >
+    <input
+      class="bp3-input"
+      type="text"
+      value="Here are some chars \\\\t\\\\r\\\\n lol"
+    />
+  </div>
+</div>
+`;

web-console/src/components/formatted-input/formatted-input.scss

@@ -0,0 +1,29 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.formatted-input {
+  position: relative;
+
+  & > .bp3-popover2-target {
+    position: absolute;
+    width: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+}

web-console/src/components/formatted-input-group/formatted-input-group.spec.tsx → web-console/src/components/formatted-input/formatted-input.spec.tsx

@@ -21,12 +21,12 @@ import React from 'react';
 
 import { JSON_STRING_FORMATTER } from '../../utils';
 
-import { FormattedInputGroup } from './formatted-input-group';
+import { FormattedInput } from './formatted-input';
 
-describe('FormattedInputGroup', () => {
+describe('FormattedInput', () => {
   it('matches snapshot on undefined value', () => {
     const suggestibleInput = (
-      <FormattedInputGroup onValueChange={() => {}} formatter={JSON_STRING_FORMATTER} />
+      <FormattedInput onValueChange={() => {}} formatter={JSON_STRING_FORMATTER} />
     );
 
     const { container } = render(suggestibleInput);
@@ -35,7 +35,7 @@ describe('FormattedInputGroup', () => {
 
   it('matches snapshot with escaped value', () => {
     const suggestibleInput = (
-      <FormattedInputGroup
+      <FormattedInput
         value={`Here are some chars \t\r\n lol`}
         onValueChange={() => {}}
         formatter={JSON_STRING_FORMATTER}

web-console/src/components/formatted-input/formatted-input.tsx

@@ -0,0 +1,107 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { InputGroup, InputGroupProps2, Intent } from '@blueprintjs/core';
+import { Tooltip2 } from '@blueprintjs/popover2';
+import classNames from 'classnames';
+import React, { useState } from 'react';
+
+import { Formatter } from '../../utils';
+
+import './formatted-input.scss';
+
+export interface FormattedInputProps extends InputGroupProps2 {
+  formatter: Formatter<any>;
+  onValueChange: (newValue: undefined | string) => void;
+  sanitizer?: (rawValue: string) => string;
+  issueWithValue?: (value: any) => string | undefined;
+}
+
+export const FormattedInput = React.memo(function FormattedInput(props: FormattedInputProps) {
+  const {
+    className,
+    formatter,
+    sanitizer,
+    issueWithValue,
+    value,
+    defaultValue,
+    onValueChange,
+    onFocus,
+    onBlur,
+    intent,
+    ...rest
+  } = props;
+
+  const [intermediateValue, setIntermediateValue] = useState<string | undefined>();
+  const [isFocused, setIsFocused] = useState(false);
+
+  const issue: string | undefined = issueWithValue?.(value);
+  const showIssue = Boolean(!isFocused && issue);
+
+  return (
+    <div className={classNames('formatted-input', className)}>
+      <InputGroup
+        value={
+          typeof intermediateValue !== 'undefined'
+            ? intermediateValue
+            : typeof value !== 'undefined'
+            ? formatter.stringify(value)
+            : undefined
+        }
+        defaultValue={
+          typeof defaultValue !== 'undefined' ? formatter.stringify(defaultValue) : undefined
+        }
+        onChange={e => {
+          let rawValue = e.target.value;
+          if (sanitizer) rawValue = sanitizer(rawValue);
+          setIntermediateValue(rawValue);
+
+          let parsedValue: string | undefined;
+          try {
+            parsedValue = formatter.parse(rawValue);
+          } catch {
+            return;
+          }
+          onValueChange(parsedValue);
+        }}
+        onFocus={e => {
+          setIsFocused(true);
+          onFocus?.(e);
+        }}
+        onBlur={e => {
+          setIntermediateValue(undefined);
+          setIsFocused(false);
+          onBlur?.(e);
+        }}
+        intent={showIssue ? Intent.DANGER : intent}
+        {...rest}
+      />
+      {showIssue && (
+        <Tooltip2
+          isOpen
+          content={showIssue ? issue : undefined}
+          position="right"
+          intent={Intent.DANGER}
+          targetTagName="div"
+        >
+          <div className="target-dummy" />
+        </Tooltip2>
+      )}
+    </div>
+  );
+});

web-console/src/components/index.ts

@@ -25,7 +25,7 @@ export * from './center-message/center-message';
 export * from './clearable-input/clearable-input';
 export * from './external-link/external-link';
 export * from './form-json-selector/form-json-selector';
-export * from './formatted-input-group/formatted-input-group';
+export * from './formatted-input/formatted-input';
 export * from './header-bar/header-bar';
 export * from './highlight-text/highlight-text';
 export * from './json-collapse/json-collapse';