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:
Rares Mardare 2024-07-08 10:24:20 +03:00 committed by GitHub
parent 24aa3a5c83
commit 37f661a708
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 19 additions and 16 deletions

View file

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

View file

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

View file

@ -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>
);

View file

@ -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;

View file

@ -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',