remove duplicated Table component (#4625)

# What this PR does

remove duplicated Table component

## Which issue(s) this PR closes

Closes #4623

<!--
*Note*: if you have more than one GitHub issue that this PR closes, be
sure to preface
each issue link with a [closing
keyword](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/using-keywords-in-issues-and-pull-requests#linking-a-pull-request-to-an-issue).
This ensures that the issue(s) are auto-closed once the PR has been
merged.
-->

## 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.

grafana-plugin/src/components/GTable/GTable.tsx

@@ -19,7 +19,7 @@ export interface GTableProps<RecordType = unknown> extends TableProps<RecordType
   expandable?: {
     expandedRowKeys: string[];
     expandedRowRender: (item: any) => 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 = <RT extends DefaultRecordType = DefaultRecordType>(props:
       const { expanded, record } = props;
       return (
         <Icon
-          style={{ cursor: 'pointer' }}
+          className={styles.expandIcon}
           name={expanded ? 'angle-down' : 'angle-right'}
           onClick={(event) => {
             event.stopPropagation();
@@ -61,8 +61,8 @@ export const GTable = <RT extends DefaultRecordType = DefaultRecordType>(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;
+  `,
 });

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;
       }
     `,

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<SchedulesPageProps, SchedulesPageSt
     const {
       store: { userStore },
     } = this.props;
-
     userStore.fetchItems();
   }
 
@@ -281,7 +280,7 @@ class _SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSt
     return <PluginLink query={{ page: 'schedules', id: item.id, ...query }}>{item.name}</PluginLink>;
   };
 
-  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<SchedulesPageProps, SchedulesPageSt
     };
   };
 
-  getTableColumns = () => {
+  getTableColumns = (): GTableProps<Schedule>['columns'] => {
     const { grafanaTeamStore } = this.props.store;
     const styles = getSchedulesStyles();