Skip to content

[Due for payment 2025-03-21] [$500] Feature request : Upgrade task titles with markdown rendering #53175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
8 tasks
m-natarajan opened this issue Nov 26, 2024 · 142 comments
Assignees
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor NewFeature Something to build that is a new item.

Comments

@m-natarajan
Copy link

m-natarajan commented Nov 26, 2024

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!


Version Number:
Reproducible in staging?: New Feature
Reproducible in production?: New Feature
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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
Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation (hyperlinked to channel name): ts_external_expensify_convert

Background: The primary use of tasks today is Concierge assigning a specific set of onboarding task to the user. Each task currently has a numbered list of steps, generally ending with a link we want them to click. However, we see that some users don't realize the task can be clicked, meaning they don't see the instructions, meaning they don't click the link.

Problem: When new users don't realize the task title is clickable, they don't see the instructions, and thus don't do the call to action.

Solution: Please render task names using the same markdown>html processing as we do normal comments, to allow hyperlinks to be put into titles, in order to shorten the path to the CTA to one click. In other words, make task titles work like task descriptions:

Platforms:

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

  • Android: Standalone
  • Android: HybridApp
  • Android: mWeb Chrome
  • iOS: Standalone
  • iOS: HybridApp
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
  • MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~021863958075863531330
  • Upwork Job ID: 1863958075863531330
  • Last Price Increase: 2024-12-07
  • Automatic offers:
    • Krishna2323 | Contributor | 105277373
Issue OwnerCurrent Issue Owner: @JmillsExpensify
@m-natarajan m-natarajan added Weekly KSv2 NewFeature Something to build that is a new item. labels Nov 26, 2024
Copy link

melvin-bot bot commented Nov 26, 2024

Triggered auto assignment to @muttmuure (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

@melvin-bot melvin-bot bot added Daily KSv2 Overdue and removed Weekly KSv2 labels Nov 27, 2024
Copy link

melvin-bot bot commented Dec 2, 2024

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

@muttmuure muttmuure added the External Added to denote the issue can be worked on by a contributor label Dec 3, 2024
Copy link

melvin-bot bot commented Dec 3, 2024

Job added to Upwork: https://www.upwork.com/jobs/~021863958075863531330

@melvin-bot melvin-bot bot changed the title Feature request : Upgrade task titles with markdown rendering [$250] Feature request : Upgrade task titles with markdown rendering Dec 3, 2024
@melvin-bot melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Dec 3, 2024
Copy link

melvin-bot bot commented Dec 3, 2024

Triggered auto assignment to Contributor-plus team member for initial proposal review - @mananjadhav (External)

@melvin-bot melvin-bot bot removed the Overdue label Dec 3, 2024
@quinthar quinthar self-assigned this Dec 7, 2024
@quinthar
Copy link
Contributor

quinthar commented Dec 7, 2024

Hm, why hasn't this had any proposals? Also, why is the job listing "private"?

@mallenexpensify mallenexpensify changed the title [$250] Feature request : Upgrade task titles with markdown rendering [$500] Feature request : Upgrade task titles with markdown rendering Dec 7, 2024
Copy link

melvin-bot bot commented Dec 7, 2024

Upwork job price has been updated to $500

@mallenexpensify
Copy link
Contributor

The job shows as public to me in Upwork.
Likely no proposals cuz it's at the lowest price, I bumped to $500 to get 👀
If no proposals are submitted by Monday I can try to rally a contributor.

@Krishna2323
Copy link
Contributor

Krishna2323 commented Dec 7, 2024

Edited by proposal-police: This proposal was edited at 2024-12-07 22:35:47 UTC.

Proposal

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

Feature request : Upgrade task titles with markdown rendering

What is the root cause of that problem?

New feature

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

  • First create a custom html element model named task-title and add mixedUAStyles: {...styles.taskTitleMenuItem},.
    const customHTMLElementModels = useMemo(
    () => ({
    edited: HTMLElementModel.fromCustomModel({
    tagName: 'edited',
  • Create a component named TaskTitleRenderer.tsx for rendering task titles. Pseudo-code
  • In HTMLRenderers/index.ts add 'task-title': TaskTitleRenderer, in HTMLEngineProviderComponentList.
  • In TaskView, instead of using a text element for task title use RenderHTML and enclose the title with <task-title></task-title> tag.
  • Update getReportName to return return Parser.htmlToText(report?.reportName ?? ''); if if (isTaskReport(report)) { is true.
  • Update getTaskTitleFromReport to also use Parser.htmlToText when returning task title.
    function getTaskTitleFromReport(taskReport: OnyxEntry<Report>, fallbackTitle = ''): string {
    // We need to check for reportID, not just reportName, because when a receiver opens the task for the first time,
    // an optimistic report is created with the only property – reportName: 'Chat report',
    // and it will be displayed as the task title without checking for reportID to be present.
    return taskReport?.reportID && taskReport.reportName ? taskReport.reportName : fallbackTitle;
    }

    function getReportName(
  • In TaskTitlePage update the title limit if needed and add props like shouldSubmitForm, autoGrowHeight (only if want to make it multiline) and few other props.
    } else if (title.length > CONST.TITLE_CHARACTER_LIMIT) {

    <InputWrapper
    InputComponent={TextInput}
    role={CONST.ROLE.PRESENTATION}
    inputID={INPUT_IDS.TITLE}
  • There will be other changes, such as when creating or updating a task, we will need to parse the title and pass it to the backend, just like we do with the description. Additionally, we will need to update the backend to allow the report name to use markdown characters, and we will also need to increase the length limit for the report name, specifically for tasks.

Test Branch

  • NOTE: this will only work with optimistic data as the backend trims the markdown characters.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?


What alternative solutions did you explore? (Optional)

  • Instead of saving the html on the reportName property we can create a new property or use unused property for task reports like privateNotes.

Result

Monosnap.screencast.2024-12-07.10-42-17.mp4

@mallenexpensify
Copy link
Contributor

@mananjadhav 👀 plz on the proposal above. Thx

@melvin-bot melvin-bot bot added the Overdue label Dec 9, 2024
@mananjadhav
Copy link
Collaborator

mananjadhav commented Dec 9, 2024

Yes I had reviewed the proposal partially on the weekend. The proposal looks good, minor code changes and other areas to make updates can be covered in the implementation.

🎀 👀 🎀

Copy link

melvin-bot bot commented Dec 9, 2024

Triggered auto assignment to @johnmlee101, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

@melvin-bot melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Dec 10, 2024
@mallenexpensify
Copy link
Contributor

@JmillsExpensify Vic is out, can you please wrap this issue up? Thx

@mananjadhav
Copy link
Collaborator

@JmillsExpensify Quick bump on this one.

@roryabraham All of the linked PRs are now merged. I was wondering if this could be paid out. Also considering the scope of the issue was much larger than anticipated can we please bump the price for this one?

Also @roryabraham if you got a chance to go through this comment.

@melvin-bot melvin-bot bot added the Overdue label Apr 19, 2025
Copy link

melvin-bot bot commented Apr 22, 2025

@JmillsExpensify Huh... This is 4 days overdue. Who can take care of this?

@roryabraham
Copy link
Contributor

roryabraham commented Apr 22, 2025

All of the linked PRs are now merged. I was wondering if this could be paid out. Also considering the scope of the issue was much larger than anticipated can we please bump the price for this one?

This appears ready for payout. I think it would be reasonable to increase the bounty for this one. @mananjadhav What price do you think is fair?

@JmillsExpensify
Copy link

Waiting for final payment amount.

@melvin-bot melvin-bot bot removed the Overdue label Apr 23, 2025
@Krishna2323
Copy link
Contributor

Hi everyone,

After evaluating the time and effort we’ve put into this feature, I feel that $1500 would be a fair amount.
This PR stretched over several months, and the original PR itself involved extensive discussions, numerous changes, and handling of many edge cases.

Even after the initial implementation, we had to address several regressions — many of which were quite nuanced — and we put a lot of effort and time into resolving them as well.

Honestly, during the time I was working on this PR, I lost track of posting new proposals, which felt like a significant setback for me personally, and I’m still trying to get back into the flow.

That said, I completely understand if any other amount feels more appropriate from a broader perspective — I’m comfortable with that too.

Honestly, I even feel a little weird putting a number to it because it was a big learning experience for me, and I'm really grateful for the opportunity to work on this.

Thanks a lot for considering! 🙏

cc: @mananjadhav

@melvin-bot melvin-bot bot added the Overdue label Apr 26, 2025
Copy link

melvin-bot bot commented Apr 28, 2025

@JmillsExpensify Huh... This is 4 days overdue. Who can take care of this?

@roryabraham
Copy link
Contributor

$1500 seems reasonable to me as well 👍🏼

@mananjadhav
Copy link
Collaborator

I agree with @Krishna2323's assessment. @JmillsExpensify can you help with the same?

@Krishna2323
Copy link
Contributor

@VictoriaExpensify, since it has been decided to increase the bounty on this issue, I just wanted to clarify that I have already received $500. #53175 (comment)

@mananjadhav
Copy link
Collaborator

Thanks for the update @Krishna2323. I think it's @JmillsExpensify who's going to take care of the payout here.

@mallenexpensify
Copy link
Contributor

mallenexpensify commented Apr 29, 2025

Contributor: @Krishna2323 paid $1000 via Upwork (alreadypaid $500 here. Payment was on same job, $1k was added as a bonus )
Contributor+: @mananjadhav due $1500 via NewDot.

Do we need regression tests here? Seems like we would. cc @mananjadhav

@mananjadhav
Copy link
Collaborator

Yes. I'll need some time to build the regression tests. Quick question, do we have any set of regression tests for markdown fields? Ideally we would need the same tests here as well.

@JmillsExpensify
Copy link

Thanks @mallenexpensify for the quick assist!

@melvin-bot melvin-bot bot removed the Overdue label Apr 29, 2025
@mallenexpensify
Copy link
Contributor

do we have any set of regression tests for markdown fields?

These are the tests I see when I search Markdown

Image

Can you access TestRail? Looks like you have read-only access @mananjadhav

do we have any set of regression tests for markdown fields?

@mananjadhav
Copy link
Collaborator

Looks like you have read-only access

Ohh I forgot. I'll have to check. I'll check this on the weekend and try to build the test cases.

@melvin-bot melvin-bot bot added the Overdue label May 2, 2025
@garrettmknight
Copy link
Contributor

$1500 approved for @mananjadhav

Copy link

melvin-bot bot commented May 5, 2025

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

Copy link

melvin-bot bot commented May 7, 2025

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

@mananjadhav
Copy link
Collaborator

I am copying the tests from individual PRs. Should have them ready by today/tomorrow.

Copy link

melvin-bot bot commented May 9, 2025

@JmillsExpensify 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

@mananjadhav
Copy link
Collaborator

✅ Regression Test Proposal

  1. Basic Markdown Rendering in Task Title

    • Go to any chat.
    • Click/tap on + > Assign task.
    • Paste the following in the title and description fields:
      This is a sentence without any markdown styling.
      Simple sentence with a [link](https://github.com/Expensify/App/issues) , `inline code` and ~line-through~ text.
      # heading with a [link](https://github.com/Expensify/App/issues) and `inline code`.
      > Blockquote with a [link](https://github.com/Expensify/App/issues) and `inline code`.
      A simple text with a ~line-through~ and _italic_ word.
      # A heading with a line-through and italic word.
      *This sentence is bolded using "**"*
      > We should also check emojis 😅
      # And emojis in a heading 😅
      > Whats missing🤔? Please test the missing ones🥶.
      
    • Click "Next" and confirm:
      • Markdown is correctly rendered in title input and matches description.
    • Click "Confirm Task".
    • Validate:
      • Task preview renders markdown properly.
      • Task detail page displays rendered markdown correctly.
      • Text after # and between ** is not incorrectly bolded.
  2. Copy Task Title and Validate Markdown Copy Behavior

    • Create a task with markdown in the title.
    • Right click on the task preview > Copy to clipboard.
    • Paste the content.
    • Ensure the pasted title retains proper markdown formatting.
  3. Blockquote Hover and Rendering Validation

    • Create a task with blockquote (> block text) in the title.
    • Hover on the task preview in chat.
    • Validate:
      • Blockquote line is visible on hover.
      • Clicking task shows the blockquote rendered as normal text in the task view.
  4. Multiline Markdown and Edge Case Formatting

    • Use multiline markdown in title: > > hey, then update to just hey.
    • Confirm:
      • Title renders as normal text.
      • No layout issues or excess spacing in task report header.
  5. Image Markdown Handling

    • Create a task with an inline image markdown in title:
      [![300](https://picsum.photos/id/1067/200/300)](https://example.com)
      
    • Validate:
      • Confirmation page does not show image.
      • Task preview shows link instead of image.
      • Task detail view also renders link (no image shown).
  6. Search Router Single-line Enforcement

    • Create a task with a multiline title.
    • Open the search router (top right).
    • Confirm:
      • Title is rendered as a single line.
  7. Code Block and Link Overlap

    • Create task with title:
      [long link name](https://github.com/Expensify/App/issues/google.com)
      inline code
      
    • Verify:
      • Inline code does not overlap with the link visually.
  8. Onboarding Flow Consistency

    • Go through onboarding:
      • Choose “Manage my team’s expenses”
      • Select “1–10 employees”
      • Choose “None”
    • Login using magic link after onboarding.
    • Log in on Android app with same account.
    • Open Concierge chat.
    • Tap any task and verify:
      • Task name remains consistent across navigation.
  9. Strikethrough Style for Completed Tasks

    • Open a report and create a task.
    • Complete the task.
    • Confirm:
      • Strikethrough is applied in preview for completed task.

@mallenexpensify Can you please add this to the Task title regression test suite?

Once added we're good to close this one.

@JmillsExpensify
Copy link

Regression tests created so closing this one out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor NewFeature Something to build that is a new item.
Projects
Development

No branches or pull requests