Add Htmx destinations page

[stveit]

Closes #1001

Replaces Uninett/argus-htmx-frontend#205

Things that need to be done:

• Simplify validation by using the changes in Move common functionality to destination base class #936 (can be separate PR)
• Feedback on successful update of a destination? (can be separate PR as well)

Sonarcloud complains about A form label must be associated with a control. , but the form field is inside the label so explicitly stating the control element shouldnt be necessary.

[github-actions]

Test results

   10 files  1 040 suites   35m 43s ⏱️
  529 tests   528 ✅  1 💤 0 ❌
5 290 runs  5 280 ✅ 10 💤 0 ❌

Results for commit 993ba78.

♻️ This comment has been updated with latest results.

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 35.21127% with 92 lines in your changes missing coverage. Please review.

Project coverage is 81.19%. Comparing base (74011a1) to head (993ba78).

Files with missing lines	Patch %	Lines
src/argus/htmx/destination/forms.py	36.11%	46 Missing ⚠️
src/argus/htmx/destination/views.py	29.23%	46 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #970      +/-   ##
==========================================
- Coverage   82.50%   81.19%   -1.31%     
==========================================
  Files         138      140       +2     
  Lines        4944     5074     +130     
==========================================
+ Hits         4079     4120      +41     
- Misses        865      954      +89     

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

[hmpf]

Sonarcloud complains about A form label must be associated with a control. , but the form field is inside the label so explicitly stating the control element shouldnt be necessary.

It's that stupid, is it? sigh

[hmpf]

Manually tested, seems to work just fine. @podliashanyk?

[sonarqubecloud]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[podliashanyk]

Sonarcloud complains about A form label must be associated with a control. , but the form field is inside the label so explicitly stating the control element shouldnt be necessary.

It's that stupid, is it? sigh

Yup. All input fields on destinations page pass the test "click on a label and see the input field being activated". So all labels ARE correctly programatically connected to corresponding input fields

[podliashanyk]

Great job! 👏 The page works and looks very well. See some non-critical suggestions/polishes/bugs below (sorted by priority). All of them belong to separate PRs.

1. Bug: when creating an email and an sms destination with the same name I get error "Name must be unique per media".
2. Error text should be red.
3. Applies to collapse elements, as well as the create form: let's add vertical gaps between them, also let's add padding/spacing on each side of them, and let's center their contents.
4. See HTMX suggestions below. All of them are polishes to make swaps more granular.

[podliashanyk]

HTMX suggestion: If we put id on the parent div (the one with class .collapse-content) and put a highlighted div (lines 7-10) into a separate file, then we can return that file in create and update endpoints. This logic combined with using hx-swap='beforeend' would make more granular swaps on create and update actions.

[podliashanyk]

HTMX suggestion: If we put id on each form-div, we could use it as a value in hx-target here. This combined with hx-swap='delete' would lead to a more granular swap on delete action.