Fix display of schedule final in preview mode (#4447)

# What this PR does

- Fixes the display of preview schedule when you click on a row

Part of #4428

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

@@ -1,7 +1,6 @@
 import React, { useCallback, useMemo, ChangeEvent, ReactElement } from 'react';
 
 import { css, cx } from '@emotion/css';
-import { GrafanaTheme2 } from '@grafana/data';
 import { Pagination, Checkbox, Icon, useStyles2 } from '@grafana/ui';
 import Table from 'rc-table';
 import { TableProps } from 'rc-table/lib/Table';
@@ -136,7 +135,7 @@ export const GTable = <RT extends DefaultRecordType = DefaultRecordType>(props:
  }, [rowSelection, columnsProp, data]);
 
  return (
- <div className={styles.root} data-testid="test__gTable">
+ <div className={cx(styles.root, { [styles.fixed]: props.tableLayout === 'fixed' })} data-testid="test__gTable">
  <Table<RT>
  expandable={expandable}
  rowKey={rowKey}
@@ -156,20 +155,24 @@ export const GTable = <RT extends DefaultRecordType = DefaultRecordType>(props:
  );
 };
 
-const getGTableStyles = (_theme: GrafanaTheme2) => {
- return {
- root: css`
- table {
- width: 100%;
- }
- `,
+const getGTableStyles = () => ({
+ root: css`
+ table {
+ width: 100%;
+ }
+ `,
+
+ fixed: css`
+ table {
+ table-layout: fixed;
+ }
+ `,
 
-  pagination: css`
-  margin-top: 20px;
-  `,
+ pagination: css`
+ margin-top: 20px;
+ `,
 
- checkbox: css`
- display: inline-flex;
- `,
- };
-};
+ checkbox: css`
+ display: inline-flex;
+ `,
+});

grafana-plugin/src/pages/schedules/Schedules.tsx

@@ -115,6 +115,7 @@ class _SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSt
  total: results ? Math.ceil((count || 0) / page_size) : 0,
  onChange: this.handlePageChange,
  }}
+ tableLayout="fixed"
  rowKey="id"
  expandable={{
  expandedRowKeys: expandedRowKeys,