Chore: remove gf-forms and LegacyForms from Ldap Page (#76156)

* Chore: remove LegacyForms from Ldap Page

* remove references to gf-form

* fix form control submit function

.betterer.results

@@ -1762,9 +1762,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "1"],
       [0, 0, 0, "Styles should be written using objects.", "2"]
     ],
-    "public/app/features/admin/ldap/LdapPage.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "public/app/features/alerting/AlertTab.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],

public/app/features/admin/ldap/LdapPage.tsx

@@ -3,8 +3,7 @@ import { connect, ConnectedProps } from 'react-redux';
 
 import { NavModelItem } from '@grafana/data';
 import { featureEnabled } from '@grafana/runtime';
-import { Alert, Button, LegacyForms } from '@grafana/ui';
+import { Alert, Button, Field, Form, HorizontalGroup, Input } from '@grafana/ui';
-const { FormField } = LegacyForms;
 import { Page } from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/core';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
@@ -42,6 +41,10 @@ interface State {
   isLoading: boolean;
 }
 
+interface FormModel {
+  username: string;
+}
+
 const pageNav: NavModelItem = {
   text: 'LDAP',
   subTitle: `Verify your LDAP and user mapping configuration.`,
@@ -76,9 +79,7 @@ export class LdapPage extends PureComponent<Props, State> {
     return await loadUserMapping(username);
   }
 
-  search = (event: any) => {
+  search = (username: string) => {
-    event.preventDefault();
-    const username = event.target.elements['username'].value;
     if (username) {
       this.fetchUserMapping(username);
     }
@@ -98,11 +99,9 @@ export class LdapPage extends PureComponent<Props, State> {
         <Page.Contents isLoading={isLoading}>
           <>
             {ldapError && ldapError.title && (
-              <div className="gf-form-group">
               <Alert title={ldapError.title} severity={AppNotificationSeverity.Error}>
                 {ldapError.body}
               </Alert>
-              </div>
             )}
 
             <LdapConnectionStatus ldapConnectionInfo={ldapConnectionInfo} />
@@ -111,23 +110,25 @@ export class LdapPage extends PureComponent<Props, State> {
 
             {canReadLDAPUser && (
               <>
-                <h3 className="page-heading">Test user mapping</h3>
+                <h3>Test user mapping</h3>
-                <div className="gf-form-group">
+                <Form onSubmit={(data: FormModel) => this.search(data.username)}>
-                  <form onSubmit={this.search} className="gf-form-inline">
+                  {({ register }) => (
-                    <FormField
+                    <HorizontalGroup>
-                      label="Username"
+                      <Field label="Username">
-                      labelWidth={8}
+                        <Input
-                      inputWidth={30}
+                          {...register('username', { required: true })}
-                      type="text"
                           id="username"
-                      name="username"
+                          type="text"
                           defaultValue={queryParams.username}
                         />
-                    <Button type="submit">Run</Button>
+                      </Field>
-                  </form>
+                      <Button variant="primary" type="submit">
-                </div>
+                        Run
+                      </Button>
+                    </HorizontalGroup>
+                  )}
+                </Form>
                 {userError && userError.title && (
-                  <div className="gf-form-group">
                   <Alert
                     title={userError.title}
                     severity={AppNotificationSeverity.Error}
@@ -135,7 +136,6 @@ export class LdapPage extends PureComponent<Props, State> {
                   >
                     {userError.body}
                   </Alert>
-                  </div>
                 )}
                 {ldapUser && <LdapUserInfo ldapUser={ldapUser} showAttributeMapping={true} />}
               </>