Display warnings on users page in a clean and consistent way

CHANGELOG.md

@@ -12,6 +12,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

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

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

grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.tsx → grafana-plugin/src/components/StatusCounterBadgeWithTooltip/StatusCounterBadgeWithTooltip.tsx

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

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

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

grafana-plugin/src/pages/users/Users.tsx

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