From 7f0a2659d2acb7232df5a6ab2c2dc20559756c3e Mon Sep 17 00:00:00 2001
From: Yongfeng LI <wliyongfeng@gmail.com>
Date: Fri, 12 Jan 2018 18:38:29 +0800
Subject: [PATCH] improve style of token table

---
 .../accessControl/components/AccessControlList.jsx | 32 +++++-----
 .../accessControl/components/GrantListItem.jsx     | 68 +++++++++++-----------
 .../accessControl/components/GrantListItem.scss    |  7 +++
 src/features/accessControl/reducers.js             |  3 +
 4 files changed, 61 insertions(+), 49 deletions(-)
 create mode 100644 src/features/accessControl/components/GrantListItem.scss

diff --git a/src/features/accessControl/components/AccessControlList.jsx b/src/features/accessControl/components/AccessControlList.jsx
index 102ea0d..0df6551 100644
--- a/src/features/accessControl/components/AccessControlList.jsx
+++ b/src/features/accessControl/components/AccessControlList.jsx
@@ -12,13 +12,13 @@ class AccessControlList extends React.Component {
       beginEditing: this.props.beginEditing,
       delete: this.props.delete,
     }
-    const tokenList = <TableList titles={['Token Name', 'Policies']}>
-      {this.props.tokens.map(item => <GrantListItem key={item.id} item={item} {...itemProps} />)}
+    const tokenList = <TableList titles={['Token Name', 'Token']}>
+      {(this.props.tokens || []).map(item => <GrantListItem key={item.id} item={item} {...itemProps} />)}
     </TableList>
 
-    const certList = <TableList titles={['Certificate', 'Policies']}>
-      {this.props.certs.map(item => <GrantListItem key={item.id} item={item} {...itemProps} />)}
-    </TableList>
+    // const certList = <TableList titles={['Certificate', 'Policies']}>
+    //   {this.props.certs.map(item => <GrantListItem key={item.id} item={item} {...itemProps} />)}
+    // </TableList>
 
     return (<div>
       <PageTitle title='Access control' />
@@ -48,28 +48,28 @@ class AccessControlList extends React.Component {
           {tokenList}
         </div>}
 
-        {this.props.certificatesSelected && <div>
-          <button
-            className={`btn btn-primary ${styles.newBtn}`}
-            onClick={this.props.showAddCertificate}>
-              + Register certificate
-          </button>
+        {/*{this.props.certificatesSelected && <div>*/}
+          {/*<button*/}
+            {/*className={`btn btn-primary ${styles.newBtn}`}*/}
+            {/*onClick={this.props.showAddCertificate}>*/}
+              {/*+ Register certificate*/}
+          {/*</button>*/}
 
-          {certList}
-        </div>}
+          {/*{certList}*/}
+        {/*</div>}*/}
       </PageContent>
     </div>)
   }
 }
 
 const mapStateToProps = (state, ownProps) => {
-  const items = state.accessControl.ids.map(id => state.accessControl.items[id])
+  const items = state.accessControl.tokens
   const tokensSelected = ownProps.location.query.type == 'token'
   const certificatesSelected = ownProps.location.query.type != 'token'
 
   return {
-    tokens: items.filter(item => item.guardType == 'access_token'),
-    certs: items.filter(item => item.guardType == 'x509'),
+    tokens: items,
+    certs: items,
     tokensSelected,
     certificatesSelected,
     tokensButtonStyle: tokensSelected && styles.active,
diff --git a/src/features/accessControl/components/GrantListItem.jsx b/src/features/accessControl/components/GrantListItem.jsx
index 7d0b61a..6f2f0a1 100644
--- a/src/features/accessControl/components/GrantListItem.jsx
+++ b/src/features/accessControl/components/GrantListItem.jsx
@@ -1,50 +1,52 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { isAccessToken, getPolicyNames } from 'features/accessControl/selectors'
-import EditPolicies from './EditPolicies'
-import { isArray } from 'lodash'
+// import { isAccessToken, getPolicyNames } from 'features/accessControl/selectors'
+// import EditPolicies from './EditPolicies'
+// import { isArray } from 'lodash'
+import styles from './GrantListItem.scss'
 
 class GrantListItem extends React.Component {
   render() {
     const item = this.props.item
 
-    let desc
-    if (isAccessToken(item)) {
-      desc = item.guardData.id
-    } else { // x509
-      const subject = item.guardData.subject
-      desc = <div>
-        {Object.keys(subject).map(field =>
-          <div key={`${item.id}-${field}`}>
-            {field.toUpperCase()}:
-            {' '}
-            {isArray(subject[field])
-              ? subject[field].join(', ')
-              : subject[field]}
-          </div>
-        )}
-      </div>
-    }
+    // let desc
+    // if (isAccessToken(item)) {
+    //   desc = item.guardData.id
+    // } else { // x509
+    //   const subject = item.guardData.subject
+    //   desc = <div>
+    //     {Object.keys(subject).map(field =>
+    //       <div key={`${item.id}-${field}`}>
+    //         {field.toUpperCase()}:
+    //         {' '}
+    //         {isArray(subject[field])
+    //           ? subject[field].join(', ')
+    //           : subject[field]}
+    //       </div>
+    //     )}
+    //   </div>
+    // }
     return(
       <tr>
-        <td>{desc}</td>
+        <td>{item.id}</td>
+        {/*{!item.isEditing && <td>*/}
+          {/*{getPolicyNames(item).map(name =>*/}
+            {/*<span key={`${item.id}-${name}`}>{name}<br /></span>*/}
+          {/*)}*/}
+        {/*</td>}*/}
+        <td className={`${styles.tdWrap}`}>{item.token}</td>
         {!item.isEditing && <td>
-          {getPolicyNames(item).map(name =>
-            <span key={`${item.id}-${name}`}>{name}<br /></span>
-          )}
-        </td>}
-        {!item.isEditing && <td>
-          <button className='btn btn-link' onClick={this.props.beginEditing.bind(this, item.id)}>
-            Edit
-          </button>
+          {/*<button className='btn btn-link' onClick={this.props.beginEditing.bind(this, item.id)}>*/}
+            {/*Edit*/}
+          {/*</button>*/}
 
-          {isAccessToken(item) && <button className='btn btn-link' onClick={this.props.delete.bind(this, item)}>
+          {<button className='btn btn-link' onClick={this.props.delete.bind(this, item)}>
             Delete
           </button>}
         </td>}
-        {item.isEditing && <td colSpan='2'>
-          <EditPolicies item={item}/>
-        </td>}
+        {/*{item.isEditing && <td colSpan='2'>*/}
+          {/*<EditPolicies item={item}/>*/}
+        {/*</td>}*/}
       </tr>
     )
   }
diff --git a/src/features/accessControl/components/GrantListItem.scss b/src/features/accessControl/components/GrantListItem.scss
new file mode 100644
index 0000000..37c859c
--- /dev/null
+++ b/src/features/accessControl/components/GrantListItem.scss
@@ -0,0 +1,7 @@
+.tdWrap {
+  border-top: 1px solid #f2f2f2;
+  color: #747c89;
+  line-height: 20px;
+  vertical-align: top;
+  word-wrap: break-word;
+}
diff --git a/src/features/accessControl/reducers.js b/src/features/accessControl/reducers.js
index 148e2cd..0747f61 100644
--- a/src/features/accessControl/reducers.js
+++ b/src/features/accessControl/reducers.js
@@ -5,6 +5,9 @@ export default (state = {ids: [], items: {}}, action) => {
   if (action.type == 'RECEIVED_ACCESS_GRANTS') {
     const newObjects = {}
 
+    return {
+      tokens: action.grants
+    }
     action.tokens.forEach(token => {
       const tokenGuard = {
         id: token.id
-- 
2.11.0