Forms: Remove gf-form appearances in admin, profile and team settings (#74360)

* Accessibility: Added label prop to RadioButtonGroup

* Update packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

* Update RadioButtonGroup.tsx

* Update RadioButtonGroup.tsx

* corrected ariaLabel

* fix accessibility

* Forms: Remove gf-form appearances in Grafana

* remove wrong commit

* Remove gf-form from User Profile Edit Form

* AlertRuleList

* to not change anything under AlertRuleList

* removed gf-form-button-row

---------

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

public/app/core/components/SharedPreferences/SharedPreferences.tsx

@@ -140,89 +140,88 @@ export class SharedPreferences extends PureComponent<Props, State> {
       <Form onSubmit={this.onSubmitForm}>
         {() => {
           return (
-            <FieldSet label={<Trans i18nKey="shared-preferences.title">Preferences</Trans>} disabled={disabled}>
+            <>
-              <Field label={t('shared-preferences.fields.theme-label', 'Interface theme')}>
+              <FieldSet label={<Trans i18nKey="shared-preferences.title">Preferences</Trans>} disabled={disabled}>
-                <Select
+                <Field label={t('shared-preferences.fields.theme-label', 'Interface theme')}>
-                  options={this.themeOptions}
+                  <Select
-                  value={currentThemeOption}
+                    options={this.themeOptions}
-                  onChange={this.onThemeChanged}
+                    value={currentThemeOption}
-                  inputId="shared-preferences-theme-select"
+                    onChange={this.onThemeChanged}
-                />
+                    inputId="shared-preferences-theme-select"
-              </Field>
+                  />
+                </Field>
 
-              <Field
+                <Field
-                label={
+                  label={
-                  <Label htmlFor="home-dashboard-select">
+                    <Label htmlFor="home-dashboard-select">
-                    <span className={styles.labelText}>
+                      <span className={styles.labelText}>
-                      <Trans i18nKey="shared-preferences.fields.home-dashboard-label">Home Dashboard</Trans>
+                        <Trans i18nKey="shared-preferences.fields.home-dashboard-label">Home Dashboard</Trans>
-                    </span>
+                      </span>
-                  </Label>
+                    </Label>
-                }
+                  }
-                data-testid="User preferences home dashboard drop down"
+                  data-testid="User preferences home dashboard drop down"
-              >
-                <DashboardPicker
-                  value={homeDashboardUID}
-                  onChange={(v) => this.onHomeDashboardChanged(v?.uid ?? '')}
-                  defaultOptions={true}
-                  isClearable={true}
-                  placeholder={t('shared-preferences.fields.home-dashboard-placeholder', 'Default dashboard')}
-                  inputId="home-dashboard-select"
-                />
-              </Field>
-
-              <Field
-                label={t('shared-dashboard.fields.timezone-label', 'Timezone')}
-                data-testid={selectors.components.TimeZonePicker.containerV2}
-              >
-                <TimeZonePicker
-                  includeInternal={true}
-                  value={timezone}
-                  onChange={this.onTimeZoneChanged}
-                  inputId="shared-preferences-timezone-picker"
-                />
-              </Field>
-
-              <Field
-                label={t('shared-preferences.fields.week-start-label', 'Week start')}
-                data-testid={selectors.components.WeekStartPicker.containerV2}
-              >
-                <WeekStartPicker
-                  value={weekStart || ''}
-                  onChange={this.onWeekStartChanged}
-                  inputId={'shared-preferences-week-start-picker'}
-                />
-              </Field>
-
-              <Field
-                label={
-                  <Label htmlFor="locale-select">
-                    <span className={styles.labelText}>
-                      <Trans i18nKey="shared-preferences.fields.locale-label">Language</Trans>
-                    </span>
-                    <FeatureBadge featureState={FeatureState.beta} />
-                  </Label>
-                }
-                data-testid="User preferences language drop down"
-              >
-                <Select
-                  value={languages.find((lang) => lang.value === language)}
-                  onChange={(lang: SelectableValue<string>) => this.onLanguageChanged(lang.value ?? '')}
-                  options={languages}
-                  placeholder={t('shared-preferences.fields.locale-placeholder', 'Choose language')}
-                  inputId="locale-select"
-                />
-              </Field>
-
-              <div className="gf-form-button-row">
-                <Button
-                  type="submit"
-                  variant="primary"
-                  data-testid={selectors.components.UserProfile.preferencesSaveButton}
                 >
-                  <Trans i18nKey="common.save">Save</Trans>
+                  <DashboardPicker
-                </Button>
+                    value={homeDashboardUID}
-              </div>
+                    onChange={(v) => this.onHomeDashboardChanged(v?.uid ?? '')}
-            </FieldSet>
+                    defaultOptions={true}
+                    isClearable={true}
+                    placeholder={t('shared-preferences.fields.home-dashboard-placeholder', 'Default dashboard')}
+                    inputId="home-dashboard-select"
+                  />
+                </Field>
+
+                <Field
+                  label={t('shared-dashboard.fields.timezone-label', 'Timezone')}
+                  data-testid={selectors.components.TimeZonePicker.containerV2}
+                >
+                  <TimeZonePicker
+                    includeInternal={true}
+                    value={timezone}
+                    onChange={this.onTimeZoneChanged}
+                    inputId="shared-preferences-timezone-picker"
+                  />
+                </Field>
+
+                <Field
+                  label={t('shared-preferences.fields.week-start-label', 'Week start')}
+                  data-testid={selectors.components.WeekStartPicker.containerV2}
+                >
+                  <WeekStartPicker
+                    value={weekStart || ''}
+                    onChange={this.onWeekStartChanged}
+                    inputId={'shared-preferences-week-start-picker'}
+                  />
+                </Field>
+
+                <Field
+                  label={
+                    <Label htmlFor="locale-select">
+                      <span className={styles.labelText}>
+                        <Trans i18nKey="shared-preferences.fields.locale-label">Language</Trans>
+                      </span>
+                      <FeatureBadge featureState={FeatureState.beta} />
+                    </Label>
+                  }
+                  data-testid="User preferences language drop down"
+                >
+                  <Select
+                    value={languages.find((lang) => lang.value === language)}
+                    onChange={(lang: SelectableValue<string>) => this.onLanguageChanged(lang.value ?? '')}
+                    options={languages}
+                    placeholder={t('shared-preferences.fields.locale-placeholder', 'Choose language')}
+                    inputId="locale-select"
+                  />
+                </Field>
+              </FieldSet>
+              <Button
+                type="submit"
+                variant="primary"
+                data-testid={selectors.components.UserProfile.preferencesSaveButton}
+              >
+                <Trans i18nKey="common.save">Save</Trans>
+              </Button>
+            </>
           );
         }}
       </Form>

public/app/features/admin/UserListAdminPage.tsx

@@ -13,6 +13,7 @@ import {
   Tooltip,
   useStyles2,
   FilterInput,
+  InlineField,
 } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
@@ -82,13 +83,15 @@ const UserListAdminPageUnConnected = ({
   return (
     <Page.Contents>
       <div className="page-action-bar" data-testid={selectors.container}>
-        <div className="gf-form gf-form--grow">
+        <>
-          <FilterInput
+          <InlineField grow>
-            placeholder="Search user by login, email, or name."
+            <FilterInput
-            autoFocus={true}
+              placeholder="Search user by login, email, or name."
-            value={query}
+              autoFocus={true}
-            onChange={changeQuery}
+              value={query}
-          />
+              onChange={changeQuery}
+            />
+          </InlineField>
           <RadioButtonGroup
             options={[
               { label: 'All users', value: false },
@@ -101,7 +104,7 @@ const UserListAdminPageUnConnected = ({
           {extraFilters.map((FilterComponent, index) => (
             <FilterComponent key={index} filters={filters} onChange={changeFilter} className={styles.filter} />
           ))}
-        </div>
+        </>
         {contextSrv.hasPermission(AccessControlAction.UsersCreate) && (
           <LinkButton href="admin/users/create" variant="primary">
             New user

public/app/features/profile/UserProfileEditForm.tsx

@@ -31,58 +31,57 @@ export const UserProfileEditForm = ({ user, isSavingUser, updateProfile }: Props
     <Form onSubmit={onSubmitProfileUpdate} validateOn="onBlur">
       {({ register, errors }) => {
         return (
-          <FieldSet>
+          <>
-            <Field
+            <FieldSet>
-              label={t('user-profile.fields.name-label', 'Name') + lockMessage}
+              <Field
-              invalid={!!errors.name}
+                label={t('user-profile.fields.name-label', 'Name') + lockMessage}
-              error={<Trans i18nKey="user-profile.fields.name-error">Name is required</Trans>}
+                invalid={!!errors.name}
-              disabled={disabledEdit}
+                error={<Trans i18nKey="user-profile.fields.name-error">Name is required</Trans>}
-            >
+                disabled={disabledEdit}
-              <Input
-                {...register('name', { required: true })}
-                id="edit-user-profile-name"
-                placeholder={t('user-profile.fields.name-label', 'Name')}
-                defaultValue={user?.name ?? ''}
-                suffix={<InputSuffix />}
-              />
-            </Field>
-
-            <Field
-              label={t('user-profile.fields.email-label', 'Email') + lockMessage}
-              invalid={!!errors.email}
-              error={<Trans i18nKey="user-profile.fields.email-error">Email is required</Trans>}
-              disabled={disabledEdit}
-            >
-              <Input
-                {...register('email', { required: true })}
-                id="edit-user-profile-email"
-                placeholder={t('user-profile.fields.email-label', 'Email')}
-                defaultValue={user?.email ?? ''}
-                suffix={<InputSuffix />}
-              />
-            </Field>
-
-            <Field label={t('user-profile.fields.username-label', 'Username') + lockMessage} disabled={disabledEdit}>
-              <Input
-                {...register('login')}
-                id="edit-user-profile-username"
-                defaultValue={user?.login ?? ''}
-                placeholder={t('user-profile.fields.username-label', 'Username') + lockMessage}
-                suffix={<InputSuffix />}
-              />
-            </Field>
-
-            <div className="gf-form-button-row">
-              <Button
-                variant="primary"
-                disabled={isSavingUser || disabledEdit}
-                data-testid={selectors.components.UserProfile.profileSaveButton}
-                type="submit"
               >
-                <Trans i18nKey="common.save">Save</Trans>
+                <Input
-              </Button>
+                  {...register('name', { required: true })}
-            </div>
+                  id="edit-user-profile-name"
-          </FieldSet>
+                  placeholder={t('user-profile.fields.name-label', 'Name')}
+                  defaultValue={user?.name ?? ''}
+                  suffix={<InputSuffix />}
+                />
+              </Field>
+
+              <Field
+                label={t('user-profile.fields.email-label', 'Email') + lockMessage}
+                invalid={!!errors.email}
+                error={<Trans i18nKey="user-profile.fields.email-error">Email is required</Trans>}
+                disabled={disabledEdit}
+              >
+                <Input
+                  {...register('email', { required: true })}
+                  id="edit-user-profile-email"
+                  placeholder={t('user-profile.fields.email-label', 'Email')}
+                  defaultValue={user?.email ?? ''}
+                  suffix={<InputSuffix />}
+                />
+              </Field>
+
+              <Field label={t('user-profile.fields.username-label', 'Username') + lockMessage} disabled={disabledEdit}>
+                <Input
+                  {...register('login')}
+                  id="edit-user-profile-username"
+                  defaultValue={user?.login ?? ''}
+                  placeholder={t('user-profile.fields.username-label', 'Username') + lockMessage}
+                  suffix={<InputSuffix />}
+                />
+              </Field>
+            </FieldSet>
+            <Button
+              variant="primary"
+              disabled={isSavingUser || disabledEdit}
+              data-testid={selectors.components.UserProfile.profileSaveButton}
+              type="submit"
+            >
+              <Trans i18nKey="common.save">Save</Trans>
+            </Button>
+          </>
         );
       }}
     </Form>

public/app/features/teams/CreateTeam.tsx

@@ -46,35 +46,36 @@ export const CreateTeam = (): JSX.Element => {
       <Page.Contents>
         <Form onSubmit={createTeam}>
           {({ register, errors }) => (
-            <FieldSet>
+            <>
-              <Field label="Name" required invalid={!!errors.name} error="Team name is required">
+              <FieldSet>
-                <Input {...register('name', { required: true })} id="team-name" />
+                <Field label="Name" required invalid={!!errors.name} error="Team name is required">
-              </Field>
+                  <Input {...register('name', { required: true })} id="team-name" />
-              {contextSrv.licensedAccessControlEnabled() && (
-                <Field label="Role">
-                  <TeamRolePicker
-                    teamId={0}
-                    roleOptions={roleOptions}
-                    disabled={false}
-                    apply={true}
-                    onApplyRoles={setPendingRoles}
-                    pendingRoles={pendingRoles}
-                    maxWidth="100%"
-                  />
                 </Field>
-              )}
+                {contextSrv.licensedAccessControlEnabled() && (
-              <Field
+                  <Field label="Role">
-                label={'Email'}
+                    <TeamRolePicker
-                description={'This is optional and is primarily used for allowing custom team avatars.'}
+                      teamId={0}
-              >
+                      roleOptions={roleOptions}
-                <Input {...register('email')} type="email" id="team-email" placeholder="email@test.com" />
+                      disabled={false}
-              </Field>
+                      apply={true}
-              <div className="gf-form-button-row">
+                      onApplyRoles={setPendingRoles}
-                <Button type="submit" variant="primary">
+                      pendingRoles={pendingRoles}
-                  Create
+                      maxWidth="100%"
-                </Button>
+                    />
-              </div>
+                  </Field>
-            </FieldSet>
+                )}
+                <Field
+                  label={'Email'}
+                  description={'This is optional and is primarily used for allowing custom team avatars.'}
+                >
+                  <Input {...register('email')} type="email" id="team-email" placeholder="email@test.com" />
+                </Field>
+              </FieldSet>
+
+              <Button type="submit" variant="primary">
+                Create
+              </Button>
+            </>
           )}
         </Form>
       </Page.Contents>