From 54e2b2c7038f5e621343653ff0816790f3da764c Mon Sep 17 00:00:00 2001 From: sua yoo Date: Tue, 1 Aug 2023 09:14:27 -0700 Subject: [PATCH] List web captures in Collection (#1024) - Adds tab for "Web Captures" in Collection detail view - Move Collection description under Replay section - Fixes app reloading when clicking into a Collection - Standardizes Web Capture list headers from "Finished -> "Created Date" --- frontend/src/components/button.ts | 1 + frontend/src/components/crawl-list.ts | 15 +- frontend/src/components/not-found.ts | 4 +- frontend/src/pages/org/collection-detail.ts | 231 ++++++++++++++++++-- frontend/src/pages/org/collections-list.ts | 9 +- frontend/src/pages/org/collections-new.ts | 6 +- frontend/src/pages/org/crawl-detail.ts | 31 ++- frontend/src/pages/org/crawls-list.ts | 6 +- frontend/src/pages/org/index.ts | 57 +++-- frontend/src/routes.ts | 2 +- 10 files changed, 284 insertions(+), 78 deletions(-) diff --git a/frontend/src/components/button.ts b/frontend/src/components/button.ts index df4f5ada..2dd56bc9 100644 --- a/frontend/src/components/button.ts +++ b/frontend/src/components/button.ts @@ -129,6 +129,7 @@ export class Button extends LitElement { raised: this.raised, })} ?disabled=${this.disabled} + href=${ifDefined(this.href)} aria-label=${ifDefined(this.label)} @click=${this.handleClick} > diff --git a/frontend/src/components/crawl-list.ts b/frontend/src/components/crawl-list.ts index 74b11b32..b93a0d42 100644 --- a/frontend/src/components/crawl-list.ts +++ b/frontend/src/components/crawl-list.ts @@ -226,9 +226,8 @@ export class CrawlListItem extends LitElement { return html` { e.preventDefault(); await this.updateComplete; @@ -521,15 +520,9 @@ export class CrawlList extends LitElement {
${msg("Name")}
-
- ${this.artifactType === "upload" ? msg("Uploaded") : msg("Finished")} -
+
${msg("Date Created")}
${msg("Size")}
-
- ${this.artifactType === "upload" - ? msg("Uploaded By") - : msg("Started By")} -
+
${msg("Created By")}
${msg("Actions")}
diff --git a/frontend/src/components/not-found.ts b/frontend/src/components/not-found.ts index 85d3dcef..0fe828bb 100644 --- a/frontend/src/components/not-found.ts +++ b/frontend/src/components/not-found.ts @@ -8,7 +8,9 @@ export class NotFound extends LitElement { } render() { return html` -
${msg("Page not found")}
+
+ ${msg("Page not found")} +
`; } } diff --git a/frontend/src/pages/org/collection-detail.ts b/frontend/src/pages/org/collection-detail.ts index 645c5a8a..3915eca2 100644 --- a/frontend/src/pages/org/collection-detail.ts +++ b/frontend/src/pages/org/collection-detail.ts @@ -1,14 +1,25 @@ import { state, property } from "lit/decorators.js"; import { msg, localized, str } from "@lit/localize"; +import { choose } from "lit/directives/choose.js"; import { when } from "lit/directives/when.js"; import { guard } from "lit/directives/guard.js"; +import queryString from "query-string"; import type { AuthState } from "../../utils/AuthService"; import LiteElement, { html } from "../../utils/LiteElement"; import type { Collection } from "../../types/collection"; -import type { IntersectEvent } from "../../components/observable"; +import type { + APIPaginatedList, + APIPaginationQuery, + APISortQuery, +} from "../../types/api"; +import type { Crawl, CrawlState, Upload } from "../../types/crawler"; +import type { PageChangeEvent } from "../../components/pagination"; +const ABORT_REASON_THROTTLE = "throttled"; const DESCRIPTION_MAX_HEIGHT_PX = 200; +const TABS = ["replay", "web-captures"] as const; +export type Tab = (typeof TABS)[number]; @localized() export class CollectionDetail extends LiteElement { @@ -21,26 +32,46 @@ export class CollectionDetail extends LiteElement { @property({ type: String }) collectionId!: string; + @property({ type: String }) + resourceTab?: Tab = TABS[0]; + @property({ type: Boolean }) isCrawler?: boolean; @state() private collection?: Collection; + @state() + private webCaptures?: APIPaginatedList; + @state() private openDialogName?: "delete"; - @state() - private isDialogVisible: boolean = false; - @state() private isDescriptionExpanded = false; + // Use to cancel requests + private getWebCapturesController: AbortController | null = null; + + private readonly tabLabels: Record = { + replay: { + icon: { name: "link-replay", library: "app" }, + text: msg("Replay"), + }, + "web-captures": { + icon: { name: "list-ul", library: "default" }, + text: msg("Web Captures"), + }, + }; + protected async willUpdate(changedProperties: Map) { if (changedProperties.has("orgId")) { this.collection = undefined; this.fetchCollection(); } + if (changedProperties.has("collectionId")) { + this.fetchWebCaptures(); + } } protected async updated(changedProperties: Map) { @@ -51,25 +82,31 @@ export class CollectionDetail extends LiteElement { render() { return html`${this.renderHeader()} -
-

+

- ${this.collection?.name || html``} -

+ ${this.collection?.name || + html``} + ${when(this.isCrawler, this.renderActions)}
-
${this.renderDescription()}
- ${when( - this.collection?.resources.length, - () => html`
${this.renderReplay()}
` +
${this.renderTabs()}
+ + ${choose( + this.resourceTab, + [ + ["replay", this.renderOverview], + ["web-captures", this.renderWebCaptures], + ], + + () => html`` )} (this.openDialogName = undefined)} - @sl-after-hide=${() => (this.isDialogVisible = false)} > ${msg( html`Are you sure you want to delete @@ -95,7 +132,7 @@ export class CollectionDetail extends LiteElement { } private renderHeader = () => html` -