c3024
commented
1 year ago Proposal
Please re-state the problem that we are trying to solve in this issue.
Tooltip not displayed on LHN for status
What is the root cause of that problem?
We are not wrapping the status with tooltip here https://github.com/Expensify/App/blob/6b1a6679042c4fa9bb628360e028f93a5f27b2f2/src/pages/home/sidebar/AvatarWithOptionalStatus.js#L49-L54 like this here https://github.com/Expensify/App/blob/6b1a6679042c4fa9bb628360e028f93a5f27b2f2/src/pages/home/report/ReportActionItemSingle.js#L247-L252
What changes do you think we should make in order to solve the problem?
We should wrap the status text with tooltip like this here
<View style={styles.sidebarStatusAvatar}>
<Tooltip text={statusTooltipText}>
<Text
style={styles.emojiStatusLHN}
numberOfLines={1}
>
{emojiStatus}
</Text>
</Tooltip>
</View>forwarding a prop statusTooltipText here
https://github.com/Expensify/App/blob/6b1a6679042c4fa9bb628360e028f93a5f27b2f2/src/pages/home/sidebar/AvatarWithOptionalStatus.js#L27
from
https://github.com/Expensify/App/blob/6b1a6679042c4fa9bb628360e028f93a5f27b2f2/src/pages/home/sidebar/SignInOrAvatarWithOptionalStatus.js#L38
adding there this
const status = lodashGet(currentUserPersonalDetails, 'status', {});
const formattedDate = DateUtils.getStatusUntilDate(lodashGet(status, 'clearAfter'));
const statusText = lodashGet(status, 'text', '');
const statusTooltipText = formattedDate ? `${statusText} (${formattedDate})` : statusText;The above lines are just approximations. We can use the check for betas in Permissions and also change to get statusEmojiCode from the status above
What alternative solutions did you explore? (Optional)
We can create a new component called StatusWithTooltip passing it a status object and a style for Text and use it for both AvatarWithOptionalStatus and ReportActionItemSingle
Approximate code for StatusWithTooltip
import Tooltip from "./Tooltip";
import Text from "./Text";
import React from 'react'
import DateUtils from "../libs/DateUtils";
import lodashGet from 'lodash/get';
const StatusWithTooltip = ({status, style}) => {
const formattedDate = DateUtils.getStatusUntilDate(lodashGet(status, 'clearAfter'));
const statusText = lodashGet(status, 'text', '');
const statusTooltipText = formattedDate ? `${statusText} (${formattedDate})` : statusText;
return (<Tooltip text={statusTooltipText}>
<Text
style={style}
numberOfLines={1}
>
{status.emojiCode}
</Text>
</Tooltip>)}
export default StatusWithTooltip;Its usage in AvatarWithOptionalStatus is like this
<View style={styles.sidebarStatusAvatar}>
<StatusWithTooltip status={status} style={styles.emojiStatusLHN} />
</View>with passing status object from SignInOrAvatarWithOptionalStatus
We can change the component writing style to standard practices followed for new components and any other adjustments as required.
kdjsfjkahsdfjkhasdkjfhksdjf