Commit Graph

51 Commits

Author SHA1 Message Date
Emma Segal-Grossman
73e20269ef
Org settings layout fix + misc styling & consistency improvements (#1427)
## General changes

- Added `postcss-lit`, which allows us to use tailwind in lit elements
with shadow DOMs
- Added `// postcss-lit-disable-next-line` comments to most `` css`...`
`` tagged templates so as not to change existing CSS in components
- Added `TailwindElement`, which uses a single shared `CSSStyleSheet`
across all instances to be able to access Tailwind without requiring a
full copy of (compiled) Tailwind for every instance of a component that
extends it
- Added a new `<btrix-copy-field>` element, replacing the existing copy
elements

## Org settings page

- Stopped content from overflowing at medium widths
- Made spacing consistent at both smaller and wider widths
- Used readonly/monospace styling for copyable org id field
- Updated tab shadows to be slightly blue, consistent with the tab
background (also did this in other places tabs show up)

Before | After
-|-
![dev browsertrix
cloud_orgs_default-org_settings](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/9bcacdcc-259b-4a01-bac5-8913518776f0)
|
![localhost_9870_orgs_default-org_workflows_crawls](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/53936d4d-e5cd-4f37-ad06-b3b5041381df)
![dev browsertrix cloud_orgs_default-org_settings
(3)](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/602dd8d6-3012-4a0e-a638-a5192c9601ec)
| ![localhost_9870_orgs_default-org_workflows_crawls
(3)](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/74c93312-ad26-48d8-a87e-3da9a851693b)

## Misc fixes

- Used consistent single-line readonly/monospace styling for copyable
url field

Before | After
-|-
![dev browsertrix cloud_orgs_default-org_settings
(1)](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/e361feeb-3ea0-4f56-9e38-12ef6a644d58)
| ![localhost_9870_orgs_default-org_workflows_crawls
(1)](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/0145b1ad-8f45-4486-893e-8f638ac9add6)

- Removed inconsistent angled bottom borders from crawl workflow list
header

Before | After
-|-
![dev browsertrix cloud_orgs_default-org_settings
(2)](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/4aa20359-3ecf-4441-83c0-ed36a951ed3b)
| ![localhost_9870_orgs_default-org_workflows_crawls
(2)](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/8c771464-3a70-47e7-8475-fa82d4d030a9)

- Changes _all_ list page primary action buttons to use
`variant="primary"`

<img width="190" alt="Screenshot 2023-12-08 at 11 23 49 AM"
src="https://github.com/webrecorder/browsertrix-cloud/assets/5672810/2b007f5e-e675-40b2-86a7-f0bf8ef83b81">
<img width="240" alt="Screenshot 2023-12-08 at 11 23 43 AM"
src="https://github.com/webrecorder/browsertrix-cloud/assets/5672810/621b340e-2051-4ab0-8f42-8f0a51d8d3a5">

---------

Co-authored-by: Henry Wilkinson <henry@wilkinson.graphics>
Co-authored-by: sua yoo <sua@webrecorder.org>
Co-authored-by: sua yoo <sua@suayoo.com>
2023-12-13 17:29:35 -05:00
sua yoo
2bb21c615d
Improve frontend event system (#1450)
- Adds notify, navigate, and log in events to global event map, handle
in `btrix-app`
- Adds console debugs, which are stripped in prod
- Replaces TODO redundant `navTo`s with controller implementation
- Refactors rest of `LitElement` helpers into arrow functions
2023-12-13 14:11:15 -08:00
Emma Segal-Grossman
bd59c12b83
Add bundle analyzer script (#1437)
Adds
[webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer)
and a `build:analyze` npm script to run it.

Eventually it'd be nice to track metrics over time, but this is a good
start.
2023-12-11 19:21:56 -05:00
Emma Segal-Grossman
512698d747
Fix attribute casing & lit-analyzer issues (#1429)
## Changes
- Reverts changes introduced in #1407 that incorrectly changed attribute
casing
- Patches `@shoelace-style/shoelace` using
[`patch-package`](https://www.npmjs.com/package/patch-package) to add
JSDoc comments to component typedefs so that `lit-analyzer` can properly
pick up attributes
- Adds component typedef for `<replay-web-page>` component

## Testing
Tested by hand, it looks like missing help text/date formatting
changes/etc are back!

Before | After
-|-
![dev browsertrix
cloud_orgs_default-org_browser-profiles_profile_dea43f41-8777-4a42-b2ad-b8d43f6599b8](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/1c6be749-ee8f-4b07-84c7-b05c5df376a7)
|
![localhost_9870_orgs_default-org_browser-profiles_profile_dea43f41-8777-4a42-b2ad-b8d43f6599b8](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/4a305d3f-7947-4e13-b379-a82dc01620ea)
![dev browsertrix
cloud_orgs_default-org_browser-profiles_profile_dea43f41-8777-4a42-b2ad-b8d43f6599b8
(2)](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/a5e6bba6-ce03-4622-8f39-194ce08481b7)
|
![localhost_9870_orgs_default-org_browser-profiles_profile_dea43f41-8777-4a42-b2ad-b8d43f6599b8
(2)](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/33f076d8-aa20-4d25-9d1f-e6927d32819d)
![dev browsertrix
cloud_orgs_default-org_browser-profiles_profile_dea43f41-8777-4a42-b2ad-b8d43f6599b8
(1)](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/34761f6b-32a9-4eb5-a129-0df67bb90f65)
|
![localhost_9870_orgs_default-org_browser-profiles_profile_dea43f41-8777-4a42-b2ad-b8d43f6599b8
(1)](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/d8144b10-fc9b-49a4-9641-604ad8fa4e5a)

---------

Co-authored-by: Ilya Kreymer <ikreymer@users.noreply.github.com>
2023-12-11 12:34:03 -05:00
Emma Segal-Grossman
106fe5dd61
Organize components into folders by function (#1411) 2023-11-29 14:12:29 -05:00
Emma Segal-Grossman
b15c5ccddd
ESLint & Typescript fixes (#1407)
Closes #1405

- Properly uses `typescript-eslint`: we were missing the preset from it,
so some of the default `eslint` rules (that don't properly work with
typescript) were being applied and causing false positives
- I also moved the `eslint` config into its own file, and enabled
`typescript-eslint`'s type-awareness, so that we can enable more
type-aware rules in the future if we like
- Adds `ts-lit-plugin` to the typescript config, which _hopefully_ will
allow us to catch issues during build (in CI)
- It looks like `ts-lit-plugin` is sort of abandonware at the moment,
and unfortunately _doesn't_ actually work for this purpose right now,
but the lit team is working on a replacement here:
https://www.npmjs.com/package/@lit-labs/analyzer
- Adds `fork-ts-checker-webpack-plugin`, which allows the typescript
checking process to be run on a separate forked thread in Webpack, which
can help speed up builds & checking
- Enables incremental type checking for better speed
- Fixes a whole bunch of `eslint`-auto-fixable issues (unused imports
and variables, some type issues, etc)
- Fixes a bunch of `lit-analyzer` issues (mostly attribute naming, some
type issues as well)
- Fixes various other type issues:
- Improves type safety in a bunch of places, notably anywhere `apiFetch`
and `APIPaginatedList` are used
  - Removes some `any`s
2023-11-24 12:32:53 -05:00
sua yoo
4610d95cd7
Use org slug in place of UUIDs in app URLs (#1277)
- Replaces org UUID in URL/browser location bar with org slug.
- Refactor: Adds shared app state utility using https://sijakret.github.io/lit-shared-state/ to
access org data from deep descendants.
- Backwards compatible: org UUID URLs should auto-redirect to org slug URLs.
- Show the org UUID in org settings general tab for use with APIs
(Resolves #1258, Follows #1279)
2023-10-18 09:28:30 -07:00
sua yoo
8466caf1d9
Allow org admins to update slug (#1276)
- Allows editing of org slugs (actual URL updates will be handled in
https://github.com/webrecorder/browsertrix-cloud/issues/1258.)
- Converts user input to slug using slugify
- Adds help text to org name and slug
- Renames tab from "information" to "general" settings
2023-10-13 17:00:43 -07:00
sua yoo
630c00c5b0
Enforce strong passwords in UI (#1266) 2023-10-12 19:36:59 -07:00
sua yoo
ffd0e525d9
Webpack config improvements (#1063)
- Upgrades webpack and webpack-dev-server for bugfixes and performance updates
- Removes unnecessary file watching
- Enables persistent build cache in dev
- Switches to faster dev source map
2023-08-11 13:16:24 -07:00
sua yoo
b494070e43
Collection share dialog + copy updates (#1056)
- Always shows primary "Share" action button in Collection detail page.
- Enables toggling shareable status and share info from dialog. Difference from mockups: I made the "Done" button neutral do differentiate from our submit action buttons in the dialog, since toggling will apply changes immediately.
- Menu item: "Go to Public View"/"Go to Shareable View" -> "Visit Shareable URL". 
- Toggle label: "Make Collection Shareable" -> "Collection is Shareable".
- Additional dialog copy: adds "This collection can be viewed by anyone with the link." under "Link to Share" and "Share this collection by embedding it into an existing webpage." under "Embed Collection".
- Moves share status icon to its own column in list view.
- Adds new syntax-highlighted code component that supports js and html.

Co-authored-by: Henry Wilkinson <henry@wilkinson.graphics>
2023-08-09 10:12:46 -07:00
sua yoo
85913112a2
Upgrade lit + shoelace to reduce build size (#938)
* upgrade lit

* upgrade shoelace

* upgrade testing libraries

* add webpack bundle analyzer

* revert shoelace changes

* remove bundle analyzer

* remove console log
2023-07-20 11:50:05 +02:00
sua yoo
66b3befef9
Frontend collections beta UI (#886)
- Support for creating new collections and editing existing collections
- Can select crawling workflows which adds entire workflow, and then deselect individual crawls
- Can edit existing collections and add more crawls
- Can view, create and delete collections via new Collections top-level nav entry
2023-06-06 17:52:01 -07:00
sua yoo
821fbc12d8
Upgrade Shoelace to stable version (v2) (#856) 2023-05-22 10:01:48 -07:00
sua yoo
72967a0381
Frontend Docker build improvements (#749) 2023-04-05 20:05:45 -07:00
Sara Tavares
36cfb2591f
ci: fix version related to @playwright/test (#729)
* fix version, add resolutions to have fixed playwright version
2023-03-28 14:30:36 -07:00
Sara Tavares
48163db5d3
ci: fix version playwright version for tests (#725) 2023-03-26 21:57:06 -07:00
Sara Tavares
b61592b5ed
CI: Add Playwright UI e2e tests + CI (#614)
Adds Playwright for UI tests.
Basic Playwright test to login.
Playwright Github Action.

---------

Co-authored-by: sua yoo <sua@suayoo.com>
2023-03-22 16:23:22 -07:00
sua yoo
1dea7ecdf9
Update crawls list styles (#630)
- Improves crawls list UI for UX and visual consistency
- Enables editing crawl metadata from the crawls list
- Upgraded Tailwind CSS
2023-02-24 17:36:34 -08:00
sua yoo
d128525e4e
Run unit tests in frontend PR check (#569) 2023-02-06 17:47:15 -08:00
sua yoo
4875d7727d
Fix invite accept in UI (#560) 2023-02-06 12:18:24 -08:00
sua yoo
8957eda966
Improve org routing & performance (#520) 2023-01-26 15:02:27 -08:00
sua yoo
c67af660ab
Fix localization build (#488)
* fix localization issues
* don't track translation files
2023-01-17 17:51:03 -05:00
sua yoo
a6c248f9dd
Run frontend formatter on pre-commit hook (#461)
Resolves #450
2023-01-12 14:04:15 -08:00
Ilya Kreymer
30bda8c75d
VNC-Based Profile Browser (#433)
* profile browser vnc support + fixes:
- switch profile browser rendering to use VNC
- frontend: add @novnc/novnc as dependency, create separate bundle novnc.js to load into vnc browser (to avoid loading from each container)
- frontend: update proxy paths to proxy websocket, index page to crawler
- frontend: allow browser profiles in all browsers, remove browser compatibility check
- frontend: update webpack dev config, apply prettier
- frontend: node version fix
- backend: get vncpassword, build new URL for proxying to crawler iframe
- backend: fix profile / crawl job pull policy from 'Always' -> 'Never', should use existing image for job
- backend: fix kill signal to use bash -c to work with latest backend image
- backend/chart: add 'profile_browser_timeout_seconds' to chart values to control how long profile browser to remain when idle (default to 60)
- backend: remove utils.py, now using secret.token_hex() for random suffix
Co-authored-by: sua yoo <sua@suayoo.com>
2023-01-10 14:42:42 -08:00
sua yoo
c4fc3146b7
Fix app not loading on older Safari <15.4 (#436) 2023-01-04 15:09:57 -08:00
sua yoo
28346e0a54
New create crawl config user workflow (#391) 2022-12-12 13:50:33 -08:00
sua yoo
003b3c7a78
Allow users to set crawl config language (#377) 2022-11-22 15:15:35 -08:00
sua yoo
321f78b861
Upgrade Shoelace 2.0.0-beta.61 -> 2.0.0-beta.83 (#358) 2022-11-21 08:16:51 -08:00
sua yoo
baacbbdc52
Highlight regular expression syntax in Exclusions Table (#341) 2022-11-01 15:31:01 -07:00
sua yoo
0bbb7905bd
Add crawl queue editor UI components (#331)
WIP #304
2022-10-04 13:13:40 -07:00
sua yoo
d144591dbf
Display & edit crawl schedule in user local time (#271)
closes #255
2022-06-27 13:01:20 -07:00
sua yoo
29b586b03f
Edit crawl config as YAML (#207) 2022-04-06 17:40:25 -07:00
sua yoo
2636f33123
Make crawl list interactive (#109)
- Cancel and stop crawl
- Sorts crawls by start time, status and crawl template ID
- Filters crawls by crawl template ID
- Adds shortcut to copy template ID
2022-01-29 10:38:58 -08:00
sua yoo
28b59130a6
Initial list of crawls (#105) 2022-01-27 19:28:19 -08:00
sua yoo
3a461d86d4
Crawl config detail views (#97) 2022-01-25 11:56:34 -08:00
sua yoo
ec1a758e42
Upgrade TailwindCSS to v3 (#93) 2022-01-19 22:00:06 -08:00
sua yoo
ff77a92108
Schedule time of day when creating config (#85) 2022-01-18 13:58:28 -08:00
sua yoo
f58bc801fc
remove unused package dependency 2022-01-16 14:49:21 -08:00
sua yoo
9673794711
Frontend prod build optimizations (#54)
- Leverage webpack chunk splitting to creating more, smaller JS files rather than one large main file (import(file) syntax)
- Enable long-term caching by adding content hash to output file names
- Copy entire /dist folder contents in Dockerfile
- Changed yarn start-dev -> yarn start since there is no prod server
- Reenable locale picker
2021-12-03 18:00:14 -08:00
sua yoo
87bef6d967
Use settings to determine if sign up route is enabled (#51) 2021-12-03 10:05:55 -08:00
sua yoo
58eba70c68
Allow users to change password (#25)
wip #21
2021-11-23 17:01:08 -08:00
sua yoo
04fbe6fc4d
Adjust frontend auth behavior (#24) 2021-11-23 16:57:28 -08:00
sua yoo
5b8440f295
Fix frontend test mocks (#23) 2021-11-22 16:31:35 -08:00
sua yoo
5722909157
Frontend responsive UI tweaks (#20) 2021-11-22 10:25:34 -08:00
sua yoo
14f2d13a73
Add frontend localization support (#18)
closes #17
2021-11-20 07:44:21 -08:00
sua yoo
76e5ceb864
Replace daisy UI with shoelace (#16)
closes #15
2021-11-19 19:38:58 -08:00
sua yoo
316a91f612
Switch frontend to use Typescript (#12)
closes #11
2021-11-19 14:07:13 -08:00
sua yoo
29a3c29b2c
Configure API base URL in frontend (#14)
closes #13
2021-11-19 13:30:51 -08:00
sua yoo
0f97724ad0
Set up frontend dev tooling (#6)
* Add eslint for linting js (https://github.com/ikreymer/browsertrix-cloud/pull/7)
* Add prettier for formatting frontend files (https://github.com/ikreymer/browsertrix-cloud/pull/9)
* Add frontend testing framework (https://github.com/ikreymer/browsertrix-cloud/pull/10)

closes #4, closes #5
2021-11-18 17:26:10 -08:00