From 473f8899c5d49cc8f93e5616fbf91a848d4b25c8 Mon Sep 17 00:00:00 2001 From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com> Date: Tue, 10 Oct 2023 16:21:11 +0200 Subject: [PATCH] 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 | 4 ++++ .../grafana-ui/src/components/Forms/Legacy/Input/Input.tsx | 2 ++ .../components/Forms/Legacy/Select/IndicatorsContainer.tsx | 2 ++ .../src/components/Forms/Legacy/Select/NoOptionsMessage.tsx | 3 +++ .../grafana-ui/src/components/Forms/Legacy/Select/Select.tsx | 3 +++ .../grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx | 1 + .../src/components/SecretFormField/SecretFormField.tsx | 5 +++++ packages/grafana-ui/src/components/index.ts | 1 + 8 files changed, 21 insertions(+) diff --git a/packages/grafana-ui/src/components/FormField/FormField.tsx b/packages/grafana-ui/src/components/FormField/FormField.tsx index 0048f69a3c7..27e2e75ab23 100644 --- a/packages/grafana-ui/src/components/FormField/FormField.tsx +++ b/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 { @@ -23,6 +25,8 @@ const defaultProps = { /** * Default form field including label used in Grafana UI. Default input element is simple . 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, diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx index 76742d372c6..4561ae71c84 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx +++ b/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 { static defaultProps = { className: '', diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/IndicatorsContainer.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/IndicatorsContainer.tsx index e27792e4a00..0ec07bebd8d 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/IndicatorsContainer.tsx +++ b/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 ( diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/NoOptionsMessage.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/NoOptionsMessage.tsx index f596a7f9c66..88693083998 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/NoOptionsMessage.tsx +++ b/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 = NoticeProps, boolean, GroupBase>>; +/** @deprecated Please use the {@link Select} component*/ export const NoOptionsMessage = (props: Props) => { const { children } = props; return ( diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx index 9258232c331..b8ee928a1ae 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx +++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx @@ -51,6 +51,8 @@ export const MenuList = (props: MenuListProps) => { ); }; + +/** @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 extends PureComponent> { declare context: React.ContextType; static contextType = ThemeContext; @@ -168,6 +170,7 @@ export class Select extends PureComponent> { } } +/** @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 extends PureComponent> { static contextType = ThemeContext; diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx index 043a6b08891..e5d21915180 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx +++ b/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 { state = { id: uniqueId(), diff --git a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx b/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx index 6939a75cf98..94e4ee9808f 100644 --- a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx +++ b/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, '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', diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index cee13eb356c..1a7f161adcf 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/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,