Refactor tables part 1

src/commons/dataTable/DataTable.tsx

@@ -0,0 +1,15 @@
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-balham.css';
+
+import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
+import React from 'react';
+
+const DataTable: React.FC<AgGridReactProps> = props => {
+  return (
+    <div className="ag-grid-parent ag-theme-balham">
+      <AgGridReact {...props} />
+    </div>
+  );
+};
+
+export default DataTable;

src/commons/sourceRecorder/SourceRecorderTable.tsx

@@ -1,5 +1,3 @@
-import 'ag-grid-community/styles/ag-grid.css';
-
 import {
   Divider,
   FormGroup,
@@ -9,11 +7,11 @@ import {
   SpinnerSize
 } from '@blueprintjs/core';
 import { ColDef, GridApi, GridReadyEvent } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
 import { sortBy } from 'lodash';
 import React from 'react';
 
 import { PlaybackData, SourcecastData } from '../../features/sourceRecorder/SourceRecorderTypes';
+import DataTable from '../dataTable/DataTable';
 import { getStandardDate } from '../utils/DateHelper';
 import SourcastDeleteCell from './SourceRecorderDeleteCell';
 import SourceRecorderSelectCell from './SourceRecorderSelectCell';
@@ -167,18 +165,16 @@ class SourcecastTable extends React.Component<SourceRecorderTableProps, State> {
         </div>
         <Divider />
         <div className="SourcecastTable">
-          <div className="ag-grid-parent">
-            <AgGridReact
-              domLayout="autoHeight"
-              columnDefs={this.state.columnDefs}
-              defaultColDef={this.defaultColumnDefs}
-              onGridReady={this.onGridReady}
-              rowData={data}
-              rowHeight={30}
-              pagination={false}
-              paginationPageSize={50}
-            />
-          </div>
+          <DataTable
+            domLayout="autoHeight"
+            columnDefs={this.state.columnDefs}
+            defaultColDef={this.defaultColumnDefs}
+            onGridReady={this.onGridReady}
+            rowData={data}
+            rowHeight={30}
+            pagination={false}
+            paginationPageSize={50}
+          />
         </div>
         <br />
       </div>

src/pages/academy/adminPanel/AdminPanel.tsx

@@ -1,6 +1,3 @@
-import 'ag-grid-community/styles/ag-grid.css';
-import 'ag-grid-community/styles/ag-theme-balham.css';
-
 import { Button, Divider, H1, Intent, Tab, Tabs } from '@blueprintjs/core';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';

src/pages/academy/adminPanel/subcomponents/AddStoriesUserPanel.tsx

@@ -13,11 +13,11 @@ import {
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { GridApi, GridReadyEvent } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
 import { uniqBy } from 'lodash';
 import React from 'react';
 import { useCSVReader } from 'react-papaparse';
 import { StoriesRole } from 'src/commons/application/ApplicationTypes';
+import DataTable from 'src/commons/dataTable/DataTable';
 
 import Constants from '../../../../commons/utils/Constants';
 
@@ -63,8 +63,8 @@ const AddStoriesUserPanel: React.FC<Props> = props => {
   };
 
   const grid = (
-    <div className="Grid ag-grid-parent ag-theme-balham">
-      <AgGridReact
+    <div className="Grid">
+      <DataTable
         domLayout="autoHeight"
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}

src/pages/academy/adminPanel/subcomponents/AddUserPanel.tsx

@@ -13,11 +13,11 @@ import {
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { GridApi, GridReadyEvent } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
 import { uniqBy } from 'lodash';
 import React from 'react';
 import { useCSVReader } from 'react-papaparse';
 import { Role } from 'src/commons/application/ApplicationTypes';
+import DataTable from 'src/commons/dataTable/DataTable';
 
 import Constants from '../../../../commons/utils/Constants';
 
@@ -63,8 +63,8 @@ const AddUserPanel: React.FC<Props> = props => {
   };
 
   const grid = (
-    <div className="Grid ag-grid-parent ag-theme-balham">
-      <AgGridReact
+    <div className="Grid">
+      <DataTable
         domLayout="autoHeight"
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}

src/pages/academy/adminPanel/subcomponents/NotificationConfigPanel.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { Button, H2, Intent } from '@blueprintjs/core';
 import { ColDef, GridApi, GridReadyEvent, ValueFormatterFunc } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
 import { cloneDeep } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
@@ -12,6 +11,7 @@ import {
   updateTimeOptions
 } from 'src/commons/application/actions/SessionActions';
 import { NotificationConfiguration, TimeOption } from 'src/commons/application/types/SessionTypes';
+import DataTable from 'src/commons/dataTable/DataTable';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
 
 import BooleanCell from './assessmentConfigPanel/BooleanCell';
@@ -189,8 +189,8 @@ const NotificationConfigPanel = () => {
   };
 
   const grid = (
-    <div className="Grid ag-grid-parent ag-theme-balham">
-      <AgGridReact
+    <div className="Grid">
+      <DataTable
         domLayout="autoHeight"
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}

src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx

@@ -6,7 +6,6 @@ import {
   GridReadyEvent,
   RowDragEvent
 } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
 import { cloneDeep, isEqual } from 'lodash';
 import React, {
   forwardRef,
@@ -18,6 +17,7 @@ import React, {
   useState
 } from 'react';
 import { AssessmentConfiguration } from 'src/commons/assessment/AssessmentTypes';
+import DataTable from 'src/commons/dataTable/DataTable';
 import { showWarningMessage } from 'src/commons/utils/notifications/NotificationsHelper';
 import { WithImperativeApi } from 'src/commons/utils/TypeHelper';
 
@@ -301,8 +301,8 @@ const AssessmentConfigPanel: WithImperativeApi<
     };
 
     const grid = (
-      <div className="Grid ag-grid-parent ag-theme-balham">
-        <AgGridReact
+      <div className="Grid">
+        <DataTable
           domLayout="autoHeight"
           columnDefs={columnDefs}
           defaultColDef={defaultColumnDefs}

src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserConfigPanel.tsx

@@ -1,9 +1,9 @@
 import { Button, H2 } from '@blueprintjs/core';
 import { ColDef, GridApi, GridReadyEvent } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
 import React from 'react';
 import { Role } from 'src/commons/application/ApplicationTypes';
 import { AdminPanelCourseRegistration } from 'src/commons/application/types/SessionTypes';
+import DataTable from 'src/commons/dataTable/DataTable';
 
 import RolesCell from './RolesCell';
 import UserActionsCell from './UserActionsCell';
@@ -77,8 +77,8 @@ const UserConfigPanel: React.FC<Props> = props => {
   };
 
   const grid = (
-    <div className="Grid ag-grid-parent ag-theme-balham">
-      <AgGridReact
+    <div className="Grid">
+      <DataTable
         domLayout="autoHeight"
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}

src/pages/academy/dashboard/Dashboard.tsx

@@ -1,11 +1,8 @@
-import 'ag-grid-community/styles/ag-grid.css';
-import 'ag-grid-community/styles/ag-theme-balham.css';
-
 import { ColDef, GridApi, GridReadyEvent } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
 import { startCase } from 'lodash';
 import React from 'react';
 import { useDispatch } from 'react-redux';
+import DataTable from 'src/commons/dataTable/DataTable';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
 
 import ContentDisplay from '../../../commons/ContentDisplay';
@@ -42,8 +39,8 @@ const Dashboard: React.FC = () => {
 
   const content = (
     <div className="Dashboard">
-      <div className="Grid ag-grid-parent ag-theme-balham">
-        <AgGridReact
+      <div className="Grid">
+        <DataTable
           domLayout="autoHeight"
           columnDefs={columnDefs}
           defaultColDef={defaultColumnDefs}

src/pages/academy/groundControl/GroundControl.tsx

@@ -1,6 +1,3 @@
-import 'ag-grid-community/styles/ag-grid.css';
-import 'ag-grid-community/styles/ag-theme-balham.css';
-
 import {
   Button,
   Collapse,
@@ -12,8 +9,8 @@ import {
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { ColDef, GridApi, GridReadyEvent } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
 import React, { useState } from 'react';
+import DataTable from 'src/commons/dataTable/DataTable';
 import { useSession } from 'src/commons/utils/Hooks';
 
 import { AssessmentOverview } from '../../../commons/assessment/AssessmentTypes';
@@ -229,8 +226,8 @@ const GroundControl: React.FC<Props> = props => {
   );
 
   const grid = (
-    <div className="Grid ag-grid-parent ag-theme-balham">
-      <AgGridReact
+    <div className="Grid">
+      <DataTable
         alwaysShowHorizontalScroll={true}
         domLayout="autoHeight"
         columnDefs={columnDefs}

src/pages/academy/notiPreference/NotiPreference.tsx

@@ -1,6 +1,5 @@
 import { Button, H1, Intent } from '@blueprintjs/core';
 import { ColDef, GridApi, GridReadyEvent, ValueFormatterFunc } from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
 import { cloneDeep } from 'lodash';
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
@@ -14,6 +13,7 @@ import {
   TimeOption
 } from 'src/commons/application/types/SessionTypes';
 import ContentDisplay from 'src/commons/ContentDisplay';
+import DataTable from 'src/commons/dataTable/DataTable';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
 
 import BooleanCell from './subcomponents/BooleanCell';
@@ -152,8 +152,8 @@ const NotiPreference: React.FC = () => {
   const data = (
     <div>
       <H1>Notifications</H1>
-      <div className="Grid ag-grid-parent ag-theme-balham">
-        <AgGridReact
+      <div className="Grid">
+        <DataTable
           domLayout="autoHeight"
           columnDefs={columnDefs}
           defaultColDef={defaultColumnDefs}

src/styles/_academy.scss

@@ -279,11 +279,6 @@
 }
 
 .Grid {
-  .ag-center-cols-viewport {
-    /* Fixes spurious horizontal scrollbar in grid viewport at certain widths */
-    overflow-x: inherit;
-  }
-
   :focus {
     /* Disable rendering blue border when a sub-component in grid is in focus */
     outline: none;
@@ -307,50 +302,6 @@
   }
 }
 
-.ag-grid-controls {
-  .pagination-details.pagination-details.pagination-details {
-    /* Chain selectors for increased specificity: set default cursor */
-    cursor: default;
-    font-weight: bold;
-
-    .#{$ns}-button-text {
-      display: inline-flex;
-      flex-direction: column;
-      align-items: center;
-    }
-  }
-}
-
-.ag-header-cell.ag-header-cell.ag-header-cell {
-  /* Chain selectors for increased specificity: reduce internal padding of header cells */
-  padding-left: 0.375em;
-  padding-right: 0.375em;
-
-  .ag-header-cell-label {
-    /* Increase font size of headers; pad left to centre with filter icon */
-    font-size: 1.1em;
-    font-weight: bold;
-    justify-content: center;
-    padding-left: 1em;
-  }
-
-  &:not(.ag-header-cell-sortable) .ag-header-cell-label {
-    padding-right: 1em;
-  }
-}
-
-.ag-cell {
-  font-size: 1.1em;
-  /* Override to reduce ag-grid default padding */
-  padding-left: 0.375em !important;
-  padding-right: 0.375em !important;
-  text-align: center;
-}
-
-#filterBar {
-  width: 400px;
-}
-
 .md th,
 .md td {
   text-align: left;