From 9f9681865baa12c89ed0d8dd7527ffa03f822d26 Mon Sep 17 00:00:00 2001 From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Mon, 11 Mar 2024 04:22:26 +0800 Subject: [PATCH 1/2] Refactor tables into own component * Create `DataTable` component abstraction * Replace `AgGridReact` with `DataTable` --- src/commons/dataTable/DataTable.tsx | 15 +++++++++++ .../sourceRecorder/SourceRecorderTable.tsx | 26 ++++++++----------- src/pages/academy/adminPanel/AdminPanel.tsx | 3 --- .../subcomponents/AddStoriesUserPanel.tsx | 6 ++--- .../adminPanel/subcomponents/AddUserPanel.tsx | 6 ++--- .../subcomponents/NotificationConfigPanel.tsx | 6 ++--- .../AssessmentConfigPanel.tsx | 6 ++--- .../userConfigPanel/UserConfigPanel.tsx | 6 ++--- src/pages/academy/dashboard/Dashboard.tsx | 9 +++---- .../academy/groundControl/GroundControl.tsx | 9 +++---- .../academy/notiPreference/NotiPreference.tsx | 6 ++--- 11 files changed, 50 insertions(+), 48 deletions(-) create mode 100644 src/commons/dataTable/DataTable.tsx diff --git a/src/commons/dataTable/DataTable.tsx b/src/commons/dataTable/DataTable.tsx new file mode 100644 index 0000000000..0d1f7d94bf --- /dev/null +++ b/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 = props => { + return ( +
+ +
+ ); +}; + +export default DataTable; diff --git a/src/commons/sourceRecorder/SourceRecorderTable.tsx b/src/commons/sourceRecorder/SourceRecorderTable.tsx index 4298b5f481..1825eb25cd 100644 --- a/src/commons/sourceRecorder/SourceRecorderTable.tsx +++ b/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 {
-
- -
+

diff --git a/src/pages/academy/adminPanel/AdminPanel.tsx b/src/pages/academy/adminPanel/AdminPanel.tsx index 14b9b634bd..554964cdcc 100644 --- a/src/pages/academy/adminPanel/AdminPanel.tsx +++ b/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 { cloneDeep } from 'lodash'; import React from 'react'; diff --git a/src/pages/academy/adminPanel/subcomponents/AddStoriesUserPanel.tsx b/src/pages/academy/adminPanel/subcomponents/AddStoriesUserPanel.tsx index 96752de472..dccdac96cb 100644 --- a/src/pages/academy/adminPanel/subcomponents/AddStoriesUserPanel.tsx +++ b/src/pages/academy/adminPanel/subcomponents/AddStoriesUserPanel.tsx @@ -13,11 +13,11 @@ import { import { IconNames } from '@blueprintjs/icons'; import { Popover2 } from '@blueprintjs/popover2'; 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 => { }; const grid = ( -
- + = props => { }; const grid = ( -
- + { }; const grid = ( -
- + = props => { }; const grid = ( -
- + = props => { }; const grid = ( -
- + = props => { const content = (
-
- + { ); const grid = ( -
- + { const data = (

Notifications

-
- + Date: Mon, 11 Mar 2024 04:23:36 +0800 Subject: [PATCH 2/2] Remove hardcoded styles The idea is to try to minimise the need for CSS workarounds as much as possible. Should they be required nonetheless, they will be restored in a subsequent commit. --- src/styles/_academy.scss | 49 ---------------------------------------- 1 file changed, 49 deletions(-) diff --git a/src/styles/_academy.scss b/src/styles/_academy.scss index 6058cc9477..47e5a5a8df 100644 --- a/src/styles/_academy.scss +++ b/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;