Refactor organizations table to use latest patterns

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 ? (
-    <button
-      className="btn btn-sm btn-default btn-square orgs-table--delete"
-      disabled={true}
-    >
-      <span className="icon trash" />
-    </button>
-  ) : (
-    <button
-      className="btn btn-sm btn-default btn-square"
-      onClick={onClickDelete}
-    >
-      <span className="icon trash" />
-    </button>
-  )
-
 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 (
       <div className="fancytable--row">
         <div className="fancytable--td orgs-table--active">
@@ -101,7 +64,7 @@ class OrganizationsTableRow extends Component {
           wrapperClass="fancytable--td orgs-table--name"
           onBlur={this.handleUpdateOrgName}
         />
-        <div className={defaultRoleClassName}>
+        <div className="fancytable--td orgs-table--default-role">
           <Dropdown
             items={dropdownRolesItems}
             onChoose={this.handleChooseDefaultRole}
@@ -109,21 +72,14 @@ class OrganizationsTableRow extends Component {
             className="dropdown-stretch"
           />
         </div>
-        {isDeleting ? (
-          <ConfirmOrCancel
-            item={organization}
-            onCancel={this.handleDismissDeleteConfirmation}
-            onConfirm={this.handleDeleteOrg}
-            onClickOutside={this.handleDismissDeleteConfirmation}
-            confirmLeft={true}
-            confirmTitle="Delete"
-          />
-        ) : (
-          <OrganizationsTableRowDeleteButton
-            organization={organization}
-            onClickDelete={this.handleDeleteClick}
-          />
-        )}
+        <ConfirmButton
+          confirmAction={this.handleDeleteOrg}
+          confirmText="Delete Organization?"
+          size="btn-sm"
+          square={true}
+          icon="trash"
+          disabled={organization.id === DEFAULT_ORG_ID}
+        />
       </div>
     )
   }
@@ -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),
 })

ui/src/admin/components/chronograf/OrganizationsTableRowNew.js

@@ -74,7 +74,7 @@ class OrganizationsTableRowNew extends Component {
             ref={r => (this.inputRef = r)}
           />
         </div>
-        <div className="fancytable--td orgs-table--default-role deleting">
+        <div className="fancytable--td orgs-table--default-role creating">
           <Dropdown
             items={dropdownRolesItems}
             onChoose={this.handleChooseDefaultRole}

ui/src/style/components/fancy-table.scss

@@ -12,7 +12,8 @@ $fancytable--table--margin: 4px;
   flex-wrap: nowrap;
   align-items: center;
 
-  > div:not(.confirm-or-cancel) {
+  > div:not(.confirm-or-cancel),
+  > div:not(.confirm-button) {
     margin-right: $fancytable--table--margin;
   }
 }

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

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 {