search

git202309 / testingforaautomation

0 stars 0 forks source link

dsfdsf #21

Open git202309 opened 1 year ago

git202309 commented 1 year ago

kdjsfjkahsdfjkhasdkjfhksdjf

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.

Result https://github.com/Expensify/App/assets/102477862/e1451cfc-2857-4e5c-b762-89b033c2a77c
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.

Result https://github.com/Expensify/App/assets/102477862/e1451cfc-2857-4e5c-b762-89b033c2a77c
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.

Result https://github.com/Expensify/App/assets/102477862/e1451cfc-2857-4e5c-b762-89b033c2a77c