Comment tagging

[NSUWAL123]

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation
• 🧑‍💻 Refactor
• ✅ Test
• 🤖 Build or CI
• ❓ Other (please specify)

Related Issue

• Related to Comments posted by validators should be visible to enumerator in field. #2179

Describe this PR

• User mentions functionality in Update Review State modal, & display comment via popup if the user is mentioned on the comment in mapper frontend

Screenshots

Uploading Screen Recording 2025-04-09 120527.mp4…

[spwoodcock]

Looks good!

[spwoodcock]

This is pretty cool 🙌

The video failed to upload tho

[spwoodcock]

Theres no convention for this, but I always place CSS imports at the top of files to groups them / make it obvious

[spwoodcock]

The more react specific components we add, the more we will need to refactor in future.

I dont see the future of the management frontend being in React (in the long run).

As much as possible, could we try to use web components instead?

For example, what about this text expander web component from Github?
https://github.com/github/text-expander-element

It also picks up a specific tag (e.g. @ or #) from a text input, with a hook to do something.

I would suggest we only query the backend after 3 characters or more are typed. Hopefully this narrows it down a fair bit before searching the db

[NSUWAL123]

Sure! I'll have a look at text-expander-element.
Also completely agree with you on querying after 3 characters

[spwoodcock]

This will set all available usernames from the backend into the browser right?

If we have 10,000 users at some point, do you think this would cause an issue?

No need to over-optimise at the start (we dont have 10,000 users...), but its always good to keep scalability in mind when designing solutions 👍

[NSUWAL123]

So currently instead of showing all user list, I am querying if there's 1 character, but will change to 3 min character as you mentioned!

[spwoodcock]

As a tradeoff for performance and scalability, we could consider the following:

• On first 3+ character input (e.g. "@chr"), query the API.
• Store the result (["chris", "christina", "chrissy"]) in the store (redux or svelte).
• As the user continues to type (e.g. "@Chri"), filter the local store list.
• Then finally, if the user selects an option, or deletes characters (< 3 chars), or deletes the @, then we clear the local store values.

[spwoodcock]

The web component I linked provides a demo implementation:
https://github.com/github/text-expander-element/blob/main/examples/index.html
https://github.github.io/text-expander-element/examples/

    <text-expander keys="@">
      <textarea autofocus rows="10" cols="40"></textarea>
    </text-expander>

        expander.addEventListener('text-expander-change', event => {
          const {key, provide, text} = event.detail
          if (key === '@') {
            const menu = document.createElement('ul')
            menu.classList.add('menu')
            menu.role = 'listbox'
            // TODO instead of hardcoding values, we would query the API if 3 characters present
            for (const issue of [
              '#1 Implement a text-expander element',
              '#2 Implement multi word option',
              '#3 Fix tpoy',
              '#4 Implement #12',
              '#5 Implement #123 and #456',
            ]) {
              if (issue.toLowerCase().includes(text.toLowerCase())) {
                const item = document.createElement('li')
                item.setAttribute('role', 'option')
                item.textContent = issue
                item.setAttribute('data-value', issue.split(' ')[0])
                item.id = `option-${issue}`
                menu.append(item)
              }
            }
            provide(Promise.resolve({matched: true, fragment: menu}))
          }

[NSUWAL123]

@spwoodcock tried implementing text-expander-element but doesn't seem to work.

1. When using it with redux-store, the list doesn't update (the states are one state behind) due to the list populating after the change event trigger & list being built inside the change event.
2. Also when directly fetching the list under the change event, the list can be consoled but doesn't render. It's very weird as the static list would render.
   Also tried many other ways but doesn't work 😵‍💫

[spwoodcock]

No worries @NSUWAL123 - it was maybe a bit ambitious to use that web component, as I haven't tested it myself!

It's not a huge deal, as the React frontend doesn't really use any web-components anyway - updating most things to use them would be a big undertaking.

The key thing is to ensure we are using web components everywhere possible in the mapper frontend.

Thanks for trying though!! 🙏