Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Use ConfirmButton when deleting a InfluxDB Connection

pull/10616/head
Alex P 2018-03-29 10:50:22 -07:00
parent 3e33bf3982
commit eee9b94cc2
2 changed files with 128 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
ui/src/sources/components/InfluxTable.js
View File

@ -7,6 +7,7 @@ import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
import Dropdown from 'shared/components/Dropdown'
import QuestionMarkTooltip from 'shared/components/QuestionMarkTooltip'
import ConfirmButton from 'shared/components/ConfirmButton'
const kapacitorDropdown = (
kapacitors,
@ -96,7 +97,11 @@ const InfluxTable = ({
handleDeleteKapacitor,
isUsingAuth,
me,
}) => (
}) => {
const wrappedDelete = s => () => {
handleDeleteSource(s)
}
return (
<div className="row">
<div className="col-md-12">
<div className="panel">
@ -162,7 +167,9 @@ const InfluxTable = ({
<h5 className="margin-zero">
<Authorized
requiredRole={EDITOR_ROLE}
replaceWithIfNotAuthorized={<strong>{s.name}</strong>}
replaceWithIfNotAuthorized={
<strong>{s.name}</strong>
}
>
<Link
to={`${location.pathname}/${s.id}/edit`}
@ -179,13 +186,13 @@ const InfluxTable = ({
</td>
<td className="text-right">
<Authorized requiredRole={EDITOR_ROLE}>
<a
className="btn btn-xs btn-danger table--show-on-row-hover"
href="#"
onClick={handleDeleteSource(s)}
>
Delete Connection
</a>
<ConfirmButton
customClass="delete-source table--show-on-row-hover"
type="btn-danger"
size="btn-xs"
text="Delete Connection"
confirmAction={wrappedDelete(s)}
/>
</Authorized>
</td>
<td className="source-table--kapacitor">
@ -206,7 +213,8 @@ const InfluxTable = ({
</div>
</div>
</div>
)
)
}
const {array, bool, func, shape, string} = PropTypes

24
ui/src/style/unsorted.scss
View File

@ -203,7 +203,7 @@ br {
margin-bottom: 4px;
&.intro {
@include gradient-h($c-pool,$c-star);
@include gradient-h($c-pool, $c-star);
color: $g20-white;
}
@ -306,7 +306,7 @@ $tick-script-overlay-margin: 30px;
-----------------------------------------------------------------------------
*/
.icon.download.dlcsv:before {
content: "\e91d";
content: '\e91d';
font-weight: bold;
color: #bec2cc;
}
@ -403,23 +403,23 @@ $dash-editable-header-padding: 7px;
.page-header__left.page-header__dash-editable,
.dashboard-title,
.dashboard-title input[type="text"].form-control.dashboard-title--input,
.dashboard-title input[type='text'].form-control.dashboard-title--input,
.dashboard-title h1 {
flex: 1 0 0;
}
.dashboard-title {
display: flex;
input[type="text"].form-control.dashboard-title--input,
input[type="text"].form-control.dashboard-title--input:focus,
input[type='text'].form-control.dashboard-title--input,
input[type='text'].form-control.dashboard-title--input:focus,
h1 {
font-size: $page-header-size;
font-weight: $page-header-weight;
padding: 0 $dash-editable-header-padding;
}
input[type="text"].form-control.dashboard-title--input,
input[type="text"].form-control.dashboard-title--input:focus {
input[type='text'].form-control.dashboard-title--input,
input[type='text'].form-control.dashboard-title--input:focus {
font-size: $page-header-size;
font-weight: $page-header-weight;
}
@ -439,7 +439,7 @@ $dash-editable-header-padding: 7px;
border-color 0.25s ease;
&:after {
content: "\f058";
content: '\f058';
font-family: 'icomoon';
position: absolute;
font-size: 15px;
@ -550,3 +550,11 @@ div.dropdown.dropdown-stretch > div.dropdown-toggle,
div.dropdown.dropdown-stretch > button.dropdown-toggle {
width: 100%;
}
/*
Delete Source
-----------------------------------------------------------------------------
*/
.delete-source {
display: inline-block;
}