(Backport #14540) Web console: catchup to all the backend changes

licenses.yaml

@@ -5358,6 +5358,15 @@ version: 4.9.22
 
 ---
 
+name: "@druid-toolkit/query"
+license_category: binary
+module: web-console
+license_name: Apache License version 2.0
+copyright: Imply Data
+version: 0.20.5
+
+---
+
 name: "@emotion/cache"
 license_category: binary
 module: web-console
@@ -5926,15 +5935,6 @@ license_file_path: licenses/bin/dot-case.MIT
 
 ---
 
-name: "druid-query-toolkit"
-license_category: binary
-module: web-console
-license_name: Apache License version 2.0
-copyright: Imply Data
-version: 0.18.12
-
----
-
 name: "emotion"
 license_category: binary
 module: web-console

web-console/e2e-tests/tutorial-batch.spec.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { T } from 'druid-query-toolkit';
+import { T } from '@druid-toolkit/query';
 import type * as playwright from 'playwright-chromium';
 
 import { DatasourcesOverview } from './component/datasources/overview';

web-console/package.json

@@ -68,6 +68,7 @@
     "@blueprintjs/datetime2": "^0.9.35",
     "@blueprintjs/icons": "^4.16.0",
     "@blueprintjs/popover2": "^1.14.9",
+    "@druid-toolkit/query": "^0.20.5",
     "ace-builds": "~1.4.14",
     "axios": "^0.26.1",
     "classnames": "^2.2.6",
@@ -77,7 +78,6 @@
     "d3-axis": "^2.1.0",
     "d3-scale": "^3.3.0",
     "d3-selection": "^2.0.0",
-    "druid-query-toolkit": "^0.18.12",
     "file-saver": "^2.0.2",
     "follow-redirects": "^1.14.7",
     "fontsource-open-sans": "^3.0.9",

web-console/src/bootstrap/json-parser.tsx

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { QueryResult } from 'druid-query-toolkit';
+import { QueryResult } from '@druid-toolkit/query';
 import * as JSONBig from 'json-bigint-native';
 
 export function bootstrapJsonParse() {

web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap

@@ -7,7 +7,7 @@ exports[`AutoForm matches snapshot 1`] = `
   <Memo(FormGroupWithInfo)
     label="Test number"
   >
-    <Memo(NumericInputWithDefault)
+    <Memo(FancyNumericInput)
       disabled={false}
       fill={true}
       min={0}

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

@@ -136,5 +136,26 @@ describe('AutoForm', () => {
         COMPACTION_CONFIG_FIELDS,
       ),
     ).toEqual('field tuningConfig.totalNumMergeTasks is defined but it should not be');
+
+    expect(
+      AutoForm.issueWithModel(
+        {
+          dataSource: 'ds',
+          taskPriority: 25,
+          skipOffsetFromLatest: 'P4D',
+          tuningConfig: {
+            partitionsSpec: {
+              type: 'not_a_know_partition_spec',
+              maxRowsPerSegment: 5000000,
+            },
+            totalNumMergeTasks: 5,
+            type: 'index_parallel',
+            forceGuaranteedRollup: false,
+          },
+          taskContext: null,
+        },
+        COMPACTION_CONFIG_FIELDS,
+      ),
+    ).toBeUndefined();
   });
 });

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

@@ -25,14 +25,15 @@ import {
   NumericInput,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import type { JSX } from 'react';
 import React from 'react';
 
 import { deepDelete, deepGet, deepSet, durationSanitizer } from '../../utils';
 import { ArrayInput } from '../array-input/array-input';
+import { FancyNumericInput } from '../fancy-numeric-input/fancy-numeric-input';
 import { FormGroupWithInfo } from '../form-group-with-info/form-group-with-info';
 import { IntervalInput } from '../interval-input/interval-input';
 import { JsonInput } from '../json-input/json-input';
-import { NumericInputWithDefault } from '../numeric-input-with-default/numeric-input-with-default';
 import { PopoverText } from '../popover-text/popover-text';
 import { SuggestibleInput } from '../suggestible-input/suggestible-input';
 import type { Suggestion } from '../suggestion-menu/suggestion-menu';
@@ -47,6 +48,7 @@ export interface Field<M> {
   info?: React.ReactNode;
   type:
     | 'number'
+    | 'ratio'
     | 'size-bytes'
     | 'string'
     | 'duration'
@@ -64,7 +66,7 @@ export interface Field<M> {
   zeroMeansUndefined?: boolean;
   height?: string;
   disabled?: Functor<M, boolean>;
-  defined?: Functor<M, boolean>;
+  defined?: Functor<M, boolean | undefined>;
   required?: Functor<M, boolean>;
   multiline?: Functor<M, boolean>;
   hide?: Functor<M, boolean>;
@@ -81,6 +83,11 @@ export interface Field<M> {
   }) => JSX.Element;
 }
 
+function toNumberOrUndefined(n: unknown): number | undefined {
+  const r = Number(n);
+  return isNaN(r) ? undefined : r;
+}
+
 interface ComputedFieldValues {
   required: boolean;
   defaultValue?: any;
@@ -155,10 +162,13 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
 
     // Precompute which fields are defined because fields could be defined twice and only one should do the checking
     const definedFields: Record<string, Field<M>> = {};
+    const notDefinedFields: Record<string, Field<M>> = {};
     for (const field of fields) {
       const fieldDefined = AutoForm.evaluateFunctor(field.defined, model, true);
       if (fieldDefined) {
         definedFields[field.name] = field;
+      } else if (fieldDefined === false) {
+        notDefinedFields[field.name] = field;
       }
     }
 
@@ -180,7 +190,7 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
             if (valueIssue) return `field ${field.name} has issue ${valueIssue}`;
           }
         }
-      } else {
+      } else if (notDefinedFields[field.name]) {
         // The field is undefined
         if (fieldValueDefined) {
           return `field ${field.name} is defined but it should not be`;
@@ -249,23 +259,22 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
     const { required, defaultValue, modelValue } = AutoForm.computeFieldValues(model, field);
 
     return (
-      <NumericInputWithDefault
-        value={modelValue}
-        defaultValue={defaultValue}
-        onValueChange={(valueAsNumber: number, valueAsString: string) => {
-          let newValue: number | undefined;
-          if (valueAsString !== '' && !isNaN(valueAsNumber)) {
-            newValue = valueAsNumber === 0 && field.zeroMeansUndefined ? undefined : valueAsNumber;
-          }
-          this.fieldChange(field, newValue);
+      <FancyNumericInput
+        value={toNumberOrUndefined(modelValue)}
+        defaultValue={toNumberOrUndefined(defaultValue)}
+        onValueChange={valueAsNumber => {
+          this.fieldChange(
+            field,
+            valueAsNumber === 0 && field.zeroMeansUndefined ? undefined : valueAsNumber,
+          );
         }}
         onBlur={e => {
           if (e.target.value === '') {
             this.fieldChange(field, undefined);
           }
           if (onFinalize) onFinalize();
         }}
-        min={field.min || 0}
+        min={field.min ?? 0}
         max={field.max}
         fill
         large={large}
@@ -276,6 +285,40 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
     );
   }
 
+  private renderRatioInput(field: Field<T>): JSX.Element {
+    const { model, large, onFinalize } = this.props;
+    const { required, defaultValue, modelValue } = AutoForm.computeFieldValues(model, field);
+
+    return (
+      <FancyNumericInput
+        value={toNumberOrUndefined(modelValue)}
+        defaultValue={toNumberOrUndefined(defaultValue)}
+        onValueChange={valueAsNumber => {
+          this.fieldChange(
+            field,
+            valueAsNumber === 0 && field.zeroMeansUndefined ? undefined : valueAsNumber,
+          );
+        }}
+        onBlur={e => {
+          if (e.target.value === '') {
+            this.fieldChange(field, undefined);
+          }
+          if (onFinalize) onFinalize();
+        }}
+        min={field.min ?? 0}
+        max={field.max ?? 1}
+        minorStepSize={0.001}
+        stepSize={0.01}
+        majorStepSize={0.05}
+        fill
+        large={large}
+        disabled={AutoForm.evaluateFunctor(field.disabled, model, false)}
+        placeholder={AutoForm.evaluateFunctor(field.placeholder, model, '')}
+        intent={required && modelValue == null ? AutoForm.REQUIRED_INTENT : undefined}
+      />
+    );
+  }
+
   private renderSizeBytesInput(field: Field<T>): JSX.Element {
     const { model, large, onFinalize } = this.props;
     const { required, defaultValue, modelValue } = AutoForm.computeFieldValues(model, field);
@@ -445,6 +488,8 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
     switch (field.type) {
       case 'number':
         return this.renderNumberInput(field);
+      case 'ratio':
+        return this.renderRatioInput(field);
       case 'size-bytes':
         return this.renderSizeBytesInput(field);
       case 'string':
@@ -510,7 +555,7 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
     );
   }
 
-  render(): JSX.Element {
+  render() {
     const { fields, model, showCustom } = this.props;
     const { showMore, customDialog } = this.state;
 

web-console/src/components/braced-text/braced-text.tsx

@@ -18,6 +18,7 @@
 
 import classNames from 'classnames';
 import { max } from 'd3-array';
+import type { JSX } from 'react';
 import React, { Fragment } from 'react';
 
 import './braced-text.scss';

web-console/src/components/cell-filter-menu/cell-filter-menu.tsx

@@ -18,8 +18,8 @@
 
 import { Menu, MenuItem } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import type { Column, SqlExpression, SqlQuery } from 'druid-query-toolkit';
-import { C, L, SqlComparison, SqlLiteral, SqlRecord, trimString } from 'druid-query-toolkit';
+import type { Column, SqlExpression, SqlQuery } from '@druid-toolkit/query';
+import { C, L, SqlComparison, SqlLiteral, SqlRecord, trimString } from '@druid-toolkit/query';
 import React from 'react';
 
 import type { QueryAction } from '../../utils';

web-console/src/components/deferred/deferred.tsx

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import type { JSX } from 'react';
 import React from 'react';
 
 export interface DeferredProps {