Fix column caret display on schedules (#4612)
# What this PR does - Fixed column spacing ## Which issue(s) this PR closes Closes https://github.com/grafana/oncall/issues/4480
This commit is contained in:
parent
24aa3a5c83
commit
37f661a708
5 changed files with 19 additions and 16 deletions
|
|
@ -135,7 +135,7 @@ export const GTable = <RT extends DefaultRecordType = DefaultRecordType>(props:
|
|||
}, [rowSelection, columnsProp, data]);
|
||||
|
||||
return (
|
||||
<div className={cx(styles.root, { [styles.fixed]: props.tableLayout === 'fixed' })} data-testid="test__gTable">
|
||||
<div className={styles.root} data-testid="test__gTable">
|
||||
<Table<RT>
|
||||
expandable={expandable}
|
||||
rowKey={rowKey}
|
||||
|
|
@ -162,12 +162,6 @@ const getGTableStyles = () => ({
|
|||
}
|
||||
`,
|
||||
|
||||
fixed: css`
|
||||
table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
`,
|
||||
|
||||
pagination: css`
|
||||
margin-top: 20px;
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -10,10 +10,6 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
table :global(.rc-table-row-expand-icon-cell) > span {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
tr {
|
||||
min-height: 56px;
|
||||
}
|
||||
|
|
@ -43,7 +39,7 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
|
|||
transition: transform 0.2s;
|
||||
|
||||
&--expanded {
|
||||
transform: rotate(0deg);
|
||||
transform: rotate(0deg) translateY(-5px); // to manually compensate for top: 3px
|
||||
}
|
||||
`,
|
||||
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ export const ServiceNowTokenSection: React.FC<ServiceNowTokenSectionProps> = obs
|
|||
|
||||
function renderGenerateButton() {
|
||||
return (
|
||||
<Button variant="secondary" onClick={onTokenGenerate} disabled={isLoading} className={'aaaa'}>
|
||||
<Button variant="secondary" onClick={onTokenGenerate} disabled={isLoading}>
|
||||
{isExistingToken ? 'Regenerate' : 'Generate'}
|
||||
</Button>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,6 +6,14 @@ export const getSchedulesStyles = () => {
|
|||
position: relative;
|
||||
`,
|
||||
|
||||
tableRoot: css`
|
||||
td.rc-table-row-expand-icon-cell {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: 3px;
|
||||
}
|
||||
`,
|
||||
|
||||
table: css`
|
||||
td {
|
||||
padding-top: 5px;
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ class _SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSt
|
|||
onChange={this.handleSchedulesFiltersChange}
|
||||
/>
|
||||
</div>
|
||||
<div data-testid="schedules-table">
|
||||
<div className={cx(styles.tableRoot)} data-testid="schedules-table">
|
||||
<GTable
|
||||
className={styles.table}
|
||||
columns={this.getTableColumns()}
|
||||
|
|
@ -115,10 +115,9 @@ 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,
|
||||
expandedRowKeys,
|
||||
onExpand: this.handleExpandRow,
|
||||
expandedRowRender: this.renderSchedule,
|
||||
expandRowByClick: true,
|
||||
|
|
@ -412,6 +411,12 @@ class _SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSt
|
|||
const styles = getSchedulesStyles();
|
||||
|
||||
return [
|
||||
{
|
||||
// Allow space for icon (>)
|
||||
width: '40px',
|
||||
title: '',
|
||||
render: () => <></>,
|
||||
},
|
||||
{
|
||||
width: '10%',
|
||||
title: 'Type',
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue