Add version number to frontend

[aleksfl]

Scope and purpose

Fixes #1650 .

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
• 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 this results in changes in the UI: Added screenshots of the before and after

[github-actions]

Test results

    4 files    524 suites   19m 38s ⏱️
  623 tests   622 ✅ 1 💤 0 ❌
2 492 runs  2 488 ✅ 4 💤 0 ❌

Results for commit c0610b8.

♻️ This comment has been updated with latest results.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 79.37%. Comparing base (f8c6430) to head (c0610b8).
⚠️ Report is 12 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1652      +/-   ##
==========================================
- Coverage   79.44%   79.37%   -0.07%     
==========================================
  Files         129      129              
  Lines        6017     6032      +15     
==========================================
+ Hits         4780     4788       +8     
- Misses       1237     1244       +7     

☔ 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.

[Simrayz]

I think the version is too visible if put at the top, and seeing as it is a "tertiary" action, it is probably best put at the bottom.

Here is a suggested menu item (with a divider on top):

<li>
  <div class="divider divider-secondary pl-2 pr-4 my-0 pointer-events-none"></div>
  <button class="text-xs" onclick="navigator.clipboard.writeText('{{ version }}')">
      <div class="space-y-2">
          <span>Argus version:</span>
          <span class="truncate">{{ version }}</span>
      </div>
      <i class="fa-solid fa-copy"></i>
  </button>
</li>

Which looks like this:

[aleksfl]

Looks alright with the release version, and with the dev version as well:

Although the copy button seems to be pushed away when I have local changes:

[hmpf]

If we ever have a version number like that in prod, that's the bug, not how it is rendered :)

[hmpf]

One liner fixes...

[hmpf]

What will it look like when not logged in?

[aleksfl]

What will it look like when not logged in?

At the moment it is not present at all when not logged in due to the user menu requiring an authenticated user.
Might be an idea to include the version in the login page, but that might also be unnecessary.

[hmpf]

When not logged in (check with user.is_authenticated in the template), put it to the left of the login button in the login template.

If anyone complains we can move it later (but what we need is an actual about-page.. out of scope.)

[johannaengland]

Yes, I agree that it should also be visible somewhere when not logged in - in the case that we ever break the login mechanism

[johannaengland]

Only nitpicks here about the code, looks-wise I'm happy :)

[aleksfl]

When not logged in (check with user.is_authenticated in the template), put it to the left of the login button in the login template.

If anyone complains we can move it later (but what we need is an actual about-page.. out of scope.)

Not quite what you suggested but would something like this work?

[johannaengland]

Not quite what you suggested but would something like this work?

I think that looks good!

[aleksfl]

Redid the login page version a bit, making it clearly separate from the login buttons. Also made it react to being hovered over so it is clearly clickable:

[Simrayz]

Starting to look good, just some small suggestions now :)

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
1 Accepted issue

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

See analysis details on SonarQube Cloud