discourse/spec/system/page_objects/pages/admin_dashboard_reports.rb
chapoi 9d6605bf0d
UX: admin dashboard design fixes (#40476)
This branch is a round of design and interaction fixes for the
redesigned admin dashboard:

### Engagement

* Replaces the KpiTile-based tiles with a Metrics (value, label +
tooltip, and delta) so the headline reads as a row of metrics rather
than cards.
* Formats percentage KPIs (e.g. dau_mau) with a % suffix and shows a
neutral "stable" pill when there's no meaningful change.
* Swaps SearchAdvancedCategoryChooser for a plain CategoryChooser with
an "All categories" item, so the single-category filter no longer
renders as a removable multi-select chip with a clear "×".

### Activity by category

* Makes every column in the activity table fully sortable, confirm with
how it's displayed on underlying report page.
* Fixes the table overflowing on mobile by adding min-width: 0 to the
flex row-block and wrapping the table in a horizontally scrollable
container.

### Report cards

Depends also on https://github.com/discourse/discourse/pull/40404 !

- Turns each report card title into a link to its report.
- Renders the provider label as a per-source pill (with a --source
modifier). The standard/core provider now returns nil for its label so
its reports render without a pill — labels exist only to distinguish
plugin-contributed sources.
- Drops the inline remove "×" button and the show_labels plumbing.

### Highlights & misc

- Removes the "vs prior" comparison footer from the highlights section.
- Updates tooltip icons from circle-question to far-circle-question and
trims "in this period" wording from KPI tooltip copy.

### General

- Numerous responsive/mobile styling fixes across admin_dashboard.scss
(sticky header, metrics, row blocks)
- i18n updates for consistency and conciseness
- Remove floating of data/custom buttons on mobile: this isn't a
standard pattern so holding off on this
- Abstract stable and delta classes

### Looks like
| BC | AC |
|--------|--------|
| <img width="1769" height="2957" alt="image"
src="https://github.com/user-attachments/assets/d60a8eeb-e2ed-4929-9f29-f6c7062fc66f"
/> | <img width="1769" height="2957" alt="image"
src="https://github.com/user-attachments/assets/188403a7-dc31-4b12-bf26-0455cd2a272b"
/> |
| <img width="543" height="3120" alt="image"
src="https://github.com/user-attachments/assets/87035498-fa8a-496c-b721-b7cb7bc44a43"
/>| <img width="391" height="3336" alt="image"
src="https://github.com/user-attachments/assets/a0173425-e60e-4b21-bdcb-5e6c642796cd"
/> |

---------

Co-authored-by: Krzysztof Kotlarek <kotlarek.krzysztof@gmail.com>
2026-06-03 13:35:05 +02:00

80 lines
2.2 KiB
Ruby
Vendored

# frozen_string_literal: true
module PageObjects
module Pages
class AdminDashboardReports < PageObjects::Pages::Base
SECTION_SELECTOR = ".db-main [data-section-id='reports']"
def has_section?
has_css?(SECTION_SELECTOR)
end
def card_identifiers
within(SECTION_SELECTOR) { all(".db-report__card").map { |el| el["data-identifier"] } }
end
def has_card?(identifier)
has_css?("#{SECTION_SELECTOR} .db-report__card[data-identifier='#{identifier}']")
end
def has_no_card?(identifier)
has_no_css?("#{SECTION_SELECTOR} .db-report__card[data-identifier='#{identifier}']")
end
def has_add_tile?
has_css?("#{SECTION_SELECTOR} .db-report__add-report")
end
def has_no_add_tile?
has_no_css?("#{SECTION_SELECTOR} .db-report__add-report")
end
def has_cog?
has_css?("#{SECTION_SELECTOR} .db-section__header-action .btn")
end
def has_no_cog?
has_no_css?("#{SECTION_SELECTOR} .db-section__header-action .btn")
end
def has_no_remove_button?(identifier)
has_no_css?(
"#{SECTION_SELECTOR} .db-report__card[data-identifier='#{identifier}'] .db-report__remove",
)
end
def open_manage_reports_via_tile
find("#{SECTION_SELECTOR} .db-report__add-report").click
self
end
def open_manage_reports_via_cog
within(SECTION_SELECTOR) { find(".db-section__header-action .btn").click }
self
end
def manage_reports_modal
PageObjects::Components::ManageReportsModal.new
end
def has_label_for?(identifier, label)
has_css?(
"#{SECTION_SELECTOR} .db-report__card[data-identifier='#{identifier}'] .db-report__label",
text: label,
)
end
def has_no_label_for?(identifier)
has_no_css?(
"#{SECTION_SELECTOR} .db-report__card[data-identifier='#{identifier}'] .db-report__label",
)
end
def has_empty_state_for?(identifier)
has_css?(
"#{SECTION_SELECTOR} .db-report__card[data-identifier='#{identifier}'] .db-report__empty",
)
end
end
end
end