mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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:
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user