Feat/449 step 2 validation fe #674

mgaseta · 2023-11-22T15:12:52Z

Description

Closes #449, #686, #687, #688, #689

Changelog

New

Added correct validation for the ownership step
Made the progress bar responsive to the ownership changes
Updated style to make compliant with the new design

Changed

Fixed the annoying misalignment between location code and agency fields
Changed the applicant fields component to use states, it solved some bugs regarding data sync
Fixed a bug on the applicant fields component that happened when editing the agency and not editing the location code
Corrected the style of applicant fields inputs on read-only mode

Removed

Some old validation processes
Unused styles
No longer used utils functions

How was this tested?

🧠 Not needed
👀 Eyeball
🤖 Added tests

I maybe became biased when testing this feature, so please test it widely when reviewing it :)

Extra Comments

Just a small note for the design, this new small select box cut off some text of the options, shown in the images below, should we change it? @SLDonnelly @mmarsoleta

What gif/image best describes this PR or how it makes you feel?

Thanks for the PR!

Any successful deployments (not always required) will be available below.
Backend
Frontend
Oracle-API

Once merged, code will be promoted and handed off to following workflow run.
Main Merge Workflow

Thanks for the PR!

Any successful deployments (not always required) will be available below.
Backend
Frontend
Oracle-API

Once merged, code will be promoted and handed off to following workflow run.
Main Merge Workflow

…ation-code-from-main

…from-main' of github.com:bcgov/nr-spar into feat/588-modularize-client-selection-and-location-code-from-main

…ation-code-from-main

mgaseta · 2023-11-22T20:13:00Z

@mgaseta , I don't see how we could fix the text truncation inside the dropdown menu, other than changing the field width again or removing the agency number (but then, the text would probably truncate again for small screen sizes).

So for me one solution that we could use for now could be showing a tooltip on hover to show the full text to users. Ref: Truncation - Carbon DS

(Print from storybook)

This is already implemented:

So can we leave like that for the time being or should we try @craigyu 's suggestion?
(Seems like we replied almost at the same time, so I got my answer already, thanks!)

mgaseta · 2023-11-22T20:41:47Z

Before pushing to the branch, this is the result:

Should we go with it? @mmarsoleta @craigyu @SLDonnelly

Also, we still have the problem for the selected value:

mmarsoleta · 2023-11-22T20:52:07Z

Before pushing to the branch, this is the result:

Should we go with it? @mmarsoleta @craigyu @SLDonnelly

Also, we still have the problem for the selected value:

Yeah, it seems fine! Thank you for developing it.
We would still need the tooltip for the selected value and for smaller screens, but we could go with using 2 rows and then truncate the text if it's still too long.

Thank you @mgaseta , Thank you @craigyu

craigyu · 2023-11-22T21:56:44Z

two rows looks a lot more pleasant to me 😬

craigyu

Everything looks good except for the behaviour of the client combo box

Current

When clicking into the combo box, options aren't displayed to users in a drop down. To view the options users have to click on the down arrow button.

Desired

The current version on main displays a drop down when users click into it

ALMOST over

mgaseta · 2023-11-24T17:21:32Z

Thanks for flagging that @craigyu! Fixed here: 9fd9c9b

craigyu

ok the combobox work now!
but I found another small UI issue with the input 😬:

The inputs here get fused together when the screen narrows:

A solution is removing the min-inline-size property for the number input:

mgaseta · 2023-11-24T18:56:55Z

@craigyu Nice catch! Fixed here: 1e8a921

RMCampos

Just one questions regarding prefix. Great job! 😎

frontend/src/components/ApplicantAgencyFields/styles.scss

craigyu

* feat: created new component to deal with agency information * feat: separated commom texts to use on the component * feat: adjusting texts * feat: changng type of agency options * fix: fixing form review component * fix: adjusting declaration of states * feat: adjusted types and replaced agency fields * fix: adjusting onblur event * feat: changing useEffect of ownership step * feat: validation for the portion field * feat: adding new handling functions and other minor fixes * fix: small fixes * feat: removing add button from inside accordion * fix: fixing applicant fields component * fix: minor adjustments * feat: update progress bar for ownership step * fix: adjusting multioptobj fields validation * feat: adjusting style of applicant field * feat: adjusting ownership style * fix: fixed location input when creating a new owner * fix: removing unused functions * fix: fixing form review * fix: removing unused entry of the mock server * fix: fixing options size * fix: removing onclick function * fix: fixing style for small screens * fix: adjusting class name on scss

mgaseta and others added 29 commits November 2, 2023 11:01

feat: created new component to deal with agency information

fba4018

feat: separated commom texts to use on the component

09463f5

feat: adjusting texts

b492c02

feat: changng type of agency options

43d6fef

Merge branch 'main' into feat/588-modularize-client-selection-and-loc…

f0ef395

…ation-code-from-main

fix: fixing form review component

fde2f29

Merge branch 'feat/588-modularize-client-selection-and-location-code-…

a9af20e

…from-main' of github.com:bcgov/nr-spar into feat/588-modularize-client-selection-and-location-code-from-main

Merge branch 'main' into feat/588-modularize-client-selection-and-loc…

889d6c0

…ation-code-from-main

fix: adjusting declaration of states

bead2c0

feat: adjusted types and replaced agency fields

c697669

fix: adjusting onblur event

3542bc8

feat: changing useEffect of ownership step

618e1b8

Merge branch 'main' into feat/449-step-2-validation-fe

4ffdf39

Merge branch 'main' into feat/449-step-2-validation-fe

c3879e0

feat: validation for the portion field

91a4f65

feat: adding new handling functions and other minor fixes

f48cb36

Merge branch 'main' into feat/449-step-2-validation-fe

668ee0a

Merge branch 'main' into feat/449-step-2-validation-fe

d6c44c2

fix: small fixes

fbfc855

feat: removing add button from inside accordion

aff660d

fix: fixing applicant fields component

62d70cc

fix: minor adjustments

72159f6

feat: update progress bar for ownership step

f132bea

Merge branch 'main' into feat/449-step-2-validation-fe

04b03f1

fix: adjusting multioptobj fields validation

1a006ab

feat: adjusting style of applicant field

8712ea5

feat: adjusting ownership style

de9faba

fix: fixed location input when creating a new owner

dd8248b

fix: removing unused functions

550094a

mgaseta added the front-end front-end related task label Nov 22, 2023

fix: fixing options size

5c3e1a3

mgaseta mentioned this pull request Nov 23, 2023

Step 2 Validation [FE] #449

Closed

2 tasks

craigyu requested changes Nov 23, 2023

View reviewed changes

fix: removing onclick function

9fd9c9b

mgaseta requested a review from craigyu November 24, 2023 17:22

craigyu requested changes Nov 24, 2023

View reviewed changes

fix: fixing style for small screens

1e8a921

mgaseta requested a review from craigyu November 24, 2023 18:57

Merge branch 'main' into feat/449-step-2-validation-fe

94b732f

RMCampos suggested changes Nov 27, 2023

View reviewed changes

frontend/src/components/ApplicantAgencyFields/styles.scss Outdated Show resolved Hide resolved

craigyu approved these changes Nov 27, 2023

View reviewed changes

mgaseta and others added 2 commits November 27, 2023 15:43

fix: adjusting class name on scss

9fd2061

Merge branch 'main' into feat/449-step-2-validation-fe

b96c524

mgaseta requested a review from RMCampos November 27, 2023 18:51

This was linked to issues Nov 27, 2023

Update Step 2 UI #686

Closed

Update read-only style of agency and location code fields #687

Closed

Fix ApplicantFields initial state bug #688

Closed

Fix ApplicantFields agency change bug #689

Closed

craigyu merged commit 949a1b4 into main Nov 29, 2023

craigyu deleted the feat/449-step-2-validation-fe branch November 29, 2023 00:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/449 step 2 validation fe #674

Feat/449 step 2 validation fe #674

mgaseta commented Nov 22, 2023 •

edited

Loading

mgaseta commented Nov 22, 2023 •

edited

Loading

mgaseta commented Nov 22, 2023 •

edited

Loading

mmarsoleta commented Nov 22, 2023

craigyu commented Nov 22, 2023

craigyu left a comment •

edited

Loading

mgaseta commented Nov 24, 2023 •

edited

Loading

craigyu left a comment

mgaseta commented Nov 24, 2023

RMCampos left a comment

craigyu left a comment

Feat/449 step 2 validation fe #674

Feat/449 step 2 validation fe #674

Conversation

mgaseta commented Nov 22, 2023 • edited Loading

Description

Changelog

New

Changed

Removed

How was this tested?

Extra Comments

What gif/image best describes this PR or how it makes you feel?

mgaseta commented Nov 22, 2023 • edited Loading

mgaseta commented Nov 22, 2023 • edited Loading

mmarsoleta commented Nov 22, 2023

craigyu commented Nov 22, 2023

craigyu left a comment • edited Loading

Choose a reason for hiding this comment

Current

Desired

mgaseta commented Nov 24, 2023 • edited Loading

craigyu left a comment

Choose a reason for hiding this comment

mgaseta commented Nov 24, 2023

RMCampos left a comment

Choose a reason for hiding this comment

craigyu left a comment

Choose a reason for hiding this comment

mgaseta commented Nov 22, 2023 •

edited

Loading

mgaseta commented Nov 22, 2023 •

edited

Loading

mgaseta commented Nov 22, 2023 •

edited

Loading

craigyu left a comment •

edited

Loading

mgaseta commented Nov 24, 2023 •

edited

Loading