Update all the things: frontend-base and frontend-build #275

davidjoy · 2019-10-09T18:25:50Z

So this looks big.

Review Method

Please review the commits individually - they have detailed commit messages that describe what they're doing. Note that the individual commits will not run or pass tests on their own. They do at the end - things were a bit too interconnected for me to both 1) keep the commits understandable and 2) keep them resulting in a working app.

High level overview

The goal here is to use frontend-base (application framework) and frontend-build (build scripts/config) in this repo. This involves:

Pulling out dependencies that are now covered by base/build. Did this first to get everything to start breaking.
Updating to the new mechanisms that base/build expose. Gets everything to start working again.
Removing the files that are no longer needed. Everything should still keep working/tests should pass.

Updating frontend-base

This has a few steps:

Break up and remove the "common" and "components" directories - some of the stuff in there is now provided by frontend-base, and some just got moved into the src/payment module.
Switch over to using App.config, App.apiClient, App.authenticatedUser, etc.
Stop getting config, authentication, and query parameters data out of redux.
Get rid of all the configureApiService methods.
Initialize the app with App.initialize.

Updating frontend-build

Pulling out the jest, babel, eslint, prod build, and dev build config and replace it with the frontend-build equivalents.
Because we have a lot of custom configuration in payment, we have some webpack config files that wrap the frontend-build configs and add some extra functionality.

Testing

All tests pass.

That said, we'll want to do a manual retest of the application in staging, and a smoke test of it in prod as well.

codecov · 2019-10-09T18:29:34Z

Codecov Report

Merging #275 into master will increase coverage by 0.11%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #275      +/-   ##
==========================================
+ Coverage   99.33%   99.45%   +0.11%     
==========================================
  Files          63       61       -2     
  Lines         757      731      -26     
  Branches      113      112       -1     
==========================================
- Hits          752      727      -25     
+ Misses          5        4       -1

Impacted Files	Coverage Δ
...t/checkout/payment-form/StateProvinceFormInput.jsx	`100% <ø> (ø)`	⬆️
src/payment/__factories__/userAccount.factory.js	`100% <ø> (ø)`
src/payment/checkout/payment-form/CardDetails.jsx	`100% <ø> (ø)`	⬆️
src/payment/checkout/FreeCheckoutOrderButton.jsx	`100% <ø> (ø)`	⬆️
src/payment/data/reducers.js	`100% <ø> (ø)`	⬆️
...nt/checkout/payment-form/CardHolderInformation.jsx	`100% <ø> (ø)`	⬆️
src/payment/checkout/Checkout.jsx	`90.9% <ø> (ø)`	⬆️
src/payment/data/sagas.js	`97.22% <ø> (-0.04%)`	⬇️
src/payment/data/utils.js	`100% <ø> (ø)`
src/payment/data/selectors.js	`100% <100%> (ø)`	⬆️
... and 12 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ff13ecc...9265487. Read the comment docs.

abutterworth · 2019-10-09T18:50:07Z

.travis.yml

 before_install:
-  - npm install -g npm@latest
-  - npm install -g greenkeeper-lockfile@1.14.0
+- npm install -g npm@6


This is unneeded, you'll get npm 6.11 with node 12. The whole before_install block can go away I think.

abutterworth · 2019-10-09T18:58:34Z

src/index.jsx

+      <main>
+        <Switch>
+          <Route exact path="/" component={PaymentPage} />
+          <Route path="*" component={EcommerceRedirect} />


Could we use <Redirect /> from react-router-dom?

https://reacttraining.com/react-router/web/api/Redirect

EcommerceRedirect also logs... that said, it could internally use Redirect.

I think I may leave it, just to minimize potential changes to the actual functionality.

abutterworth · 2019-10-09T19:01:58Z

src/payment/__snapshots__/PaymentPage.test.jsx.snap

@@ -1977,7 +1977,7 @@ exports[`<PaymentPage /> Renders correctly in various states should render all c
                />
                <svg
                  aria-hidden="true"
-                  className="svg-inline--fa fa-lock fa-w-14 lock-icon"
+                  className="svg-inline--fa fa-lock fa-w-14 fa-null fa-rotate-null fa-pull-null lock-icon"


This seems odd

It's from updating font-awesome's libraries. They changed the classes they include on <FontAwesomeIcon />, far as I can tell. The icons appear to still show up. ¯_(ツ)_/¯

Kinda a reset, maybe?

I guess it's a new, likely unexpected, thing: FortAwesome/react-fontawesome#289

src/payment/cart/Cart.test.jsx

abutterworth · 2019-10-09T19:08:02Z

src/payment/data/service.js

-  // For every ajax response, check if the API has
-  // responded with a redirect value. If so, redirect.
-  /* istanbul ignore next */
-  apiClient.interceptors.response.use((response) => {


Is this now incorporated into frontend-base? I recall this behavior being new and unique to payment

Nevermind I see this below

abutterworth

Looks good to me with the exception of: https://github.com/edx/frontend-app-payment/pull/275/files#diff-0135cf2733403b932b0932386f98353e . Not sure where the nulls are coming from.

In anticipation of frontend-base and frontend-build taking over.

It’s only used there, so it makes sense for it to live with the code.

… in appropriate places to their consumers. The form input and select are in payment-form because that’s where they’re used. PageLoading is up top.

Renaming serviceUtils to handleRequestError since that’s the only thing in it.

Also doing the config in setupTest.js to remove it from most test files.

There are a few I didn’t put in this commit because they’re on lines with other, unrelated changes. Will merge them in next. This commit also includes cutting over to App.getQueryParams in the selectors as it was difficult to disentangle from removing the configuration portion of the redux store.

The whole app should now use App.config and App.apiClient. Deleting environment.js in this commit. This also ceases to call the “configureApiService” methods for most services except the top-level one, because it still has the interceptor.

Also cleaning up common seletors and actions. common/selectors were moved into the order-details/data/selectors where they were still necessary, and the common/actions file is subsumed into frontend-base.

It will be attached to the apiClient in the top-level index.jsx file, rather than the payment service.

- The snapshot change is because of the updated version of font awesome from a prior commit. - Changing its export from ConnectedPaymentPage to just PaymentPage. - The “requirePaymentPageProps” thing in the PaymentPage.test.js file wasn’t actually doing anything. At all.

It’s used to catch 404s (in the MFE) and forward them on to the ecommerce service. This will be used in our route configuration.

- Assets were not used by this MFE or are included in its dependencies. - Normalizing the stylesheet and preparing it for using the new header and footer. - Moving all the app-specific CSS into the payment/index.scss file - the top level one just glues everything together.

…longer responsible for creating a history object.

Depends on previous commits being in place. index.jsx simplifies massively and App.js (in this repo) is removed, along with the messages file which wasn’t being used. - loadConfig is used to add additional environment variables. - APP_AUTHENTICATED event is used to attach the interceptor.

And updating husky to its recommended configuration method.

Also using fedx-scripts for i18n extract.

- Also adding “bugs” to package.json and updating the package-lock. - The build.prod.js file has been renamed to create-apple-merchant-file and has been turned into a follow-up to the prod build, rather than a wrapper of it.

Using them in index.jsx instead of the old “App” file since that’s the first moment we’re about to start painting. Also updating references in OrderSummary and PaymentForm.

…ndaries

davidjoy requested review from inventhouse and a team October 9, 2019 18:45

abutterworth reviewed Oct 9, 2019

View reviewed changes

src/payment/cart/Cart.test.jsx Outdated Show resolved Hide resolved

abutterworth reviewed Oct 9, 2019

View reviewed changes

abutterworth approved these changes Oct 9, 2019

View reviewed changes

davidjoy force-pushed the djoy/update_all_the_things branch from c75ec06 to 236637f Compare October 11, 2019 17:17

davidjoy added 20 commits October 15, 2019 11:34

Update all packages.

f2919b4

Unneeded packages removed.

d20f527

In anticipation of frontend-base and frontend-build taking over.

Moving card-validator into the src/payment/checkout directory

9c30f26

It’s only used there, so it makes sense for it to live with the code.

Moving FormInput, FormSelect, and PageLoading into src/payment module.

db59d4b

… in appropriate places to their consumers. The form input and select are in payment-form because that’s where they’re used. PageLoading is up top.

Moving utils and serviceUtils into payment module.

60124d8

Renaming serviceUtils to handleRequestError since that’s the only thing in it.

Using App.config for i18n configuration in tests.

729f723

Also doing the config in setupTest.js to remove it from most test files.

Moving userAccount factory.

0c984ec

Missed a deletion of configureI18n in prior commit.

38c4a8b

Using App.authenticatedUser and fetchUserAccount from frontend-base

d45c9c9

Also cleaning up common seletors and actions. common/selectors were moved into the order-details/data/selectors where they were still necessary, and the common/actions file is subsumed into frontend-base.

Moving the response interceptor into its own file.

96d839c

It will be attached to the apiClient in the top-level index.jsx file, rather than the payment service.

Creating a component called EcommerceRedirect

391b85e

It’s used to catch 404s (in the MFE) and forward them on to the ecommerce service. This will be used in our route configuration.

APPLE_PAY_MERCHANT_IDENTIFIER is not a variable used in this MFE.

ae02a6d

Updating ADR to reflect some of the app configuration/apiClient changes.

7232dbe

When using frontend-base, the redux store configuration files are no …

bb48487

…longer responsible for creating a history object.

Use fedx-scripts and frontend-build config for jest configuration.

18652e4

davidjoy added 9 commits October 15, 2019 11:34

Use frontend-build for linting.

bedb365

And updating husky to its recommended configuration method.

Let frontend-build manage babel configuration.

ef580a6

Modernize travis config.

0304dfc

Also using fedx-scripts for i18n extract.

Using frontend-build for dev server webpack config.

7eac5d5

Using frontend-build for dev-stage mode.

f02ee18

Using frontend-build for prod build.

53992f4

- Also adding “bugs” to package.json and updating the package-lock. - The build.prod.js file has been renamed to create-apple-merchant-file and has been turned into a follow-up to the prod build, rather than a wrapper of it.

Review feedback - cleaning up test code.

c76e61b

refactor: moving speedcurve utils up to the top

a138b7a

Using them in index.jsx instead of the old “App” file since that’s the first moment we’re about to start painting. Also updating references in OrderSummary and PaymentForm.

fix: move speedcurve utils into payment so as not to break module bou…

8a54d40

…ndaries

davidjoy force-pushed the djoy/update_all_the_things branch from 0ada010 to 8a54d40 Compare October 15, 2019 15:35

davidjoy added 3 commits October 15, 2019 11:36

Adding favicon.

c408f7e

fix: usage of markPerformanceIfAble

8836029

fix: send analytics events

9265487

davidjoy merged commit 5d24e4a into master Oct 16, 2019

davidjoy deleted the djoy/update_all_the_things branch October 16, 2019 15:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update all the things: frontend-base and frontend-build #275

Update all the things: frontend-base and frontend-build #275

davidjoy commented Oct 9, 2019 •

edited

Loading

codecov bot commented Oct 9, 2019 •

edited

Loading

abutterworth Oct 9, 2019

davidjoy Oct 9, 2019

abutterworth Oct 9, 2019

davidjoy Oct 10, 2019

abutterworth Oct 9, 2019

davidjoy Oct 9, 2019

davidjoy Oct 9, 2019

abutterworth Oct 9, 2019

abutterworth Oct 9, 2019

abutterworth Oct 9, 2019

davidjoy Oct 9, 2019

abutterworth left a comment

Update all the things: frontend-base and frontend-build #275

Update all the things: frontend-base and frontend-build #275

Conversation

davidjoy commented Oct 9, 2019 • edited Loading

Review Method

High level overview

Updating frontend-base

Updating frontend-build

Testing

codecov bot commented Oct 9, 2019 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

abutterworth left a comment

Choose a reason for hiding this comment

davidjoy commented Oct 9, 2019 •

edited

Loading

codecov bot commented Oct 9, 2019 •

edited

Loading