MB-4638 Storybook allowances viewer form authorized weight #5439

donaldthai · 2020-12-09T01:46:42Z

Description

For this story let’s focus on getting the form field ready to go in storybook. We’ll tackle getting it onto the ‘page’ when we are doing the backend story: MB-5846: TOO can change Authorized Weight in the allowances viewer (backend)UNSCHEDULED

As a TOO, I need to be able to update the Service Member’s authorized weight if it was entered incorrectly or differs from what I know it should be, so that billing problems aren’t encountered when this move is being paid for.

Given that I'm a TOO in the Allowances editor

When I click the Authorized weight text box

Then I can enter free form text input

Given that I'm a TOO in the Allowances editor

When I enter a new Authorized Weight and click the Save button

Then the input is validated as a numeric input, greater than zero,

and reject non-numeric input

Given that I'm a TOO in the Allowances editor

When I enter a new Authorized Weight and move focus from the input

Then weight is formated along the pattern "##,### lbs"

Reviewer Notes

Is there anything you would like reviewers to give additional scrutiny?

Setup

Add any steps or code to run in this section to help others prepare to run your code:

make client_build
make storybook

Storybook
http://localhost:6006/?path=/story/too-tio-components-allowancesdetailform--basic

View allowances page

Log in as TOO, officelocal
Click on any move
Scroll down and click on Edit Allowances button

Code Review Verification Steps

There are no aXe warnings for UI.
This works in Supported Browsers and their phone views (Chrome, Firefox, IE, Edge).
Tested in the Experimental environment (for changes to containers, app startup, or connection to data stores)
User facing changes have been reviewed by design.
Request review from a member of a different team.
Have the Jira acceptance criteria been met for this change?

References

Jira story for this change
this article explains more about the approach used.

Screenshots

Storybook

View allowances page

Number mask in action

…lay-allowances-in-sidebar-component

donaldthai · 2020-12-09T01:47:50Z

package.json

@@ -173,6 +174,7 @@
        "lines": 40,
        "statements": 40
      }
-    }
+    },
+    "transformIgnorePatterns": ["node_modules/(?!(imask)/)/"]


Jest tests had trouble doing some transform for the imask library. Followed this thread that describes the solution uNmAnNeR/imaskjs#322

robot-mymove · 2020-12-09T01:57:15Z

	Warnings
⚠️	It looks like you are attempting to bypass a linter rule, which is not within security compliance rules. Contains a rule that is not in the permitted eslint list. You are free to disable only: ( no-underscore-dangle ,prefer-object-spread ,object-shorthand ,camelcase ,react/jsx-props-no-spreading ,react/destructuring-assignment ,react/forbid-prop-types ,react/prefer-stateless-function ,react/sort-comp ,import/no-extraneous-dependencies ,import/order ,import/prefer-default-export ,import/no-named-as-default ) Please remove the bypass code and address the underlying issue. cc: @transcom/Truss-Pamplemoose

	Messages
📖	🔗 MB-4638

Generated by 🚫 dangerJS against e2e7003

- fix merge issues

…mb-4638-storybook-authorized-weight-form

duncan-truss · 2020-12-10T15:03:04Z

src/pages/Office/MoveAllowances/MoveAllowances.jsx

+  const initialValues = { authorizedWeight: `${authorizedWeight}` };
+
+  const validationSchema = Yup.object({
+    authorizedWeight: Yup.number().required('Required'),


I think we need to add a validation to prevent the user from entering the number zero

duncan-truss · 2020-12-10T15:23:28Z

@donaldthai My more general question is why if authorizedWeight is null in the database the value coming back in the payload is set to the weightAllotment +- dependents. Won't it make the user think they don't need to confirm the authorized weight because we show it already populated? Maybe that's part of @Ronolibert 's backend story making that change to not load that value by default.

monfresh · 2020-12-10T15:29:34Z

@duncan-truss Under normal circumstances, the AuthorizedWeight is stored in the DB at the time the order is created during customer onboarding. The value is initially the same as the weight allowance based on rank and dependents. Our test data does not populate the AuthorizedWeight field, which is yet another example of creating factories with unrealistic data. In ghc_entitlements.go, if the AuthorizedWeight DB field is empty for some reason, then we fall back to the Weight allowance, which is why the payload is returning that.

duncan-truss · 2020-12-10T15:34:16Z

@duncan-truss Under normal circumstances, the AuthorizedWeight is stored in the DB at the time the order is created during customer onboarding. The value is initially the same as the weight allowance based on rank and dependents. Our test data does not populate the AuthorizedWeight field, which is yet another example of creating factories with unrealistic data. In ghc_entitlements.go, if the AuthorizedWeight DB field is empty for some reason, then we fall back to the Weight allowance, which is why the payload is returning that.

Thanks for explaining that @monfresh

duncan-truss · 2020-12-10T15:49:07Z

src/components/Office/AllowancesDetailForm/AllowancesDetailForm.test.jsx

@@ -39,7 +53,17 @@ describe('AllowancesDetailForm', () => {
  });

  it('uses defaults for undefined values', () => {
-    const wrapperNoProps = mount(<AllowancesDetailForm entitlements={{}} />);
+    const wrapperNoProps = mount(
+      <Formik initialValues={{ authorizedWeight: '0' }} onSubmit={jest.fn()}>


Do we want to set this to null instead of zero since authorizedWeight could have a null value in theory since it's a pointer.

duncan-truss · 2020-12-10T15:57:41Z

src/components/form/fields/TextInput.test.jsx

+  describe('with masking', () => {
+    const wrapper = mount(
+      <TextMaskedInput
+        // value={"8000"}


looks like you added this below

duncan-truss

Works well for me! The library says it's IE11 compatible too.

brooksr4

Looks good and seems to meet the reasonable acceptance criteria. (note: I think there's some left over acceptance criteria for when it's in the system that can't be covered here)

…e tests accordingly

…ined values

duncan-truss and others added 11 commits December 7, 2020 23:10

allowances detail form component and story creation

93b2fa5

Merge branch 'roc-mb-4634-edit-allowances-route' into ds-mb-4635-disp…

1110811

…lay-allowances-in-sidebar-component

Add AllowancesDetailForm to MoveAllowances sidebar component

5c3f1ae

Use weight and day formatters on allowances table

b941e1a

Add table header bold font weight

f83b12f

added imaskjs to project

8f8d6e4

transformIgnorePatterns for imask, fixes transpile error with jest

e4fe00f

new textMaskedInput component with tests

8d750ef

new allowances detail form

6e32323

test for form

d908ea6

add stories

306eeaa

donaldthai commented Dec 9, 2020

View reviewed changes

remove unused css

85c1a76

donaldthai added the ttv label Dec 9, 2020

donaldthai added 5 commits December 9, 2020 17:33

update test to test masking properly

06ee784

clean up test

3614421

remove comment from test

6c6ff52

update test expected value to include thousandth separator

95f6266

- merge branch 'ds-mb-4635-display-allowances-in-sidebar-component'

cf61df6

- fix merge issues

donaldthai changed the base branch from master to ds-mb-4635-display-allowances-in-sidebar-component December 9, 2020 18:47

donaldthai marked this pull request as ready for review December 9, 2020 18:49

donaldthai requested a review from suzubara as a code owner December 9, 2020 18:49

donaldthai requested review from a team December 9, 2020 18:49

add --runInBand to run tests in sequence rather than multiple processes

e42dce5

donaldthai requested a review from brooksr4 December 9, 2020 20:09

donaldthai added 2 commits December 9, 2020 21:11

initialize authorizedWeight value from entitlement

ee124cd

fix padding issue with form

b7e440e

Base automatically changed from ds-mb-4635-display-allowances-in-sidebar-component to master December 9, 2020 22:47

Merge branch 'master' of https://github.com/transcom/mymove into ttv-…

36e5463

…mb-4638-storybook-authorized-weight-form

duncan-truss reviewed Dec 10, 2020

View reviewed changes

duncan-truss approved these changes Dec 10, 2020

View reviewed changes

brooksr4 approved these changes Dec 10, 2020

View reviewed changes

donaldthai added 4 commits December 10, 2020 17:19

remove commented out code from test

27fe21a

Refactor textmaskinput to take in a defaultValue to display and updat…

11244c2

…e tests accordingly

using Nullish coalescing operator (??) to only consider null or undef…

6df04ad

…ined values

additional Yup validation for authorized weight

e2e7003

donaldthai merged commit a9fc011 into master Dec 10, 2020

donaldthai deleted the ttv-mb-4638-storybook-authorized-weight-form branch December 10, 2020 22:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MB-4638 Storybook allowances viewer form authorized weight #5439

MB-4638 Storybook allowances viewer form authorized weight #5439

donaldthai commented Dec 9, 2020 •

edited

Loading

donaldthai Dec 9, 2020

robot-mymove commented Dec 9, 2020 •

edited

Loading

duncan-truss Dec 10, 2020

duncan-truss commented Dec 10, 2020

monfresh commented Dec 10, 2020

duncan-truss commented Dec 10, 2020

duncan-truss Dec 10, 2020

duncan-truss Dec 10, 2020

duncan-truss left a comment

brooksr4 left a comment

MB-4638 Storybook allowances viewer form authorized weight #5439

MB-4638 Storybook allowances viewer form authorized weight #5439

Conversation

donaldthai commented Dec 9, 2020 • edited Loading

Description

Reviewer Notes

Setup

Code Review Verification Steps

References

Screenshots

donaldthai Dec 9, 2020

Choose a reason for hiding this comment

robot-mymove commented Dec 9, 2020 • edited Loading

duncan-truss Dec 10, 2020

Choose a reason for hiding this comment

duncan-truss commented Dec 10, 2020

monfresh commented Dec 10, 2020

duncan-truss commented Dec 10, 2020

duncan-truss Dec 10, 2020

Choose a reason for hiding this comment

duncan-truss Dec 10, 2020

Choose a reason for hiding this comment

duncan-truss left a comment

Choose a reason for hiding this comment

brooksr4 left a comment

Choose a reason for hiding this comment

donaldthai commented Dec 9, 2020 •

edited

Loading

robot-mymove commented Dec 9, 2020 •

edited

Loading