Forms: Remove some gf-form appearances in Grafana (#66735)

* Forms: Remove gf-form appearances in Grafana

* Remove gf-form appearance

* Forms: Remove gf-form appearances in Grafana

* remove gf-form

* remove gf-form

* Remove gf-form appearance

* Remove gf-form appearance

* Remove gf-form appearance

* Update UserListAdminPage.tsx

* Update UserListAdminPage.tsx

* Update UserListAdminPage

public/app/core/components/PageActionBar/PageActionBar.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { LinkButton, FilterInput } from '@grafana/ui';
+import { LinkButton, FilterInput, InlineField } from '@grafana/ui';
 
 import { SortPicker } from '../Select/SortPicker';
 
@@ -36,9 +36,9 @@ export default class PageActionBar extends PureComponent<Props> {
 
     return (
       <div className="page-action-bar">
-        <div className="gf-form gf-form--grow">
+        <InlineField grow>
           <FilterInput value={searchQuery} onChange={setSearchQuery} placeholder={placeholder} />
-        </div>
+        </InlineField>
         {sortPicker && (
           <SortPicker
             onChange={sortPicker.onChange}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { FilterInput } from '@grafana/ui';
+import { FilterInput, InlineField } from '@grafana/ui';
 
 interface Props {
   searchQuery: string;
@@ -11,9 +11,9 @@ interface Props {
 export const ApiKeysActionBar = ({ searchQuery, disabled, onSearchChange }: Props) => {
   return (
     <div className="page-action-bar">
-      <div className="gf-form gf-form--grow">
+      <InlineField grow>
         <FilterInput placeholder="Search keys" value={searchQuery} onChange={onSearchChange} />
-      </div>
+      </InlineField>
     </div>
   );
 };

public/app/features/serviceaccounts/ServiceAccountsListPage.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import { GrafanaTheme2, OrgRole } from '@grafana/data';
-import { ConfirmModal, FilterInput, LinkButton, RadioButtonGroup, useStyles2 } from '@grafana/ui';
+import { ConfirmModal, FilterInput, LinkButton, RadioButtonGroup, useStyles2, InlineField } from '@grafana/ui';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import { Page } from 'app/core/components/Page/Page';
 import PageLoader from 'app/core/components/PageLoader/PageLoader';
@@ -168,14 +168,14 @@ export const ServiceAccountsListPageUnconnected = ({
     <Page navId="serviceaccounts" subTitle={subTitle}>
       <Page.Contents>
         <div className="page-action-bar">
-          <div className="gf-form gf-form--grow">
+          <InlineField grow>
             <FilterInput
               placeholder="Search service account by name"
               value={query}
               onChange={onQueryChange}
               width={50}
             />
-          </div>
+          </InlineField>
           <RadioButtonGroup
             options={[
               { label: 'All', value: ServiceAccountStateFilter.All },

public/app/features/storage/RootView.tsx

@@ -14,6 +14,7 @@ import {
   TagList,
   useStyles2,
   VerticalGroup,
+  InlineField,
 } from '@grafana/ui';
 
 import { getGrafanaStorage } from './storage';
@@ -93,9 +94,9 @@ export function RootView({ root, onPathChange }: Props) {
   return (
     <div>
       <div className="page-action-bar">
-        <div className="gf-form gf-form--grow">
+        <InlineField grow>
           <FilterInput placeholder="Search Storage" value={searchQuery} onChange={setSearchQuery} />
-        </div>
+        </InlineField>
         <Button className="pull-right" onClick={() => onPathChange('', StorageView.AddRoot)}>
           Add Root
         </Button>

public/app/features/teams/TeamList.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
-import { LinkButton, FilterInput, VerticalGroup, HorizontalGroup, Pagination } from '@grafana/ui';
+import { LinkButton, FilterInput, VerticalGroup, HorizontalGroup, Pagination, InlineField } from '@grafana/ui';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import { Page } from 'app/core/components/Page/Page';
 import { fetchRoleOptions } from 'app/core/components/RolePicker/api';
@@ -81,9 +81,9 @@ export const TeamList = ({
         ) : (
           <>
             <div className="page-action-bar">
-              <div className="gf-form gf-form--grow">
+              <InlineField grow>
                 <FilterInput placeholder="Search teams" value={query} onChange={changeQuery} />
-              </div>
+              </InlineField>
 
               <LinkButton href={canCreate ? 'org/teams/new' : '#'} disabled={!canCreate}>
                 New Team

public/app/features/teams/TeamMembers.tsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import { SelectableValue } from '@grafana/data';
-import { Button, FilterInput, Label } from '@grafana/ui';
+import { Button, FilterInput, Label, InlineField } from '@grafana/ui';
 import { SlideDown } from 'app/core/components/Animations/SlideDown';
 import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
 import { UserPicker } from 'app/core/components/Select/UserPicker';
@@ -89,9 +89,9 @@ export class TeamMembers extends PureComponent<Props, State> {
     return (
       <div>
         <div className="page-action-bar">
-          <div className="gf-form gf-form--grow">
+          <InlineField grow>
             <FilterInput placeholder="Search members" value={searchMemberQuery} onChange={this.onSearchQueryChange} />
-          </div>
+          </InlineField>
           <Button className="pull-right" onClick={this.onToggleAdding} disabled={isAdding || !isTeamAdmin}>
             Add member
           </Button>

public/app/features/users/UsersActionBar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
-import { RadioButtonGroup, LinkButton, FilterInput } from '@grafana/ui';
+import { RadioButtonGroup, LinkButton, FilterInput, InlineField } from '@grafana/ui';
 import config from 'app/core/config';
 import { contextSrv } from 'app/core/core';
 import { AccessControlAction, StoreState } from 'app/types';
@@ -54,13 +54,13 @@ export const UsersActionBarUnconnected = ({
 
   return (
     <div className="page-action-bar" data-testid="users-action-bar">
-      <div className="gf-form gf-form--grow">
+      <InlineField grow>
         <FilterInput
           value={searchQuery}
           onChange={changeSearchQuery}
           placeholder="Search user by login, email or name"
         />
-      </div>
+      </InlineField>
       {pendingInvitesCount > 0 && (
         <div style={{ marginLeft: '1rem' }}>
           <RadioButtonGroup value={showInvites ? 'invites' : 'users'} options={options} onChange={onShowInvites} />