replace grafana/experimental with grafana/plugin-ui

package.json

@@ -29,8 +29,8 @@
   "dependencies": {
     "@emotion/css": "11.10.6",
     "@grafana/data": "10.4.2",
-    "@grafana/experimental": "1.7.3",
     "@grafana/google-sdk": "0.1.2",
+    "@grafana/plugin-ui": "^0.9.2",
     "@grafana/runtime": "10.4.2",
     "@grafana/schema": "10.4.2",
     "@grafana/ui": "10.4.2",

src/components/ConfigEditor.tsx

@@ -10,7 +10,7 @@ import React from 'react';
 import { PROCESSING_LOCATIONS } from '../constants';
 import { BigQueryOptions, BigQuerySecureJsonData } from '../types';
 import { ConfigurationHelp } from './/ConfigurationHelp';
-import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
+import { ConfigSection, DataSourceDescription } from '@grafana/plugin-ui';
 import { Divider } from './Divider';
 
 export type BigQueryConfigEditorProps = DataSourcePluginOptionsEditorProps<BigQueryOptions, BigQuerySecureJsonData>;

src/components/ProjectSelector.tsx

@@ -1,5 +1,5 @@
 import { SelectableValue } from '@grafana/data';
-import { EditorField } from '@grafana/experimental';
+import { EditorField } from '@grafana/plugin-ui';
 import { Select, useTheme2 } from '@grafana/ui';
 import React, { useEffect } from 'react';
 import { css } from '@emotion/css';

src/components/QueryEditor.tsx

@@ -1,5 +1,5 @@
 import { QueryEditorProps } from '@grafana/data';
-import { EditorMode, Space } from '@grafana/experimental';
+import { EditorMode, Space } from '@grafana/plugin-ui';
 import { RawEditor } from 'components/query-editor-raw/RawEditor';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useAsync } from 'react-use';

src/components/QueryHeader.tsx

@@ -1,5 +1,5 @@
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorHeader, EditorMode, EditorRow, FlexItem, InlineSelect, Space } from '@grafana/experimental';
+import { EditorHeader, EditorMode, EditorRow, FlexItem, InlineSelect, Space, EditorField } from '@grafana/plugin-ui';
 import { Button, InlineSwitch, RadioButtonGroup, Tooltip } from '@grafana/ui';
 import { BigQueryAPI } from 'api';
 import React, { useCallback, useId, useState } from 'react';

src/components/query-editor-raw/QueryEditorRaw.tsx

@@ -1,4 +1,4 @@
-import { ColumnDefinition, SQLEditor, TableDefinition } from '@grafana/experimental';
+import { ColumnDefinition, SQLEditor, TableDefinition } from '@grafana/plugin-ui';
 import { TableSchema } from 'api';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { BigQueryQueryNG } from '../../types';

src/components/query-editor-raw/bigQueryOperators.ts

@@ -1,4 +1,4 @@
-import { OperatorType } from '@grafana/experimental';
+import { OperatorType } from '@grafana/plugin-ui';
 
 export const BQ_OPERATORS = [
   { type: OperatorType.Comparison, id: 'LESS_THAN', operator: '<', description: 'Returns TRUE if X is less than Y.' },

src/components/query-editor-raw/bigqueryCompletionProvider.test.ts

@@ -1,4 +1,4 @@
-import { SQLEditorTestUtils } from '@grafana/experimental';
+import { SQLEditorTestUtils } from '@grafana/plugin-ui';
 import { CustomStatementPlacement, customStatementPlacement, getTablePath } from './bigqueryCompletionProvider';
 import { simpleBigQueryQuery } from './testData/simpleBigQueryQuery';
 

src/components/query-editor-raw/bigqueryCompletionProvider.ts

@@ -11,7 +11,7 @@ import {
   TableDefinition,
   TableIdentifier,
   TokenType,
-} from '@grafana/experimental';
+} from '@grafana/plugin-ui';
 import { PartitioningType, TableSchema } from 'api';
 import { BQ_AGGREGATE_FNS } from './bigQueryFunctions';
 import { BQ_OPERATORS } from './bigQueryOperators';

src/components/query-editor-raw/macros.ts

@@ -1,4 +1,4 @@
-import { MacroType } from '@grafana/experimental';
+import { MacroType } from '@grafana/plugin-ui';
 
 export const MACROS = [
   {

src/components/query-editor-raw/testData/simpleBigQueryQuery.ts

@@ -1,4 +1,4 @@
-import { TestQueryModel } from '@grafana/experimental';
+import { TestQueryModel } from '@grafana/plugin-ui';
 
 export const simpleBigQueryQuery: TestQueryModel = {
   query: 'SELECT block_id FROM raintank-dev.bitcoin_blockchain.blocks LIMIT 10;',

src/components/visual-query-builder/SQLGroupByRow.tsx

@@ -1,5 +1,5 @@
 import { SelectableValue } from '@grafana/data';
-import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
+import { AccessoryButton, EditorList, InputGroup } from '@grafana/plugin-ui';
 import { Select } from '@grafana/ui';
 import { QueryEditorExpressionType, QueryEditorGroupByExpression } from 'expressions';
 import React, { useCallback } from 'react';

src/components/visual-query-builder/SQLOrderByRow.tsx

@@ -1,5 +1,5 @@
 import { SelectableValue } from '@grafana/data';
-import { EditorField, InputGroup, Space } from '@grafana/experimental';
+import { InputGroup, Space, EditorField } from '@grafana/plugin-ui';
 import { Select, Input, RadioButtonGroup } from '@grafana/ui';
 import { uniqueId } from 'lodash';
 import React, { useCallback } from 'react';

src/components/visual-query-builder/SQLSelectRow.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { SelectableValue } from '@grafana/data';
-import { EditorField, Stack } from '@grafana/experimental';
-import { useStyles2, Select, Button } from '@grafana/ui';
+import { EditorField } from '@grafana/plugin-ui';
+import { useStyles2, Select, Button, Stack } from '@grafana/ui';
 import { QueryEditorExpressionType, QueryEditorFunctionExpression } from 'expressions';
 import { uniqueId } from 'lodash';
 import React, { useCallback } from 'react';
@@ -78,7 +78,7 @@ export function SQLSelectRow({ sql, columns, onSqlChange }: SQLSelectRowProps) {
   }, [onSqlChange, sql]);
 
   return (
-    <Stack gap={2} alignItems="end" wrap direction="column">
+    <Stack gap={2} alignItems="end" wrap="wrap" direction="column">
       {sql.columns?.map((item, index) => (
         <div key={index}>
           <Stack gap={2} alignItems="end">

src/components/visual-query-builder/VisualEditor.tsx

@@ -6,7 +6,7 @@ import { BQWhereRow } from './BQWhereRow';
 import { Preview } from './Preview';
 import { BQGroupByRow } from './BQGroupByRow';
 import { QueryToolbox } from 'components/query-editor-raw/QueryToolbox';
-import { EditorRows, EditorRow, EditorField } from '@grafana/experimental';
+import { EditorRows, EditorRow, EditorField } from '@grafana/plugin-ui';
 
 interface VisualEditorProps extends QueryEditorProps {
   queryRowFilter: QueryRowFilter;

src/datasource.ts

@@ -5,7 +5,7 @@
   ScopedVars,
   VariableSupportType,
 } from '@grafana/data';
-import { EditorMode } from '@grafana/experimental';
+import { EditorMode } from '@grafana/plugin-ui';
 import { GoogleAuthType } from '@grafana/google-sdk';
 import { DataSourceWithBackend, getTemplateSrv } from '@grafana/runtime';
 import { getApiClient } from 'api';
@@ -46,7 +46,7 @@
     return true;
   }
 
   async importQueries(queries: DataQuery[]) {
     const importedQueries = [];
 
     for (let i = 0; i < queries.length; i++) {

src/types.ts

@@ -1,5 +1,5 @@
 import { DataQuery, TimeRange } from '@grafana/data';
-import { EditorMode } from '@grafana/experimental';
+import { EditorMode } from '@grafana/plugin-ui';
 import { DataSourceOptions, DataSourceSecureJsonData } from '@grafana/google-sdk';
 import { JsonTree } from '@react-awesome-query-builder/ui';
 import { BigQueryAPI } from 'api';
@@ -43,7 +43,7 @@
   Table = 1,
 }
 
 export interface QueryModel extends DataQuery {
   rawSql: string;
   format: QueryFormat;
   connectionArgs: {
@@ -72,7 +72,7 @@
   className?: string;
   applyDefault?: boolean;
 }
 export interface BigQueryQueryNG extends DataQuery {
   dataset?: string;
   table?: string;
   project?: string;

src/utils.test.ts

@@ -1,4 +1,4 @@
-import { EditorMode } from '@grafana/experimental';
+import { EditorMode } from '@grafana/plugin-ui';
 import { QueryFormat } from 'types';
 import { applyQueryDefaults, extractFromClause, findTimeField, formatBigqueryError, getShiftPeriod } from 'utils';
 

src/utils.ts

@@ -21,7 +21,7 @@
 // SOFTWARE.
 
 import { DataQueryRequest, dateTime, DurationUnit } from '@grafana/data';
-import { EditorMode } from '@grafana/experimental';
+import { EditorMode } from '@grafana/plugin-ui';
 import { BigQueryAPI } from 'api';
 import { BigQueryDatasource } from 'datasource';
 import SqlParser from 'sql_parser';
@@ -50,7 +50,7 @@
 
 export function getShiftPeriod(strInterval: string): [DurationUnit, string] {
   const shift = strInterval.match(/\d+/)![0];
   strInterval = strInterval.substr(shift.length, strInterval.length);
 
   if (strInterval.trim() === 'min') {
     strInterval = 'm';
@@ -156,11 +156,11 @@
   if (q.indexOf('AND _PARTITIONTIME <') < 1) {
     return q;
   }
   const from = q.substr(q.indexOf('AND _PARTITIONTIME >= ') + 22, 21);
 
   const newFrom = "'" + formatDateToString(options.range.from.toDate(), '-', true) + "'";
   q = q.replace(from, newFrom);
   const to = q.substr(q.indexOf('AND _PARTITIONTIME < ') + 21, 21);
   const newTo = "'" + formatDateToString(options.range.to.toDate(), '-', true) + "'";
 
   q = q.replace(to, newTo) + '\n ';
@@ -172,11 +172,11 @@
   if (ind < 1) {
     return q;
   }
   const from = q.substr(ind + 28, 8);
 
   const newFrom = formatDateToString(options.range.from.toDate());
   q = q.replace(from, newFrom);
   const to = q.substr(ind + 43, 8);
   const newTo = formatDateToString(options.range.to.toDate());
   q = q.replace(to, newTo) + '\n ';
   return q;
@@ -215,7 +215,7 @@
   // create the format you want
   let dateStr = YYYY + separator + MM + separator + DD;
   if (addTime === true) {
     dateStr += ' ' + date.toTimeString().substr(0, 8);
   }
   return dateStr;
 }