Enable and upgrade stylelint in pre-commit

[Darwinkel]

Changes

It was planned to integrate stylelint as part of the Manon upgrade. The pipeline was implemented, but actually fixing the styling issues has not been done yet. This PR upgrades and enables it.

I'd like to request the frontend-gods @TwistMeister or @HeleenSG to perform the actual fixes :)

Running pre-commit run --all-files should already do most of the work.

Issue link

Originally mentioned in #548 and #719.

Proof

See CI.

---

Code Checklist

• All the commits in this PR are properly PGP-signed and verified;
• This PR only contains functionality relevant to the issue; tickets have been created for newly discovered issues.
• I have written unit tests for the changes or fixes I made.
• For any non-trivial functionality, I have added integration and/or end-to-end tests.
• I have performed a self-review of my code and refactored it to the best of my abilities.

Communication

• I have informed others of any required .env changes files if required and changed the .env-dist accordingly.
• I have made corresponding changes to the documentation, if necessary.

---

Checklist for code reviewers:

Copy-paste the checklist from the docs/source/templates folder into your comment.

---

Checklist for QA:

Copy-paste the checklist from the docs/source/templates folder into your comment.

[praseodym]

Checklist for QA:

• I have checked out this branch, and successfully ran a fresh make reset.
• I confirmed that there are no unintended functional regressions in this branch:
  • I have managed to pass the onboarding flow
  • Objects and Findings are created properly
  • Tasks are created and completed properly
• I confirmed that the PR's advertised feature or hotfix works as intended.

What works:

General functionality excluding styling.

What doesn't work:

Header is broken:


Crisis room layout is weird:

And other styling issues.

Bug or feature?:

• bullet point + screenshot (if useful) if it is unclear whether something is a bug or an intended feature.

[TwistMeister]

@praseodym can you verify if this persists when you run yarn install and yarn build and after that "clear cache and hard reload" the page, with your dev tools open so that we're sure all the correct styles are loaded?

Edit: When I do this, I see the correct styling for the header. The duplicate submit buttons isn't correct but also isn't regression, since it's been that way for a while now, so I would like to address that in another ticket.

[Darwinkel]

@praseodym can you verify if this persists when you run yarn install and yarn build and after that "clear cache and hard reload" the page, with your dev tools open so that we're sure all the correct styles are loaded?

Edit: When I do this, I see the correct styling for the header. The duplicate submit buttons isn't correct but also isn't regression, since it's been that way for a while now, so I would like to address that in another ticket.

@praseodym and I just verified that the discrepancy is caused by old dist/node_modules files. Removing those folders and running make reset reproduces the below finding:

[praseodym]

Just checked out a clean copy of this branch, the header is still broken.

[praseodym]

@HeleenSG JavaScript is indeed still broken, I see the error
[Error] Failed to load resource: the server responded with a status of 404 () (manon.js, line 0) in my browser log and the login page looks like this:

[ammar92]

I have just checked out this branch and can't reproduce any of the errors mentioned here before. I've cleared the Parcel cache and can compile and load manon.js from Rocky. Help text and the main menu works as well.

[praseodym]

You probably have some old assets still left over in your Django static directory.

After building 4c481e2 in a completely clean environment, /static/dist/manon.js can't be found and the login page looks like this:

[ammar92]

You probably have some old assets still left over in your Django static directory.

After building 4c481e2 in a completely clean environment, /static/dist/manon.js can't be found and the login page looks like this:

You're right, I managed to reproduce this with a freshly checked-out repository. After some debugging and discussion with @HeleenSG we came to the conclusion that manon.js wasn't properly linked in rocky/templates/head.html after some restructuring of the assets directory. It should be fixed now.

verzoek van @underdarknl