From 9c9480dd0c8bc6f997db3bb795fb4c4a2ef9c955 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 17 Oct 2022 20:22:14 +0100
Subject: [PATCH] Grafana UI: Export prop types for queryfield, modal and field
 components (#57097) (#57108)

* chore(grafana-ui): export prop types for queryfield, modal and field components

* docs(migration-guide): add notes for react peerdependencies and additional type exposure

* Update docs/sources/developers/plugins/migration-guide.md

Co-authored-by: Timur Olzhabayev <timur.olzhabayev@grafana.com>

Co-authored-by: Timur Olzhabayev <timur.olzhabayev@grafana.com>
(cherry picked from commit 24c04740e3d4d47d824ff228d7f27d715b8743be)

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>
---
 .../developers/plugins/migration-guide.md     | 35 +++++++++++++++++++
 packages/grafana-ui/src/components/index.ts   |  6 ++--
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/docs/sources/developers/plugins/migration-guide.md b/docs/sources/developers/plugins/migration-guide.md
index 8269d182272..4de4d712881 100644
--- a/docs/sources/developers/plugins/migration-guide.md
+++ b/docs/sources/developers/plugins/migration-guide.md
@@ -18,7 +18,9 @@ This guide helps you identify the steps required to update a plugin from the Gra
   - [Introduction](#introduction)
   - [Table of contents](#table-of-contents)
   - [From version 9.1.x to 9.2.x](#from-version-91x-to-92x)
+    - [React and React-dom as peer dependencies](#react-and-react-dom-as-peer-dependencies)
     - [NavModelItem requires a valid icon name](#navmodelitem-requires-a-valid-icon-name)
+    - [Additional type availability](#additional-type-availability)
   - [From version 8.x to 9.x](#from-version-8x-to-9x)
     - [9.0 breaking changes](#90-breaking-changes)
       - [theme.visualization.getColorByName replaces getColorForTheme](#themevisualizationgetcolorbyname-replaces-getcolorfortheme)
@@ -64,6 +66,29 @@ This guide helps you identify the steps required to update a plugin from the Gra
 
 ## From version 9.1.x to 9.2.x
 
+### React and React-dom as peer dependencies
+
+In earlier versions of Grafana packages `react` and `react-dom` were installed during a `yarn install` regardless of a plugins dependencies. In 9.2.0 the `@grafana` packages declare these react packages as peerDependencies and will need adding to a plugins `package.json` file for test commands to continue to run successfully.
+
+Example:
+
+```json
+// before
+"dependencies": {
+  "@grafana/data": "9.1.0",
+  "@grafana/ui": "9.1.0",
+},
+
+// after
+"dependencies": {
+  "@grafana/data": "9.2.0",
+  "@grafana/ui": "9.2.0",
+  "react": "17.0.2",
+  "react-dom": "17.0.2"
+},
+
+```
+
 ### NavModelItem requires a valid icon name
 
 The typings of the `NavModelItem` have improved to only allow a valid `IconName` for the icon property. You can find the complete list of valid icons [here](https://github.com/grafana/grafana/blob/v9.2.0-beta1/packages/grafana-data/src/types/icon.ts). The icons specified in the list will work for older versions of Grafana 9.
@@ -88,6 +113,16 @@ const model: NavModelItem = {
 };
 ```
 
+### Additional type availability
+
+FieldProps, ModalProps, and QueryFieldProps are now exposed from `@grafana/ui`. They can be imported in the same way as other types.
+
+Example:
+
+```ts
+import { FieldProps, ModalProps, QueryFieldProps } from '@grafana/ui';
+```
+
 ## From version 8.x to 9.x
 
 ### 9.0 breaking changes
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 44858fec38d..2f7580371d5 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -49,7 +49,7 @@ export { TagList } from './Tags/TagList';
 export { FilterPill } from './FilterPill/FilterPill';
 
 export { ConfirmModal, type ConfirmModalProps } from './ConfirmModal/ConfirmModal';
-export { QueryField } from './QueryField/QueryField';
+export { QueryField, type QueryFieldProps } from './QueryField/QueryField';
 
 export { CodeEditor } from './Monaco/CodeEditor';
 
@@ -66,7 +66,7 @@ export {
 export { variableSuggestionToCodeEditorSuggestion } from './Monaco/utils';
 
 // TODO: namespace
-export { Modal } from './Modal/Modal';
+export { Modal, type Props as ModalProps } from './Modal/Modal';
 export { ModalHeader } from './Modal/ModalHeader';
 export { ModalTabsHeader } from './Modal/ModalTabsHeader';
 export { ModalTabContent } from './Modal/ModalTabContent';
@@ -193,7 +193,7 @@ export { fieldMatchersUI } from './MatchersUI/fieldMatchersUI';
 export { Link } from './Link/Link';
 
 export { Label } from './Forms/Label';
-export { Field } from './Forms/Field';
+export { Field, type FieldProps } from './Forms/Field';
 export { Legend } from './Forms/Legend';
 export { FieldSet } from './Forms/FieldSet';
 export { FieldValidationMessage } from './Forms/FieldValidationMessage';