UI: ConfirmButton component (#20993)

* UI: ConfirmButton component

* UI: add link button variant

* UI: add ConfirmButton story with delete option

* Chore: use ConfirmButton instead of DeleteButton

* UI: remove DeleteButton

* UI: rename confirmButtonVariant to confirmVariant

* UI: use Form.Button in ConfirmButton

* Chore: use sm ConfirmButton size after changing defaults

* Revert "UI: add link button variant"

This reverts commit 4372350daa.

* Chore: add 'link' variant type to the Button

* UI: DeleteButton component on top of ConfirmButton

* Chore: use DeleteButton instead of ConfirmButton

* Chore: DeleteButton, use md size by default

* Chore: update test snapshots
This commit is contained in:
Alexander Zobnin
2019-12-13 14:42:18 +03:00
committed by GitHub
parent 4dba02dd20
commit fd2131c1e3
20 changed files with 381 additions and 200 deletions

View File

@@ -12,7 +12,7 @@ import ApiKeysAddedModal from './ApiKeysAddedModal';
import config from 'app/core/config';
import appEvents from 'app/core/app_events';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import { DeleteButton, EventsWithValidation, FormLabel, Input, Switch, ValidationEvents } from '@grafana/ui';
import { EventsWithValidation, FormLabel, Input, Switch, ValidationEvents, DeleteButton } from '@grafana/ui';
import { NavModel, dateTime, isDateTime } from '@grafana/data';
import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
import { store } from 'app/store/store';
@@ -287,7 +287,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
<td>{key.role}</td>
<td>{this.formatDate(key.expiration)}</td>
<td>
<DeleteButton onConfirm={() => this.onDeleteApiKey(key)} />
<DeleteButton size="sm" onConfirm={() => this.onDeleteApiKey(key)} />
</td>
</tr>
);

View File

@@ -66,7 +66,7 @@ export class TeamList extends PureComponent<Props, any> {
<a href={teamUrl}>{team.memberCount}</a>
</td>
<td className="text-right">
<DeleteButton onConfirm={() => this.deleteTeam(team)} disabled={!canDelete} />
<DeleteButton size="sm" disabled={!canDelete} onConfirm={() => this.deleteTeam(team)} />
</td>
</tr>
);

View File

@@ -1,6 +1,6 @@
import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { DeleteButton, Select } from '@grafana/ui';
import { Select, DeleteButton } from '@grafana/ui';
import { SelectableValue } from '@grafana/data';
import { TeamMember, teamsPermissionLevels, TeamPermissionLevel } from 'app/types';
@@ -86,7 +86,7 @@ export class TeamMemberRow extends PureComponent<Props> {
{this.renderPermissions(member)}
{syncEnabled && this.renderLabels(member.labels)}
<td className="text-right">
<DeleteButton onConfirm={() => this.onRemoveMember(member)} disabled={!signedInUserIsTeamAdmin} />
<DeleteButton size="sm" disabled={!signedInUserIsTeamAdmin} onConfirm={() => this.onRemoveMember(member)} />
</td>
</tr>
);

View File

@@ -132,9 +132,10 @@ exports[`Render should render teams table 1`] = `
<td
className="text-right"
>
<DeleteButton
<Component
disabled={false}
onConfirm={[Function]}
size="sm"
/>
</td>
</tr>
@@ -183,9 +184,10 @@ exports[`Render should render teams table 1`] = `
<td
className="text-right"
>
<DeleteButton
<Component
disabled={false}
onConfirm={[Function]}
size="sm"
/>
</td>
</tr>
@@ -234,9 +236,10 @@ exports[`Render should render teams table 1`] = `
<td
className="text-right"
>
<DeleteButton
<Component
disabled={false}
onConfirm={[Function]}
size="sm"
/>
</td>
</tr>
@@ -285,9 +288,10 @@ exports[`Render should render teams table 1`] = `
<td
className="text-right"
>
<DeleteButton
<Component
disabled={false}
onConfirm={[Function]}
size="sm"
/>
</td>
</tr>
@@ -336,9 +340,10 @@ exports[`Render should render teams table 1`] = `
<td
className="text-right"
>
<DeleteButton
<Component
disabled={false}
onConfirm={[Function]}
size="sm"
/>
</td>
</tr>
@@ -462,9 +467,10 @@ exports[`Render when feature toggle editorsCanAdmin is turned on and signedin us
<td
className="text-right"
>
<DeleteButton
<Component
disabled={true}
onConfirm={[Function]}
size="sm"
/>
</td>
</tr>
@@ -588,9 +594,10 @@ exports[`Render when feature toggle editorsCanAdmin is turned on and signedin us
<td
className="text-right"
>
<DeleteButton
<Component
disabled={true}
onConfirm={[Function]}
size="sm"
/>
</td>
</tr>

View File

@@ -48,9 +48,10 @@ exports[`Render should render team members when sync enabled 1`] = `
<td
className="text-right"
>
<DeleteButton
<Component
disabled={true}
onConfirm={[Function]}
size="sm"
/>
</td>
</tr>
@@ -137,9 +138,10 @@ exports[`Render when feature toggle editorsCanAdmin is turned off should not ren
<td
className="text-right"
>
<DeleteButton
<Component
disabled={false}
onConfirm={[Function]}
size="sm"
/>
</td>
</tr>
@@ -226,9 +228,10 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
<td
className="text-right"
>
<DeleteButton
<Component
disabled={false}
onConfirm={[Function]}
size="sm"
/>
</td>
</tr>
@@ -273,9 +276,10 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render s
<td
className="text-right"
>
<DeleteButton
<Component
disabled={true}
onConfirm={[Function]}
size="sm"
/>
</td>
</tr>