Upgrade tailwind to v4 and daisy to v5

[podliashanyk]

Scope and purpose

Fixes #1262
Depends on #1524

How to test

Make sure you have the right version of tailwind+daisy installed. While standing in the repo root, run:

PYTHONPATH=./src python3 src/argus/htmx/tailwindtheme/get_tailwind.py

This will replace the binary in src/argus/htmx/tailwindtheme/tailwindcss with a new binary and update various libraries. You shouldn't need to put the binary in your path if you use make.

Run make tailwind to update styles as usual.

Contributor Checklist

Every pull request should have this checklist filled out, no matter how small it is.
More information about contributing to Argus can be found in the
Development docs.

• Added a changelog fragment for towncrier
• Added/amended tests for new/changed code
• Added/changed documentation, including updates to the user manual if feature flow or UI is considerably changed
• Linted/formatted the code with ruff and djLint, easiest by using pre-commit
• The first line of the commit message continues the sentence "If applied, this commit will ...", starts with a capital letter, does not end with punctuation and is 50 characters or less long. See our how-to
• If applicable: Created new issues if this PR does not fix the issue completely/there is further work to be done
• If this results in changes in the UI: Added screenshots of the before and after
• If this results in changes to the database model: Updated the ER diagram

[github-actions]

Test results

    4 files      1 errors  351 suites   13m 6s ⏱️
  565 tests   563 ✅ 1 💤 1 ❌
1 695 runs  1 689 ✅ 3 💤 3 ❌

For more details on these parsing errors and failures, see this check.

Results for commit 327835e.

♻️ This comment has been updated with latest results.

[codecov-commenter]

Codecov Report

❌ Patch coverage is 38.00000% with 31 lines in your changes missing coverage. Please review.
✅ Project coverage is 78.16%. Comparing base (7d7283f) to head (25ce868).

Files with missing lines	Patch %	Lines
.../argus/htmx/management/commands/tailwind_config.py	0.00%	13 Missing ⚠️
src/argus/htmx/themes/utils.py	56.00%	11 Missing ⚠️
src/argus/htmx/utils/templates.py	45.45%	6 Missing ⚠️
src/argus/htmx/tailwindtheme/config.py	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1527      +/-   ##
==========================================
- Coverage   78.34%   78.16%   -0.19%     
==========================================
  Files         124      125       +1     
  Lines        5468     5495      +27     
==========================================
+ Hits         4284     4295      +11     
- Misses       1184     1200      +16     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[hmpf]

We'll have to update the docs for how to do themes.

[hmpf]

If I try to make the styles via the Makefile (make tailwind) I get:

tailwindcss -c src/argus/htmx/tailwindtheme/tailwind.config.js -i src/argus/htmx/tailwindtheme/styles.css -o src/argus/htmx/static/styles.css
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
Error: Failed to find 'tailwindcss'
  in [
    CENSORED/src/argus/htmx/tailwindtheme/snippets
  ]
    at /snapshot/tailwindcss/node_modules/postcss-import/lib/resolve-id.js:35:13
    at async Promise.all (index 0)
    at async LazyResult.runAsync (/snapshot/tailwindcss/node_modules/postcss/lib/lazy-result.js:261:11)
    at async build (/snapshot/tailwindcss/lib/cli/build/index.js:49:9)
make: *** [Makefile:33: tailwind] Error 1

[podliashanyk]

If I try to make the styles via the Makefile (make tailwind) I get:

tailwindcss -c src/argus/htmx/tailwindtheme/tailwind.config.js -i src/argus/htmx/tailwindtheme/styles.css -o src/argus/htmx/static/styles.css
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
Error: Failed to find 'tailwindcss'
  in [
    CENSORED/src/argus/htmx/tailwindtheme/snippets
  ]
    at /snapshot/tailwindcss/node_modules/postcss-import/lib/resolve-id.js:35:13
    at async Promise.all (index 0)
    at async LazyResult.runAsync (/snapshot/tailwindcss/node_modules/postcss/lib/lazy-result.js:261:11)
    at async build (/snapshot/tailwindcss/lib/cli/build/index.js:49:9)
make: *** [Makefile:33: tailwind] Error 1

Remember to switch to new version of tailwind cli extra, I suggest https://github.com/dobicinaitis/tailwind-cli-extra/releases/tag/v2.0.0

[podliashanyk]

Depends on #1524

[hmpf]

Idea: make css snippets more pluggable.

Fix: Finding defined themes to add to user theme dropdown.

[podliashanyk]

TODOs before this PR is considered completed:

• ensure that "argus" theme is visible in theme selector dropdown (fix likely belongs in src/argus/htmx/management/commands/tailwind_config.py)

• Add new way to add custom themes:

  • update DEFAULT_THEMES in src/argus/htmx/defaults.py so that custom themes are defined after a new format (format must be compliant with https://daisyui.com/docs/themes/#how-to-add-a-new-custom-theme):

    "name": {
          "color-scheme": "light",
          "--color-primary": "#006d91",
          "--color-primary-content": "#d1e1e9",
          "--color-secondary": "#f3b61f",
          etc...
    }
    

  • ensure that custom themes are wrapped with @plugin "daisyui/theme" {name: ...} (as per https://daisyui.com/docs/themes/#how-to-add-a-new-custom-theme) in src/argus/htmx/management/commands/tailwind_config.py

  • remove hard coded definition of theme "argus" from src/argus/htmx/tailwindtheme/snippets/10-tailwind.css

• Document new way to add custom themes

• Fix font size discrepancy between text in badges and the rest of the table row

• Reduce font size in the "Filter"-selector:

• Fix font size discrepancy within the stats widget:

• Fix divider in the user menu dropdown:

• Fix alignment of inputs on the Profiles page:

• Fix programatic connection label-to-input in the incident update modals (as per https://daisyui.com/docs/upgrade/#other-removals) [OPTIONAL]

• Fix border around tabs

[hmpf]

It's probably get_themes_from_css() in src/argus/htmx/themes/utils.py that needs updating for the correct list of themes to choose from.

[hmpf]

I have rebased this on the merged #1524 so that we can use the correct version of the standalone tailwind cli, I've set it to 2.1.37, the currently newest.

[hmpf]

* [ ]  Reduce font size in the "Filter"-selector:

The font size for "Filter" was too large, but the size for the others were too small!

[hmpf]

* [x]  Fix alignment of inputs on the Profiles page:

Fixed by modernizing labels.

[hmpf]

* [ ]  Fix font size discrepancy between text in badges and the rest of the table row

The badges have their old size, it seems that "table-xs" now means 11pt, not 12pt as it did before. 11pt is painfully small to me at least.

[hmpf]

* [x]  Fix font size discrepancy within the stats widget:

The size is fixable by removing "select-xs", but the font is still a bit low contrast.

[hmpf]

• Fix programatic connection label-to-input in the incident update modals (as per https://daisyui.com/docs/upgrade/#other-removals) [OPTIONAL]

There is no <label> or class="form-control" in the modals at all, unclear what you mean.

[sonarqubecloud]

Quality Gate failed

Failed conditions
E Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE