Merge pull request #2332 from webrecorder/frontend-collection-editing-dialog

Collection editing and sharing revamp

Author: emma-sg

backend/btrixcloud/colls.py

@@ -3,7 +3,7 @@
 """
 
 # pylint: disable=too-many-lines
-
+from datetime import datetime
 from collections import Counter
 from uuid import UUID, uuid4
 from typing import Optional, List, TYPE_CHECKING, cast, Dict, Tuple, Any, Union
@@ -20,10 +20,12 @@
 
 from .pagination import DEFAULT_PAGE_SIZE, paginated_format
 from .models import (
+    AnyHttpUrl,
     Collection,
     CollIn,
     CollOut,
     CollIdName,
+    CollectionThumbnailSource,
     UpdateColl,
     AddRemoveCrawlList,
     BaseCrawl,
@@ -843,8 +845,17 @@ async def set_home_url(
 
         return {"updated": True}
 
+    # pylint: disable=too-many-locals
     async def upload_thumbnail_stream(
-        self, stream, filename: str, coll_id: UUID, org: Organization, user: User
+        self,
+        stream,
+        filename: str,
+        coll_id: UUID,
+        org: Organization,
+        user: User,
+        source_url: Optional[AnyHttpUrl] = None,
+        source_ts: Optional[datetime] = None,
+        source_page_id: Optional[UUID] = None,
     ) -> Dict[str, bool]:
         """Upload file as stream to use as collection thumbnail"""
         coll = await self.get_collection(coll_id)
@@ -903,6 +914,13 @@ async def stream_iter():
 
         coll.thumbnail = thumbnail_file
 
+        if source_url and source_ts and source_page_id:
+            coll.thumbnailSource = CollectionThumbnailSource(
+                url=source_url,
+                urlTs=source_ts,
+                urlPageId=source_page_id,
+            )
+
         # Update entire document to avoid bson.errors.InvalidDocument exception
         await self.collections.find_one_and_update(
             {"_id": coll_id, "oid": org.id},
@@ -1226,11 +1244,21 @@ async def upload_thumbnail_stream(
         request: Request,
         filename: str,
         coll_id: UUID,
+        sourceUrl: Optional[AnyHttpUrl],
+        sourceTs: Optional[datetime],
+        sourcePageId: Optional[UUID],
         org: Organization = Depends(org_crawl_dep),
         user: User = Depends(user_dep),
     ):
         return await colls.upload_thumbnail_stream(
-            request.stream(), filename, coll_id, org, user
+            request.stream(),
+            filename,
+            coll_id,
+            org,
+            user,
+            sourceUrl,
+            sourceTs,
+            sourcePageId,
         )
 
     @app.delete(

backend/btrixcloud/models.py

@@ -1236,6 +1236,15 @@ class CollAccessType(str, Enum):
     PUBLIC = "public"
 
 
+# ============================================================================
+class CollectionThumbnailSource(BaseModel):
+    """The page source for a thumbnail"""
+
+    url: AnyHttpUrl
+    urlTs: datetime
+    urlPageId: UUID
+
+
 # ============================================================================
 class Collection(BaseMongoModel):
     """Org collection structure"""
@@ -1268,6 +1277,7 @@ class Collection(BaseMongoModel):
     homeUrlPageId: Optional[UUID] = None
 
     thumbnail: Optional[ImageFile] = None
+    thumbnailSource: Optional[CollectionThumbnailSource] = None
     defaultThumbnailName: Optional[str] = None
 
     allowPublicDownload: Optional[bool] = True
@@ -1323,6 +1333,7 @@ class CollOut(BaseMongoModel):
 
     resources: List[CrawlFileOut] = []
     thumbnail: Optional[ImageFileOut] = None
+    thumbnailSource: Optional[CollectionThumbnailSource] = None
     defaultThumbnailName: Optional[str] = None
 
     allowPublicDownload: bool = True
@@ -1372,6 +1383,7 @@ class UpdateColl(BaseModel):
     access: Optional[CollAccessType] = None
     defaultThumbnailName: Optional[str] = None
     allowPublicDownload: Optional[bool] = None
+    thumbnailSource: Optional[CollectionThumbnailSource] = None
 
 
 # ============================================================================

backend/test/test_collections.py

@@ -1145,9 +1145,10 @@ def test_collection_url_list(crawler_auth_headers, default_org_id):
 
 
 def test_upload_collection_thumbnail(crawler_auth_headers, default_org_id):
+    # https://dev.browsertrix.com/api/orgs/c69247f4-415e-4abc-b449-e85d2f26c626/collections/b764fbe1-baab-4dc5-8dca-2db6f82c250b/thumbnail?filename=page-thumbnail_47fe599e-ed62-4edd-b078-93d4bf281e0f.jpeg&sourceUrl=https%3A%2F%2Fspecs.webrecorder.net%2F&sourceTs=2024-08-16T08%3A00%3A21.601000Z&sourcePageId=47fe599e-ed62-4edd-b078-93d4bf281e0f
     with open(os.path.join(curr_dir, "data", "thumbnail.jpg"), "rb") as fh:
         r = requests.put(
-            f"{API_PREFIX}/orgs/{default_org_id}/collections/{_public_coll_id}/thumbnail?filename=thumbnail.jpg",
+            f"{API_PREFIX}/orgs/{default_org_id}/collections/{_public_coll_id}/thumbnail?filename=thumbnail.jpg&sourceUrl=https%3A%2F%2Fexample.com%2F&sourceTs=2024-08-16T08%3A00%3A21.601000Z&sourcePageId=1bba4aba-d5be-4943-ad48-d6710633d754",
             headers=crawler_auth_headers,
             data=read_in_chunks(fh),
         )
@@ -1159,7 +1160,8 @@ def test_upload_collection_thumbnail(crawler_auth_headers, default_org_id):
         headers=crawler_auth_headers,
     )
     assert r.status_code == 200
-    thumbnail = r.json()["thumbnail"]
+    collection = r.json()
+    thumbnail = collection["thumbnail"]
 
     assert thumbnail["name"]
     assert thumbnail["path"]
@@ -1172,6 +1174,16 @@ def test_upload_collection_thumbnail(crawler_auth_headers, default_org_id):
     assert thumbnail["userName"]
     assert thumbnail["created"]
 
+    thumbnailSource = collection["thumbnailSource"]
+
+    assert thumbnailSource["url"]
+    assert thumbnailSource["urlTs"]
+    assert thumbnailSource["urlPageId"]
+
+    assert thumbnailSource["url"] == "https://example.com/"
+    assert thumbnailSource["urlTs"] == "2024-08-16T08:00:21.601000Z"
+    assert thumbnailSource["urlPageId"] == "1bba4aba-d5be-4943-ad48-d6710633d754"
+
 
 def test_set_collection_default_thumbnail(crawler_auth_headers, default_org_id):
     default_thumbnail_name = "orange-default.avif"

frontend/docs/docs/user-guide/org-settings.md

@@ -1,4 +1,4 @@
-# Change Org Settings
+# Edit Org Settings
 
 Settings that apply to the entire organization are found in the **Settings** page. If you're an org admin, you'll see the link to _Settings_ in the org navigation bar.
 
@@ -13,7 +13,7 @@ The org URL is where you and other org members will go to view the dashboard, co
 Org name and URLs are unique to each Browsertrix instance (for example, on `app.browsertrix.com`) and you may be prompted to change the org name or URL if either are already in use by another org.
 
 ??? info "What information will be visible to the public?"
-    All org information is private until you make the org visible. Once your org is made visible to the public, the org name, description, and website will appear on the org's public gallery page. You can preview how information appears to the public by clicking **View as public**.
+    All org information is private until you make the org visible. Once your org is made visible to the public, the org name, description, and website will appear on the org's public collections gallery page. You can preview how information appears to the public by visiting the linked public collections gallery page.
 
 ### Public Collections Gallery
 

frontend/src/components/ui/button.ts

@@ -74,7 +74,8 @@ export class Button extends TailwindElement {
           small: tw`min-h-6 min-w-6 rounded-md text-base`,
           medium: tw`min-h-8 min-w-8 rounded-sm text-lg`,
         }[this.size],
-        this.raised && tw`shadow ring-1 ring-neutral-200`,
+        this.raised &&
+          tw`shadow ring-1 ring-stone-500/20 hover:shadow-stone-800/20 hover:ring-stone-800/20`,
         this.filled
           ? [
               tw`text-white`,

frontend/src/components/ui/navigation/navigation-button.ts

@@ -1,5 +1,6 @@
 /* eslint-disable lit/binding-positions */
 /* eslint-disable lit/no-invalid-html */
+import clsx from "clsx";
 import { css, type PropertyValueMap } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -26,6 +27,9 @@ export class NavigationButton extends TailwindElement {
   @property({ type: String })
   type: "submit" | "button" = "button";
 
+  @property({ type: String })
+  variant: "primary" | "error" = "primary"; // TODO expand if necessary
+
   @property({ type: String })
   label?: string;
 
@@ -76,8 +80,9 @@ export class NavigationButton extends TailwindElement {
     return html`<${tag}
       type=${this.type === "submit" ? "submit" : "button"}
       part="button"
-      class=${[
-        tw`flex w-full cursor-pointer items-center gap-2 rounded font-medium leading-[16px] outline-primary-600 transition hover:transition-none focus-visible:outline focus-visible:outline-3 focus-visible:outline-offset-1 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50`,
+      class=${clsx([
+        tw`flex w-full cursor-pointer items-center gap-2 rounded font-medium leading-[16px] transition hover:transition-none focus-visible:outline focus-visible:outline-3 focus-visible:outline-offset-1 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50`,
+
         this.icon ? tw`min-h-6 min-w-6` : tw``,
         {
           small: this.icon ? tw`min-h-6 p-0` : tw`min-h-6 px-2 py-0`,
@@ -89,17 +94,27 @@ export class NavigationButton extends TailwindElement {
           center: "justify-center",
           right: "justify-end",
         }[this.align],
-        this.active
-          ? tw`bg-primary-100/80 text-primary-800 shadow-sm shadow-primary-900/20`
-          : tw`text-neutral-700 hover:bg-primary-50`,
-      ]
-        .filter(Boolean)
-        .join(" ")}
+        this.active && "shadow-sm",
+        {
+          primary: [
+            tw`outline-primary-600`,
+            this.active
+              ? tw`bg-primary-100/80 text-primary-800 shadow-primary-900/20`
+              : tw`text-neutral-700 hover:bg-primary-50`,
+          ],
+          error: [
+            tw`outline-red-600`,
+            this.active
+              ? tw`bg-red-100/80 text-red-800 shadow-red-900/20`
+              : tw`text-red-700 ring-1 ring-red-300 hover:bg-red-50`,
+          ],
+        }[this.variant],
+      ])}
       ?disabled=${this.disabled}
       href=${ifDefined(this.href)}
       aria-label=${ifDefined(this.label)}
       @click=${this.handleClick}
-      
+
     >
       <slot></slot>
     </${tag}>`;

frontend/src/components/ui/tab-group/tab-group.ts

@@ -12,6 +12,7 @@ import { TailwindElement } from "@/classes/TailwindElement";
 import { pageSectionsWithNav } from "@/layouts/pageSectionsWithNav";
 
 /**
+ * @fires btrix-tab-change
  * @example Usage:
  * ```ts
  * <btrix-tab-group>
@@ -145,5 +146,11 @@ export class TabGroup extends TailwindElement {
   private onSelectTab(e: CustomEvent<TabClickDetail>) {
     e.stopPropagation();
     this.active = e.detail.panel;
+    this.dispatchEvent(
+      new CustomEvent<string>("btrix-tab-change", {
+        detail: this.active,
+        bubbles: true,
+      }),
+    );
   }
 }

frontend/src/context/view-state.ts

@@ -0,0 +1,7 @@
+import { createContext } from "@lit/context";
+
+import { type ViewState } from "@/utils/APIRouter";
+
+export type ViewStateContext = ViewState | null;
+
+export const viewStateContext = createContext<ViewStateContext>("viewState");

frontend/src/controllers/api.ts

@@ -173,6 +173,7 @@ export class APIController implements ReactiveController {
   async upload(
     path: string,
     file: File,
+    abortSignal?: AbortSignal,
   ): Promise<{ id: string; added: boolean; storageQuotaReached: boolean }> {
     const auth = appState.auth;
 
@@ -185,9 +186,12 @@ export class APIController implements ReactiveController {
     }
 
     return new Promise((resolve, reject) => {
+      if (abortSignal?.aborted) {
+        reject(AbortReason.UserCancel);
+      }
       const xhr = new XMLHttpRequest();
 
-      xhr.open("PUT", `/api/${path}`);
+      xhr.open("PUT", `/api${path}`);
       xhr.setRequestHeader("Content-Type", "application/octet-stream");
       Object.entries(auth.headers).forEach(([k, v]) => {
         xhr.setRequestHeader(k, v);
@@ -221,6 +225,11 @@ export class APIController implements ReactiveController {
 
       xhr.send(file);
 
+      abortSignal?.addEventListener("abort", () => {
+        xhr.abort();
+        reject(AbortReason.UserCancel);
+      });
+
       this.uploadRequest = xhr;
     });
   }

frontend/src/decorators/needLogin.test.ts

@@ -19,6 +19,7 @@ describe("needLogin", () => {
     }
 
     const Element = needLogin(
+      // @ts-expect-error not stubbing full BtrixElement
       class TestElement extends LiteElementMock {
         appState = appState;
       } as unknown as {