Display warnings on users page in a clean and consistent way (#1681)
# What this PR does Before: <img width="942" alt="Screenshot 2023-03-31 at 10 00 25" src="https://user-images.githubusercontent.com/2262529/229003826-1f42820f-6997-4fec-82ed-acf4355b6758.png"> After: <img width="937" alt="Screenshot 2023-03-31 at 09 59 22" src="https://user-images.githubusercontent.com/2262529/229003723-6ac1743d-316f-4272-a73a-a1bebb27618f.png"> ## Which issue(s) this PR fixes ## Checklist - [ ] Unit, integration, and e2e (if applicable) tests updated - [ ] Documentation added (or `pr:no public docs` PR label added if not required) - [ ] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not required)
This commit is contained in:
Ildar Iskhakov
GitHub
parent
c4f2b28c2f
commit
532996176a
6 changed files with 32 additions and 15 deletions
|
|
@ -20,6 +20,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
- Fix team search when filtering resources by @vadimkerr ([#1680](https://github.com/grafana/oncall/pull/1680))
|
||||
- Fix issue when trying to scroll in Safari ([#415](https://github.com/grafana/oncall/issues/415))
|
||||
|
||||
### Changed
|
||||
|
||||
- Display warnings on users page in a clean and consistent way by @iskhakov ([#1681](https://github.com/grafana/oncall/pull/1681))
|
||||
|
||||
## v1.2.6 (2023-03-30)
|
||||
|
||||
### Fixed
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ import { Tooltip, VerticalGroup } from '@grafana/ui';
|
|||
import cn from 'classnames/bind';
|
||||
|
||||
import PluginLink from 'components/PluginLink/PluginLink';
|
||||
import ScheduleCounter from 'components/ScheduleCounter/ScheduleCounter';
|
||||
import { ScheduleQualityDetails } from 'components/ScheduleQualityDetails/ScheduleQualityDetails';
|
||||
import StatusCounterBadgeWithTooltip from 'components/StatusCounterBadgeWithTooltip/StatusCounterBadgeWithTooltip';
|
||||
import Tag from 'components/Tag/Tag';
|
||||
import Text from 'components/Text/Text';
|
||||
import { Schedule, ScheduleScoreQualityResponse, ScheduleScoreQualityResult } from 'models/schedule/schedule.types';
|
||||
|
|
@ -40,7 +40,7 @@ const ScheduleQuality: FC<ScheduleQualityProps> = ({ schedule, lastUpdated }) =>
|
|||
<>
|
||||
<div className={cx('root')}>
|
||||
{relatedEscalationChains?.length > 0 && schedule?.number_of_escalation_chains > 0 && (
|
||||
<ScheduleCounter
|
||||
<StatusCounterBadgeWithTooltip
|
||||
type="link"
|
||||
addPadding
|
||||
count={schedule.number_of_escalation_chains}
|
||||
|
|
@ -60,7 +60,7 @@ const ScheduleQuality: FC<ScheduleQualityProps> = ({ schedule, lastUpdated }) =>
|
|||
)}
|
||||
|
||||
{schedule.warnings?.length > 0 && (
|
||||
<ScheduleCounter
|
||||
<StatusCounterBadgeWithTooltip
|
||||
type="warning"
|
||||
addPadding
|
||||
count={schedule.warnings.length}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@ import cn from 'classnames/bind';
|
|||
|
||||
import Text, { TextType } from 'components/Text/Text';
|
||||
|
||||
import styles from './ScheduleCounter.module.scss';
|
||||
import styles from './StatusCounterBadgeWithTooltip.module.scss';
|
||||
|
||||
interface ScheduleCounterProps {
|
||||
interface StatusCounterBadgeWithTooltipProps {
|
||||
type: Partial<TextType>;
|
||||
count: number;
|
||||
tooltipTitle: string;
|
||||
|
|
@ -23,7 +23,7 @@ const typeToIcon = {
|
|||
|
||||
const cx = cn.bind(styles);
|
||||
|
||||
const ScheduleCounter: FC<ScheduleCounterProps> = (props) => {
|
||||
const StatusCounterBadgeWithTooltip: FC<StatusCounterBadgeWithTooltipProps> = (props) => {
|
||||
const { type, count, tooltipTitle, tooltipContent, onHover, addPadding } = props;
|
||||
|
||||
return (
|
||||
|
|
@ -55,4 +55,4 @@ const ScheduleCounter: FC<ScheduleCounterProps> = (props) => {
|
|||
);
|
||||
};
|
||||
|
||||
export default ScheduleCounter;
|
||||
export default StatusCounterBadgeWithTooltip;
|
||||
|
|
@ -11,8 +11,8 @@ import Avatar from 'components/Avatar/Avatar';
|
|||
import { MatchMediaTooltip } from 'components/MatchMediaTooltip/MatchMediaTooltip';
|
||||
import NewScheduleSelector from 'components/NewScheduleSelector/NewScheduleSelector';
|
||||
import PluginLink from 'components/PluginLink/PluginLink';
|
||||
import ScheduleCounter from 'components/ScheduleCounter/ScheduleCounter';
|
||||
import { SchedulesFiltersType } from 'components/SchedulesFilters/SchedulesFilters.types';
|
||||
import StatusCounterBadgeWithTooltip from 'components/StatusCounterBadgeWithTooltip/StatusCounterBadgeWithTooltip';
|
||||
import Table from 'components/Table/Table';
|
||||
import Text from 'components/Text/Text';
|
||||
import TimelineMarks from 'components/TimelineMarks/TimelineMarks';
|
||||
|
|
@ -306,7 +306,7 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
|
|||
return (
|
||||
<HorizontalGroup>
|
||||
{item.number_of_escalation_chains > 0 && (
|
||||
<ScheduleCounter
|
||||
<StatusCounterBadgeWithTooltip
|
||||
type="link"
|
||||
count={item.number_of_escalation_chains}
|
||||
tooltipTitle="Used in escalations"
|
||||
|
|
@ -334,7 +334,7 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
|
|||
)}
|
||||
|
||||
{item.warnings?.length > 0 && (
|
||||
<ScheduleCounter
|
||||
<StatusCounterBadgeWithTooltip
|
||||
type="warning"
|
||||
count={item.warnings.length}
|
||||
tooltipTitle="Warnings"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
import { Alert, Button, HorizontalGroup, Icon, VerticalGroup } from '@grafana/ui';
|
||||
import { Alert, Button, HorizontalGroup, VerticalGroup } from '@grafana/ui';
|
||||
import cn from 'classnames/bind';
|
||||
import { debounce } from 'lodash-es';
|
||||
import { observer } from 'mobx-react';
|
||||
|
|
@ -15,6 +15,7 @@ import {
|
|||
initErrorDataState,
|
||||
} from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.helpers';
|
||||
import PluginLink from 'components/PluginLink/PluginLink';
|
||||
import StatusCounterBadgeWithTooltip from 'components/StatusCounterBadgeWithTooltip/StatusCounterBadgeWithTooltip';
|
||||
import Text from 'components/Text/Text';
|
||||
import UsersFilters from 'components/UsersFilters/UsersFilters';
|
||||
import UserSettings from 'containers/UserSettings/UserSettings';
|
||||
|
|
@ -359,10 +360,22 @@ class Users extends React.Component<UsersProps, UsersState> {
|
|||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Icon className={cx('warning-message-icon')} name="exclamation-triangle" />
|
||||
{texts.join(', ')}
|
||||
</div>
|
||||
<HorizontalGroup>
|
||||
<StatusCounterBadgeWithTooltip
|
||||
type="warning"
|
||||
count={texts.length}
|
||||
tooltipTitle="Warnings"
|
||||
tooltipContent={
|
||||
<VerticalGroup spacing="none">
|
||||
{texts.map((warning, index) => (
|
||||
<Text type="primary" key={index}>
|
||||
{warning}
|
||||
</Text>
|
||||
))}
|
||||
</VerticalGroup>
|
||||
}
|
||||
/>
|
||||
</HorizontalGroup>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue