diff --git a/ui/src/admin/components/DatabaseTable.js b/ui/src/admin/components/DatabaseTable.js index abbfc804e1..dbb98fdcee 100644 --- a/ui/src/admin/components/DatabaseTable.js +++ b/ui/src/admin/components/DatabaseTable.js @@ -1,6 +1,6 @@ import React, {PropTypes} from 'react' import DatabaseRow from 'src/admin/components/DatabaseRow' -import ConfirmButtons from 'src/admin/components/ConfirmButtons' +import DatabaseTableHeader from 'src/admin/components/DatabaseTableHeader' const { func, @@ -30,6 +30,7 @@ const DatabaseTable = ({
{ - if (database.isEditing) { - return ( - - ) - } - - return ( -
- ) -} - -DatabaseTableHeader.propTypes = { - onEdit: func, - database: shape(), - onKeyDown: func, - onCancel: func, - onConfirm: func, - onDelete: func, - onStartDelete: func, - onDatabaseDeleteConfirm: func, - onRemoveDeleteCode: func, - onAddRetentionPolicy: func, - isAddRPDisabled: bool, -} - -const Header = ({ - database, - onCancel, - onDelete, - onStartDelete, - isAddRPDisabled, - onAddRetentionPolicy, - onDatabaseDeleteConfirm, -}) => { - const confirmStyle = { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - } - - const buttons = ( -
- { - database.name === '_internal' ? null : - - } - -
- ) - - const deleteConfirm = ( -
-
- onDatabaseDeleteConfirm(database, e)} - onKeyDown={(e) => onDatabaseDeleteConfirm(database, e)} - autoFocus={true} - /> -
- -
- ) - - return ( -
-

{database.name}

- {database.hasOwnProperty('deleteCode') ? deleteConfirm : buttons} -
- ) -} - -Header.propTypes = { - onConfirm: func, - onCancel: func, - onDelete: func, - database: shape(), - onStartDelete: func, - isAddRPDisabled: bool, - onAddRetentionPolicy: func, - onDatabaseDeleteConfirm: func, -} - -const EditHeader = ({database, onEdit, onKeyDown, onConfirm, onCancel}) => ( -
- onEdit(database, {name: e.target.value})} - onKeyDown={(e) => onKeyDown(e, database)} - autoFocus={true} - /> - -
-) - -EditHeader.propTypes = { - database: shape(), - onEdit: func, - onKeyDown: func, - onCancel: func, - onConfirm: func, - isRFDisplayed: bool, -} - export default DatabaseTable diff --git a/ui/src/admin/components/DatabaseTableHeader.js b/ui/src/admin/components/DatabaseTableHeader.js new file mode 100644 index 0000000000..fac6a6ac15 --- /dev/null +++ b/ui/src/admin/components/DatabaseTableHeader.js @@ -0,0 +1,168 @@ +import React, {PropTypes} from 'react' +import ConfirmButtons from 'src/admin/components/ConfirmButtons' + +const DatabaseTableHeader = ({ + database, + onEdit, + notify, + onKeyDown, + onConfirm, + onCancel, + onDelete, + onStartDelete, + onRemoveDeleteCode, + onDatabaseDeleteConfirm, + onAddRetentionPolicy, + isAddRPDisabled, +}) => { + if (database.isEditing) { + return ( + + ) + } + + return ( +
+ ) +} + +const Header = ({ + notify, + database, + onCancel, + onDelete, + onStartDelete, + isAddRPDisabled, + onAddRetentionPolicy, + onDatabaseDeleteConfirm, +}) => { + const confirmStyle = { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + } + + const buttons = ( +
+ { + database.name === '_internal' ? null : + + } + +
+ ) + + const onConfirm = (db) => { + if (database.deleteCode !== `DELETE ${database.name}`) { + return notify('error', `Type DELETE ${database.name} to confirm`) + } + + onDelete(db) + } + + const deleteConfirmation = ( +
+
+ onDatabaseDeleteConfirm(database, e)} + onKeyDown={(e) => onDatabaseDeleteConfirm(database, e)} + autoFocus={true} + /> +
+ +
+ ) + + return ( +
+

{database.name}

+ {database.hasOwnProperty('deleteCode') ? deleteConfirmation : buttons} +
+ ) +} + +const EditHeader = ({database, onEdit, onKeyDown, onConfirm, onCancel}) => ( +
+ onEdit(database, {name: e.target.value})} + onKeyDown={(e) => onKeyDown(e, database)} + autoFocus={true} + /> + +
+) + +const { + func, + shape, + bool, +} = PropTypes + +DatabaseTableHeader.propTypes = { + onEdit: func, + notify: func, + database: shape(), + onKeyDown: func, + onCancel: func, + onConfirm: func, + onDelete: func, + onStartDelete: func, + onDatabaseDeleteConfirm: func, + onRemoveDeleteCode: func, + onAddRetentionPolicy: func, + isAddRPDisabled: bool, +} + + +Header.propTypes = { + notify: func, + onConfirm: func, + onCancel: func, + onDelete: func, + database: shape(), + onStartDelete: func, + isAddRPDisabled: bool, + onAddRetentionPolicy: func, + onDatabaseDeleteConfirm: func, +} + +EditHeader.propTypes = { + database: shape(), + onEdit: func, + onKeyDown: func, + onCancel: func, + onConfirm: func, + isRFDisplayed: bool, +} + +export default DatabaseTableHeader