From f25fc8b92effbded5bb3c50e526ce65a5ebca991 Mon Sep 17 00:00:00 2001 From: Carson Full Date: Wed, 2 Oct 2024 11:33:39 -0500 Subject: [PATCH] Add variant label as tooltip on role icon --- src/components/Icons/PeopleJoinedIcon.tsx | 13 +++-- src/components/Icons/ProjectManagerIcon.tsx | 13 +++-- src/components/RoleIcon.tsx | 58 ++++++++++--------- .../VariantResponseCell.tsx | 30 +++++----- .../progressReportsDataGridRow.graphql | 14 +---- 5 files changed, 69 insertions(+), 59 deletions(-) diff --git a/src/components/Icons/PeopleJoinedIcon.tsx b/src/components/Icons/PeopleJoinedIcon.tsx index 95e5b70497..8a9436ff9a 100644 --- a/src/components/Icons/PeopleJoinedIcon.tsx +++ b/src/components/Icons/PeopleJoinedIcon.tsx @@ -1,7 +1,12 @@ import { SvgIcon, SvgIconProps } from '@mui/material'; +import { forwardRef } from 'react'; -export const PeopleJoinedIcon = (props: SvgIconProps) => ( - - - +export const PeopleJoinedIcon = forwardRef( + function PeopleJoinedIcon(props, ref) { + return ( + + + + ); + } ); diff --git a/src/components/Icons/ProjectManagerIcon.tsx b/src/components/Icons/ProjectManagerIcon.tsx index 45d98b98e7..7580fca81a 100644 --- a/src/components/Icons/ProjectManagerIcon.tsx +++ b/src/components/Icons/ProjectManagerIcon.tsx @@ -1,7 +1,12 @@ import { SvgIcon, SvgIconProps } from '@mui/material'; +import { forwardRef } from 'react'; -export const ProjectManagerIcon = (props: SvgIconProps) => ( - - - +export const ProjectManagerIcon = forwardRef( + function ProjectManagerIcon(props, ref) { + return ( + + + + ); + } ); diff --git a/src/components/RoleIcon.tsx b/src/components/RoleIcon.tsx index e5ee2265a6..c61681c051 100644 --- a/src/components/RoleIcon.tsx +++ b/src/components/RoleIcon.tsx @@ -1,6 +1,6 @@ import { Grading, Translate } from '@mui/icons-material'; import { SvgIconProps } from '@mui/material'; -import { ComponentType } from 'react'; +import { ComponentType, forwardRef } from 'react'; import { Role } from '../api/schema.graphql'; import { extendSx } from '../common'; import { PeopleJoinedIcon } from './Icons'; @@ -19,30 +19,36 @@ interface RoleIconProps extends SvgIconProps { variantRole?: Role | null; } -export const RoleIcon = ({ variantRole: role, sx, ...rest }: RoleIconProps) => { - if (!role) { - return null; - } +export const RoleIcon = forwardRef( + function RoleIcon({ variantRole: role, sx, ...rest }, ref) { + if (!role) { + return null; + } - const Icon = variantToIconMapper[role]; + const Icon = variantToIconMapper[role]; + if (!Icon) { + return null; + } - return Icon ? ( - { - const color = theme.palette.roles[role]?.main; - return { - backgroundColor: color, - color: color ? theme.palette.getContrastText(color) : undefined, - marginRight: 1, - padding: 1, - fontSize: 48, - borderRadius: 2, - }; - }, - ...extendSx(sx), - ]} - {...rest} - /> - ) : null; -}; + return ( + { + const color = theme.palette.roles[role]?.main; + return { + backgroundColor: color, + color: color ? theme.palette.getContrastText(color) : undefined, + marginRight: 1, + padding: 1, + fontSize: 48, + borderRadius: 2, + }; + }, + ...extendSx(sx), + ]} + {...rest} + ref={ref} + /> + ); + } +); diff --git a/src/scenes/Dashboard/ProgressReportsWidget/VariantResponseCell.tsx b/src/scenes/Dashboard/ProgressReportsWidget/VariantResponseCell.tsx index 018621e68a..157e151b15 100644 --- a/src/scenes/Dashboard/ProgressReportsWidget/VariantResponseCell.tsx +++ b/src/scenes/Dashboard/ProgressReportsWidget/VariantResponseCell.tsx @@ -1,7 +1,10 @@ -import { Box } from '@mui/material'; -import { styled } from '@mui/material/styles'; +import { Box, Tooltip } from '@mui/material'; import { GridRenderCellParams as RenderCellParams } from '@mui/x-data-grid'; -import { VariantResponseFragment as VariantResponse } from '~/common/fragments'; +import { StyleProps } from '~/common'; +import { + VariantFragment as Variant, + VariantResponseFragment as VariantResponse, +} from '~/common/fragments'; import { RoleIcon as BaseRoleIcon } from '../../../components/RoleIcon'; import { ProgressReportsDataGridRowFragment as ProgressReport } from './progressReportsDataGridRow.graphql'; import { RichTextCell } from './RichTextCell'; @@ -11,12 +14,11 @@ type CellParams = RenderCellParams; export const VariantResponseCell = ({ value, ...props }: CellParams) => { if (!value) return null; - const { variant } = value; const response = value.response.value!; return ( - @@ -36,14 +38,16 @@ export const VariantResponseIconCell = ({ value }: CellParams) => { justifyContent: 'center', }} > - + ); }; -const RoleIcon = styled(BaseRoleIcon)({ - margin: 0, -}); +const VariantIcon = ({ + variant, + ...props +}: StyleProps & { variant: Variant }) => ( + + + +); diff --git a/src/scenes/Dashboard/ProgressReportsWidget/progressReportsDataGridRow.graphql b/src/scenes/Dashboard/ProgressReportsWidget/progressReportsDataGridRow.graphql index 5d08e52a59..3a190e5f28 100644 --- a/src/scenes/Dashboard/ProgressReportsWidget/progressReportsDataGridRow.graphql +++ b/src/scenes/Dashboard/ProgressReportsWidget/progressReportsDataGridRow.graphql @@ -43,12 +43,7 @@ fragment progressReportsDataGridRow on ProgressReport { items { id responses { - response { - value - } - variant { - responsibleRole - } + ...variantResponse } } } @@ -56,12 +51,7 @@ fragment progressReportsDataGridRow on ProgressReport { items { id responses { - response { - value - } - variant { - responsibleRole - } + ...variantResponse } } }