Update yarn packages and fix vulnerabilities

[bradystroud]

TO: @bradystroud
CC: @christianmorfordwaitessw @adamcogan
(checked by Christian)

As per our conversation, fix these vulnerabilities.

1. Get yarn audit --level high to 0
2. Get Major outdated packages to 0

Figure: Yarn Audit - 16 vulnerabilities found (3 High)

Figure: Yarn Outdated - 9 Major (Red) outdated packages

Thanks,
-Brady

AB#59756

[piers-sinclair]

@bradystroud
Update: Now only 22 to go

I have updated the Yarn Packages which have full backwards compatibility. We can safely upgrade any yellow or green packages every time they come up.

This leaves the following packages to be upgraded. Each of these is more complicated because we need to check if upgrading will break anything.

Figure: Yarn Outdated packages with not backwards compatibility.

Note that there are a lot of vulnerabilities caused by these red packages.

Figure: the current vulnerabilities and risks

[bradystroud]

@pierssinclairssw @adamcogan @christianmorfordwaitessw
Hi,

UPDATE: 9 major outdated packages remaining (13 fixed), 9 vulnerabilities remaining (41 fixed)

This PR #488 updates most of the outdated packages

An update to the gatsby-plugin-sharp packages introduced a new bug where if a gif or svg had an uppercase file extension e.g. .GIF or .SVG, our build would fail. To fix this, I changed all gif and svg file extensions to lowercase. To prevent this issue happening in the future, I created a GitHub Action that checks every new GIF and SVG uploaded to the SSW.Rules.Content repo and ensures the file extensions are lowercase.

Figure: Remaining outdated packages

Figure: Remaining vulnerabilities

Thanks,

-Brady

[bradystroud]

When attempting to update the remaining packages I started getting some new errors all coming from the SSW menu. I removed the menu and almost all packages updated without an issue.

1. Investigate why the SSW menu is causing problems

[bradystroud]

@christoment

1. Investigate why the SSW menu is causing problems

The errors are caused by the 'in' keyword in the mobile menu's CSS.

.navbarCollapse.in {
  overflow-y: auto;
}

I am currently investigating what 'in' does and why its causing errors

[bradystroud]

cc: @pierssinclairssw @christoment

I couldn't find where the .navbarCollapse.in class was being used, so I removed it which fixed the problem. Once the project was running, I tested the mobile menu to see if the CSS I had removed had changed anything and the menu didn't open properly.

Figure: Mobile menu not working

To double check that it was my change breaking the menu, I downgraded Gatsby and removed the same CSS but the mobile menu worked.
This leads me to believe that these 2 issues are unrelated.

After updating Gatsby, I was able to update 6 other packages with no issues. Once the menu is fixed, there will only be 2 packages left to update:

gatsby-transformer-remark - Breaks all our custom markdown elements. For more info, see https://www.gatsbyjs.com/docs/reference/release-notes/v3.3/#incompatible-plugin-gatsby-remark-custom-blocks
webpack-assets-manifest - Breaks all relative images.

1. Continue to investigate why the mobile menu isn't working after updating Gatsby

-Brady

[bradystroud]

As per my conversation with @adamcogan and @pierssinclairssw, the packages must be updated when a new package is added.

1. Update this rule to include instructions on how to update packages (yarn and npm)
   https://www.ssw.com.au/rules/do-you-keep-your-npm-packages-up-to-date

[bradystroud]

1. Continue to investigate why the mobile menu isn't working after updating Gatsby

As per my conversation with @pierssinclairssw, I fixed the mobile menu locally, but after deploying it to the staging environment 2 new problems occurred.

• the images in the desktop menu were not working

Figure: Broken images

• The sidebar toggle doesn't do anything

Figure: Sidebar doesn't work

I managed to reproduce this issue locally by running yarn build then yarn serve instead of yarn develop

[bradystroud]

UPDATE: 1 outdated package, 17 vulnerabilities (11 high)

As per my conversation with @pierssinclairssw, the problems mentioned in the previous comment are no longer happening. We believe that when we checked staging it was mid - deployment.

webpack-assets-manifest was also updated without any issues.

gatsby-transformer-remark still breaks our custom markdown elements

Figure: yarn audit

Figure: yarn outdated

[bradystroud]

1. Get yarn audit --level high to 0
2. Get Major outdated packages to 0

Not done - gatsby-transformer-remark is the only package left but it breaks our custom markdown elements on the latest version. We decided to leave it at its current version for now.

The comment above has the latest screenshots

Thanks,

-Brady