Forms migration: Input namespace (#23286)

* Update exports

* Add LegacyForms namespace

* Update ci grep

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

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { validate, EventsWithValidation, hasValidationEvent } from '../../utils';
 import { ValidationEvents, ValidationRule } from '../../types';
 
-export enum InputStatus {
+export enum LegacyInputStatus {
   Invalid = 'invalid',
   Valid = 'valid',
 }
@@ -14,9 +14,9 @@ interface Props extends React.HTMLProps<HTMLInputElement> {
   inputRef?: React.LegacyRef<HTMLInputElement>;
 
   // Override event props and append status as argument
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>, status?: InputStatus) => void;
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>, status?: InputStatus) => void;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>, status?: InputStatus) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>, status?: LegacyInputStatus) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>, status?: LegacyInputStatus) => void;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, status?: LegacyInputStatus) => void;
 }
 
 interface State {
@@ -33,11 +33,11 @@ export class Input extends PureComponent<Props, State> {
   };
 
   get status() {
-    return this.state.error ? InputStatus.Invalid : InputStatus.Valid;
+    return this.state.error ? LegacyInputStatus.Invalid : LegacyInputStatus.Valid;
   }
 
   get isInvalid() {
-    return this.status === InputStatus.Invalid;
+    return this.status === LegacyInputStatus.Invalid;
   }
 
   validatorAsync = (validationRules: ValidationRule[]) => {

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

@@ -26,7 +26,6 @@ export { EmptySearchResult } from './EmptySearchResult/EmptySearchResult';
 export { PieChart, PieChartType } from './PieChart/PieChart';
 export { UnitPicker } from './UnitPicker/UnitPicker';
 export { StatsPicker } from './StatsPicker/StatsPicker';
-export { Input, InputStatus } from './Input/Input';
 export { RefreshPicker } from './RefreshPicker/RefreshPicker';
 export { TimePicker } from './TimePicker/TimePicker';
 export { TimeOfDayPicker } from './TimePicker/TimeOfDayPicker';
@@ -148,12 +147,18 @@ import { IndicatorsContainer } from './Forms/Legacy/Select/IndicatorsContainer';
 import { NoOptionsMessage } from './Forms/Legacy/Select/NoOptionsMessage';
 import { ButtonSelect } from './Forms/Legacy/Select/ButtonSelect';
 
+//Input
+import { Input, LegacyInputStatus } from './Input/Input';
+// Export these until  Enterprise migrations have been merged
+// export { Input, InputStatus}
+
 const LegacyForms = {
   Select,
   AsyncSelect,
   IndicatorsContainer,
   NoOptionsMessage,
   ButtonSelect,
+  Input,
 };
 
-export { LegacyForms };
+export { LegacyForms, LegacyInputStatus };

public/app/core/components/PasswordInput/PasswordInput.tsx

 import React, { ChangeEvent, forwardRef } from 'react';
-import { Input, FormLabel } from '@grafana/ui';
+import { LegacyForms, FormLabel } from '@grafana/ui';
+const { Input } = LegacyForms;
 
 export interface Props {
   label: string;

public/app/features/admin/UserProfile.tsx

@@ -3,7 +3,7 @@ import { UserDTO } from 'app/types';
 import { cx, css } from 'emotion';
 import { config } from 'app/core/config';
 import { GrafanaTheme } from '@grafana/data';
-import { ConfirmButton, ConfirmModal, InputStatus, Button, stylesFactory, Forms } from '@grafana/ui';
+import { ConfirmButton, ConfirmModal, LegacyInputStatus, Button, stylesFactory, Forms } from '@grafana/ui';
 
 interface Props {
   user: UserDTO;
@@ -217,16 +217,16 @@ export class UserProfileRow extends PureComponent<UserProfileRowProps, UserProfi
     this.setState({ editing: false, value: this.props.value || '' });
   };
 
-  onInputChange = (event: React.ChangeEvent<HTMLInputElement>, status?: InputStatus) => {
-    if (status === InputStatus.Invalid) {
+  onInputChange = (event: React.ChangeEvent<HTMLInputElement>, status?: LegacyInputStatus) => {
+    if (status === LegacyInputStatus.Invalid) {
       return;
     }
 
     this.setState({ value: event.target.value });
   };
 
-  onInputBlur = (event: React.FocusEvent<HTMLInputElement>, status?: InputStatus) => {
-    if (status === InputStatus.Invalid) {
+  onInputBlur = (event: React.FocusEvent<HTMLInputElement>, status?: LegacyInputStatus) => {
+    if (status === LegacyInputStatus.Invalid) {
       return;
     }
 

public/app/features/api-keys/ApiKeysPage.tsx

@@ -13,7 +13,8 @@ import ApiKeysAddedModal from './ApiKeysAddedModal';
 import config from 'app/core/config';
 import appEvents from 'app/core/app_events';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
-import { DeleteButton, EventsWithValidation, FormLabel, Input, Switch, ValidationEvents } from '@grafana/ui';
+import { DeleteButton, EventsWithValidation, FormLabel, LegacyForms, Switch, ValidationEvents } from '@grafana/ui';
+const { Input } = LegacyForms;
 import { dateTime, isDateTime, NavModel } from '@grafana/data';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 import { store } from 'app/store/store';

public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx

 import React, { PureComponent } from 'react';
-import { Button, ClipboardButton, Input, LinkButton, LegacyForms } from '@grafana/ui';
-const { Select } = LegacyForms;
+import { Button, ClipboardButton, LinkButton, LegacyForms } from '@grafana/ui';
+const { Select, Input } = LegacyForms;
 import { AppEvents, SelectableValue } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';

public/app/features/dashboard/panel_editor/DataSourceOption.tsx

 import React, { FC, ChangeEvent } from 'react';
-import { FormLabel, Input } from '@grafana/ui';
+import { FormLabel, LegacyForms } from '@grafana/ui';
+const { Input } = LegacyForms;
 
 interface Props {
   label: string;

public/app/features/dashboard/panel_editor/QueryOptions.tsx

@@ -5,8 +5,9 @@ import React, { PureComponent, ChangeEvent, FocusEvent, ReactText } from 'react'
 import { rangeUtil, DataSourceSelectItem } from '@grafana/data';
 
 // Components
-import { EventsWithValidation, Input, InputStatus, Switch, ValidationEvents, FormLabel } from '@grafana/ui';
+import { EventsWithValidation, LegacyInputStatus, LegacyForms, Switch, ValidationEvents, FormLabel } from '@grafana/ui';
 import { DataSourceOption } from './DataSourceOption';
+const { Input } = LegacyForms;
 
 // Types
 import { PanelModel } from '../state';
@@ -109,21 +110,21 @@ export class QueryOptions extends PureComponent<Props, State> {
     });
   };
 
-  onOverrideTime = (event: FocusEvent<HTMLInputElement>, status: InputStatus) => {
+  onOverrideTime = (event: FocusEvent<HTMLInputElement>, status: LegacyInputStatus) => {
     const { value } = event.target;
     const { panel } = this.props;
     const emptyToNullValue = emptyToNull(value);
-    if (status === InputStatus.Valid && panel.timeFrom !== emptyToNullValue) {
+    if (status === LegacyInputStatus.Valid && panel.timeFrom !== emptyToNullValue) {
       panel.timeFrom = emptyToNullValue;
       panel.refresh();
     }
   };
 
-  onTimeShift = (event: FocusEvent<HTMLInputElement>, status: InputStatus) => {
+  onTimeShift = (event: FocusEvent<HTMLInputElement>, status: LegacyInputStatus) => {
     const { value } = event.target;
     const { panel } = this.props;
     const emptyToNullValue = emptyToNull(value);
-    if (status === InputStatus.Valid && panel.timeShift !== emptyToNullValue) {
+    if (status === LegacyInputStatus.Valid && panel.timeShift !== emptyToNullValue) {
       panel.timeShift = emptyToNullValue;
       panel.refresh();
     }

public/app/features/datasources/settings/BasicSettings.tsx

 import React, { FC } from 'react';
-import { FormLabel, Input, Switch } from '@grafana/ui';
+import { FormLabel, LegacyForms, Switch } from '@grafana/ui';
+const { Input } = LegacyForms;
 import { e2e } from '@grafana/e2e';
 
 export interface Props {

public/app/features/folders/FolderSettingsPage.tsx

@@ -2,7 +2,8 @@ import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import { NavModel } from '@grafana/data';
-import { Input } from '@grafana/ui';
+import { LegacyForms } from '@grafana/ui';
+const { Input } = LegacyForms;
 import Page from 'app/core/components/Page/Page';
 import appEvents from 'app/core/app_events';
 import { getNavModel } from 'app/core/selectors/navModel';

public/app/features/org/OrgProfile.tsx

 import React, { ChangeEvent, FC } from 'react';
-import { Input } from '@grafana/ui';
+import { LegacyForms } from '@grafana/ui';
+const { Input } = LegacyForms;
 
 export interface Props {
   orgName: string;

public/app/features/profile/UserProfileEditForm.tsx

 import React, { PureComponent, ChangeEvent, MouseEvent } from 'react';
-import { Button, FormLabel, Input, Tooltip } from '@grafana/ui';
+import { Button, FormLabel, LegacyForms, Tooltip } from '@grafana/ui';
+const { Input } = LegacyForms;
 import { User } from 'app/types';
 import config from 'app/core/config';
 import { ProfileUpdateFields } from 'app/core/utils/UserProvider';

public/app/features/teams/TeamGroupSync.tsx

@@ -2,7 +2,8 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 
 import { SlideDown } from 'app/core/components/Animations/SlideDown';
-import { Input, Tooltip } from '@grafana/ui';
+import { LegacyForms, Tooltip } from '@grafana/ui';
+const { Input } = LegacyForms;
 
 import { TeamGroup } from '../../types';
 import { addTeamGroup, loadTeamGroups, removeTeamGroup } from './state/actions';

public/app/features/teams/TeamSettings.tsx

 import React from 'react';
 import { connect } from 'react-redux';
-import { FormLabel, Input } from '@grafana/ui';
+import { FormLabel, LegacyForms } from '@grafana/ui';
+const { Input } = LegacyForms;
 
 import { SharedPreferences } from 'app/core/components/SharedPreferences/SharedPreferences';
 import { updateTeam } from './state/actions';

public/app/plugins/datasource/cloudwatch/components/Alias.tsx

 import React, { FunctionComponent, useState } from 'react';
 import { debounce } from 'lodash';
-import { Input } from '@grafana/ui';
+import { LegacyForms } from '@grafana/ui';
+const { Input } = LegacyForms;
 
 export interface Props {
   onChange: (alias: any) => void;

public/app/plugins/datasource/cloudwatch/components/ConfigEditor.tsx

 import React, { PureComponent } from 'react';
-import { FormLabel, LegacyForms, Input, Button } from '@grafana/ui';
-const { Select } = LegacyForms;
+import { FormLabel, LegacyForms, Button } from '@grafana/ui';
+const { Select, Input } = LegacyForms;
 import {
   DataSourcePluginOptionsEditorProps,
   onUpdateDatasourceJsonDataOptionSelect,

public/app/plugins/datasource/cloudwatch/components/QueryEditor.tsx

 import React, { PureComponent, ChangeEvent } from 'react';
 import { ExploreQueryFieldProps } from '@grafana/data';
-import { Input, ValidationEvents, EventsWithValidation, Switch } from '@grafana/ui';
+import { LegacyForms, ValidationEvents, EventsWithValidation, Switch } from '@grafana/ui';
+const { Input } = LegacyForms;
 import isEmpty from 'lodash/isEmpty';
 import { CloudWatchQuery } from '../types';
 import CloudWatchDatasource from '../datasource';

public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx

 import React from 'react';
-import { EventsWithValidation, FormField, Input, regexValidation, LegacyForms } from '@grafana/ui';
-const { Select } = LegacyForms;
+import { EventsWithValidation, FormField, regexValidation, LegacyForms } from '@grafana/ui';
+const { Select, Input } = LegacyForms;
 import { ElasticsearchOptions } from '../types';
 import { DataSourceSettings, SelectableValue } from '@grafana/data';
 

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx

 import React, { ChangeEvent, PureComponent } from 'react';
 import { SelectableValue } from '@grafana/data';
-import { Input, FormLabel, LegacyForms, Button } from '@grafana/ui';
-const { Select } = LegacyForms;
+import { FormLabel, LegacyForms, Button } from '@grafana/ui';
+const { Select, Input } = LegacyForms;
 
 export interface Props {
   selectedAzureCloud?: string;

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/InsightsConfig.tsx

 import React, { PureComponent } from 'react';
-import { FormLabel, Button, Input } from '@grafana/ui';
+import { FormLabel, Button, LegacyForms } from '@grafana/ui';
+const { Input } = LegacyForms;
 import { AzureDataSourceSettings, AzureDataSourceJsonData, AzureDataSourceSecureJsonData } from '../types';
 
 export interface Props {

public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx

@@ -8,8 +8,8 @@ import {
   onUpdateDatasourceJsonDataOptionSelect,
   onUpdateDatasourceSecureJsonDataOption,
 } from '@grafana/data';
-import { DataSourceHttpSettings, FormLabel, Input, SecretFormField, LegacyForms } from '@grafana/ui';
-const { Select } = LegacyForms;
+import { DataSourceHttpSettings, FormLabel, SecretFormField, LegacyForms } from '@grafana/ui';
+const { Select, Input } = LegacyForms;
 import { InfluxOptions, InfluxSecureJsonData } from '../types';
 
 const httpModes = [

public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx

 import React, { SyntheticEvent } from 'react';
-import { FormLabel, LegacyForms, Input } from '@grafana/ui';
-const { Select } = LegacyForms;
+import { FormLabel, LegacyForms } from '@grafana/ui';
+const { Select, Input } = LegacyForms;
 import { DataSourceSettings, SelectableValue } from '@grafana/data';
 import { OpenTsdbOptions } from '../types';
 

public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx

 import React, { SyntheticEvent } from 'react';
-import { EventsWithValidation, FormField, FormLabel, Input, regexValidation, LegacyForms } from '@grafana/ui';
-const { Select } = LegacyForms;
+import { EventsWithValidation, FormField, FormLabel, regexValidation, LegacyForms } from '@grafana/ui';
+const { Select, Input } = LegacyForms;
 import { DataSourceSettings, SelectableValue } from '@grafana/data';
 import { PromOptions } from '../types';
 

public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx

 import React from 'react';
-import { Input } from '@grafana/ui';
+import { LegacyForms } from '@grafana/ui';
+const { Input } = LegacyForms;
 
 import { TemplateSrv } from 'app/features/templating/template_srv';
 import { SelectableValue } from '@grafana/data';

public/app/plugins/panel/graph2/GraphLegendEditor.tsx

 import React from 'react';
-import { LegendOptions, PanelOptionsGroup, Switch, Input, StatsPicker } from '@grafana/ui';
+import { LegendOptions, PanelOptionsGroup, Switch, LegacyForms, StatsPicker } from '@grafana/ui';
+const { Input } = LegacyForms;
 
 export interface GraphLegendEditorLegendOptions extends LegendOptions {
   stats?: string[];

scripts/ci-frontend-metrics.sh

@@ -13,7 +13,7 @@ DIRECTIVES="$(grep -r -o  directive public/app/**/*  | wc -l)"
 CONTROLLERS="$(grep -r -oP 'class .*Ctrl' public/app/**/*  | wc -l)"
 STORIES_COUNT="$(find ./packages/grafana-ui/src/components  -name "*.story.tsx" | wc -l)"
 MDX_COUNT="$(find ./packages/grafana-ui/src/components  -name "*.mdx" | wc -l)"
-
+LEGACY_FORMS="$(grep -r -oP 'LegacyForms;' public/app/**/* | wc -l)"
 
 
 if [ "$ERROR_COUNT" -gt $ERROR_COUNT_LIMIT ]; then
@@ -36,6 +36,7 @@ echo -e "Directives: $DIRECTIVES"
 echo -e "Controllers: $CONTROLLERS"
 echo -e "Stories: $STORIES_COUNT"
 echo -e "Documented stories: $MDX_COUNT"
+echo -e "Legacy forms: $LEGACY_FORMS"
 
 if [ "${CIRCLE_BRANCH}" == "master" ]; then
   ./scripts/ci-metrics-publisher.sh \
@@ -43,5 +44,6 @@ if [ "${CIRCLE_BRANCH}" == "master" ]; then
     grafana.ci-code.directives="$DIRECTIVES" \
     grafana.ci-code.controllers="$CONTROLLERS" \
     grafana.ci-code.grafana-ui.stories="$STORIES_COUNT" \
-    grafana.ci-code.grafana-ui.mdx="$MDX_COUNT"
+    grafana.ci-code.grafana-ui.mdx="$MDX_COUNT" \
+    grafana.ci-code.legacyForms="$LEGACY_FORMS"
 fi