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}>
{() => {
return (
<FieldSet label={<Trans i18nKey="shared-preferences.title">Preferences</Trans>} disabled={disabled}>
<Field label={t('shared-preferences.fields.theme-label', 'Interface theme')}>
<Select
options={this.themeOptions}
value={currentThemeOption}
onChange={this.onThemeChanged}
inputId="shared-preferences-theme-select"
/>
</Field>
<Field
label={
<Label htmlFor="home-dashboard-select">
<span className={styles.labelText}>
<Trans i18nKey="shared-preferences.fields.home-dashboard-label">Home Dashboard</Trans>
</span>
</Label>
}
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}
<>
<FieldSet label={<Trans i18nKey="shared-preferences.title">Preferences</Trans>} disabled={disabled}>
<Field label={t('shared-preferences.fields.theme-label', 'Interface theme')}>
<Select
options={this.themeOptions}
value={currentThemeOption}
onChange={this.onThemeChanged}
inputId="shared-preferences-theme-select"
/>
</Field>
<Field
label={
<Label htmlFor="home-dashboard-select">
<span className={styles.labelText}>
<Trans i18nKey="shared-preferences.fields.home-dashboard-label">Home Dashboard</Trans>
</span>
</Label>
}
data-testid="User preferences home dashboard drop down"
>
<Trans i18nKey="common.save">Save</Trans>
</Button>
</div>
</FieldSet>
<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>
</FieldSet>
<Button
type="submit"
variant="primary"
data-testid={selectors.components.UserProfile.preferencesSaveButton}
>
<Trans i18nKey="common.save">Save</Trans>
</Button>
</>
);
}}
</Form>

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

@ -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
placeholder="Search user by login, email, or name."
autoFocus={true}
value={query}
onChange={changeQuery}
/>
<>
<InlineField grow>
<FilterInput
placeholder="Search user by login, email, or name."
autoFocus={true}
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

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">
{({ register, errors }) => {
return (
<FieldSet>
<Field
label={t('user-profile.fields.name-label', 'Name') + lockMessage}
invalid={!!errors.name}
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>
<>
<FieldSet>
<Field
label={t('user-profile.fields.name-label', 'Name') + lockMessage}
invalid={!!errors.name}
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>
<div className="gf-form-button-row">
<Button
variant="primary"
disabled={isSavingUser || disabledEdit}
data-testid={selectors.components.UserProfile.profileSaveButton}
type="submit"
<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}
>
<Trans i18nKey="common.save">Save</Trans>
</Button>
</div>
</FieldSet>
<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>

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

@ -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">
<Input {...register('name', { required: true })} id="team-name" />
</Field>
{contextSrv.licensedAccessControlEnabled() && (
<Field label="Role">
<TeamRolePicker
teamId={0}
roleOptions={roleOptions}
disabled={false}
apply={true}
onApplyRoles={setPendingRoles}
pendingRoles={pendingRoles}
maxWidth="100%"
/>
<>
<FieldSet>
<Field label="Name" required invalid={!!errors.name} error="Team name is required">
<Input {...register('name', { required: true })} id="team-name" />
</Field>
)}
<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>
<div className="gf-form-button-row">
<Button type="submit" variant="primary">
Create
</Button>
</div>
</FieldSet>
{contextSrv.licensedAccessControlEnabled() && (
<Field label="Role">
<TeamRolePicker
teamId={0}
roleOptions={roleOptions}
disabled={false}
apply={true}
onApplyRoles={setPendingRoles}
pendingRoles={pendingRoles}
maxWidth="100%"
/>
</Field>
)}
<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>

Write Preview
Loading…
Cancel
Save