diff --git a/CHANGELOG.md b/CHANGELOG.md index 0c5940d98d..0d4cfc122e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## v1.1.24 (2023-02-06) + +### Fixed + +- Design polishing ([1290](https://github.com/grafana/oncall/pull/1290)) +- Not showing contact details in User tooltip if User does not have edit/admin access + ## v1.1.23 (2023-02-06) ### Fixed diff --git a/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.module.css b/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.module.css index d362e50452..4980b7ee62 100644 --- a/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.module.css +++ b/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.module.css @@ -1,6 +1,6 @@ .root { - width: 220px; - padding: 10px; + width: 210px; + padding: 8px 4px; } .oncall-badge { @@ -25,7 +25,7 @@ .line-break { width: 100vw; - margin: -4px -18px -4px -18px; + margin: 8px -14px 8px -14px; } .times { @@ -37,21 +37,40 @@ color: #ccccdc; } +.username { + word-break: break-all; +} + .timezone-wrapper { display: flex; + flex-grow: 1; } .timezone-icon { - width: 10%; + margin-right: 8px; +} + +.contact-icon { + margin-right: 8px; } .timezone-info { width: 50%; overflow-wrap: anywhere; - margin-left: 4px; + margin-right: 8px; +} + +.contact-details { + display: flex; } .contact-details a { text-decoration-line: none; word-break: break-all; } + +.user-timezones { + margin-top: 4px; + display: flex; + width: 100%; +} diff --git a/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.tsx b/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.tsx index 1f09dcc2be..664a9f43f7 100644 --- a/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.tsx +++ b/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.tsx @@ -5,11 +5,14 @@ import cn from 'classnames/bind'; import dayjs from 'dayjs'; import Avatar from 'components/Avatar/Avatar'; +import ScheduleBorderedAvatar from 'components/ScheduleBorderedAvatar/ScheduleBorderedAvatar'; import Text from 'components/Text/Text'; import { isInWorkingHours } from 'components/WorkingHours/WorkingHours.helpers'; import { getTzOffsetString } from 'models/timezone/timezone.helpers'; import { User } from 'models/user/user.types'; +import { getColorSchemeMappingForUsers } from 'pages/schedule/Schedule.helpers'; import { useStore } from 'state/useStore'; +import { isUserActionAllowed, UserActions } from 'utils/authorization'; import styles from './ScheduleUserDetails.module.css'; @@ -17,36 +20,49 @@ interface ScheduleUserDetailsProps { currentMoment: dayjs.Dayjs; user: User; isOncall: boolean; + scheduleId: string; + startMoment: dayjs.Dayjs; } const cx = cn.bind(styles); const ScheduleUserDetails: FC = (props) => { - const { user, currentMoment, isOncall } = props; + const { user, currentMoment, isOncall, scheduleId, startMoment } = props; const userMoment = currentMoment.tz(user.timezone); const userOffsetHoursStr = getTzOffsetString(userMoment); const isInWH = isInWorkingHours(currentMoment, user.working_hours, user.timezone); const store = useStore(); + const colorSchemeMapping = getColorSchemeMappingForUsers(store, scheduleId, startMoment); + const colorSchemeList = Array.from(colorSchemeMapping[user.pk] || []); const { teamStore } = store; const slackWorkspaceName = teamStore.currentTeam.slack_team_identity?.cached_name?.replace(/[^0-9a-z]/gi, '') || ''; return (
- - - - - - {user.username} - {isOncall && } - {isInWH ? ( - - ) : ( - - )} - + + } + renderIcon={() => null} + > + + +
+ {user.username} +
+ + {isOncall && } + {isInWH ? ( + + ) : ( + + )} + +
@@ -54,7 +70,7 @@ const ScheduleUserDetails: FC = (props) => {
- + Local time {currentMoment.tz().format('DD MMM, HH:mm')} ({getTzOffsetString(currentMoment)}) @@ -62,60 +78,69 @@ const ScheduleUserDetails: FC = (props) => {
- - {user.username}'s time + + User's time {`${userMoment.tz(user.timezone).format('DD MMM, HH:mm')}`} ({userOffsetHoursStr})
- +
-
- - Contacts + {isUserActionAllowed(UserActions.UserSettingsAdmin) && ( + +
+ + Contacts -
- - {' '} - - {user.email} - {' '} - -
- {user.slack_user_identity && ( - - )} - {user.telegram_configuration && ( - - )} - {!user.hide_phone_number && user.verified_phone_number && ( - Phone: {user.verified_phone_number} - )} -
+ + {user.slack_user_identity && ( + + )} + {user.telegram_configuration && ( + + )} + {!user.hide_phone_number && user.verified_phone_number && ( +
+ + + + {user.verified_phone_number} +
+ )} +
+
+ )}
); diff --git a/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx b/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx index 6810066a3e..5b63bd793f 100644 --- a/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx +++ b/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx @@ -279,7 +279,15 @@ const AvatarGroup = (props: AvatarGroupProps) => { placement="top" interactive key={index} - content={} + content={ + + } >
- { - openNotification('Link copied'); - }} - > - - - - - {showLinkTo && ( className={cx('title-icon')} /> )} + + + + { + openNotification('Link copied'); + }} + > + +