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

Refactor TempVar Manager to use confirm button

pull/3096/head
Alex P 2018-03-29 16:06:04 -07:00
parent bd54d53743
commit 80ed25ce2e
4 changed files with 62 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
ui/src/dashboards/components/template_variables/Row.js
View File

@ -12,7 +12,7 @@ import Dropdown from 'shared/components/Dropdown'
import TemplateQueryBuilder from 'src/dashboards/components/template_variables/TemplateQueryBuilder'
import TableInput from 'src/dashboards/components/template_variables/TableInput'
import RowValues from 'src/dashboards/components/template_variables/RowValues'
import RowButtons from 'src/dashboards/components/template_variables/RowButtons'
import ConfirmButton from 'src/shared/components/ConfirmButton'
import {runTemplateVariableQuery as runTemplateVariableQueryAJAX} from 'src/dashboards/apis'
@ -95,15 +95,31 @@ const TemplateVariableRow = ({
autoFocusTarget={autoFocusTarget}
/>
</div>
<div className="tvm--col-4">
<RowButtons
onStartEdit={onStartEdit}
isEditing={isEditing}
onCancelEdit={onCancelEdit}
onDelete={onDeleteTempVar}
id={id}
selectedType={selectedType}
/>
<div className={`tvm--col-4${isEditing ? ' editing' : ''}`}>
{isEditing ? (
<div className="tvm-actions">
<button
className="btn btn-sm btn-info btn-square"
type="button"
onClick={onCancelEdit}
>
<span className="icon remove" />
</button>
<button className="btn btn-sm btn-success btn-square" type="submit">
<span className="icon checkmark" />
</button>
</div>
) : (
<div className="tvm-actions">
<ConfirmButton
type="btn-danger"
confirmText="Delete template variable?"
confirmAction={onDeleteTempVar(id)}
icon="trash"
square={true}
/>
</div>
)}
</div>
</form>
)

51
ui/src/dashboards/components/template_variables/RowButtons.js
View File

@ -1,51 +0,0 @@
import React from 'react'
import PropTypes from 'prop-types'
import DeleteConfirmButtons from 'shared/components/DeleteConfirmButtons'
const RowButtons = ({onStartEdit, isEditing, onCancelEdit, onDelete, id}) => {
if (isEditing) {
return (
<div className="tvm-actions">
<button
className="btn btn-sm btn-info btn-square"
type="button"
onClick={onCancelEdit}
>
<span className="icon remove" />
</button>
<button className="btn btn-sm btn-success btn-square" type="submit">
<span className="icon checkmark" />
</button>
</div>
)
}
return (
<div className="tvm-actions">
<DeleteConfirmButtons
onDelete={onDelete(id)}
icon="remove"
square={true}
/>
<button
className="btn btn-sm btn-info btn-edit btn-square"
type="button"
onClick={onStartEdit('tempVar')}
>
<span className="icon pencil" />
</button>
</div>
)
}
const {bool, func, string} = PropTypes
RowButtons.propTypes = {
onStartEdit: func.isRequired,
isEditing: bool.isRequired,
onCancelEdit: func.isRequired,
onDelete: func.isRequired,
id: string.isRequired,
selectedType: string.isRequired,
}
export default RowButtons

12
ui/src/shared/components/DeleteConfirmTableCell.js
View File

@ -1,12 +0,0 @@
import React from 'react'
import DeleteConfirmButtons from 'shared/components/DeleteConfirmButtons'
import {ADMIN_TABLE} from 'src/admin/constants/tableSizing'
const DeleteConfirmTableCell = props => (
<td className="text-right" style={{width: `${ADMIN_TABLE.colDelete}px`}}>
<DeleteConfirmButtons {...props} />
</td>
)
export default DeleteConfirmTableCell

68
ui/src/style/components/template-variables-manager.scss
View File

@ -28,22 +28,35 @@ $tvmp-table-gutter: 8px;
}
}
.template-variable-manager--body {
padding: 18px ($tvmp-gutter - $tvmp-table-gutter) $tvmp-gutter ($tvmp-gutter - $tvmp-table-gutter);
padding: 18px ($tvmp-gutter - $tvmp-table-gutter) $tvmp-gutter
($tvmp-gutter - $tvmp-table-gutter);
border-radius: 0 0 $radius $radius;
min-height: $tvmp-min-height;
max-height: $tvmp-max-height;
@include gradient-v($g2-kevlar,$g0-obsidian);
@include custom-scrollbar-round($g0-obsidian,$g3-castle);
@include gradient-v($g2-kevlar, $g0-obsidian);
@include custom-scrollbar-round($g0-obsidian, $g3-castle);
}
.template-variable-manager--table,
.template-variable-manager--table-container {
width: 100%;
}
/* Column Widths */
.tvm--col-1 {flex: 0 0 140px;}
.tvm--col-2 {flex: 0 0 140px;}
.tvm--col-3 {flex: 1 0 0;}
.tvm--col-4 {flex: 0 0 68px;}
.tvm--col-1 {
flex: 0 0 140px;
}
.tvm--col-2 {
flex: 0 0 140px;
}
.tvm--col-3 {
flex: 1 0 0;
}
.tvm--col-4 {
flex: 0 0 30px;
&.editing {
flex: 0 0 68px;
}
}
/* Table Column Labels */
.template-variable-manager--table-heading {
@ -61,7 +74,9 @@ $tvmp-table-gutter: 8px;
@include no-user-select();
padding-left: 6px;
margin-right: $tvmp-table-gutter;
&:last-child {margin-right: 0;}
&:last-child {
margin-right: 0;
}
}
}
@ -84,7 +99,9 @@ $tvmp-table-gutter: 8px;
> * {
margin-right: $tvmp-table-gutter;
&:last-child {margin-right: 0;}
&:last-child {
margin-right: 0;
}
}
}
@ -110,8 +127,7 @@ $tvmp-table-gutter: 8px;
border: 2px solid $g5-pepper;
background-color: $g2-kevlar;
overflow: hidden;
transition:
border-color 0.25s ease;
transition: border-color 0.25s ease;
&:hover {
cursor: text;
@ -167,12 +183,16 @@ $tvmp-table-gutter: 8px;
margin-bottom: 2px;
margin-right: 2px;
}
> *:last-child {margin-right: 0;}
> *:last-child {
margin-right: 0;
}
.dropdown {
flex: 1 0 0%;
flex: 1 0 0;
& > .dropdown-toggle {width: 100%;}
& > .dropdown-toggle {
width: 100%;
}
}
}
.tvm-query-builder--text {
@ -188,29 +208,13 @@ $tvmp-table-gutter: 8px;
font-weight: 600;
font-family: $code-font;
}
.tvm-actions {
display: flex;
align-items: center;
justify-content: flex-end;
.btn-edit {
order: 1;
}
> .btn:first-child {
& > .btn:nth-child(2) {
margin-left: $tvmp-table-gutter;
}
/* Override confirm buttons styles */
/* Janky, but doing this quick & dirty for now */
.btn-danger {
order: 2;
}
.confirm-or-cancel > .btn {
margin-left: $tvmp-table-gutter !important;
}
/* Hide the edit button when confirming a delete */
.confirm-or-cancel + .btn-edit {
display: none;
}
}