Improve code for tables (#2730)

frontend/src/components/dialog/list-taggedfiles-dialog.js

@@ -51,7 +51,7 @@ class ListTaggedFilesDialog extends React.Component {
         </ModalHeader>
         <ModalBody className="dialog-list-container">
           <table>
-            <thead className="table-thread-hidden">
+            <thead className="table-thead-hidden">
               <tr>
                 <th width='50%' className="ellipsis">{gettext('Name')}</th>
                 <th width='25%'>{gettext('Size')}</th>

frontend/src/components/dialog/share-dialog.js

@@ -109,7 +109,7 @@ class ShareDialog extends React.Component {
       <div>
         <Modal isOpen={true} style={{maxWidth: '720px'}} className="share-dialog">
           <ModalHeader toggle={this.props.toggleDialog}>{gettext('Share')} <span className="sf-font" title={itemName}>{itemName}</span></ModalHeader>
-          <ModalBody className="share-dialog-content">
+          <ModalBody className="dialog-list-container share-dialog-content">
             {(itemType === 'library' || itemType === 'dir') && this.renderDirContent()}
             {itemType === 'file' && this.renderFileContent()}
           </ModalBody>

frontend/src/components/dialog/share-to-group.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'reactstrap';
 import Select from 'react-select';
@@ -246,56 +246,71 @@ class ShareToGroup extends React.Component {
 
   render() {
     return (
-      <table>
-        <thead>
-          <tr>
-            <th style={{'width': '40%'}}>{gettext('Group')}</th>
-            <th style={{'width': '40%'}}>{gettext('Permission')}</th>
-            <th></th>
-          </tr>
-          <tr>
-            <td>
-              <Select
-                isMulti
-                onChange={this.handleSelectChange}
-                options={this.options}
-                placeholder={gettext('Select a group')}
-                components={makeAnimated()}
-                inputId={'react-select-2-input'}
-                value={this.state.selectedOption}
-              />
-            </td>
-            <td>
-              <PermissionEditor 
-                isTextMode={false}
-                isEditIconShow={false}
-                currentPermission={this.state.permission}
-                permissions={this.permissions}
-                onPermissionChangedHandler={this.setPermission}
-              />
-            </td>
-            <td>
-              <Button onClick={this.shareToGroup}>{gettext('Submit')}</Button>
-            </td>
-          </tr>
-          {this.state.errorMsg.length > 0 &&                  
-            this.state.errorMsg.map((item, index) => {
-              let errMessage = item.group_name + ': ' + item.error_msg;
-              return (
-                <tr key={index}>
-                  <td colSpan={3}><p className="error">{errMessage}</p></td>
-                </tr>
-              );
-            })                                                
-          }
-        </thead>
-        <GroupList 
-          items={this.state.sharedItems}
-          permissions={this.permissions}
-          deleteShareItem={this.deleteShareItem} 
-          onChangeUserPermission={this.onChangeUserPermission}
-        />
-      </table>
+      <Fragment>
+        <table>
+          <thead>
+            <tr>
+              <th width="40%">{gettext('Group')}</th>
+              <th width="40%">{gettext('Permission')}</th>
+              <th width="20%"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <Select
+                  isMulti
+                  onChange={this.handleSelectChange}
+                  options={this.options}
+                  placeholder={gettext('Select a group')}
+                  components={makeAnimated()}
+                  inputId={'react-select-2-input'}
+                  value={this.state.selectedOption}
+                />
+              </td>
+              <td>
+                <PermissionEditor 
+                  isTextMode={false}
+                  isEditIconShow={false}
+                  currentPermission={this.state.permission}
+                  permissions={this.permissions}
+                  onPermissionChangedHandler={this.setPermission}
+                />
+              </td>
+              <td>
+                <Button onClick={this.shareToGroup}>{gettext('Submit')}</Button>
+              </td>
+            </tr>
+            {this.state.errorMsg.length > 0 &&                  
+              this.state.errorMsg.map((item, index) => {
+                let errMessage = item.group_name + ': ' + item.error_msg;
+                return (
+                  <tr key={index}>
+                    <td colSpan={3}><p className="error">{errMessage}</p></td>
+                  </tr>
+                );
+              })                                                
+            }
+          </tbody>
+        </table>
+        <div className="share-list-container">
+          <table className="table-thead-hidden">
+            <thead>
+              <tr>
+                <th width="40%">{gettext('Group')}</th>
+                <th width="40%">{gettext('Permission')}</th>
+                <th width="20%"></th>
+              </tr>
+            </thead>
+            <GroupList 
+              items={this.state.sharedItems}
+              permissions={this.permissions}
+              deleteShareItem={this.deleteShareItem} 
+              onChangeUserPermission={this.onChangeUserPermission}
+            />
+          </table>
+        </div>
+      </Fragment>
     );
   }
 }

frontend/src/components/dialog/share-to-user.js

@@ -263,64 +263,79 @@ class ShareToUser extends React.Component {
   render() {
     let { sharedItems } = this.state;
     return (
-      <table>
-        <thead> 
-          <tr>
-            <th style={{'width': '40%'}}>{gettext('User')}</th>
-            <th style={{'width': '40%'}}>{gettext('Permission')}</th>
-            <th></th>
-          </tr>
-          <tr>
-            <td>
-              <AsyncSelect
-                inputId={'react-select-1-input'}
-                className='reviewer-select' 
-                placeholder={gettext('Select users...')}
-                loadOptions={this.loadOptions}
-                onChange={this.handleSelectChange}
-                value={this.state.selectedOption}
-                isMulti 
-                isFocused
-                isClearable 
-                classNamePrefix
-              />
-            </td>
-            <td>
-              <PermissionEditor 
-                isTextMode={false}
-                isEditIconShow={false}
-                currentPermission={this.state.permission}
-                permissions={this.permissions}
-                onPermissionChangedHandler={this.setPermission}
-              />
-            </td>
-            <td>
-              <Button onClick={this.shareToUser}>{gettext('Submit')}</Button>
-            </td>
-          </tr>
-          {this.state.errorMsg.length > 0 &&
-            this.state.errorMsg.map((item, index) => {
-              let errMessage = '';
-              if (item.email) {
-                errMessage = item.email + ': ' + item.error_msg;
-              } else {
-                errMessage = item;
-              }
-              return (
-                <tr key={index}>
-                  <td colSpan={3}><p className="error">{errMessage}</p></td>
-                </tr>
-              );
-            })
-          }
-        </thead>
-        <UserList 
-          items={sharedItems}
-          permissions={this.permissions}
-          deleteShareItem={this.deleteShareItem} 
-          onChangeUserPermission={this.onChangeUserPermission}
-        />
-      </table>
+      <Fragment>
+        <table>
+          <thead>
+            <tr>
+              <th width="40%">{gettext('User')}</th>
+              <th width="40%">{gettext('Permission')}</th>
+              <th width="20%"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <AsyncSelect
+                  inputId={'react-select-1-input'}
+                  className='reviewer-select' 
+                  placeholder={gettext('Select users...')}
+                  loadOptions={this.loadOptions}
+                  onChange={this.handleSelectChange}
+                  value={this.state.selectedOption}
+                  isMulti 
+                  isFocused
+                  isClearable 
+                  classNamePrefix
+                />
+              </td>
+              <td>
+                <PermissionEditor 
+                  isTextMode={false}
+                  isEditIconShow={false}
+                  currentPermission={this.state.permission}
+                  permissions={this.permissions}
+                  onPermissionChangedHandler={this.setPermission}
+                />
+              </td>
+              <td>
+                <Button onClick={this.shareToUser}>{gettext('Submit')}</Button>
+              </td>
+            </tr>
+            {this.state.errorMsg.length > 0 &&
+              this.state.errorMsg.map((item, index) => {
+                let errMessage = '';
+                if (item.email) {
+                  errMessage = item.email + ': ' + item.error_msg;
+                } else {
+                  errMessage = item;
+                }
+                return (
+                  <tr key={index}>
+                    <td colSpan={3}><p className="error">{errMessage}</p></td>
+                  </tr>
+                );
+              })
+            }
+          </tbody>
+        </table>
+        <div className="share-list-container">
+          <table className="table-thead-hidden">
+            <thead>
+              <tr>
+                <th width="40%">{gettext('User')}</th>
+                <th width="40%">{gettext('Permission')}</th>
+                <th width="20%"></th>
+              </tr>
+            </thead>
+            <UserList 
+              items={sharedItems}
+              permissions={this.permissions}
+              deleteShareItem={this.deleteShareItem} 
+              onChangeUserPermission={this.onChangeUserPermission}
+            />
+          </table>
+        </div>
+      </Fragment>
     );
   }
 }

frontend/src/components/dirent-detail/detail-list-view.js

@@ -111,7 +111,7 @@ class DetailListView extends React.Component {
                       );
                     })}
                   </ul>
-                  <i className='fa fa-pencil tag-edit-icon' onClick={this.onEditFileTagToggle}></i>
+                  <i className='fa fa-pencil attr-action-icon' onClick={this.onEditFileTagToggle}></i>
                 </td>
               </tr>
               <tr className="file-related-files">

frontend/src/components/permission-editor.js

@@ -80,8 +80,7 @@ class PermissionEditor extends React.Component {
             {this.props.isEditIconShow && (
               <span 
                 title={gettext('Edit')} 
-                style={{fontSize: '0.875rem', marginLeft: '0.5rem'}} 
-                className="fa fa-pencil action-icon" 
+                className="fa fa-pencil attr-action-icon" 
                 onClick={this.onEidtPermission}>
               </span>
             )}

frontend/src/components/shared-repo-list-view/shared-repo-list-view.js

@@ -52,7 +52,7 @@ class SharedRepoListView extends React.Component {
     let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
     return (
       <table>
-        <thead className={isShowTableThread ? '' : 'table-thread-hidden'}>
+        <thead className={isShowTableThread ? '' : 'table-thead-hidden'}>
           <tr>
             <th width="4%"><span className="sr-only">{gettext("Library Type")}</span></th>
             <th width="40%">{gettext("Name")}