Brojd/polishing labels (#3528)
# What this PR does - auto adjust column widths in alert group table - add missing space below drawer buttons ## Which issue(s) this PR fixes **https://github.com/grafana/oncall-private/issues/2355** ## Checklist - [x] Unit, integration, and e2e (if applicable) tests updated - [x] Documentation added (or `pr:no public docs` PR label added if not required) - [x] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not required)
This commit is contained in:
Dominik Broj
GitHub
parent
3feba3675b
commit
b072d5b870
11 changed files with 49 additions and 22 deletions
|
|
@ -196,3 +196,11 @@
|
|||
opacity: 0;
|
||||
transition: opacity 300ms ease-in, max-height 300ms ease-in;
|
||||
}
|
||||
|
||||
/* -----
|
||||
* Widths
|
||||
*/
|
||||
|
||||
.u-max-width-1000 {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,14 +66,16 @@ const ManualAlertGroup: FC<ManualAlertGroupProps> = observer(({ onCreate, onHide
|
|||
<VerticalGroup>
|
||||
<GForm form={manualAlertFormConfig} data={data} onSubmit={handleFormSubmit} onChange={setFormIsValid} />
|
||||
<AddResponders mode="create" />
|
||||
<HorizontalGroup justify="flex-end">
|
||||
<Button variant="secondary" onClick={onHideDrawer}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" form={manualAlertFormConfig.name} disabled={!formIsSubmittable}>
|
||||
Create
|
||||
</Button>
|
||||
</HorizontalGroup>
|
||||
<div className="buttons">
|
||||
<HorizontalGroup justify="flex-end">
|
||||
<Button variant="secondary" onClick={onHideDrawer}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" form={manualAlertFormConfig.name} disabled={!formIsSubmittable}>
|
||||
Create
|
||||
</Button>
|
||||
</HorizontalGroup>
|
||||
</div>
|
||||
</VerticalGroup>
|
||||
</Drawer>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5,3 +5,7 @@
|
|||
.block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
.content {
|
||||
margin: 4px 4px 50px 4px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.cards {
|
||||
|
|
|
|||
|
|
@ -215,7 +215,7 @@ const IntegrationForm = observer((props: IntegrationFormProps) => {
|
|||
onHide();
|
||||
|
||||
function createNewIntegration(): Promise<void | AlertReceiveChannel> {
|
||||
let promise = alertReceiveChannelStore.create<AlertReceiveChannel>(data);
|
||||
let promise = alertReceiveChannelStore.create<AlertReceiveChannel>(data, true);
|
||||
|
||||
const pushHistory = (id) => history.push(`${PLUGIN_ROOT}/integrations/${id}`);
|
||||
|
||||
|
|
|
|||
|
|
@ -10,4 +10,5 @@
|
|||
.buttons {
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,16 +77,18 @@ const ScheduleForm = observer((props: ScheduleFormProps) => {
|
|||
<div className={cx('content')}>
|
||||
<VerticalGroup>
|
||||
<GForm form={formConfig} data={data} onSubmit={handleSubmit} />
|
||||
<HorizontalGroup justify="flex-end">
|
||||
<Button variant="secondary" onClick={onHide}>
|
||||
Cancel
|
||||
</Button>
|
||||
<WithPermissionControlTooltip userAction={UserActions.SchedulesWrite}>
|
||||
<Button form={formConfig.name} type="submit">
|
||||
{id === 'new' ? 'Create' : 'Update'} Schedule
|
||||
<div className="buttons">
|
||||
<HorizontalGroup justify="flex-end">
|
||||
<Button variant="secondary" onClick={onHide}>
|
||||
Cancel
|
||||
</Button>
|
||||
</WithPermissionControlTooltip>
|
||||
</HorizontalGroup>
|
||||
<WithPermissionControlTooltip userAction={UserActions.SchedulesWrite}>
|
||||
<Button form={formConfig.name} type="submit">
|
||||
{id === 'new' ? 'Create' : 'Update'} Schedule
|
||||
</Button>
|
||||
</WithPermissionControlTooltip>
|
||||
</HorizontalGroup>
|
||||
</div>
|
||||
</VerticalGroup>
|
||||
</div>
|
||||
</Drawer>
|
||||
|
|
|
|||
|
|
@ -49,11 +49,13 @@ export default class BaseStore {
|
|||
}
|
||||
|
||||
@action
|
||||
async create<RT = any>(data: any): Promise<RT | void> {
|
||||
async create<RT = any>(data: any, skipErrorHandling = false): Promise<RT | void> {
|
||||
return await makeRequest<RT>(this.path, {
|
||||
method: 'POST',
|
||||
data,
|
||||
}).catch(this.onApiError);
|
||||
}).catch((error) => {
|
||||
this.onApiError(error, skipErrorHandling);
|
||||
});
|
||||
}
|
||||
|
||||
@action
|
||||
|
|
|
|||
|
|
@ -25,6 +25,11 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.horizontal-scroll-table table td:global(.rc-table-cell) {
|
||||
white-space: nowrap;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.bulk-actions-container {
|
||||
margin: 10px 0 10px 0;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -536,7 +536,7 @@ class Incidents extends React.Component<IncidentsPageProps, IncidentsPageState>
|
|||
<GTable
|
||||
emptyText={isLoading ? 'Loading...' : 'No alert groups found'}
|
||||
loading={isLoading}
|
||||
className={cx('incidents-table')}
|
||||
className={cx({ 'horizontal-scroll-table': isHorizontalScrolling })}
|
||||
rowSelection={{
|
||||
selectedRowKeys: selectedIncidentIds,
|
||||
onChange: this.handleSelectedIncidentIdsChange,
|
||||
|
|
@ -545,7 +545,7 @@ class Incidents extends React.Component<IncidentsPageProps, IncidentsPageState>
|
|||
data={results}
|
||||
columns={tableColumns}
|
||||
tableLayout="auto"
|
||||
scroll={{ x: isHorizontalScrolling ? `${Math.max(2000, tableColumns.length * 250)}px` : true }}
|
||||
scroll={{ x: isHorizontalScrolling ? 'max-content' : undefined }}
|
||||
/>
|
||||
{this.shouldShowPagination() && (
|
||||
<div className={cx('pagination')}>
|
||||
|
|
@ -790,6 +790,7 @@ class Incidents extends React.Component<IncidentsPageProps, IncidentsPageState>
|
|||
key: 'title',
|
||||
render: this.renderTitle,
|
||||
width: isHorizontalScrolling ? undefined : '35%',
|
||||
className: 'u-max-width-1000',
|
||||
},
|
||||
Created: {
|
||||
title: 'Created',
|
||||
|
|
|
|||
|
|
@ -5,4 +5,5 @@ export interface TableColumn {
|
|||
title: string;
|
||||
key: string;
|
||||
render: (value: any, record: any, index: number) => React.ReactNode | RenderedCell<any>;
|
||||
className?: string;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue