From 3f8087281c21a5ebacf602eee3df17b6f6e4a48d Mon Sep 17 00:00:00 2001 From: Dominik Broj Date: Mon, 8 Jul 2024 13:25:29 +0200 Subject: [PATCH] remove duplicated Table component (#4625) # What this PR does remove duplicated Table component ## Which issue(s) this PR closes Closes https://github.com/grafana/oncall/issues/4623 ## Checklist - [ ] Unit, integration, and e2e (if applicable) tests updated - [x] Documentation added (or `pr:no public docs` PR label added if not required) - [x] Added the relevant release notes label (see labels prefixed w/ `release:`). These labels dictate how your PR will show up in the autogenerated release notes. --- .../src/components/GTable/GTable.tsx | 13 ++-- .../src/components/Table/Table.styles.ts | 50 ------------- grafana-plugin/src/components/Table/Table.tsx | 74 ------------------- .../src/pages/schedules/Schedules.styles.ts | 1 - .../src/pages/schedules/Schedules.tsx | 7 +- 5 files changed, 10 insertions(+), 135 deletions(-) delete mode 100644 grafana-plugin/src/components/Table/Table.styles.ts delete mode 100644 grafana-plugin/src/components/Table/Table.tsx diff --git a/grafana-plugin/src/components/GTable/GTable.tsx b/grafana-plugin/src/components/GTable/GTable.tsx index 0ba978463c..65a21601e4 100644 --- a/grafana-plugin/src/components/GTable/GTable.tsx +++ b/grafana-plugin/src/components/GTable/GTable.tsx @@ -19,7 +19,7 @@ export interface GTableProps extends TableProps React.ReactNode; - onExpandedRowsChange: (rows: string[]) => void; + onExpandedRowsChange?: (rows: string[]) => void; expandRowByClick: boolean; expandIcon?: (props: { expanded: boolean; record: any }) => React.ReactNode; onExpand?: (expanded: boolean, item: any) => void; @@ -47,7 +47,7 @@ export const GTable = (props: const { expanded, record } = props; return ( { event.stopPropagation(); @@ -61,8 +61,8 @@ export const GTable = (props: newExpandedRowKeys.splice(index, 1); } - expandable.onExpand && expandable.onExpand(newExpanded, record); - expandable.onExpandedRowsChange(newExpandedRowKeys); + expandable.onExpand?.(newExpanded, record); + expandable.onExpandedRowsChange?.(newExpandedRowKeys); }} /> ); @@ -161,12 +161,13 @@ const getGTableStyles = () => ({ width: 100%; } `, - pagination: css` margin-top: 20px; `, - checkbox: css` display: inline-flex; `, + expandIcon: css` + cursor: pointer; + `, }); diff --git a/grafana-plugin/src/components/Table/Table.styles.ts b/grafana-plugin/src/components/Table/Table.styles.ts deleted file mode 100644 index 6ac89877a7..0000000000 --- a/grafana-plugin/src/components/Table/Table.styles.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { css } from '@emotion/css'; -import { GrafanaTheme2 } from '@grafana/data'; - -export const getTableStyles = (theme: GrafanaTheme2) => { - return { - root: css` - width: 100%; - - table { - width: 100%; - } - - tr { - min-height: 56px; - } - - th:first-child { - padding-left: 20px; - } - - td { - min-height: 60px; - padding-top: 10px; - padding-bottom: 10px; - } - `, - - pagination: css` - width: 100%; - margin-top: 20px; - `, - - expandIcon: css` - padding: 10px; - color: ${theme.colors.text.primary}; - pointer-events: none; - transform: rotate(-90deg); - transform-origin: center; - transition: transform 0.2s; - - &--expanded { - transform: rotate(0deg) translateY(-5px); // to manually compensate for top: 3px - } - `, - - rowEven: css` - background: ${theme.colors.background.secondary}; - `, - }; -}; diff --git a/grafana-plugin/src/components/Table/Table.tsx b/grafana-plugin/src/components/Table/Table.tsx deleted file mode 100644 index cf2883e24c..0000000000 --- a/grafana-plugin/src/components/Table/Table.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React, { FC, useMemo } from 'react'; - -import { cx } from '@emotion/css'; -import { Pagination, VerticalGroup, useStyles2 } from '@grafana/ui'; -import Table from 'rc-table'; -import { TableProps } from 'rc-table/lib/Table'; -import { bem } from 'styles/utils.styles'; - -import { ExpandIcon } from 'icons/Icons'; - -import { getTableStyles } from './Table.styles'; - -export interface Props extends TableProps { - loading?: boolean; - pagination?: { - page: number; - total: number; - onChange: (page: number) => void; - }; - rowSelection?: { - selectedRowKeys: string[]; - onChange: (selectedRowKeys: string[]) => void; - }; - expandable?: { - expandedRowKeys: string[]; - expandedRowRender: (item: any) => React.ReactNode; - onExpandedRowsChange?: (rows: string[]) => void; - expandRowByClick: boolean; - expandIcon?: (props: { expanded: boolean; record: any }) => React.ReactNode; - onExpand?: (expanded: boolean, item: any) => void; - }; -} - -export const GTable: FC = (props) => { - const { columns, data, className, pagination, loading, rowKey, expandable, ...restProps } = props; - const { page, total: numberOfPages, onChange: onNavigate } = pagination || {}; - - const styles = useStyles2(getTableStyles); - - const expandableFn = useMemo(() => { - return expandable - ? { - ...expandable, - expandIcon: ({ expanded }) => { - return ( -
- -
- ); - }, - expandedRowClassName: (_record, index) => (index % 2 === 0 ? styles.rowEven : ''), - } - : null; - }, [expandable]); - - return ( - - (index % 2 === 0 ? styles.rowEven : '')} - {...restProps} - /> - {pagination && ( -
- -
- )} - - ); -}; diff --git a/grafana-plugin/src/pages/schedules/Schedules.styles.ts b/grafana-plugin/src/pages/schedules/Schedules.styles.ts index 277b35638c..66da67564c 100644 --- a/grafana-plugin/src/pages/schedules/Schedules.styles.ts +++ b/grafana-plugin/src/pages/schedules/Schedules.styles.ts @@ -9,7 +9,6 @@ export const getSchedulesStyles = () => { tableRoot: css` td.rc-table-row-expand-icon-cell { position: relative; - top: 5px; left: 3px; } `, diff --git a/grafana-plugin/src/pages/schedules/Schedules.tsx b/grafana-plugin/src/pages/schedules/Schedules.tsx index bdf58c8dbe..390abaa755 100644 --- a/grafana-plugin/src/pages/schedules/Schedules.tsx +++ b/grafana-plugin/src/pages/schedules/Schedules.tsx @@ -9,9 +9,9 @@ import { RouteComponentProps, withRouter } from 'react-router-dom'; import { getUtilStyles } from 'styles/utils.styles'; import { Avatar } from 'components/Avatar/Avatar'; +import { GTable, GTableProps } from 'components/GTable/GTable'; import { NewScheduleSelector } from 'components/NewScheduleSelector/NewScheduleSelector'; import { PluginLink } from 'components/PluginLink/PluginLink'; -import { GTable } from 'components/Table/Table'; import { Text } from 'components/Text/Text'; import { TextEllipsisTooltip } from 'components/TextEllipsisTooltip/TextEllipsisTooltip'; import { TooltipBadge } from 'components/TooltipBadge/TooltipBadge'; @@ -62,7 +62,6 @@ class _SchedulesPage extends React.Component{item.name}; }; - renderOncallNow = (item: Schedule, _index: number) => { + renderOncallNow = (item: Schedule) => { const { theme } = this.props; const utilsStyles = getUtilStyles(theme); @@ -406,7 +405,7 @@ class _SchedulesPage extends React.Component { + getTableColumns = (): GTableProps['columns'] => { const { grafanaTeamStore } = this.props.store; const styles = getSchedulesStyles();