Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrades Hydrogen to 2.0.0-beta #3051

Merged
merged 99 commits into from
Aug 23, 2022
Merged

Upgrades Hydrogen to 2.0.0-beta #3051

merged 99 commits into from
Aug 23, 2022

Conversation

JoshBeveridge
Copy link
Member

@JoshBeveridge JoshBeveridge commented Jun 13, 2022

Requirements

#3050

Hydrogen needs to be updated to 2.0.0 so that we can significantly reduce the app build time (~40s down to <500ms), as well as to reduce both tech and design debt resulting from breaking changes.

For now, this branch will upgrade to the latest stable beta, which we can safely merge into main. The actual 2.0.0 release is only waiting on documentation to be updated.

As a result, working with the beta will mean that Hydrogen's documentation will be out of date, but the new snippets file will provide a great starting place for differences in syntax.

Outstanding development tasks

Upgrade checklist

  • Upgrade Hydrogen
  • Migrate common UIs
  • Migrate admin UIs
  • Migrate talent search UIs
  • Migrate IAP UIs
  • Do manual visual testing to ensure no major breaking changes

Heads up

There are going to be some muscle memory growing pains associated with this upgrade, particularly related to colors. The original color implementation was done piecemeal as we learned what colors the product was going to need, but this has been migrated and consolidated into a more complete approach using the new color configuration syntax.

Please refer to the upgrade guide provided in the documentation directory. Check the guide out here.

Review checklist

Standards and code related items

Common or sitewide UI

Admin UI

Talent search UI

Indigenous apprenticeship UI

@JoshBeveridge JoshBeveridge self-assigned this Jun 13, 2022
@JoshBeveridge JoshBeveridge added the debt Refactor or improve existing code. label Jun 13, 2022
@JoshBeveridge JoshBeveridge changed the title Upgrades Hydrogen to 2.0.0-beta.10 and migrates the admin UIs. Upgrades Hydrogen to 2.0.0-beta Jun 13, 2022
…ers the way certain Hydrogen attributes were used to avoid dynamic attribute variables, fixed a few syntax bugs in the original code.
@patcon patcon added the dependencies Dependabot: Pull requests that update dependencies. label Jun 14, 2022
@JoshBeveridge
Copy link
Member Author

JoshBeveridge commented Jun 15, 2022

So far, I'm seeing the following speed improvements:

  • my local docker runs: ~42s => ~240ms
  • CI runs: ~26s => ???

And the following size improvements:

  • hydrogen.css: 52kb => 45kb

I've noticed instances where running the docker script gets a sporadic error from Hydrogen's processing script though... it's inconsistent and seems to have to do with timing?

@patcon
Copy link
Contributor

patcon commented Jun 15, 2022

Nice! But rough on the sporadic error. Since docker is our primary dev environment, what's "inconsistent" mean here? one in 5 runs? in 10? in 25?

Do you have a proposal for paths forward for this PR in relation to those sporadic failures?

If it helps you confirm a fix, we could create a temporary GitHub Action workflow for just your branch, that runs only hydrogen on loop for a number of times chosen so that it would likely trigger the bug if it exists? Or maybe it makes me sense for that workflow to be in your hydrogen repo, like a big ugly test :) (GitHub Actions can checkout another repo in a workflow)

CI builds randomly showing as red feel like they're hurt the value of the end-to-end test suite we're trying to build 😢

@JoshBeveridge
Copy link
Member Author

JoshBeveridge commented Jun 15, 2022

@patcon So far it's been 1/3 runs. Docker takes forever to run, so I'm not convinced running it manually a couple times is an efficient use of time. I have little to no experience writing tests for rapid testing, so feel free to suggest/submit something if you already have an idea in mind.

Edit: to be specific, the error is that PostCSS is being passed undefined in the CSS. This might have to do with a weird selector, so I'll troubleshoot that first.

@patcon
Copy link
Contributor

patcon commented Jun 15, 2022

It's possible it's happening on your local docker, but won't happen on CI. For example, if it's related to the type of disk mount, like if CI uses something different that's maybe more consistent with writes 🤷 )

Might be worth resolving the merge conflicts so we can see how it builds in CI. (I'm seeing a 26s h2 build time in other docker runs on CI, so it seems maybe faster that your 42s local build. Not sure if that bodes well or poorly for the likelihood of this bug rearing it's head on CI..!)

@patcon
Copy link
Contributor

patcon commented Jun 15, 2022

not convinced running it manually a couple times is an efficient use of time

You could leave a script like this at frontend/repeat_h2.sh:

#!/usr/bin/env bash

set -e

for i in {1..5}
do
  echo "Hydrogen run #$i"
  npm run h2-build --workspace common
done

And run it like this:

docker-compose run --workdir /var/www/html/frontend maintenance bash repeat_h2.sh

If it doesn't trigger the bug, you might want to delete any outputs at the end of each loop to simulate a true fresh run. And if the bug doesn't show, my next step of debugging would be to also run the commands that run before h2 in the larger docker build scripts. So assuming it's setup.sh that's causing the error, ensure the commands before h2-build are running in the loop too. But I'd only add those if the most minimal reproduction doesn't surface the bug :)

@JoshBeveridge
Copy link
Member Author

JoshBeveridge commented Jun 15, 2022

Welp, that merge didn't give me the results I was expecting 😅

Edit: missed converting some additional Hydrogen values that were added during the merge.

Edit: so I think, after looking at the logs, that typos are causing the processing errors. Some of these I can and should check for in H2 proper, others might (or might not?) require linting (like double brackets on a query, e.g. b(mycolor))). I'll try and write checks for these things and push out an update. PostCSS throwing an arbitrary processing error isn't helpful

Edit: while typos were a problem, fixing them didn't stop the arbitrary PostCSS error; I think the PostCSS scripting is trying to run before Docker has written the raw CSS file, so I'm going to look into artificially delaying this process on my system to see if I can recreate the conditions. I haven't experienced this yet because the write is immediate in all my testing environments

Edit: Okay, so the arbitrary error was a direct result of Docker being super slow and PostCSS being run inside an asynchronous fs.readFile call. Changing it to load the raw CSS file using readFileSync and then running PostCSS ensures that the file is fully loaded before processing starts.

@patcon patcon self-assigned this Jun 27, 2022
@patcon
Copy link
Contributor

patcon commented Aug 22, 2022

@patcon summary:

(All links are to Chromatic storybook build of 6592473)

  • common/src/components/Pending/Loading.tsx
  • common/src/components/Pill/Pill.tsx
    • Pill story looks good. No visual diff in Chromatic.
  • common/src/components/SearchRequestFilters/SearchRequestFilters.tsx
  • common/src/components/SearchRequestFilters/deprecated/SearchRequestFilters.tsx
  • common/src/components/SideMenu/SideMenu.stories.tsx
  • common/src/components/SideMenu/SideMenu.tsx
  • common/src/components/SideMenu/SideMenuContentWrapper.tsx
  • common/src/components/SideMenu/SideMenuItem.tsx
  • common/src/components/SideMenu/sideMenu.css
  • common/src/components/TableOfContents/AnchorLink.tsx
  • common/src/components/TableOfContents/Content.tsx
  • common/src/components/TableOfContents/Heading.tsx
  • common/src/components/TableOfContents/Navigation.tsx
  • common/src/components/TableOfContents/Section.tsx
  • common/src/components/TableOfContents/Wrapper.tsx
  • common/src/components/TableOfContents/heading.css
  • common/src/components/Tabs/Tab.tsx
  • common/src/components/Tabs/TabPanel.tsx
  • common/src/components/Tabs/TabPanels.tsx
  • common/src/components/Tabs/tabs.css
  • common/src/components/TileLink/TileLink.tsx
  • common/src/components/UserProfile/ExperienceAccordion/individualExperienceAccordions/AwardAccordion.tsx
  • common/src/components/UserProfile/ExperienceAccordion/individualExperienceAccordions/CommunityAccordion.tsx
  • common/src/components/UserProfile/ExperienceAccordion/individualExperienceAccordions/EducationAccordion.tsx
  • common/src/components/UserProfile/ExperienceAccordion/individualExperienceAccordions/PersonalAccordion.tsx
  • common/src/components/UserProfile/ExperienceAccordion/individualExperienceAccordions/WorkAccordion.tsx
  • common/src/components/UserProfile/ExperienceByTypeListing.tsx
  • common/src/components/UserProfile/ExperienceSection.tsx
  • common/src/components/UserProfile/ProfileSections/AboutSection.tsx
  • common/src/components/UserProfile/ProfileSections/CandidatePoolsSection.tsx
  • common/src/components/UserProfile/ProfileSections/DiversityEquityInclusionSection.tsx
  • common/src/components/UserProfile/ProfileSections/GovernmentInformationSection.tsx
  • common/src/components/UserProfile/ProfileSections/LanguageInformationSection.tsx
  • common/src/components/UserProfile/ProfileSections/RoleSalarySection.tsx
  • common/src/components/UserProfile/ProfileSections/SkillExperienceSection.tsx
  • common/src/components/UserProfile/ProfileSections/WorkLocationSection.tsx
  • common/src/components/UserProfile/ProfileSections/WorkPreferencesSection.tsx
  • common/src/components/UserProfile/SkillAccordion/SkillAccordion.tsx
  • common/src/components/UserProfile/UserProfile.tsx

@mnigh
Copy link
Contributor

mnigh commented Aug 22, 2022

Admin Candidate Details text overflow on smaller screen with menu open:
Screen Shot 2022-08-22 at 14 13 55

esizer
esizer previously requested changes Aug 22, 2022
Copy link
Member

@esizer esizer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very small change for the fullscreen loading spinner. Everything else looks great! 👍

@vd1992
Copy link
Contributor

vd1992 commented Aug 22, 2022

I think all of mine and Peter's feedback was addressed
Great work!

@esizer esizer dismissed their stale review August 23, 2022 13:10

Changes completed

Copy link
Contributor

@brindasasi brindasasi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changes completed

@brindasasi brindasasi merged commit 8a422d1 into main Aug 23, 2022
@brindasasi brindasasi deleted the hydrogen-upgrade branch August 23, 2022 14:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
debt Refactor or improve existing code. dependencies Dependabot: Pull requests that update dependencies.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants