From 0c81a2f89e6df4f48051ff8e17827644087fb7ed Mon Sep 17 00:00:00 2001 From: sua yoo Date: Tue, 7 Jan 2025 16:21:32 -0800 Subject: [PATCH] chore: Refactor page headers (#2282) - Refactors all page headers to use new `pageHeader` - Removes border under org name/title in the org dashboard --- frontend/src/layouts/page.ts | 47 +------------------ frontend/src/layouts/pageHeader.ts | 42 +++++++++++++---- frontend/src/pages/account-settings.ts | 5 +- frontend/src/pages/org/archived-items.ts | 43 +++++++++-------- .../src/pages/org/browser-profiles-list.ts | 47 +++++++++---------- frontend/src/pages/org/collection-detail.ts | 3 +- frontend/src/pages/org/collections-list.ts | 19 ++++---- frontend/src/pages/org/dashboard.ts | 11 +++-- frontend/src/pages/org/settings/settings.ts | 34 +++++++------- frontend/src/pages/org/workflows-list.ts | 10 ++-- 10 files changed, 119 insertions(+), 142 deletions(-) diff --git a/frontend/src/layouts/page.ts b/frontend/src/layouts/page.ts index 652d220f..69fc104e 100644 --- a/frontend/src/layouts/page.ts +++ b/frontend/src/layouts/page.ts @@ -1,14 +1,11 @@ -import clsx from "clsx"; import { html, nothing, type TemplateResult } from "lit"; import { ifDefined } from "lit/directives/if-defined.js"; import { html as staticHtml, unsafeStatic } from "lit/static-html.js"; -import { pageNav, pageTitle } from "./pageHeader"; +import { pageHeader, pageNav } from "./pageHeader"; import { tw } from "@/utils/tailwind"; -type Content = string | TemplateResult | typeof nothing; - export function pageHeading({ content, level = 2, @@ -29,48 +26,6 @@ export function pageHeading({ `; } -// TODO consolidate with pageHeader.ts https://github.com/webrecorder/browsertrix/issues/2197 -export function pageHeader({ - title, - prefix, - suffix, - secondary, - actions, - border = true, - classNames, -}: { - title?: Content; - prefix?: Content; - suffix?: Content; - secondary?: Content; - actions?: Content; - border?: boolean; - classNames?: typeof tw; -}) { - return html` -
-
-
- ${prefix}${pageTitle(title)}${suffix} -
- ${secondary} -
- - ${actions - ? html`
- ${actions} -
` - : nothing} -
- `; -} - export function page( header: Parameters[0] & { breadcrumbs?: Parameters[0]; diff --git a/frontend/src/layouts/pageHeader.ts b/frontend/src/layouts/pageHeader.ts index b8678eea..028f92c6 100644 --- a/frontend/src/layouts/pageHeader.ts +++ b/frontend/src/layouts/pageHeader.ts @@ -7,6 +7,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { NavigateController } from "@/controllers/navigate"; import { tw } from "@/utils/tailwind"; +type Content = string | TemplateResult | typeof nothing; + export type Breadcrumb = { href?: string; content?: string | TemplateResult; @@ -101,22 +103,42 @@ export function pageNav(breadcrumbs: Breadcrumb[]) { return pageBreadcrumbs(breadcrumbs); } -// TODO consolidate with page.ts https://github.com/webrecorder/browsertrix/issues/2197 -export function pageHeader( - title?: string | TemplateResult, - suffix?: TemplateResult<1>, - classNames?: string, -) { +export function pageHeader({ + title, + prefix, + suffix, + secondary, + actions, + border = true, + classNames, +}: { + title?: Content; + prefix?: Content; + suffix?: Content; + secondary?: Content; + actions?: Content; + border?: boolean; + classNames?: typeof tw | string; +}) { return html`
- ${pageTitle(title)} - ${suffix - ? html`
${suffix}
` +
+
+ ${prefix}${pageTitle(title)}${suffix} +
+ ${secondary} +
+ + ${actions + ? html`
+ ${actions} +
` : nothing}
`; diff --git a/frontend/src/pages/account-settings.ts b/frontend/src/pages/account-settings.ts index ff045a5b..83432d01 100644 --- a/frontend/src/pages/account-settings.ts +++ b/frontend/src/pages/account-settings.ts @@ -144,7 +144,10 @@ export class AccountSettings extends BtrixElement { title=${msg("Account Settings")} > - ${pageHeader(msg("Account Settings"), undefined, tw`mb-3 lg:mb-5`)} + ${pageHeader({ + title: msg("Account Settings"), + classNames: tw`mb-3 lg:mb-5`, + })}
diff --git a/frontend/src/pages/org/archived-items.ts b/frontend/src/pages/org/archived-items.ts index 4f309fae..023d3ddc 100644 --- a/frontend/src/pages/org/archived-items.ts +++ b/frontend/src/pages/org/archived-items.ts @@ -264,29 +264,28 @@ export class CrawlsList extends BtrixElement { return html`
- ${pageHeader( - msg("Archived Items"), - when( - this.isCrawler, - () => html` - - (this.isUploadingArchive = true)} - ?disabled=${isArchivingDisabled(this.org)} + ${pageHeader({ + title: msg("Archived Items"), + actions: this.isCrawler + ? html` + - - ${msg("Upload WACZ")} - - - `, - ), - tw`mb-3`, - )} + (this.isUploadingArchive = true)} + ?disabled=${isArchivingDisabled(this.org)} + > + + ${msg("Upload WACZ")} + + + ` + : nothing, + classNames: tw`mb-3`, + })}
${listTypes.map(({ label, itemType, icon }) => { const isSelected = itemType === this.itemType; diff --git a/frontend/src/pages/org/browser-profiles-list.ts b/frontend/src/pages/org/browser-profiles-list.ts index 452a713c..b4b64fda 100644 --- a/frontend/src/pages/org/browser-profiles-list.ts +++ b/frontend/src/pages/org/browser-profiles-list.ts @@ -93,30 +93,29 @@ export class BrowserProfilesList extends BtrixElement { } render() { - return html`${pageHeader( - msg("Browser Profiles"), - when( - this.isCrawler, - () => html` - { - this.dispatchEvent( - new CustomEvent("select-new-dialog", { - detail: "browser-profile", - }) as SelectNewDialogEvent, - ); - }} - > - - ${msg("New Browser Profile")} - - `, - ), - tw`mb-3`, - )} + return html`${pageHeader({ + title: msg("Browser Profiles"), + actions: this.isCrawler + ? html` + { + this.dispatchEvent( + new CustomEvent("select-new-dialog", { + detail: "browser-profile", + }) as SelectNewDialogEvent, + ); + }} + > + + ${msg("New Browser Profile")} + + ` + : undefined, + classNames: tw`mb-3`, + })}
${this.renderTable()}
`; } diff --git a/frontend/src/pages/org/collection-detail.ts b/frontend/src/pages/org/collection-detail.ts index 0ce6e42a..6c741e38 100644 --- a/frontend/src/pages/org/collection-detail.ts +++ b/frontend/src/pages/org/collection-detail.ts @@ -13,8 +13,7 @@ import type { MarkdownEditor } from "@/components/ui/markdown-editor"; import type { PageChangeEvent } from "@/components/ui/pagination"; import { SelectCollectionAccess } from "@/features/collections/select-collection-access"; import type { ShareCollection } from "@/features/collections/share-collection"; -import { pageHeader } from "@/layouts/page"; -import { pageNav, type Breadcrumb } from "@/layouts/pageHeader"; +import { pageHeader, pageNav, type Breadcrumb } from "@/layouts/pageHeader"; import type { APIPaginatedList, APIPaginationQuery, diff --git a/frontend/src/pages/org/collections-list.ts b/frontend/src/pages/org/collections-list.ts index a15ef5a2..c48e7941 100644 --- a/frontend/src/pages/org/collections-list.ts +++ b/frontend/src/pages/org/collections-list.ts @@ -132,12 +132,10 @@ export class CollectionsList extends BtrixElement { render() { return html`
- ${pageHeader( - msg("Collections"), - when( - this.isCrawler, - () => html` - ${msg("New Collection")} - - `, - ), - tw`border-b-transparent`, - )} + ` + : nothing, + classNames: tw`border-b-transparent`, + })}
diff --git a/frontend/src/pages/org/dashboard.ts b/frontend/src/pages/org/dashboard.ts index 9b1c5b7a..1978ef25 100644 --- a/frontend/src/pages/org/dashboard.ts +++ b/frontend/src/pages/org/dashboard.ts @@ -15,6 +15,7 @@ import { RouteNamespace } from "@/routes"; import type { PublicCollection } from "@/types/collection"; import type { PublicOrgCollections } from "@/types/org"; import { humanizeExecutionSeconds } from "@/utils/executionTimeFormatter"; +import { tw } from "@/utils/tailwind"; type Metrics = { storageUsedBytes: number; @@ -84,9 +85,9 @@ export class Dashboard extends BtrixElement { this.metrics.storageUsedBytes >= this.metrics.storageQuotaBytes; return html` - ${pageHeader( - this.userOrg?.name, - html` + ${pageHeader({ + title: this.userOrg?.name, + actions: html` ${when( this.appState.isAdmin, () => @@ -153,8 +154,8 @@ export class Dashboard extends BtrixElement { `, )} `, - "mb-6", - )} + classNames: tw`border-b-transparent lg:mb-2`, + })}
${this.renderCard( diff --git a/frontend/src/pages/org/settings/settings.ts b/frontend/src/pages/org/settings/settings.ts index cd70229f..8c46fb92 100644 --- a/frontend/src/pages/org/settings/settings.ts +++ b/frontend/src/pages/org/settings/settings.ts @@ -1,7 +1,7 @@ import { localized, msg, str } from "@lit/localize"; import type { SlInput } from "@shoelace-style/shoelace"; import { serialize } from "@shoelace-style/shoelace/dist/utilities/form.js"; -import { html, unsafeCSS, type PropertyValues } from "lit"; +import { html, nothing, unsafeCSS, type PropertyValues } from "lit"; import { customElement, property, state } from "lit/decorators.js"; import { choose } from "lit/directives/choose.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -136,21 +136,23 @@ export class OrgSettings extends BtrixElement { } render() { - return html` ${pageHeader( - msg("Org Settings"), - when( - this.userInfo?.orgs && this.userInfo.orgs.length > 1 && this.userOrg, - (userOrg) => html` -
- ${msg( - html`Viewing - ${userOrg.name}`, - )} -
- `, - ), - tw`mb-3 lg:mb-5`, - )} + return html` ${pageHeader({ + title: msg("Org Settings"), + actions: + this.userInfo?.orgs && this.userInfo.orgs.length > 1 && this.userOrg + ? html` +
+ ${msg( + html`Viewing + ${this.userOrg.name}`, + )} +
+ ` + : nothing, + classNames: tw`mb-3 lg:mb-5`, + })}
diff --git a/frontend/src/pages/org/workflows-list.ts b/frontend/src/pages/org/workflows-list.ts index a807d69a..83e6b59e 100644 --- a/frontend/src/pages/org/workflows-list.ts +++ b/frontend/src/pages/org/workflows-list.ts @@ -208,9 +208,9 @@ export class WorkflowsList extends BtrixElement { render() { return html`
- ${pageHeader( - msg("Crawl Workflows"), - html` + ${pageHeader({ + title: msg("Crawl Workflows"), + actions: html` ${when( this.appState.isAdmin, () => @@ -304,8 +304,8 @@ export class WorkflowsList extends BtrixElement { `, )} `, - tw`border-b-transparent`, - )} + classNames: tw`border-b-transparent`, + })}
${this.renderControls()}