Chore: Add @deprecation to LegacyForms (#76055)

* Add deprecations to LegacyForms

* Fix whitespace

* Update FormField.tsx

* Update Input.tsx

* Update IndicatorsContainer.tsx

* Update NoOptionsMessage.tsx

* Update Select.tsx

* Update Switch.tsx

* Update SecretFormField.tsx

* Update index.ts

* Update Select.tsx

* Add deprecated Links

* Update deprecation comments

* Update deprecation message

packages/grafana-ui/src/components/FormField/FormField.tsx

@@ -2,6 +2,8 @@ import { css, cx } from '@emotion/css';
 import React, { InputHTMLAttributes } from 'react';
 
 import { InlineFormLabel } from '../FormLabel/FormLabel';
+import { Field } from '../Forms/Field';
+import { InlineField } from '../Forms/InlineField';
 import { PopoverContent } from '../Tooltip';
 
 export interface Props extends InputHTMLAttributes<HTMLInputElement> {
@@ -23,6 +25,8 @@ const defaultProps = {
 /**
  * Default form field including label used in Grafana UI. Default input element is simple <input />. You can also pass
  * custom inputEl if required in which case inputWidth and inputProps are ignored.
+ * @deprecated Please use the {@link Field} component, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-field--simple See Storybook}.
+ * For inline fields, use {@link InlineField}, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-inlinefield--basic See Storybook}.
  */
 export const FormField = ({
   label,

packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx

@@ -4,6 +4,7 @@ import React, { PureComponent, ChangeEvent } from 'react';
 import { ValidationEvents, ValidationRule } from '../../../../types';
 import { validate, EventsWithValidation, hasValidationEvent } from '../../../../utils';
 
+/** @deprecated Please use the `Input` component, which does not require this enum. */
 export enum LegacyInputStatus {
   Invalid = 'invalid',
   Valid = 'valid',
@@ -24,6 +25,7 @@ interface State {
   error: string | null;
 }
 
+/** @deprecated Please use the `Input` component. {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-input--simple See Storybook for example.} */
 export class Input extends PureComponent<Props, State> {
   static defaultProps = {
     className: '',

packages/grafana-ui/src/components/Forms/Legacy/Select/IndicatorsContainer.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import { components, IndicatorsContainerProps } from 'react-select';
 
 import { Icon } from '../../../Icon/Icon';
+import { Select } from '../../../Select/Select';
 
+/** @deprecated Please use the {@link Select} component*/
 export const IndicatorsContainer = (props: IndicatorsContainerProps) => {
   const isOpen = props.selectProps.menuIsOpen;
   return (

packages/grafana-ui/src/components/Forms/Legacy/Select/NoOptionsMessage.tsx

@@ -3,8 +3,11 @@ import { components, NoticeProps, GroupBase } from 'react-select';
 
 import { SelectableValue } from '@grafana/data';
 
+import { Select } from '../../../Select/Select';
+
 export type Props<T> = NoticeProps<SelectableValue<T>, boolean, GroupBase<SelectableValue<T>>>;
 
+/** @deprecated Please use the {@link Select} component*/
 export const NoOptionsMessage = <T extends unknown>(props: Props<T>) => {
   const { children } = props;
   return (

packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx

@@ -51,6 +51,8 @@ export const MenuList = (props: MenuListProps) => {
     </components.MenuList>
   );
 };
+
+/** @deprecated Please use the `Select` component, as seen {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-select--basic in Storybook}. */
 export class Select<T> extends PureComponent<LegacySelectProps<T>> {
   declare context: React.ContextType<typeof ThemeContext>;
   static contextType = ThemeContext;
@@ -168,6 +170,7 @@ export class Select<T> extends PureComponent<LegacySelectProps<T>> {
   }
 }
 
+/** @deprecated Please use the `Select` component with async functionality, as seen {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-select--basic-select-async in Storybook}. */
 export class AsyncSelect<T> extends PureComponent<AsyncProps<T>> {
   static contextType = ThemeContext;
 

packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx

@@ -22,6 +22,7 @@ export interface State {
   id: string;
 }
 
+/** @deprecated Please use the `Switch` component, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-switch--controlled as seen in Storybook} */
 export class Switch extends PureComponent<Props, State> {
   state = {
     id: uniqueId(),

packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx

@@ -4,6 +4,8 @@ import React, { InputHTMLAttributes } from 'react';
 
 import { Button } from '../Button/Button';
 import { FormField } from '../FormField/FormField';
+import { Field } from '../Forms/Field';
+import { SecretInput } from '../SecretInput';
 import { PopoverContent } from '../Tooltip';
 
 export interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onReset'> {
@@ -33,11 +35,14 @@ const getSecretFormFieldStyles = () => {
     }),
   };
 };
+
 /**
  * Form field that has 2 states configured and not configured. If configured it will not show its contents and adds
  * a reset button that will clear the input and makes it accessible. In non configured state it behaves like normal
  * form field. This is used for passwords or anything that is encrypted on the server and is later returned encrypted
  * to the user (like datasource passwords).
+ *
+ * @deprecated Please use the {@link SecretInput} component with a {@link Field} instead, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-secretinput--basic as seen in Storybook}
  */
 export const SecretFormField = ({
   label = 'Password',

packages/grafana-ui/src/components/index.ts

@@ -265,6 +265,7 @@ export { type UserView } from './UsersIndicator/types';
 export { InlineFormLabel } from './FormLabel/FormLabel';
 export { Divider } from './Divider/Divider';
 
+/** @deprecated Please use non-legacy versions of these components */
 const LegacyForms = {
   SecretFormField,
   FormField,