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]}