Tempo, Pyroscope and tracing: Replace deprecated @grafana/experimental with @grafana/plugin-ui (#99671)

* Tempo: Replace deprecated @grafana/experimental with @grafana/plugin-ui

* Add also pyroscope and tracing features

* align version of package with main

public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFiltersTags.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useMount } from 'react-use';
 
 import { GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton } from '@grafana/experimental';
+import { AccessoryButton } from '@grafana/plugin-ui';
 import { Input, Select, Stack, useStyles2 } from '@grafana/ui';
 
 import { randomId, SearchProps, Tag } from '../../../useSearch';

public/app/features/explore/TraceView/components/settings/SpanBarSettings.tsx

@@ -7,7 +7,7 @@ import {
   toOption,
   updateDatasourcePluginJsonDataOption,
 } from '@grafana/data';
-import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/experimental';
+import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/plugin-ui';
 import { InlineField, InlineFieldRow, Input, Select, useStyles2 } from '@grafana/ui';
 
 export interface SpanBarOptions {

public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx

@@ -9,7 +9,7 @@ import {
   ConnectionSettings,
   DataSourceDescription,
   convertLegacyAuthProps,
-} from '@grafana/experimental';
+} from '@grafana/plugin-ui';
 import { config } from '@grafana/runtime';
 import {
   Divider,

public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.tsx

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { AccessoryButton } from '@grafana/experimental';
+import { AccessoryButton } from '@grafana/plugin-ui';
 import { Alert, HorizontalGroup, InputActionMeta, Select, useStyles2 } from '@grafana/ui';
 
 import { TraceqlFilter, TraceqlSearchScope } from '../dataquery.gen';

public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { AccessoryButton } from '@grafana/experimental';
+import { AccessoryButton } from '@grafana/plugin-ui';
 import { FetchError } from '@grafana/runtime';
 import { useStyles2 } from '@grafana/ui';
 

public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx

@@ -1,6 +1,13 @@
 import { css } from '@emotion/css';
 
 import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
+import {
+  NodeGraphSection,
+  SpanBarSection,
+  TraceToLogsSection,
+  TraceToMetricsSection,
+  TraceToProfilesSection,
+} from '@grafana/o11y-ds-frontend';
 import {
   AdvancedHttpSettings,
   Auth,
@@ -10,14 +17,7 @@ import {
   ConnectionSettings,
   convertLegacyAuthProps,
   DataSourceDescription,
-} from '@grafana/experimental';
-import {
-  NodeGraphSection,
-  SpanBarSection,
-  TraceToLogsSection,
-  TraceToMetricsSection,
-  TraceToProfilesSection,
-} from '@grafana/o11y-ds-frontend';
+} from '@grafana/plugin-ui';
 import { config } from '@grafana/runtime';
 import { SecureSocksProxySettings, useStyles2, Divider, Stack } from '@grafana/ui';
 

public/app/plugins/datasource/tempo/configuration/StreamingSection.tsx

@@ -7,7 +7,7 @@ import {
   GrafanaTheme2,
   updateDatasourcePluginJsonDataOption,
 } from '@grafana/data';
-import { ConfigSection } from '@grafana/experimental';
+import { ConfigSection } from '@grafana/plugin-ui';
 import { InlineFieldRow, InlineField, InlineSwitch, Alert, Stack, useStyles2 } from '@grafana/ui';
 
 import { FeatureName, featuresToTempoVersion } from '../datasource';

public/app/plugins/datasource/tempo/configuration/TagLimitSettings.tsx

@@ -6,7 +6,7 @@ import {
   GrafanaTheme2,
   updateDatasourcePluginJsonDataOption,
 } from '@grafana/data';
-import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/experimental';
+import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/plugin-ui';
 import { InlineField, InlineFieldRow, Input, useStyles2 } from '@grafana/ui';
 
 export interface TagLimitOptions extends DataSourceJsonData {

public/app/plugins/datasource/tempo/package.json

@@ -7,11 +7,11 @@
     "@emotion/css": "11.13.5",
     "@grafana/data": "workspace:*",
     "@grafana/e2e-selectors": "workspace:*",
-    "@grafana/experimental": "2.1.6",
     "@grafana/lezer-logql": "0.2.6",
     "@grafana/lezer-traceql": "0.0.20",
     "@grafana/monaco-logql": "^0.0.8",
     "@grafana/o11y-ds-frontend": "workspace:*",
+    "@grafana/plugin-ui": "0.10.1",
     "@grafana/runtime": "workspace:*",
     "@grafana/schema": "workspace:*",
     "@grafana/ui": "workspace:*",

public/app/plugins/datasource/tempo/traceql/TempoQueryBuilderOptions.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { EditorField, EditorRow } from '@grafana/experimental';
+import { EditorField, EditorRow } from '@grafana/plugin-ui';
 import { AutoSizeInput, RadioButtonGroup, useStyles2 } from '@grafana/ui';
 
 import { QueryOptionGroup } from '../_importedDependencies/datasources/prometheus/QueryOptionGroup';

yarn.lock

@@ -3043,12 +3043,12 @@ __metadata:
     "@emotion/css": "npm:11.13.5"
     "@grafana/data": "workspace:*"
     "@grafana/e2e-selectors": "workspace:*"
-    "@grafana/experimental": "npm:2.1.6"
     "@grafana/lezer-logql": "npm:0.2.6"
     "@grafana/lezer-traceql": "npm:0.0.20"
     "@grafana/monaco-logql": "npm:^0.0.8"
     "@grafana/o11y-ds-frontend": "workspace:*"
     "@grafana/plugin-configs": "npm:11.5.0-pre"
+    "@grafana/plugin-ui": "npm:0.10.1"
     "@grafana/runtime": "workspace:*"
     "@grafana/schema": "workspace:*"
     "@grafana/ui": "workspace:*"