From 14106b76c4bbffa83d4b33a6f25deb823b7cdb88 Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 29 Mar 2018 15:11:40 -0700 Subject: [PATCH] Refactor organizations table to use latest patterns --- .../chronograf/OrganizationsTableRow.js | 73 +++---------------- .../chronograf/OrganizationsTableRowNew.js | 2 +- ui/src/style/components/fancy-table.scss | 3 +- .../style/components/organizations-table.scss | 8 +- ui/src/style/pages/manage-providers.scss | 34 ++++++--- 5 files changed, 42 insertions(+), 78 deletions(-) diff --git a/ui/src/admin/components/chronograf/OrganizationsTableRow.js b/ui/src/admin/components/chronograf/OrganizationsTableRow.js index 99bfaef43..c68f0f77a 100644 --- a/ui/src/admin/components/chronograf/OrganizationsTableRow.js +++ b/ui/src/admin/components/chronograf/OrganizationsTableRow.js @@ -4,7 +4,7 @@ import {connect} from 'react-redux' import {bindActionCreators} from 'redux' import {withRouter} from 'react-router' -import ConfirmOrCancel from 'shared/components/ConfirmOrCancel' +import ConfirmButton from 'shared/components/ConfirmButton' import Dropdown from 'shared/components/Dropdown' import InputClickToEdit from 'shared/components/InputClickToEdit' @@ -13,32 +13,7 @@ import {meChangeOrganizationAsync} from 'shared/actions/auth' import {DEFAULT_ORG_ID} from 'src/admin/constants/chronografAdmin' import {USER_ROLES} from 'src/admin/constants/chronografAdmin' -const OrganizationsTableRowDeleteButton = ({organization, onClickDelete}) => - organization.id === DEFAULT_ORG_ID ? ( - - ) : ( - - ) - class OrganizationsTableRow extends Component { - constructor(props) { - super(props) - - this.state = { - isDeleting: false, - } - } - handleChangeCurrentOrganization = async () => { const {router, links, meChangeOrganization, organization} = this.props @@ -49,13 +24,6 @@ class OrganizationsTableRow extends Component { const {organization, onRename} = this.props onRename(organization, newName) } - handleDeleteClick = () => { - this.setState({isDeleting: true}) - } - - handleDismissDeleteConfirmation = () => { - this.setState({isDeleting: false}) - } handleDeleteOrg = organization => { const {onDelete} = this.props @@ -68,7 +36,6 @@ class OrganizationsTableRow extends Component { } render() { - const {isDeleting} = this.state const {organization, currentOrganization} = this.props const dropdownRolesItems = USER_ROLES.map(role => ({ @@ -76,10 +43,6 @@ class OrganizationsTableRow extends Component { text: role.name, })) - const defaultRoleClassName = isDeleting - ? 'fancytable--td orgs-table--default-role deleting' - : 'fancytable--td orgs-table--default-role' - return (
@@ -101,7 +64,7 @@ class OrganizationsTableRow extends Component { wrapperClass="fancytable--td orgs-table--name" onBlur={this.handleUpdateOrgName} /> -
+
- {isDeleting ? ( - - ) : ( - - )} +
) } @@ -161,15 +117,6 @@ OrganizationsTableRow.propTypes = { meChangeOrganization: func.isRequired, } -OrganizationsTableRowDeleteButton.propTypes = { - organization: shape({ - id: string, // when optimistically created, organization will not have an id - name: string.isRequired, - defaultRole: string.isRequired, - }).isRequired, - onClickDelete: func.isRequired, -} - const mapDispatchToProps = dispatch => ({ meChangeOrganization: bindActionCreators(meChangeOrganizationAsync, dispatch), }) diff --git a/ui/src/admin/components/chronograf/OrganizationsTableRowNew.js b/ui/src/admin/components/chronograf/OrganizationsTableRowNew.js index 95283f428..ddadb6cc1 100644 --- a/ui/src/admin/components/chronograf/OrganizationsTableRowNew.js +++ b/ui/src/admin/components/chronograf/OrganizationsTableRowNew.js @@ -74,7 +74,7 @@ class OrganizationsTableRowNew extends Component { ref={r => (this.inputRef = r)} />
-
+
div:not(.confirm-or-cancel) { + > div:not(.confirm-or-cancel), + > div:not(.confirm-button) { margin-right: $fancytable--table--margin; } } diff --git a/ui/src/style/components/organizations-table.scss b/ui/src/style/components/organizations-table.scss index f5cf958fd..f6f542bc3 100644 --- a/ui/src/style/components/organizations-table.scss +++ b/ui/src/style/components/organizations-table.scss @@ -26,10 +26,12 @@ $orgs-table--delete-width: 30px; width: $orgs-table--active-width; justify-content: center; @include no-user-select(); - - .btn {width: 100%;} + + .btn { + width: 100%; + } } -.orgs-table--default-role.deleting { +.orgs-table--default-role.creating { width: ( $orgs-table--default-role-width - $fancytable--table--margin - $orgs-table--delete-width diff --git a/ui/src/style/pages/manage-providers.scss b/ui/src/style/pages/manage-providers.scss index f99d8082a..4c6e36233 100644 --- a/ui/src/style/pages/manage-providers.scss +++ b/ui/src/style/pages/manage-providers.scss @@ -10,24 +10,38 @@ $provider--providerorg-width: 210px; $provider--redirect-width: 220px; $provider--delete-width: 30px; - -.provider--id {width: $provider--id-width;} -.provider--scheme {width: $provider--scheme-width;} -.provider--provider {width: $provider--provider-width;} -.provider--providerorg {width: $provider--providerorg-width;} -.provider--redirect {width: $provider--redirect-width;} +.provider--id { + width: $provider--id-width; +} +.provider--scheme { + width: $provider--scheme-width; +} +.provider--provider { + width: $provider--provider-width; +} +.provider--providerorg { + width: $provider--providerorg-width; +} +.provider--redirect { + width: $provider--redirect-width; +} .provider--delete { width: $provider--delete-width; min-width: $provider--delete-width; } -.provider--arrow {flex: 1 0 0;} +.provider--arrow { + flex: 1 0 0; +} .fancytable--td.provider--id, .fancytable--th.provider--id { padding: 0 8px; } -.provider--redirect.deleting { - width: ($provider--redirect-width - $fancytable--table--margin - $provider--delete-width); +.provider--redirect.creating { + width: ( + $provider--redirect-width - $fancytable--table--margin - + $provider--delete-width + ); } .provider--arrow { @@ -43,7 +57,7 @@ $provider--delete-width: 30px; position: relative; height: 2px; width: 100%; - @include gradient-h($c-pool,$c-star); + @include gradient-h($c-pool, $c-star); &:before, &:after {