diff --git a/.betterer.results b/.betterer.results index d160169ff8c..cf0dab6b1da 100644 --- a/.betterer.results +++ b/.betterer.results @@ -533,9 +533,6 @@ exports[`better eslint`] = { "packages/grafana-sql/src/components/query-editor-raw/QueryToolbox.tsx:5381": [ [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"] ], - "packages/grafana-sql/src/components/visual-query-builder/AwesomeQueryBuilder.tsx:5381": [ - [0, 0, 0, "Unexpected any. Specify a different type.", "0"] - ], "packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] diff --git a/package.json b/package.json index 2d04f81fdc0..4d7e226a12b 100644 --- a/package.json +++ b/package.json @@ -301,7 +301,7 @@ "@react-aria/focus": "3.19.1", "@react-aria/overlays": "3.25.0", "@react-aria/utils": "3.27.0", - "@react-awesome-query-builder/ui": "6.6.4", + "@react-awesome-query-builder/ui": "6.6.13", "@reduxjs/toolkit": "2.5.1", "@visx/event": "3.12.0", "@visx/gradient": "3.12.0", diff --git a/packages/grafana-sql/package.json b/packages/grafana-sql/package.json index 3c217f75312..f9f4a0e4069 100644 --- a/packages/grafana-sql/package.json +++ b/packages/grafana-sql/package.json @@ -20,7 +20,7 @@ "@grafana/plugin-ui": "0.10.1", "@grafana/runtime": "12.0.0-pre", "@grafana/ui": "12.0.0-pre", - "@react-awesome-query-builder/ui": "6.6.4", + "@react-awesome-query-builder/ui": "6.6.13", "immutable": "5.0.3", "lodash": "4.17.21", "react": "18.3.1", diff --git a/packages/grafana-sql/src/components/visual-query-builder/AwesomeQueryBuilder.tsx b/packages/grafana-sql/src/components/visual-query-builder/AwesomeQueryBuilder.tsx index 857eafb4afd..9fab4cdb9f3 100644 --- a/packages/grafana-sql/src/components/visual-query-builder/AwesomeQueryBuilder.tsx +++ b/packages/grafana-sql/src/components/visual-query-builder/AwesomeQueryBuilder.tsx @@ -1,17 +1,18 @@ import { + BaseOperator, BasicConfig, Config, + Field, + ImmutableList, JsonTree, Operator, OperatorOptionsI, Settings, - SimpleField, - SqlFormatOperator, Utils, ValueSource, + WidgetProps, Widgets, } from '@react-awesome-query-builder/ui'; -import { List } from 'immutable'; import { isString } from 'lodash'; import { dateTime, toOption } from '@grafana/data'; @@ -37,7 +38,7 @@ export const widgets: Widgets = { ...BasicConfig.widgets, text: { ...BasicConfig.widgets.text, - factory: function TextInput(props) { + factory: function TextInput(props: WidgetProps) { return ( ''; -const isSqlFormatOp = (func: unknown): func is SqlFormatOperator => { - return typeof func === 'function'; -}; - function getCustomOperators(config: BasicConfig) { const { ...supportedOperators } = config.operators; // IN operator expects array, override IN formatter for multi-value variables - const sqlFormatInOpOrNoop = () => { - const sqlFormatOp = supportedOperators[Op.IN].sqlFormatOp; - if (isSqlFormatOp(sqlFormatOp)) { - return sqlFormatOp; - } - return noop; - }; - + const sqlFormatInOp = supportedOperators[Op.IN].sqlFormatOp?.bind(config.ctx) || noop; const customSqlInFormatter = ( field: string, op: string, - value: string | List, - valueSrc: ValueSource, - valueType: string, - opDef: Operator, - operatorOptions: OperatorOptionsI, - fieldDef: SimpleField + value: string | string[] | ImmutableList, + valueSrc: ValueSource | undefined, + valueType: string | undefined, + opDef: Operator | undefined, + operatorOptions: OperatorOptionsI | undefined, + fieldDef: Field | undefined ) => { - return sqlFormatInOpOrNoop()( - field, - op, - splitIfString(value), - valueSrc, - valueType, - opDef, - operatorOptions, - fieldDef - ); + return sqlFormatInOp(field, op, splitIfString(value), valueSrc, valueType, opDef, operatorOptions, fieldDef); }; + // NOT IN operator expects array, override NOT IN formatter for multi-value variables - const sqlFormatNotInOpOrNoop = () => { - const sqlFormatOp = supportedOperators[Op.NOT_IN].sqlFormatOp; - if (isSqlFormatOp(sqlFormatOp)) { - return sqlFormatOp; - } - return noop; - }; + const sqlFormatNotInOp = supportedOperators[Op.NOT_IN].sqlFormatOp?.bind(config.ctx) || noop; const customSqlNotInFormatter = ( field: string, op: string, - value: string | List, - valueSrc: ValueSource, - valueType: string, - opDef: Operator, - operatorOptions: OperatorOptionsI, - fieldDef: SimpleField + value: string | string[] | ImmutableList, + valueSrc: ValueSource | undefined, + valueType: string | undefined, + opDef: Operator | undefined, + operatorOptions: OperatorOptionsI | undefined, + fieldDef: Field | undefined ) => { - return sqlFormatNotInOpOrNoop()( - field, - op, - splitIfString(value), - valueSrc, - valueType, - opDef, - operatorOptions, - fieldDef - ); + return sqlFormatNotInOp(field, op, splitIfString(value), valueSrc, valueType, opDef, operatorOptions, fieldDef); }; - const customOperators = { + const customOperators: Record = { ...supportedOperators, [Op.IN]: { ...supportedOperators[Op.IN], @@ -318,11 +285,11 @@ function getCustomOperators(config: BasicConfig) { }, [Op.MACROS]: { label: 'Macros', - sqlFormatOp: (field: string, _operator: string, value: string | List) => { + sqlFormatOp: (field: string, _operator: string, value: string | string[] | ImmutableList) => { if (value === TIME_FILTER) { return `$__timeFilter(${field})`; } - return value; + throw new Error('Invalid macro'); }, }, }; @@ -331,7 +298,7 @@ function getCustomOperators(config: BasicConfig) { } // value: string | List but AQB uses a different version of Immutable -function splitIfString(value: any) { +function splitIfString(value: string | string[] | ImmutableList) { if (isString(value)) { return value.split(','); } diff --git a/yarn.lock b/yarn.lock index b187d3c91e8..9e0701d955e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3555,7 +3555,7 @@ __metadata: "@grafana/runtime": "npm:12.0.0-pre" "@grafana/tsconfig": "npm:^2.0.0" "@grafana/ui": "npm:12.0.0-pre" - "@react-awesome-query-builder/ui": "npm:6.6.4" + "@react-awesome-query-builder/ui": "npm:6.6.13" "@testing-library/dom": "npm:10.4.0" "@testing-library/jest-dom": "npm:^6.1.2" "@testing-library/react": "npm:16.2.0" @@ -6434,9 +6434,9 @@ __metadata: languageName: node linkType: hard -"@react-awesome-query-builder/core@npm:^6.6.4": - version: 6.6.4 - resolution: "@react-awesome-query-builder/core@npm:6.6.4" +"@react-awesome-query-builder/core@npm:^6.6.13": + version: 6.6.13 + resolution: "@react-awesome-query-builder/core@npm:6.6.13" dependencies: "@babel/runtime": "npm:^7.24.5" clone: "npm:^2.1.2" @@ -6447,15 +6447,15 @@ __metadata: moment: "npm:^2.30.1" spel2js: "npm:^0.2.8" sqlstring: "npm:^2.3.3" - checksum: 10/bd0299a5ae7db3ae69c21fc631500d52c679cda8d9b64122ecc86dedb9f0ebb7c3f6fc98c33621f8f34727b3c7c84774b3f2099e75ed7a38bde068c7dcb0730e + checksum: 10/65fdc8f0574e8e81db8db98239852097aa407898c2d7bb2f32280baf9530faee94b2f78ada7273a048eb4cde1d5f9e60233669c63496e09e42f5c81cea5beab7 languageName: node linkType: hard -"@react-awesome-query-builder/ui@npm:6.6.4": - version: 6.6.4 - resolution: "@react-awesome-query-builder/ui@npm:6.6.4" +"@react-awesome-query-builder/ui@npm:6.6.13": + version: 6.6.13 + resolution: "@react-awesome-query-builder/ui@npm:6.6.13" dependencies: - "@react-awesome-query-builder/core": "npm:^6.6.4" + "@react-awesome-query-builder/core": "npm:^6.6.13" classnames: "npm:^2.5.1" lodash: "npm:^4.17.21" prop-types: "npm:^15.8.1" @@ -6464,7 +6464,7 @@ __metadata: peerDependencies: react: ^16.8.4 || ^17.0.1 || ^18.0.0 react-dom: ^16.8.4 || ^17.0.1 || ^18.0.0 - checksum: 10/f376a30397ca28b5064079da25577a0e8ff98e7025c3b163f84dc351bb6c4a9474fa807ec4f107e51aaff085aa9392412ca497c2c949ca6c3cf828ae76a18718 + checksum: 10/c139f76ee13326bc5e2c97779a9899240231a8fc2071f84ca3f7378b975196d7326a914dce0943d9b3856973272ec6d5607c4abdbd9b4e845df4cef0e414fcf0 languageName: node linkType: hard @@ -17723,7 +17723,7 @@ __metadata: "@react-aria/focus": "npm:3.19.1" "@react-aria/overlays": "npm:3.25.0" "@react-aria/utils": "npm:3.27.0" - "@react-awesome-query-builder/ui": "npm:6.6.4" + "@react-awesome-query-builder/ui": "npm:6.6.13" "@react-types/button": "npm:3.10.2" "@react-types/menu": "npm:3.9.14" "@react-types/overlays": "npm:3.8.12"