Improve member view table behavior+style, fix config settings (#493)
All checks were successful
continuous-integration/drone/push Build is passing

## Description of the implemented changes
The changes were:
- [x] Bugfixing
- [x] New Feature
- [ ] Breaking Change
- [x] Refactoring

This PR standardizes interactive table behavior and improves settings robustness.
It makes the new hover/focus-visible row highlight the default for clickable tables, keeps sticky first-column behavior configurable (and optimized for member selection UX), and tightens SMTP source-of-truth handling so ENV-based and UI-based configuration do not conflict.

## What has been changed?
- Refactored `CoreComponents.table` to expose interaction state via `data-row-interactive` and moved default row hover/focus styling to CSS.
- Made the new row highlight behavior (`hover` + `:has(:focus-visible)`) the default for clickable zebra tables.
- Kept sticky-first-column as an explicit table option and preserved sticky-specific selection accent behavior.
- Updated member overview table usage to the sticky-first-column mode and refined scrolling behavior (table scrollbar within container, not page-coupled).
- Adjusted table-related tests to validate the new interaction contract (attribute/CSS-driven behavior instead of legacy ring classes).
- Improved SMTP config handling:
  - clearer ENV-vs-Settings behavior (ENV-only mode when host env is set),
  - read-only and warning behavior in global settings UI when required env keys are missing,
  - updated related config/tests/docs.
- Updated docs and changelog (`CHANGELOG.md`, `DESIGN_GUIDELINES.md`, `CODE_GUIDELINES.md`, SMTP concept docs).
- Updated gettext catalogs (`default.pot`, `en`, `de`) for new/changed UI strings.

## Definition of Done
### Code Quality
- [x] No new technical depths
- [x] Linting passed
- [x] Documentation is added were needed

### Accessibility
- [x] New elements are properly defined with html-tags
- [x] Colour contrast follows WCAG criteria
- [x] Aria labels are added when needed
- [x] Everything is accessible by keyboard
- [x] Tab-Order is comprehensible
- [x] All interactive elements have a visible focus

### Testing
- [x] Tests for new code are written
- [x] All tests pass
- [ ] axe-core dev tools show no critical or major issues

## Additional Notes
- Branch includes 4 commits:
  - `fix: make sure smtp can be set either via env or ui`
  - `fix: make horizontal scrollbars sticky to bottom`
  - `docs: update changelog`
  - `feat: make checkbox column in member view sticky`
- Full fast suite passed (`mix test --exclude slow --exclude ui`): 2017 tests, 0 failures (plus expected non-failing warning logs in test output).
- Reviewer focus areas:
  1. **Cross-table UX consistency** after moving row interaction styling to component/CSS contract.
  2. **Sticky table behavior** (selection accent stripe, zebra background, keyboard focus visibility).
  3. **SMTP precedence and UI constraints** in global settings when ENV mode is active.
  4. **Regression risk in tests** that previously asserted ring-based row classes.
- No breaking API changes expected; behavior change is primarily visual/interaction-level and intentional.

Reviewed-on: #493
Co-authored-by: Simon <s.thiessen@local-it.org>
Co-committed-by: Simon <s.thiessen@local-it.org>
This commit is contained in:
Simon 2026-05-08 15:04:53 +02:00 committed by simon
parent 2bb01bd201
commit a12888de2f
16 changed files with 635 additions and 258 deletions

View file

@ -1,8 +1,22 @@
defmodule MvWeb.GlobalSettingsLiveTest do
use MvWeb.ConnCase, async: true
use MvWeb.ConnCase, async: false
import Phoenix.LiveViewTest
alias Mv.Membership
defp clear_smtp_env do
[
"SMTP_HOST",
"SMTP_PORT",
"SMTP_SSL",
"SMTP_USERNAME",
"SMTP_PASSWORD",
"SMTP_PASSWORD_FILE",
"MAIL_FROM_EMAIL",
"MAIL_FROM_NAME"
]
|> Enum.each(&System.delete_env/1)
end
describe "Global Settings LiveView" do
setup %{conn: conn} do
user = create_test_user(%{email: "admin@example.com"})
@ -124,6 +138,85 @@ defmodule MvWeb.GlobalSettingsLiveTest do
{:ok, _view, html} = live(conn, ~p"/settings")
assert html =~ "SMTP" or html =~ "E-Mail" or html =~ "Settings"
end
@tag :ui
test "disables all SMTP inputs when SMTP_HOST is set", %{conn: conn} do
clear_smtp_env()
System.put_env("SMTP_HOST", "smtp.env-only.example")
on_exit(fn -> clear_smtp_env() end)
{:ok, view, _html} = live(conn, ~p"/settings")
assert has_element?(view, "#setting_smtp_host[disabled]")
assert has_element?(view, "#setting_smtp_port[disabled]")
assert has_element?(view, "#setting_smtp_ssl[disabled]")
assert has_element?(view, "#setting_smtp_username[disabled]")
assert has_element?(view, "#setting_smtp_password[disabled]")
assert has_element?(view, "#setting_smtp_from_email[disabled]")
assert has_element?(view, "#setting_smtp_from_name[disabled]")
end
@tag :ui
test "does not render SMTP save action when SMTP_HOST is set", %{conn: conn} do
clear_smtp_env()
System.put_env("SMTP_HOST", "smtp.env-only.example")
on_exit(fn -> clear_smtp_env() end)
{:ok, view, _html} = live(conn, ~p"/settings")
refute has_element?(view, "#smtp-form button", "Save SMTP Settings")
end
@tag :ui
test "shows explicit ENV-only mode hint when SMTP_HOST is set", %{conn: conn} do
clear_smtp_env()
System.put_env("SMTP_HOST", "smtp.env-only.example")
on_exit(fn -> clear_smtp_env() end)
{:ok, _view, html} = live(conn, ~p"/settings")
assert html =~ "SMTP is fully managed via environment variables"
end
@tag :ui
test "shows warning block for missing required SMTP ENV values in ENV-only mode", %{
conn: conn
} do
clear_smtp_env()
System.put_env("SMTP_HOST", "smtp.env-only.example")
on_exit(fn -> clear_smtp_env() end)
{:ok, _view, html} = live(conn, ~p"/settings")
assert html =~ "SMTP environment configuration appears incomplete"
assert html =~ "SMTP_USERNAME"
assert html =~ "SMTP_PASSWORD/SMTP_PASSWORD_FILE"
end
@tag :ui
test "does not enter ENV-only mode when SMTP_HOST is not set", %{conn: conn} do
clear_smtp_env()
System.put_env("SMTP_USERNAME", "leftover@example.com")
on_exit(fn -> clear_smtp_env() end)
{:ok, view, html} = live(conn, ~p"/settings")
refute html =~ "SMTP is fully managed via environment variables"
refute html =~ "SMTP environment configuration appears incomplete"
refute has_element?(view, "#setting_smtp_host[disabled]")
refute has_element?(view, "#setting_smtp_username[disabled]")
end
@tag :ui
test "shows effective ENV SMTP host value in disabled field", %{conn: conn} do
clear_smtp_env()
System.put_env("SMTP_HOST", "smtp.env-active.example")
on_exit(fn -> clear_smtp_env() end)
{:ok, settings} = Membership.get_settings()
{:ok, _} = Membership.update_settings(settings, %{smtp_host: "smtp.db-legacy.example"})
{:ok, _view, html} = live(conn, ~p"/settings")
assert html =~ ~s(value="smtp.env-active.example")
refute html =~ ~s(value="smtp.db-legacy.example")
end
end
describe "Authentication section when OIDC-only is enabled" do