Merge pull request #812 from mlorb/ml-sci-1634

Fix a few style error on All teams page [SCI-1634]

app/javascript/src/components/data_table/index.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
 import styled from "styled-components";
 import {
   WHITE_COLOR,
@@ -14,7 +14,7 @@ const StyledBootstrapTable = styled(BootstrapTable)`
     background-color: ${COLOR_GRAY};
 
     > tr > th,
-    >tr > td {
+    > tr > td {
       padding: 6px;
       padding-right: 30px;
     }
@@ -33,7 +33,8 @@ const StyledBootstrapTable = styled(BootstrapTable)`
     }
   }
 
-  td, th {
+  td,
+  th {
     box-sizing: content-box;
   }
 
@@ -42,14 +43,32 @@ const StyledBootstrapTable = styled(BootstrapTable)`
     text-overflow: ellipsis;
     word-break: break-word;
   }
+
+  .react-bs-table-pagination {
+    .btn {
+      border-radius: 4px;
+      margin-left: 10px;
+    }
+    .dropdown.show {
+      display: inline-block !important;
+    }
+  }
 `;
 
 class DataTable extends Component {
   static cleanColumnAttributes(col) {
     // Remove additional attributes from the columns
     const {
-      id, isKey, textId, name, position, visible,
-      sortable, locked, ...cleanCol
+      id,
+      isKey,
+      textId,
+      name,
+      position,
+      visible,
+      sortable,
+      locked,
+      width,
+      ...cleanCol
     } = col;
     return cleanCol;
   }
@@ -62,25 +81,27 @@ class DataTable extends Component {
 
   cleanProps() {
     // Remove additional props from the props value
-    const {columns, ...cleanProps} = this.props;
+    const { columns, ...cleanProps } = this.props;
     return cleanProps;
   }
 
-
   displayHeader() {
-    const orderedCols = this.props.columns.sort((a, b) => a.position - b.position);
-    return orderedCols.map((col) =>
+    const orderedCols = this.props.columns.sort(
+      (a, b) => a.position - b.position
+    );
+    return orderedCols.map(col => (
       <TableHeaderColumn
         key={col.id}
         dataField={col.textId}
         isKey={col.isKey}
-        hidden={('visible' in col) && !col.visible}
+        hidden={"visible" in col && !col.visible}
         dataSort={col.sortable}
+        width={col.width}
         {...DataTable.cleanColumnAttributes(col)}
       >
         {col.name}
       </TableHeaderColumn>
-    );
+    ));
   }
 
   render() {
@@ -102,7 +123,8 @@ DataTable.propTypes = {
       position: PropTypes.number.isRequired,
       visible: PropTypes.bool,
       sortable: PropTypes.bool,
-      locked: PropTypes.bool
+      locked: PropTypes.bool,
+      width: PropTypes.string
     })
   ).isRequired,
   data: PropTypes.arrayOf(PropTypes.object).isRequired

app/javascript/src/config/locales/messages.js

@@ -63,8 +63,9 @@ export default {
     },
     settings_page: {
       all_teams: "All teams",
-      in_team: "You are member of {num} team",
-      in_teams: "You are member of {num} team",
+      in_team: "You are member of {num} team.",
+      in_teams: "You are member of {num} teams.",
+      shows_total_entries: "Showing {start} to {to} of {total} entries.",
       leave_team: "Leave team",
       account: "Account",
       team: "Team",

app/javascript/src/scenes/SettingsPage/scenes/teams/components/TeamsDataTable.jsx

@@ -9,6 +9,21 @@ import DataTable from "../../../../../components/data_table";
 import { SETTINGS_TEAMS_ROUTE } from "../../../../../config/routes";
 
 class TeamsDataTable extends Component {
+  static renderShowsTotal(start, to, total) {
+    return (
+      <span>
+        <FormattedMessage
+          id="settings_page.shows_total_entries"
+          values={{
+            start,
+            to,
+            total
+          }}
+        />
+      </span>
+    );
+  }
+
   constructor(props) {
     super(props);
 
@@ -37,11 +52,7 @@ class TeamsDataTable extends Component {
   }
 
   linkToTeam(name, row) {
-    return (
-      <Link to={`${SETTINGS_TEAMS_ROUTE}/${row.id}`}>
-        {name}
-      </Link>
-    );
+    return <Link to={`${SETTINGS_TEAMS_ROUTE}/${row.id}`}>{name}</Link>;
   }
 
   render() {
@@ -49,18 +60,21 @@ class TeamsDataTable extends Component {
       defaultSortName: "name",
       defaultSortOrder: "desc",
       sizePerPageList: [10, 25, 50, 100],
-      paginationPosition: "top",
-      alwaysShowAllBtns: false
+      prePage: "Prev", // Previous page button text
+      nextPage: "Next", // Next page button textu
+      paginationShowsTotal: TeamsDataTable.renderShowsTotal,
+      alwaysShowAllBtns: true
     };
     const columns = [
       {
         id: 1,
-        name: "Name",
+        name: "Team",
         isKey: false,
         textId: "name",
         dataFormat: this.linkToTeam,
         position: 0,
-        dataSort: true
+        dataSort: true,
+        width: "50%"
       },
       {
         id: 2,
@@ -68,7 +82,8 @@ class TeamsDataTable extends Component {
         isKey: false,
         textId: "role",
         position: 1,
-        dataSort: true
+        dataSort: true,
+        width: "35%"
       },
       {
         id: 3,
@@ -76,7 +91,8 @@ class TeamsDataTable extends Component {
         isKey: false,
         textId: "members",
         position: 2,
-        dataSort: true
+        dataSort: true,
+        width: "15%"
       },
       {
         id: 4,
@@ -84,7 +100,8 @@ class TeamsDataTable extends Component {
         isKey: true,
         textId: "id",
         dataFormat: this.leaveTeamButton,
-        position: 3
+        position: 3,
+        width: "116px"
       }
     ];
     return (

app/javascript/src/scenes/SettingsPage/scenes/teams/index.jsx

@@ -22,7 +22,7 @@ const Wrapper = styled.div`
 const SettingsTeams = ({ teams }) =>
   <Wrapper>
     <Breadcrumb>
-      <Breadcrumb.Item active={false}>
+      <Breadcrumb.Item active>
         <FormattedMessage id="settings_page.all_teams" />
       </Breadcrumb.Item>
     </Breadcrumb>