Commit Graph

22 Commits

Author SHA1 Message Date
Henry Wilkinson
56a634e593
ui: Public Collections UI Nitpicks (#2287)
- Removes share link from the dialogue footer
- Removes stickied collection navigation, replaces with improved
viewport-based scaling!
- Adds a max-width for the collection description in the logged in view.
- Moves the markdown editor buttons to below the editor
- Controls are now In-line with how we handle dialogue options
elsewhere, fixes a minor responsive design issue.
- Minor copy changes

---------

Co-authored-by: emma <hi@emma.cafe>
Co-authored-by: sua yoo <sua@webrecorder.org>
2025-01-13 15:15:49 -08:00
Emma Segal-Grossman
19c1d28349
Fix language selector using locale instead of lang (#2294)
Also fixes a shoelace menu-item bug where checkbox menu items would have
their checked state flipped on click, regardless of `checked` value.

~~Deploying to dev to test if this fixes language switching...~~ Yep!
Seems to fix the issues.
2025-01-13 15:01:57 -05:00
Emma Segal-Grossman
46aab91ef5
Adds optional IDs to toasts to replace rather than add to toast stack (#2236)
This has been bugging me for a while — any type of repetitive action
that shows a toast will quickly cause a big stack of toasts to build up.
This fixes that by allowing different categories of toasts to exist,
where each category can only have one active toast. _Different_
categories of toast can coexist just fine, but toasts with the same `id`
will replace any existing toast with that same `id`.

It's been a pet peeve for a while, and it should make any sort of "power
user" use of Browsertrix a lot nicer :)

I've gone over all the existing toasts and applied what feel like decent
differentiations, but I'm not set on any of them — open to suggestions!


https://github.com/user-attachments/assets/dbe39141-9e56-427d-b702-124c45ef2b9a

---------

Co-authored-by: Ilya Kreymer <ikreymer@users.noreply.github.com>
2024-12-13 15:27:01 -05:00
sua yoo
37c0b06622
feat: Localize dates, bytes, and numbers (#2146)
- Defaults to user's browser language preference when displaying dates,
bytes, and numbers (with caveats.) This fixes an issue where numbers
were always formatted in English.
- Shows user's browser language preferences in language dropdown
- Fixes timezone not displayed in archived item detail start and finish
times
- Standardizes number formatting
- Sets timezone that unit tests run in

---------

Co-authored-by: SuaYoo <SuaYoo@users.noreply.github.com>
Co-authored-by: Emma Segal-Grossman <hi@emma.cafe>
Co-authored-by: emma-sg <emma-sg@users.noreply.github.com>
2024-11-19 21:49:02 -08:00
sua yoo
1a6892572d
chore: Refactor frontend shared state (#1997)
Refactors custom components to enable shared state accessors
(like `authState`) and helpers (like `api.fetch`.) Schemas are now
defined with [zod](https://zod.dev/?id=basic-usage) which enables
runtime schema validation.

See subtasks for full description of change:

- https://github.com/webrecorder/browsertrix/pull/1979
- https://github.com/webrecorder/browsertrix/pull/1981
- https://github.com/webrecorder/browsertrix/pull/1985
- https://github.com/webrecorder/browsertrix/pull/1986

---------

Co-authored-by: Emma Segal-Grossman <hi@emma.cafe>
2024-08-12 17:57:31 -07:00
Tessa Walsh
8b0d1432af
Show QA meter while analysis is running (#1854)
Fixes #1846 

- Ensure meter auto-updates as new stats are ready
- Switch meter to new QA run when new analysis run is started
- Remove Files from QA meter (files and errors will be reported separately)

Co-authored-by: emma <hi@emma.cafe>
Co-authored-by: sua yoo <sua@webrecorder.org>
2024-06-12 12:32:01 -04:00
Emma Segal-Grossman
d6f2fee279
Allow QA view to be larger than viewport height if necessary (#1790)
Closes #1789

### Changes
- Converts stylesheet in js to css now that it doesn't use any runtime
values
- Removes fixed height on QA container, and instead sets a min height
- Applies `contain: size` to page list & tab content so they don't cause
the QA container to stretch
- Also updates instances of `h-{n} w-{n}` to `size-{n}`
- Removes leftover outlines on text and resource comparison areas from
early QA prototyping
2024-05-14 17:26:06 -04:00
Henry Wilkinson
93c35ee2ee
Update dash and slash icons (#1783)
Fixes #1782 

- Dash icons are now used to convey status exclusively
- Slash icons are now used to convey no data states
- Updates status icons to filled in the docs (also required for QA
docs!)
2024-05-03 12:52:07 -04:00
sua yoo
e7dbf914a3
QA review tooltip + comment improvements (#1779)
Resolves https://github.com/webrecorder/browsertrix/issues/1761

<!-- Fixes #issue_number -->

### Changes

- Switches QA review page chip tooltip colors to dark text on light
background
- Shows newest comment when hovering over comment cell in QA tab page
list to match tooltip in QA review page list
- Validates textarea max entry for description and comments
2024-05-02 01:30:24 +02:00
sua yoo
1915274e26
Fix QA review comments (#1723)
Fixes https://github.com/webrecorder/browsertrix/issues/1710

Fixes date and deletion for newly added comments.
2024-04-23 16:31:52 -04:00
sua yoo
cb9012a6df
Fix QA navigation (#1731)
- Resolves https://github.com/webrecorder/browsertrix/issues/1705
- Resolves https://github.com/webrecorder/browsertrix/issues/1477

Changes:

- Takes user back to archived item QA tab after submitting review.
- Prevents clicking on page in QA tab when there's no analysis runs.
- Disables analysis-related sort options in QA tab when there's no
analysis runs.
- Handles pages without a title in QA tab.
- Adds initial loading state to QA review page list.
2024-04-23 15:45:06 -04:00
sua yoo
dde1175bd0
Add QA page analysis chart (#1725) 2024-04-23 10:37:22 -04:00
Emma Segal-Grossman
1f59c0b452
add best text & screenshot match sorting options (#1726) 2024-04-22 20:53:17 -04:00
Emma Segal-Grossman
7710be0f6e
More Frontend QA Polish Changes (#1709)
Sort of relevant to #1696

- Improves a number of layout elements at smaller viewport sizes
(specifically, letting button groups wrap onto next lines & ensure
titles can't shrink to 0 width)
- Adds "No page title" to places where there'd normally be a page title
but isn't
- Applies grid styling to page list area to fix overflow issues 
- When selecting or loading with a page selected that's farther down on
the page list, the top of the page header could be scrolled away from,
and there'd be no way to scroll back because the area had `overflow:
hidden` applied
- Adds default width and height to image comparer element, so that it
displays correctly when images haven't loaded and doesn't change layout
when images load

---------

Co-authored-by: Henry Wilkinson <henry@wilkinson.graphics>
2024-04-22 20:02:07 -04:00
Emma Segal-Grossman
127315189f
Frontend QA: show currently sorted heuristic percentages in page list (#1720)
Closes #1690

Swaps out the "+n" number for a percentage when sorting by percentage
values
2024-04-22 16:44:59 -04:00
sua yoo
e56c412737
Add QA columns to archived item list (#1683)
- Shows QA review status, latest QA state, and QA run count in archived
item list. "Created by" column replaced for space and moved to "Date
Created" tooltip
- Enables sort archived items by QA columns
- Adds tooltip to all columns except name
- Hides non-applicable columns in when archived items are filtered to
uploads only
- Fixes issue where tooltips weren't activated on hover when using
`btrix-table`
- Minor refactor to reuse status labels/colors, renames page review ->
page approval to clarify
2024-04-22 13:19:07 -07:00
Henry Wilkinson
a60f56b87a
Frontend QA Polish Changes (#1703)
Fixes #1696 

- Inverts the toggle button state for screenshot comparison, is now
untoggled by default
- Changes the Resources tab to a puzzle piece
- Parity with the metaphor used in ReplayWeb.page. Would like to leave
databases to represent actual databases... Which given the app could
very well make their way in here!
- Fixes the dashed boarder radius being applied to the text comparison
tab
- Sets the data table header row to `position: sticky;` so it's always
visible if the table scrolls!
- This applies to all data tables, tested the one in QA review, the
overview page, and the org settings members list
- Casing changes for parity with other dropdown sorting controls

Co-authored-by: Emma Segal-Grossman <hi@emma.cafe>
2024-04-19 22:26:04 -04:00
Emma Segal-Grossman
9f0a1fcc95
QA page details (#1656)
### Changes
- improves overflow issues at smaller screen sizes
- adds icons to buttons
- updates text & layout to match mocks
- changes primary button & button options depending on if there's a
qa run available
- adds a loading state for qa run status & buttons
- updates `<btrix-crawl-status>` with a `type` param allowing for
crawls, uploads, and QA runs
- Updates `<btrix-alert>` to match `<sl-tag>` styling
- Improves overflow issues at smaller viewport sizes by making tab
lists overflow when necessary

### Features
- Ability to start/stop/cancel QA runs
https://github.com/webrecorder/browsertrix-cloud/pull/1666 @SuaYoo
- Ability to see progress of current QA run @emma-sg 
- Ability to delete QA runs @emma-sg 
- Ability to download QA run files
https://github.com/webrecorder/browsertrix-cloud/pull/1666 @SuaYoo
- Only able to start review if a QA Run is finished (for now,
initial pass). @SuaYoo
- Only most recent running or successful QA run is displayed in
header

---------

Co-authored-by: sua yoo <sua@webrecorder.org>
Co-authored-by: sua yoo <sua@suayoo.com>
Co-authored-by: Ilya Kreymer <ikreymer@gmail.com>
Co-authored-by: Henry Wilkinson <henry@wilkinson.graphics>
2024-04-17 15:17:13 -07:00
sua yoo
83c9203a11
Initial QA Review UI! (#1624)
QA Details page:
- Enables QA tab with ability to start automated analysis QA Run + view a and manual review status
- Pages listed with review status + overall crawl review status shown on QA details (relates to #1508)
- Initial placeholder for QA run analytics (part of #1589)
- Addresses a good deal of #1477

Automated Analysis QA in Review Mode:
- Ability to select from multiple analysis QA runs / view QA runs in QA details
- Shows analysis screenshot, text and resources compare and replay tabs (fixes #1496)
- Sorting by worst screenshot / worst text score for each QA run
- Includes pages sidebar with screenshot/text/resource compare results (fixes #1497)

Manual Review QA in Review Mode:
- Per-page replay available as separate tab (fixes #1499)
- Supports thumbs up, thumbs down, notes for each page
- Supports entering review status approval (good/acceptable/bad can be entered when finishing review

---------
Co-authored-by: Emma Segal-Grossman <hi@emma.cafe>
Co-authored-by: Ilya Kreymer <ikreymer@gmail.com>
Co-authored-by: Henry Wilkinson <henry@wilkinson.graphics>
2024-04-04 15:09:52 -07:00
Emma Segal-Grossman
41d6e79cb3
Clean up ESLint warnings in main (#1616)
See title.

The only place this changes behaviour is in the placeholder page list,
which will be replaced by the real one shortly, so I'm going to just
merge this.
2024-03-19 17:22:27 -04:00
Emma Segal-Grossman
b1e2f1b325
Add ESLint rules for import ordering (#1608)
Follow-up from
https://github.com/webrecorder/browsertrix-cloud/pull/1546#discussion_r1529001599
(cc @SuaYoo)

- Adds `eslint-plugin-import-x` and
`@ianvs/prettier-plugin-sort-imports` and configures rules for them both
so imports get sorted on format & on lint.
- Runs both on everything!
2024-03-18 21:50:02 -04:00
sua yoo
9f312c075e
Manually approve pages in QA review (#1576)
- Automatically update view to first page if page ID isn't specified
- Show current page URL in location bar (resolves
https://github.com/webrecorder/browsertrix-cloud/issues/1495)
- Approve, reject, or leave notes on a page
- Display temporary list of links to pages in the sidebar
2024-03-12 10:08:51 -07:00