Forms migration: New datasource (#23221)

* Add Icon to Button and add newForms to FilterInput

* Reset button changes

* Update feedback

* Update Snapshots

public/app/core/components/FilterInput/FilterInput.tsx

@@ -1,5 +1,6 @@
-import React, { forwardRef } from 'react';
+import React, { FC } from 'react';
 import { escapeStringForRegex, unEscapeStringFromRegex } from '@grafana/data';
+import { Forms, Icon } from '@grafana/ui';
 
 export interface Props {
   value: string | undefined;
@@ -9,16 +10,15 @@ export interface Props {
   onChange: (value: string) => void;
 }
 
-export const FilterInput = forwardRef<HTMLInputElement, Props>((props, ref) => (
-  <label className={props.labelClassName}>
-    <input
-      ref={ref}
-      type="text"
-      className={props.inputClassName}
-      value={props.value ? unEscapeStringFromRegex(props.value) : ''}
-      onChange={event => props.onChange(escapeStringForRegex(event.target.value))}
-      placeholder={props.placeholder ?? ''}
-    />
-    <i className="gf-form-input-icon fa fa-search" />
-  </label>
-));
+export const FilterInput: FC<Props> = props => (
+  <Forms.Input
+    // Replaces the usage of ref
+    autoFocus
+    prefix={<Icon name="search" />}
+    type="text"
+    size="md"
+    value={props.value ? unEscapeStringFromRegex(props.value) : ''}
+    onChange={event => props.onChange(escapeStringForRegex(event.currentTarget.value))}
+    placeholder={props.placeholder ?? ''}
+  />
+);

public/app/core/components/OrgActionBar/__snapshots__/OrgActionBar.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`Render should render component 1`] = `
   <div
     className="gf-form gf-form--grow"
   >
-    <ForwardRef
+    <Component
       inputClassName="gf-form-input width-20"
       labelClassName="gf-form--has-input-icon"
       onChange={[MockFunction]}

public/app/features/alerting/__snapshots__/AlertRuleList.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`Render should render alert rules 1`] = `
       <div
         className="gf-form gf-form--grow"
       >
-        <ForwardRef
+        <Component
           inputClassName="gf-form-input"
           labelClassName="gf-form--has-input-icon gf-form--grow"
           onChange={[Function]}
@@ -157,7 +157,7 @@ exports[`Render should render component 1`] = `
       <div
         className="gf-form gf-form--grow"
       >
-        <ForwardRef
+        <Component
           inputClassName="gf-form-input"
           labelClassName="gf-form--has-input-icon gf-form--grow"
           onChange={[Function]}

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

@@ -15,14 +15,7 @@ export class VizPickerSearch extends PureComponent<Props> {
     const { searchQuery, onChange, onClose } = this.props;
     return (
       <>
-        <FilterInput
-          labelClassName="gf-form--has-input-icon"
-          inputClassName="gf-form-input width-13"
-          placeholder=""
-          onChange={onChange}
-          value={searchQuery}
-          ref={element => element && element.focus()}
-        />
+        <FilterInput placeholder="" onChange={onChange} value={searchQuery} />
         <button className="btn btn-link toolbar__close" onClick={onClose}>
           <i className="fa fa-chevron-up" />
         </button>

public/app/features/datasources/NewDataSourcePage.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import { DataSourcePluginMeta, NavModel } from '@grafana/data';
-import { List } from '@grafana/ui';
+import { List, LinkButton, Button } from '@grafana/ui';
 import { e2e } from '@grafana/e2e';
 
 import Page from 'app/core/components/Page/Page';
@@ -25,11 +25,8 @@ export interface Props {
 }
 
 class NewDataSourcePage extends PureComponent<Props> {
-  searchInput: HTMLElement;
-
   componentDidMount() {
     this.props.loadDataSourcePlugins();
-    this.searchInput.focus();
   }
 
   onDataSourceTypeClicked = (plugin: DataSourcePluginMeta) => {
@@ -76,14 +73,14 @@ class NewDataSourcePage extends PureComponent<Props> {
           </div>
         ))}
         <div className="add-data-source-more">
-          <a
-            className="btn btn-inverse"
+          <LinkButton
+            variant="secondary"
             href="https://grafana.com/plugins?type=datasource&utm_source=grafana_add_ds"
             target="_blank"
             rel="noopener"
           >
             Find more data source plugins on grafana.com
-          </a>
+          </LinkButton>
         </div>
       </>
     );
@@ -96,20 +93,9 @@ class NewDataSourcePage extends PureComponent<Props> {
       <Page navModel={navModel}>
         <Page.Contents isLoading={isLoading}>
           <div className="page-action-bar">
-            <div className="gf-form gf-form--grow">
-              <FilterInput
-                ref={elem => (this.searchInput = elem)}
-                labelClassName="gf-form--has-input-icon"
-                inputClassName="gf-form-input width-30"
-                value={searchQuery}
-                onChange={this.onSearchQueryChange}
-                placeholder="Filter by name or type"
-              />
-            </div>
+            <FilterInput value={searchQuery} onChange={this.onSearchQueryChange} placeholder="Filter by name or type" />
             <div className="page-action-bar__spacer" />
-            <a className="btn btn-secondary" href="datasources">
-              Cancel
-            </a>
+            <LinkButton href="datasources">Cancel</LinkButton>
           </div>
           <div>
             {searchQuery && this.renderPlugins(plugins)}
@@ -151,17 +137,18 @@ const DataSourceTypeCard: FC<DataSourceTypeCardProps> = props => {
       </div>
       <div className="add-data-source-item-actions">
         {learnMoreLink && (
-          <a
-            className="btn btn-inverse"
+          <LinkButton
+            variant="secondary"
             href={`${learnMoreLink.url}?utm_source=grafana_add_ds`}
             target="_blank"
             rel="noopener"
             onClick={onLearnMoreClick}
+            icon="fa fa-external-link"
           >
-            {learnMoreLink.name} <i className="fa fa-external-link add-datasource-item-actions__btn-icon" />
-          </a>
+            {learnMoreLink.name}
+          </LinkButton>
         )}
-        {!isPhantom && <button className="btn btn-primary">Select</button>}
+        {!isPhantom && <Button>Select</Button>}
       </div>
     </div>
   );

public/app/features/teams/__snapshots__/TeamList.test.tsx.snap

@@ -41,7 +41,7 @@ exports[`Render should render teams table 1`] = `
       <div
         className="gf-form gf-form--grow"
       >
-        <ForwardRef
+        <Component
           inputClassName="gf-form-input"
           labelClassName="gf-form--has-input-icon gf-form--grow"
           onChange={[Function]}
@@ -376,7 +376,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on and signedin us
       <div
         className="gf-form gf-form--grow"
       >
-        <ForwardRef
+        <Component
           inputClassName="gf-form-input"
           labelClassName="gf-form--has-input-icon gf-form--grow"
           onChange={[Function]}
@@ -503,7 +503,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on and signedin us
       <div
         className="gf-form gf-form--grow"
       >
-        <ForwardRef
+        <Component
           inputClassName="gf-form-input"
           labelClassName="gf-form--has-input-icon gf-form--grow"
           onChange={[Function]}

public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`Render should render component 1`] = `
     <div
       className="gf-form gf-form--grow"
     >
-      <ForwardRef
+      <Component
         inputClassName="gf-form-input"
         labelClassName="gf-form--has-input-icon gf-form--grow"
         onChange={[Function]}
@@ -102,7 +102,7 @@ exports[`Render should render team members 1`] = `
     <div
       className="gf-form gf-form--grow"
     >
-      <ForwardRef
+      <Component
         inputClassName="gf-form-input"
         labelClassName="gf-form--has-input-icon gf-form--grow"
         onChange={[Function]}

public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`Render should render component 1`] = `
   <div
     className="gf-form gf-form--grow"
   >
-    <ForwardRef
+    <Component
       inputClassName="gf-form-input width-20"
       labelClassName="gf-form--has-input-icon"
       onChange={[MockFunction]}
@@ -28,7 +28,7 @@ exports[`Render should render pending invites button 1`] = `
   <div
     className="gf-form gf-form--grow"
   >
-    <ForwardRef
+    <Component
       inputClassName="gf-form-input width-20"
       labelClassName="gf-form--has-input-icon"
       onChange={[MockFunction]}
@@ -73,7 +73,7 @@ exports[`Render should show external user management button 1`] = `
   <div
     className="gf-form gf-form--grow"
   >
-    <ForwardRef
+    <Component
       inputClassName="gf-form-input width-20"
       labelClassName="gf-form--has-input-icon"
       onChange={[MockFunction]}
@@ -100,7 +100,7 @@ exports[`Render should show invite button 1`] = `
   <div
     className="gf-form gf-form--grow"
   >
-    <ForwardRef
+    <Component
       inputClassName="gf-form-input width-20"
       labelClassName="gf-form--has-input-icon"
       onChange={[MockFunction]}