22579 - Add FED Column & Tooltips (continuation table)

[ArwenQin]

Issue #:
bcgov/entity#22579

Description of changes:

• Added Future Effective Date column to table
• Added red/orange tooltips to future effective date
• Added red/orange tooltips to NR number when it has expired /<14 days
• Added action for NR redirect to Namex UI
• Added hover text showing what statuses are selected
• For date pickers: show the date range truncated and the full text on hover
• Added close icon to all search fields
• Fixed the bug: calendar icon can't open the date picker

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of the sbc-auth license (Apache 2.0).

[ArwenQin]

Updated the Table name, FED column and actions icon styles:

[severinbeauvais]

I think you should make the Status column wider so it fits without horizontal scrolling. You can make some other columns narrower, such as the dates and the NR number.

[severinbeauvais]

Ask Janis if the Name Examination should open in a new page (tab).

[seeker25]

LGTM, need entities review though

[ArwenQin]

I think you should make the Status column wider so it fits without horizontal scrolling. You can make some other columns narrower, such as the dates and the NR number.

Updated, made the NR number, date and identifier column narrower.
Updated the redirect to NameX, will open in a new tab.

[severinbeauvais]

Updated, made the NR number, date and identifier column narrower. Updated the redirect to NameX, will open in a new tab.

Looks great!

Since there's an 'X' to clear the dates and Status, what do you think of adding an 'X' to clear the NR Number, Identifying Number and Completing Party?

[severinbeauvais]

PS You need to "pull up" the icons in the header by 1 or 2 px.

Also, can you check what the dropdown menu is attached to? It obscures its action button so I have to click away from it to close it.

[severinbeauvais]

Do you think we should be able to open the NR when the application is approved or rejected?

I'm thinking "yes" but check with Janis and/or Mihai.

[severinbeauvais]

This looks very good. Ask Janis if we should show hours instead of days if it's less than, say, 1 day.

NRs always expire at 11:59 pm on their last day, so we probably don't need to show hours for them. What does the tooltip say if the NR expires today?

Sample NR info:

[severinbeauvais]

Test results

With NR expiring in 6 days (2024-08-29):

With NR expiring today (2024-08-23):

Do you think this is OK, or should it show "expiring today"? And also, why isn't the icon red?

[ArwenQin]

Test results

With NR expiring in 6 days (2024-08-29):

With NR expiring today (2024-08-23):

Do you think this is OK, or should it show "expiring today"? And also, why isn't the icon red?

Yes, if the NR expires in less than 24 hour, it will say "expires in 1 day". I think it's ok. Should I check with Janis?
I will check with Janis for the FED less than 24 hours.
The icon is red when the NR already expires (Figma below):

[severinbeauvais]

Yes, if the NR expires in less than 24 hour, it will say "expires in 1 day". I think it's ok. Should I check with Janis? I will check with Janis for the FED less than 24 hours. The icon is red when the NR already expires

Yes, check with Janis. As a possible solution, how about if the dates have their own tooltip like this?

Yes, you are correct about the red NR icon 👍

[ArwenQin]

Yes, if the NR expires in less than 24 hour, it will say "expires in 1 day". I think it's ok. Should I check with Janis? I will check with Janis for the FED less than 24 hours. The icon is red when the NR already expires

Yes, check with Janis. As a possible solution, how about if the dates have their own tooltip like this?

Yes, you are correct about the red NR icon 👍

Sure, checking with Janis and cc you there.

[ArwenQin]

Updated:

• All statuses can open NR
  

• Updated the FED tooltip to show the full date and time
  

• Updated the NR date tooltip expiring today
  

[severinbeauvais]

No need to change this but FYI: since this class is always set, you can use the class prop on this element. (Ie, you can use both class and :class.)

[severinbeauvais]

/gcbrun

[bcregistry-sre]

Temporary Url for review: https://bcregistry-account-dev--pr-2978-f8g8fzgr.web.app

[severinbeauvais]

Please undo this change.

Also, please update the app version again.

Then, go ahead and merge this PR.

[ArwenQin]

Thanks Sev! I just undo this and updated the app version again.
Could you please merge it?
Thank you.

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud