Because:
- We want to convert content-server views to React and are starting by building out the front-end in Storybook. This PR converts the reset_password view. Additional complexity will be added in (a) later ticket(s).
This commit:
- Create ResetPassword UI in React, including l10n, storybook, initial metrics, initial tests.
- Does not include units tests for success/failure methods, error handling.
- Create additional reusable components (including l10n, storybook, initial tests): CardHeader, LinkRememberPassword, WarningMessage
- Add placeholder for ResetPassword function in models/Accounts
- Update InputText and Tooltip with new properties and updated styling for reuse in ResetPassword
- Move 'cta-xl' TW class from content-server to fxa-react
- Fix spelling of "focussed" to "focused" in InputText and Checkbox
Closes #FXA-6338, FXA-6447
Because:
- We want to speed up pipeline startup.
This Commit:
- Optimizes docker base image builds for the smallest images possible.
- Enables hard links for yarn cache
- Enables global yarn cache
- Avoids needlessly installing playwright browsers.
- Avoids needlessly running yarn install.
- Uses mozilla/fxa-circleci:ci-base-latest image for running test pipelines
- Uses mozilla/fxa-circleci:ci-base-browsers image for running functional tests pipelines
- Creates configurable executors that can be reused across pipelines
- Upgrades to yarn 3.3.0
- Enabled direct check out of PR code to test, which is faster than circle ci’s checkout command.
- Upgrades functional test to X-Large. This was already the case for playwright tests, but is now extended to content server tests too. This decision was made due to running lots of pipelines and realizing flakiness was largely due to CPU or memory hitting 100% for long periods of time.
- Turns off tracing, since it saves a bit of runtime.
Because:
- Concatenating shared FTL strings into multiple packages before sending for localization created duplication of localization work, and we want each string to only be translated once.
This commit:
- Remove concatenation of shared files (branding.ftl, fxa-react ftl files) from grunttasks
- Add grunttasks in fxa-react to concatenate fxa-react FTL files into one react.ftl file
- Add grunt to fxa-react dev dependencies
- Update fxa-react scripts to run l10n and ftl tasks
- Update clone-l10n script to distribute react.ftl to packages
- Bundle branding and shared into AppLocalizationProvider
Closes #FXA-6388
Because:
- We want to separate unit tests and integrations tests
This Commit:
- Tags all unit tests, i.e. tests that can run without infrastructure and in a fairly short amount of time, with #unit.
- Adds a test:unit npm command to each package
- Adds a test:integration npm command to each package, and adds '#integration' tags to jest tests since jest has no --invert option like mocha.
Because:
- Concatenating shared FTL strings into multiple packages before sending for localization created duplication of localization work, and we want each string to only be translated once.
This commit:
- Remove concatenation of shared files (branding.ftl, fxa-react ftl files) from grunttasks
- Add grunttasks in fxa-react to concatenate fxa-react FTL files into one react.ftl file
- Add grunt to fxa-react dev dependencies
- Update fxa-react scripts to run l10n and ftl tasks
- Update clone-l10n script to distribute react.ftl to packages
- Bundle branding and shared into AppLocalizationProvider
Closes #FXA-6388
Because:
- We want to ensure that calls to l10n.getString are safe
- We want to catch errors preemptively
This Commit:
- Adds a new class for resolving l10n strings. Resolving strings through this class:
- Ensures there are no straight quotes
- Ensures l10n id exists in the 'en' bundle
- Ensures fallback text matches text in 'en' bundle
- Ensures there are no errors resolving parameters in the l10n string
- Adds a hook for easy access to the FtlMsgResolver.
- Adds config that controls whether or not we run in strict mode. Note, that run time errors will result if a violation is detected when `strict=true`.
- Applies mechanism to one component in settings, the bento box.
Because:
- Tailwind v3 provides more classes by default, so many custom variations included in our Tailwind config are no longer needed.
- Tailwind v3 enables JIT engine by default, and purges all unused utilites from the css build. While this reduces file size, it also becomes difficult to debug styling with browser dev tools.
This commit:
- Removes custom variations in fxa-react's tailwind.js when they are included by default in Tailwind v3.
- Removes custom variations that are no longer in use in fxa packages.
- Updates bento menu component to use default TW inset class.
- Tested build-css to ensure output css compiles with no errors.
- Does not remove fontSize definitions even though provided by Tailwind v3, as explicit declaration is currently needed for fxa-settings's design guide.
- Safelist all tailwind patterns in dev mode to enable in-browser styling with tailwind utilities.
Closes #FXA-5448, FXA-6235
Because:
* As part of tailwind conversion we are updating storybook as well.
This commit:
* Updates PaymentForm and LoadingSpinner storybooks.
* Update webpack config not to remove viewbox from SVGs.
Closes #
Because:
- All messages served to the user should be localized, including screen reader messages. Fxa-react components were partially localized, but some messages were missed.
This commit:
- Add l10n to AppErrorDialog, LinkExternal, LoadingSpinner and LogoLockup for all messages, including alt text, aria labels and screen-reader only messages.
- Create en.ftl for each component, when needed.
Closes #
This commit:
* Adds AppLayout with Tailwind styles and moves Moz logo from fxa-settings into fxa-react for use in Reactified content-server routes
* Adds postcss-assets to settings for future background-images
* Moves .card styles into fxa-react
* README update on inlining SVGs vs src
Closes FXA-6275
Because:
- The focus style applied to caution CTA and GetDataTrio buttons (black dotted outline) did not match the style used for other buttons (solid blue). The discrepency may have become more obvious with the upgrade to Tailwind v3. We would like all button focus styles to be consistent.
This commit:
- Replace the focus and active styles used for fxa-settings' caution cta and GetDataTrio buttons.
Closes #FXA-5507
Because
* Organizing l10n strings in per-component files aligns payments-server with the setup used for auth-server and settings. Splitting the FTL files also improves maintability by more tightling coupling the strings with the components where the strings are used.
This commit
* Create a temporary branding file in fxa-payments-server/src
* Create a gruntfile with tasks for FTL concatenation and watching
* Rename the destination file from main.ftl to payments.ftl
* Switch payments-server's default locale from en-US to en and update all references of en-US to en
* Create individual FTL files per component and move messages to their respective component FTL file
* Add a l10n entry in the package readme
* Update clone-l10n.sh to copy 'payments' ftl files instead of 'main'
* Update AppLocalizationProvider to use 'payments' bundles
* Replace setupFluentLocalizationTest with getFtlBundle/getFtlFromPackage from fxa-react
* Remove setupFluentLocalizationTest function (no longer used in fxa-settings)
* Add merge-ftl:test task to package.json start and test:frontend scripts
* Remove legacy strings from FTL files
* Update currency and date formats to use 'en' as default locale
* Remove legacy paths from .gitignore files in payments-server
* Move remaining paths to global .gitignore
* Delete .gitignore files in payments-server
Closes #FXA-5996 and #FXA-6255
Because:
- L10n strings used in fxa-react components were stored in other packages (e.g., fxa-settings) and we want to bring them closer to the component where they are used for easier maintenance.
This commit:
- Create an en.ftl file for each fxa-react component with exisiting l10n
- Move the the FTL IDs and messages contained in other packages to these new files
- Update fxa-settings' merge task to concat all fxa-react FTL files into settings.ftl
- Update fxa-payments-server's merge task to concat all fxa-react FTl files into payments.ftl
Closes #FXA-5997
Because:
* According to mozilla l10n guidelines strings should use a unicode
ellipsis (…) instead of three periods (...)
This commit:
* Fixes a missing ellipsis in fxa-payments-server/src/en.ftl
Because
* Organizing l10n strings in per-component files aligns payments-server with the setup used for auth-server and settings. Splitting the FTL files also improves maintability by more tightling coupling the strings with the components where the strings are used.
This commit
* Create a temporary branding file in fxa-payments-server/src
* Create a gruntfile with tasks for FTL concatenation and watching
* Rename the destination file from main.ftl to payments.ftl
* Switch payments-server's default locale from en-US to en and update all references of en-US to en
* Create individual FTL files per component and move messages to their respective component FTL file
* Add a l10n entry in the package readme
* Update clone-l10n.sh to copy 'payments' ftl files instead of 'main'
* Update AppLocalizationProvider to use 'payments' bundles
* Replace setupFluentLocalizationTest with getFtlBundle/getFtlFromPackage from fxa-react
* Remove setupFluentLocalizationTest function (no longer used in fxa-settings)
* Add merge-ftl:test task to package.json start and test:frontend scripts
* Remove legacy strings from FTL files
* Update currency and date formats to use 'en' as default locale
* Remove legacy paths from .gitignore files in payments-server
* Move remaining paths to global .gitignore
* Delete .gitignore files in payments-server
Closes #FXA-5996 and #FXA-6255
Because:
- We want to convert the PaymentForm to using Tailwind classes
This commit:
- Replaces all existing classes with Tailwind classes
- Updates fxa-react LoadingSpinner component to support multiple images
Closes #fxa-5633
Lauren Zugai
Dan Schomburg
Valerie Pomerleau
Vijay Budhram
dschom
Barry Chen
dependabot[bot]
Mill
Meghan Sardesai
Reino Muhl
Bryan Olsson
Ivo Plamenac
Bianca Danforth