apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* 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>
pull/75153/head
Khushi Jain 2 years ago committed by GitHub
parent 8a33f68ba7
commit 5e4a900abe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 170 additions and 168 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 163
      public/app/core/components/SharedPreferences/SharedPreferences.tsx
  2. 19
      public/app/features/admin/UserListAdminPage.tsx
  3. 99
      public/app/features/profile/UserProfileEditForm.tsx
  4. 57
      public/app/features/teams/CreateTeam.tsx

163
public/app/core/components/SharedPreferences/SharedPreferences.tsx
Unescape View File

@ -140,89 +140,88 @@ export class SharedPreferences extends PureComponent<Props, State> {
<Form onSubmit={this.onSubmitForm}> <Form onSubmit={this.onSubmitForm}>
{() => { {() => {
return ( 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
label={ <Field
<Label htmlFor="home-dashboard-select"> label={
<span className={styles.labelText}> <Label htmlFor="home-dashboard-select">
<Trans i18nKey="shared-preferences.fields.home-dashboard-label">Home Dashboard</Trans> <span className={styles.labelText}>
</span> <Trans i18nKey="shared-preferences.fields.home-dashboard-label">Home Dashboard</Trans>
</Label> </span>
} </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> </Form>

19
public/app/features/admin/UserListAdminPage.tsx
Unescape View File

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

99
public/app/features/profile/UserProfileEditForm.tsx
Unescape View File

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

57
public/app/features/teams/CreateTeam.tsx
Unescape View File

@ -46,35 +46,36 @@ export const CreateTeam = (): JSX.Element => {
<Page.Contents> <Page.Contents>
<Form onSubmit={createTeam}> <Form onSubmit={createTeam}>
{({ register, errors }) => ( {({ 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> </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> </Form>
</Page.Contents> </Page.Contents>

Write Preview
Loading…
Cancel
Save