Merge pull request #1922 from grafana/ivana/deprecate-experimental

Replace `@grafana/experimental` with `@grafana/plugin-ui`

Author: ivanahuckova

package.json

@@ -31,13 +31,13 @@
   "dependencies": {
     "@emotion/css": "11.10.6",
     "@grafana/data": "10.4.2",
-    "@grafana/experimental": "^1.7.4",
+    "@grafana/plugin-ui": "^0.9.1",
     "@grafana/runtime": "10.4.2",
     "@grafana/schema": "10.4.2",
     "@grafana/ui": "10.4.2",
+    "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "^5.2.0",
-    "react": "18.2.0",
     "rxjs": "7.8.1",
     "tslib": "2.5.3"
   },
@@ -64,42 +64,42 @@
     "copy-webpack-plugin": "^11.0.0",
     "cspell": "6.13.3",
     "css-loader": "^6.7.3",
+    "eslint": "8.42.0",
     "eslint-plugin-deprecation": "^2.0.0",
     "eslint-plugin-jsdoc": "^46.8.2",
     "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-webpack-plugin": "^4.0.1",
-    "eslint": "8.42.0",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "glob": "^10.2.7",
     "identity-obj-proxy": "3.0.0",
-    "jest-environment-jsdom": "^29.5.0",
     "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "lodash": "4.17.21",
     "mini-css-extract-plugin": "2.6.1",
     "moment": "2.29.4",
+    "postcss": "8.4.31",
     "postcss-loader": "7.0.1",
     "postcss-reporter": "7.0.5",
     "postcss-scss": "4.0.4",
-    "postcss": "8.4.31",
     "prettier": "^3.0.3",
     "prop-types": "15.7.2",
     "react-table-6": "6.11.0",
     "react-use": "17.4.0",
     "replace-in-file-webpack-plugin": "^1.0.6",
-    "sass-loader": "13.3.1",
     "sass": "1.63.2",
+    "sass-loader": "13.3.1",
     "semver": "7.5.4",
     "style-loader": "3.3.3",
     "swc-loader": "^0.2.3",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.2.0",
     "typescript": "4.8.4",
+    "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
     "webpack-livereload-plugin": "^3.0.2",
-    "webpack-remove-empty-scripts": "^1.0.1",
-    "webpack": "^5.94.0"
+    "webpack-remove-empty-scripts": "^1.0.1"
   },
   "resolutions": {
     "uplot": "1.6.31",

src/datasource/components/ConfigEditor.tsx

@@ -19,12 +19,12 @@ import {
   Auth,
   ConfigSection,
   ConfigSubSection,
-  Stack,
+  EditorStack,
   convertLegacyAuthProps,
   ConnectionSettings,
   DataSourceDescription,
   AdvancedHttpSettings,
-} from '@grafana/experimental';
+} from '@grafana/plugin-ui';
 import { Divider } from './Divider';
 import { css } from '@emotion/css';
 
@@ -185,7 +185,7 @@ export const ConfigEditor = (props: Props) => {
           <Field
             label={
               <Label>
-                <Stack gap={0.5}>
+                <EditorStack gap={0.5}>
                   <span>Cache TTL</span>
                   <Tooltip
                     content={
@@ -196,7 +196,7 @@ export const ConfigEditor = (props: Props) => {
                   >
                     <Icon name="info-circle" size="sm" />
                   </Tooltip>
-                </Stack>
+                </EditorStack>
               </Label>
             }
           >
@@ -211,12 +211,12 @@ export const ConfigEditor = (props: Props) => {
           <Field
             label={
               <Label>
-                <Stack gap={0.5}>
+                <EditorStack gap={0.5}>
                   <span>Timeout</span>
                   <Tooltip content={<span>Zabbix API connection timeout in seconds. Default is 30.</span>}>
                     <Icon name="info-circle" size="sm" />
                   </Tooltip>
-                </Stack>
+                </EditorStack>
               </Label>
             }
           >
@@ -248,7 +248,7 @@ export const ConfigEditor = (props: Props) => {
               <Field
                 label={
                   <Label>
-                    <Stack gap={0.5}>
+                    <EditorStack gap={0.5}>
                       <span>After</span>
                       <Tooltip
                         content={
@@ -260,7 +260,7 @@ export const ConfigEditor = (props: Props) => {
                       >
                         <Icon name="info-circle" size="sm" />
                       </Tooltip>
-                    </Stack>
+                    </EditorStack>
                   </Label>
                 }
               >
@@ -274,7 +274,7 @@ export const ConfigEditor = (props: Props) => {
               <Field
                 label={
                   <Label>
-                    <Stack gap={0.5}>
+                    <EditorStack gap={0.5}>
                       <span>Range</span>
                       <Tooltip
                         content={
@@ -286,7 +286,7 @@ export const ConfigEditor = (props: Props) => {
                       >
                         <Icon name="info-circle" size="sm" />
                       </Tooltip>
-                    </Stack>
+                    </EditorStack>
                   </Label>
                 }
               >
@@ -353,7 +353,7 @@ export const ConfigEditor = (props: Props) => {
           <Field
             label={
               <Label>
-                <Stack gap={0.5}>
+                <EditorStack gap={0.5}>
                   <span>Disable data alignment</span>
                   <Tooltip
                     content={
@@ -368,7 +368,7 @@ export const ConfigEditor = (props: Props) => {
                   >
                     <Icon name="info-circle" size="sm" />
                   </Tooltip>
-                </Stack>
+                </EditorStack>
               </Label>
             }
           >