replace grafana/experimental with grafana/plugin-ui (#305)

* replace grafana/experimental with grafana/plugin-ui

* Remove experimental and use EditorField from plugin-ui

* Rever label name

---------

Co-authored-by: Ivana Huckova <ivana.huckova@gmail.com>

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 @@ import {
   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';

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';

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';