[HOLD for payment 2023-06-21] [$1000] Dev: Only description's text has reduced opacity when it's disabled

@aman-atg

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Action Performed:

Login to ND
Click on FAB
Assign a task
Mark it as done

Expected Result:

The values of both the description and title should be displayed with reduced opacity.

Actual Result :

Only description's text has reduced opacity

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

Version Number: Main branch
Reproducible in staging?: needs reproduction
Reproducible in production?: needs reproduction
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-05-16.at.11.52.01.PM.1.mov

Expensify/Expensify Issue URL:
Issue reported by: @aman-atg
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1684262325244699

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~015756347dcee86389
Upwork Job ID: 1666089075589812224
Last Price Increase: 2023-06-06

@johncschuster

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

Bug0 Triage Checklist (Main S/O)

This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

Proposal

Please re-state the problem that we are trying to solve in this issue.

task header description's text has reduced opacity when it's disabled.
I think the Expected Result is the both fields should be without opacity, not with opacity, to be consistent with MoneyRequestHeader.

What is the root cause of that problem?

After make the task mark as done, we disable the item to disable edit it, But we use different style for item disabled here.

App/src/components/MenuItem.js

Line 72 in 2090c05

    
           props.interactive && props.disabled ? {...styles.disabledText, ...styles.userSelectNone} : undefined,

the disable style work for task description, but not work for task title because title has additional prop shouldShowHeaderTitle which override disabled text color.

What changes do you think we should make in order to solve the problem?

Solution A

set titleStyle={styles.colorHeading} for MenuItemWithTopDescription here to override disabled color like this.

  <MenuItemWithTopDescription
      title={lodashGet(props.report, 'description', '')}
      description="Description"
      onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
      disabled={!isOpen}
      titleStyle={styles.colorHeading} // <<<<<<<<< add this prop
  />

Solution B

add prop shouldShowHeaderTitle to task description to be same as task title.

What alternative solutions did you explore? (Optional)

Proposal

Please re-state the problem that we are trying to solve in this issue.

Only description's text has reduced opacity when it's disabled

What is the root cause of that problem?

It is caused by adding this line which overrides the above styles

What changes do you think we should make in order to solve the problem?

We should move it to the top of "disabled styles" like below which will resolve the issue.

            styles.popoverMenuText,
            props.icon ? styles.ml3 : undefined,
            props.shouldShowBasicTitle ? undefined : styles.textStrong,
            props.shouldShowHeaderTitle ? styles.textHeadlineH1 : undefined,
            props.interactive && props.disabled ? {...styles.disabledText, ...styles.userSelectNone} : undefined,
            styles.pre,
            styles.ltr,
            isDeleted ? styles.offlineFeedback.deleted : undefined,

As per the new requirements, we now have two options for Task header MenuItems :-

1. No reduced opacity and default cursor

To get this, we just need to use interactive prop and remove the disabled prop like below

Code

            <MenuItemWithTopDescription
                shouldShowHeaderTitle
                title={props.report.reportName}
                description={props.translate('newTaskPage.task')}
                onPress={() => Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID))}
                interactive={isOpen}
            />
            <MenuItemWithTopDescription
                title={lodashGet(props.report, 'description', '')}
                description={props.translate('newTaskPage.description')}
                onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
                interactive={isOpen}
            />

Result

interactive.mp4

2. No reduced opacity and not-allowed cursor

To get this, we need to use both disabled and interactive props like below

Code

            <MenuItemWithTopDescription
                shouldShowHeaderTitle
                title={props.report.reportName}
                description={props.translate('newTaskPage.task')}
                onPress={() => Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID))}
                interactive={isOpen}
                disabled={!isOpen}
            />
            <MenuItemWithTopDescription
                title={lodashGet(props.report, 'description', '')}
                description={props.translate('newTaskPage.description')}
                onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
                interactive={isOpen}
                disabled={!isOpen}
            />

Result

disabled.mp4

I don't think this is a bug. (Asking in Slack)

@johncschuster

@johncschuster Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

@johncschuster

@johncschuster Eep! 4 days overdue now. Issues have feelings too...

@johncschuster

@johncschuster Still overdue 6 days?! Let's take care of this!

Ok! It's a bug. 😅

Sharing the discussion about the intended behavior since it happened in a channel that is not shared:

@sobitneupane

@sobitneupane Can you complete the BZ Checklist when you get a moment?

@aman-atg

@aman-atg / @sobitneupane can you apply to the Upwork job above? Thanks!

NVM – I've invited you both!

@johncschuster

@johncschuster I have accepted the offer, thank you!

@sobitneupane

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@sobitneupane] The PR that introduced the bug has been identified. Link to the PR:

#18806

[@sobitneupane] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:

#18806 (comment)

[@sobitneupane] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

I think this is resulted by change in design rather than a bug. So, it couldn't have caught earlier.

Regression Test Proposal

Login to ND
Click on FAB icon
Assign a task and add some description.
Mark it as done
Verify that the opacity for Task's text and Description's text are not reduced & not-allowed cursor is being shown

Do we agree 👍 or 👎

Regression test issue created^

Payment has been issued!

Navigation Menu

Repository navigation

[HOLD for payment 2023-06-21] [$1000] Dev: Only description's text has reduced opacity when it's disabled #19232

Action Performed:

Expected Result:

Actual Result :

Workaround:

Platforms:

Bug0 Triage Checklist (Main S/O)

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

Solution A

Solution B

What alternative solutions did you explore? (Optional)

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

1. No reduced opacity and default cursor

2. No reduced opacity and not-allowed cursor

38 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[HOLD for payment 2023-06-21] [$1000] Dev: Only description's text has reduced opacity when it's disabled #19232

Description

Action Performed:

Expected Result:

Actual Result :

Workaround:

Platforms:

Activity

melvin-bot commented on May 18, 2023

melvin-bot commented on May 18, 2023

Bug0 Triage Checklist (Main S/O)

ahmedGaber93 commented on May 19, 2023

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

Solution A

Solution B

What alternative solutions did you explore? (Optional)

aman-atg commented on May 19, 2023

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

1. No reduced opacity and default cursor

2. No reduced opacity and not-allowed cursor

johncschuster commented on May 19, 2023

melvin-bot commented on May 22, 2023

melvin-bot commented on May 24, 2023

melvin-bot commented on May 26, 2023

johncschuster commented on May 30, 2023

38 remaining items

johncschuster commented on Jun 26, 2023

johncschuster commented on Jun 26, 2023

johncschuster commented on Jun 28, 2023

aman-atg commented on Jun 29, 2023

sobitneupane commented on Jul 3, 2023

sobitneupane commented on Jul 3, 2023

johncschuster commented on Jul 5, 2023

johncschuster commented on Jul 5, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions