mirror of
https://github.com/Unleash/unleash.git
synced 2025-06-04 01:18:20 +02:00
change request tooltips (#2555)
This commit is contained in:
parent
9f983f4ed6
commit
87d9466005
@ -1,6 +1,7 @@
|
|||||||
import { FC } from 'react';
|
import { FC } from 'react';
|
||||||
import { Box, Button, styled, TextField } from '@mui/material';
|
import { Box, styled, TextField, Tooltip } from '@mui/material';
|
||||||
import { StyledAvatar } from './StyledAvatar';
|
import { StyledAvatar } from './StyledAvatar';
|
||||||
|
import { IUser } from 'interfaces/user';
|
||||||
|
|
||||||
const AddCommentWrapper = styled(Box)(({ theme }) => ({
|
const AddCommentWrapper = styled(Box)(({ theme }) => ({
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
@ -9,13 +10,15 @@ const AddCommentWrapper = styled(Box)(({ theme }) => ({
|
|||||||
}));
|
}));
|
||||||
|
|
||||||
export const AddCommentField: FC<{
|
export const AddCommentField: FC<{
|
||||||
imageUrl: string;
|
user: IUser | undefined;
|
||||||
commentText: string;
|
commentText: string;
|
||||||
onTypeComment: (text: string) => void;
|
onTypeComment: (text: string) => void;
|
||||||
}> = ({ imageUrl, commentText, onTypeComment, children }) => (
|
}> = ({ user, commentText, onTypeComment, children }) => (
|
||||||
<>
|
<>
|
||||||
<AddCommentWrapper>
|
<AddCommentWrapper>
|
||||||
<StyledAvatar src={imageUrl} />
|
<Tooltip title={user?.name || user?.username}>
|
||||||
|
<StyledAvatar src={user?.imageUrl || ''} />
|
||||||
|
</Tooltip>
|
||||||
<TextField
|
<TextField
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
placeholder="Add your comment here"
|
placeholder="Add your comment here"
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { FC } from 'react';
|
import { FC } from 'react';
|
||||||
import Paper from '@mui/material/Paper';
|
import Paper from '@mui/material/Paper';
|
||||||
import { Box, styled, Typography } from '@mui/material';
|
import { Box, styled, Typography, Tooltip } from '@mui/material';
|
||||||
import TimeAgo from 'react-timeago';
|
import TimeAgo from 'react-timeago';
|
||||||
import { StyledAvatar } from './StyledAvatar';
|
import { StyledAvatar } from './StyledAvatar';
|
||||||
import { IChangeRequestComment } from '../../changeRequest.types';
|
import { IChangeRequestComment } from '../../changeRequest.types';
|
||||||
@ -26,7 +26,9 @@ export const ChangeRequestComment: FC<{ comment: IChangeRequestComment }> = ({
|
|||||||
comment,
|
comment,
|
||||||
}) => (
|
}) => (
|
||||||
<ChangeRequestCommentWrapper>
|
<ChangeRequestCommentWrapper>
|
||||||
|
<Tooltip title={comment.createdBy.username}>
|
||||||
<StyledAvatar src={comment.createdBy.imageUrl} />
|
<StyledAvatar src={comment.createdBy.imageUrl} />
|
||||||
|
</Tooltip>
|
||||||
<CommentPaper variant="outlined">
|
<CommentPaper variant="outlined">
|
||||||
<CommentHeader>
|
<CommentHeader>
|
||||||
<Box>
|
<Box>
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { Box } from '@mui/material';
|
import { Box } from '@mui/material';
|
||||||
import { FC } from 'react';
|
import { FC } from 'react';
|
||||||
import { Typography } from '@mui/material';
|
import { Typography, Tooltip } from '@mui/material';
|
||||||
import TimeAgo from 'react-timeago';
|
import TimeAgo from 'react-timeago';
|
||||||
import { IChangeRequest } from 'component/changeRequest/changeRequest.types';
|
import { IChangeRequest } from 'component/changeRequest/changeRequest.types';
|
||||||
import { ChangeRequestStatusBadge } from 'component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge';
|
import { ChangeRequestStatusBadge } from 'component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge';
|
||||||
@ -29,7 +29,9 @@ export const ChangeRequestHeader: FC<{ changeRequest: IChangeRequest }> = ({
|
|||||||
Created <TimeAgo date={new Date(changeRequest.createdAt)} />{' '}
|
Created <TimeAgo date={new Date(changeRequest.createdAt)} />{' '}
|
||||||
by
|
by
|
||||||
</Typography>
|
</Typography>
|
||||||
|
<Tooltip title={changeRequest?.createdBy?.username}>
|
||||||
<StyledAvatar src={changeRequest?.createdBy?.imageUrl} />
|
<StyledAvatar src={changeRequest?.createdBy?.imageUrl} />
|
||||||
|
</Tooltip>
|
||||||
<Box>
|
<Box>
|
||||||
<StyledCard variant="outlined">
|
<StyledCard variant="outlined">
|
||||||
<Typography variant="body2">
|
<Typography variant="body2">
|
||||||
|
@ -167,7 +167,7 @@ export const ChangeRequestOverview: FC = () => {
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
<AddCommentField
|
<AddCommentField
|
||||||
imageUrl={user?.imageUrl || ''}
|
user={user}
|
||||||
commentText={commentText}
|
commentText={commentText}
|
||||||
onTypeComment={setCommentText}
|
onTypeComment={setCommentText}
|
||||||
>
|
>
|
||||||
|
@ -38,7 +38,6 @@ import { useMediaQuery } from '@mui/material';
|
|||||||
import { Search } from 'component/common/Search/Search';
|
import { Search } from 'component/common/Search/Search';
|
||||||
import { useChangeRequestToggle } from 'hooks/useChangeRequestToggle';
|
import { useChangeRequestToggle } from 'hooks/useChangeRequestToggle';
|
||||||
import { ChangeRequestDialogue } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog';
|
import { ChangeRequestDialogue } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog';
|
||||||
import { CopyStrategyMessage } from '../../../changeRequest/ChangeRequestConfirmDialog/ChangeRequestMessages/CopyStrategyMessage';
|
|
||||||
import { UpdateEnabledMessage } from '../../../changeRequest/ChangeRequestConfirmDialog/ChangeRequestMessages/UpdateEnabledMessage';
|
import { UpdateEnabledMessage } from '../../../changeRequest/ChangeRequestConfirmDialog/ChangeRequestMessages/UpdateEnabledMessage';
|
||||||
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
|
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
|
||||||
import { IFeatureToggleListItem } from 'interfaces/featureToggle';
|
import { IFeatureToggleListItem } from 'interfaces/featureToggle';
|
||||||
|
Loading…
Reference in New Issue
Block a user