- ${this.renderCard(
- msg("Storage"),
- (metrics) => html`
- ${this.renderStorageMeter(metrics)}
- ${when(this.org, () => this.renderContent())}
+ ${this.renderOnboardingFinishedDialog()}
+ `;
+ }
+
+ private renderOnboardingFinishedDialog() {
+ return html` {
+ void this.onboardingFinishedDialog?.hide();
+ }}
+ >
+ {
+ AppStateService.partialUpdateOnboarding({ showOnboarding: true });
+ void this.onboardingFinishedDialog?.hide();
+ track(AnalyticsTrackEvent.UndoFinishSetUp);
+ }}
+ >
+ ${msg("I’m still getting set up")}
+
+ void this.onboardingFinishedDialog?.hide()}
+ >
+ ${msg("Go to Dashboard")}
+ `;
+ }
+
+ private renderContent() {
+ const showUsage =
+ this.org?.enablePublicProfile || hasUsage(this.org, this.metrics);
+ const showOnboarding =
+ this.appState.onboarding?.showOnboarding || !showUsage;
+
+ const content: TemplateResult[] = [];
+
+ if (showOnboarding) {
+ const org_name = html`${this.org?.name}`;
+ const primary = html`${this.appState.isTrialing
+ ? html`
+
+ ${this.renderStats()}
+ ${this.renderCollections()} `,
+ );
+ }
+
+ if (!showOnboarding) {
+ const primary = html`
+ ${dashboardHeading(msg("Onboarding Checklist"), { aside: true })}
+
+ `;
+ }
+
+ private renderGuideSearch() {
+ return html`
+ {
+ this.dispatchEvent(
+ new CustomEvent(
+ "btrix-user-guide-show",
+ {
+ detail: { path: "?q=" },
+ bubbles: true,
+ composed: true,
+ },
+ ),
+ );
+ }}
+ >
+
+ `;
+ }
+
+ private guardedRenderTrialInfo() {
+ return guard(
+ [this.org?.id, this.org?.subscription?.status],
+ this.renderTrialInfo,
+ );
+ }
+
+ private readonly renderTrialInfo = () => {
+ if (!this.org || !this.appState.isTrialing) return;
+
+ const { daysUntilTrialEnd, trialEndDate } = OrgStatusBanner.trialInfo(
+ this.org,
+ this.localize,
+ );
+ const warning = daysUntilTrialEnd <= TRIAL_DAYS_LEFT_SHOW_WARNING;
+
+ return html`
+ ${pageHeading({ content: msg("Usage Stats") })}
+
-
-
-
+
`;
+ }
+
+ private renderBody() {
+ return html`(
+ "btrix-user-guide-show",
+ {
+ detail: { path: this.path },
+ bubbles: true,
+ composed: true,
+ },
+ ),
+ );
+ };
+}
diff --git a/frontend/src/pages/org/dashboard/components/dashboard-guides.ts b/frontend/src/pages/org/dashboard/components/dashboard-guides.ts
new file mode 100644
index 0000000000..5fe63a7004
--- /dev/null
+++ b/frontend/src/pages/org/dashboard/components/dashboard-guides.ts
@@ -0,0 +1,309 @@
+import { consume } from "@lit/context";
+import { localized, msg } from "@lit/localize";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import { dashboardHeading } from "../layouts/dashboardHeading";
+import { generalGuides } from "../templates/generalGuides";
+
+import { BtrixElement } from "@/classes/BtrixElement";
+import { docsUrlContext, type DocsUrlContext } from "@/context/docs-url";
+import { type BtrixUserGuideShowEvent } from "@/events/btrix-user-guide-show";
+import { AnalyticsTrackEvent } from "@/trackEvents";
+import { track, type AnalyticsTrackProps } from "@/utils/analytics";
+import { hasUsage } from "@/utils/orgs";
+import { tw } from "@/utils/tailwind";
+
+import "./dashboard-guide-card";
+
+@customElement("btrix-dashboard-guides")
+@localized()
+export class DashboardGuides extends BtrixElement {
+ @consume({ context: docsUrlContext })
+ private readonly docsUrl?: DocsUrlContext;
+
+ @property({ type: Boolean })
+ onboarding = false;
+
+ render() {
+ return html`
+
+ ${this.onboarding
+ ? this.renderGettingStarted()
+ : html`
+
+
+ ${this.onboarding
+ ? html`
+
+
+
+ `;
+ }
+
+ private renderGettingStarted() {
+ return html`
+ `;
+}
diff --git a/frontend/src/pages/org/dashboard/layouts/primaryWithAside.ts b/frontend/src/pages/org/dashboard/layouts/primaryWithAside.ts
new file mode 100644
index 0000000000..7a4e17faea
--- /dev/null
+++ b/frontend/src/pages/org/dashboard/layouts/primaryWithAside.ts
@@ -0,0 +1,19 @@
+import { html, type TemplateResult } from "lit";
+
+import { tw } from "@/utils/tailwind";
+
+export function primaryWithAside(
+ primary: TemplateResult,
+ aside: TemplateResult,
+) {
+ return html`
+ `;
+}
diff --git a/frontend/src/pages/org/dashboard/templates/generalGuides.ts b/frontend/src/pages/org/dashboard/templates/generalGuides.ts
new file mode 100644
index 0000000000..64221e8c0a
--- /dev/null
+++ b/frontend/src/pages/org/dashboard/templates/generalGuides.ts
@@ -0,0 +1,114 @@
+import { msg } from "@lit/localize";
+import clsx from "clsx";
+import { html, type TemplateResult } from "lit";
+
+import { tw } from "@/utils/tailwind";
+
+export function generalGuides({
+ onboarding,
+ trialing,
+ billing,
+ classes,
+}: {
+ onboarding?: boolean;
+ trialing?: boolean;
+ billing?: boolean;
+ classes?: string;
+} = {}) {
+ const cards: TemplateResult[] = [];
+
+ if (onboarding) {
+ cards.push(
+ html`
+ ${msg("Introduction to Concepts")}
+ ${msg(html`An overview of concepts & terms used in Browsertrix`)}
+
+
+ ${msg("Navigating Your Org")}
+ ${msg("Where to find org features and reference guides")}
+ `,
+ );
+
+ if (trialing) {
+ cards.push(
+ html`
+ ${msg("Your Free Trial")}
+ ${msg("How to get the most out of your trial experience")}
+ `,
+ );
+ } else {
+ cards.push(
+ html`
+ ${msg("Org Settings")}
+ ${billing
+ ? msg("Manage your plan, invite team members, and more")
+ : msg("Change your org name, invite team members, and more")}
+ `,
+ );
+ }
+ } else {
+ cards.push(
+ html`
+ ${msg("Org Dashboard")}
+ ${msg("Read about the features of your dashboard")}
+
+
+ ${msg("Crawl Workflows")}
+ ${msg("Learn how to schedule, run, and manage crawls")}
+
+
+ ${msg("Browser Profiles")}
+ ${msg("Learn how to address crawl impediments like login prompts")}
+
+
+ ${msg("Collections")}
+ ${msg(
+ "Learn how to combine, de-duplicate, and share crawled content",
+ )}
+ `,
+ );
+ }
+
+ return html`
+
+ ${dashboardHeading(msg("Resources"), { aside: true })}
+
+ `;
+}
diff --git a/frontend/src/pages/org/index.ts b/frontend/src/pages/org/index.ts
index ffff84dd49..31246588ed 100644
--- a/frontend/src/pages/org/index.ts
+++ b/frontend/src/pages/org/index.ts
@@ -1,6 +1,7 @@
import { provide } from "@lit/context";
import { localized, msg, str } from "@lit/localize";
import { Task } from "@lit/task";
+import clsx from "clsx";
import { html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { choose } from "lit/directives/choose.js";
@@ -39,6 +40,10 @@ import type { QuotaUpdateDetail } from "@/controllers/api";
import needLogin from "@/decorators/needLogin";
import type { BtrixRequestOrgUpdate } from "@/events/btrix-request-org-update";
import type { SelectJobTypeEvent } from "@/features/crawl-workflows/new-workflow-dialog";
+import {
+ OrgStatusBanner,
+ OrgStatusName,
+} from "@/features/org/org-status-banner";
import { CommonTab, OrgTab, RouteNamespace, WorkflowTab } from "@/routes";
import type {
CrawlerChannelsAPIResponse,
@@ -51,6 +56,7 @@ import type { DuplicateWorkflowSettings } from "@/utils/crawl-workflows/settings
import { DEFAULT_MAX_SCALE, getDefaultProxyId } from "@/utils/crawler";
import { type OrgData } from "@/utils/orgs";
import { AppStateService } from "@/utils/state";
+import { tw } from "@/utils/tailwind";
import type { FormState as WorkflowFormState } from "@/utils/workflow";
import "./crawling";
@@ -146,6 +152,9 @@ export class Org extends BtrixElement {
@state()
private isCreateDialogVisible = false;
+ @state()
+ private showOrgStatusBanner = false;
+
private readonly [searchOrgContextKey] = new SearchOrgContextController(this);
private readonly [orgUploadsContextKey] = new OrgUploadsContextController(
this,
@@ -257,6 +266,22 @@ export class Org extends BtrixElement {
this.openDialog(dialogName);
}
}
+
+ if (
+ (changedProperties.has("orgTab") ||
+ changedProperties.has("appState.org")) &&
+ this.org
+ ) {
+ // Hide banner if on dashboard and actively trialing
+ if (this.orgTab === OrgTab.Dashboard) {
+ const alerts = OrgStatusBanner.alerts(this.org);
+ const trialStatus = alerts.find(({ test }) => test());
+
+ this.showOrgStatusBanner = trialStatus?.name !== OrgStatusName.Trialing;
+ } else {
+ this.showOrgStatusBanner = true;
+ }
+ }
}
private readonly onRequestUpdateOrg = (e: BtrixRequestOrgUpdate) => {
@@ -344,12 +369,20 @@ export class Org extends BtrixElement {
>
-
- ${this.renderStat({
- value: metrics.crawlCount,
- secondaryValue: this.localize.bytes(
- metrics.storageUsedCrawls,
- ),
- singleLabel: msg("Crawl"),
- pluralLabel: msg("Crawls"),
-
- iconProps: {
- name: "gear-wide-connected",
- class: storageColorClasses.crawls,
- },
- button: {
- url: "/items/crawl",
- },
- })}
- ${this.renderStat({
- value: metrics.uploadCount,
- secondaryValue: this.localize.bytes(
- metrics.storageUsedUploads,
- ),
- singleLabel: msg("Upload"),
- pluralLabel: msg("Uploads"),
-
- iconProps: {
- name: "upload",
- class: storageColorClasses.uploads,
- },
- button: {
- url: "/items/upload",
- },
- })}
- ${this.renderStat({
- value: metrics.profileCount,
- secondaryValue: this.localize.bytes(
- metrics.storageUsedProfiles,
- ),
- singleLabel: msg("Browser Profile"),
- pluralLabel: msg("Browser Profiles"),
- iconProps: {
- name: "window-fullscreen",
- class: storageColorClasses.browserProfiles,
- },
- button: {
- url: "/browser-profiles",
- },
- })}
- ${metrics.storageUsedSeedFiles ||
- metrics.storageUsedThumbnails ||
- metrics.storageUsedDedupeIndexes
- ? this.renderMiscStorage(metrics)
- : nothing}
-
-
-
- ${this.renderStat({
- value:
- metrics.workflowsRunningCount && metrics.maxConcurrentCrawls
- ? `${metrics.workflowsRunningCount} / ${metrics.maxConcurrentCrawls}`
- : metrics.workflowsRunningCount,
- singleLabel: msg("Crawl Running"),
- pluralLabel: msg("Crawls Running"),
- iconProps: {
- name: "dot",
- library: "app",
- class: metrics.workflowsRunningCount
- ? tw`animate-pulse text-green-600`
- : tw`text-neutral-600`,
- },
- button: {
- url: "/workflows?isCrawlRunning=true",
- },
- })}
- ${this.renderStat({
- value: metrics.workflowsQueuedCount,
- singleLabel: msg("Crawl Workflow Waiting"),
- pluralLabel: msg("Crawl Workflows Waiting"),
- iconProps: {
- name: "hourglass-split",
- class: tw`text-violet-600`,
- },
- })}
-
-
- ${this.renderStat({
- value: metrics.collectionsCount,
- singleLabel: msg("Collection Total"),
- pluralLabel: msg("Collections Total"),
- iconProps: { name: "collection-fill" },
- button: {
- url: "/collections",
- },
- })}
- ${this.renderStat({
- value: metrics.publicCollectionsCount,
- singleLabel: msg("Shareable Collection"),
- pluralLabel: msg("Shareable Collections"),
- iconProps: {
- name: "people-fill",
- class: tw`text-emerald-600`,
- },
- })}
-
+ ${msg("You’re all set up!")} + ${msg("Next, you may want to check out the following guides.")} +
+
+ ${generalGuides({
+ trialing: this.appState.isTrialing,
+ billing: this.appState.settings?.billingEnabled,
+ })}
+
+
+ + ${msg( + "These guides and more resources are always available at the bottom of your dashboard.", + )} +
+ +${this.guardedRenderTrialInfo()}
`
+ : nothing}
+
+
+ + ${msg("Welcome to Browsertrix")} +
++ ${msg(html`Let’s get you set up with your new org ${org_name}.`)} +
+
+ ${when(
+ showUsage,
+ () =>
+ html` {
+ AppStateService.partialUpdateOnboarding({
+ showOnboarding: false,
+ });
+ void this.onboardingFinishedDialog?.show();
+ track(AnalyticsTrackEvent.FinishSetUp);
+ }}
+ >
+ `,
+ )}
+
+ ${this.renderGuideSearch()} ${docsFeedback(docsEmail)}
`;
+
+ content.push(primaryWithAside(primary, aside));
+ }
+
+ if (showUsage) {
+ if (showOnboarding) {
+ content.push(html`${this.renderGuideSearch()} ${docsFeedback(docsEmail)}
`;
+
+ content.push(html`
+
+ ${onboardingChecklist(
+ onboardingSteps.map(({ key, label, description }) => ({
+ key,
+ content: label,
+ tooltip: description,
+ })),
+ )}
+
+
+
+ ${warning
+ ? html`
+
`;
+ };
+
+ private renderStats() {
+ return html`
+ ${this.appState.onboarding?.showOnboarding
+ ? nothing
+ : this.guardedRenderTrialInfo()}
+ ${when(
+ this.appState.settings?.billingEnabled,
+ () =>
+ html`
+ `,
)}
-
-
- ${pageHeading({
- content:
- this.collectionsView === CollectionGridView.Public
- ? msg("Public Collections")
- : msg("All Collections"),
+
+ {
- this.collectionPage = 1;
- this.collectionsView = (e.target as SlRadioGroup)
- .value as CollectionGridView;
- }}
- >
-
-
-
-
-
-
-
-
-
+ ${this.renderCard(
+ msg("Storage"),
+ (metrics) => html`
+ ${this.renderStorageMeter(metrics)}
+
- -
+ ${this.renderStat({
+ value: metrics.crawlCount,
+ secondaryValue: this.localize.bytes(metrics.storageUsedCrawls),
+ singleLabel: msg("Crawl"),
+ pluralLabel: msg("Crawls"),
+
+ iconProps: {
+ name: "gear-wide-connected",
+ class: storageColorClasses.crawls,
+ },
+ button: {
+ url: "/items/crawl",
+ },
})}
- ${this.collectionsView === CollectionGridView.Public
- ? html` —
-
- ${this.org?.enablePublicProfile
- ? msg("Visit public collections gallery")
- : msg("Preview public collections gallery")}
-
-
- ${this.org?.enablePublicProfile
- ? html`
+
+
-
+ ${this.renderStat({
+ value: this.localize.bytes(metrics.storageUsedBytes, {
+ compactDisplay: "short",
+ }),
+ singleLabel: msg("Total"),
+ iconProps: {
+ name: "database-fill",
+ },
+ })}
`,
)}
+
+ `,
+ )}
+ ${this.renderCard(
+ msg("Crawling"),
+ (metrics) => html`
+ ${this.renderCrawlingMeter(metrics)}
+
`;
+ }
- -
+ ${this.renderStat({
+ value:
+ metrics.workflowsRunningCount && metrics.maxConcurrentCrawls
+ ? `${metrics.workflowsRunningCount} / ${metrics.maxConcurrentCrawls}`
+ : metrics.workflowsRunningCount,
+ singleLabel: msg("Crawl Running"),
+ pluralLabel: msg("Crawls Running"),
+ iconProps: {
+ name: "dot",
+ library: "app",
+ class: metrics.workflowsRunningCount
+ ? tw`animate-pulse text-green-600`
+ : tw`text-neutral-600`,
+ },
+ button: {
+ url: "/workflows?isCrawlRunning=true",
+ },
+ })}
+ ${this.renderStat({
+ value: metrics.workflowsQueuedCount,
+ singleLabel: msg("Crawl Workflow Waiting"),
+ pluralLabel: msg("Crawl Workflows Waiting"),
+ iconProps: {
+ name: "hourglass-split",
+ class: tw`text-violet-600`,
+ },
+ })}
+
-
+ ${this.renderStat({
+ value: metrics.collectionsCount,
+ singleLabel: msg("Collection Total"),
+ pluralLabel: msg("Collections Total"),
+ iconProps: { name: "collection-fill" },
+ button: {
+ url: "/collections",
+ },
+ })}
+ ${this.renderStat({
+ value: metrics.publicCollectionsCount,
+ singleLabel: msg("Shareable Collection"),
+ pluralLabel: msg("Shareable Collections"),
+ iconProps: {
+ name: "people-fill",
+ class: tw`text-emerald-600`,
+ },
+ })}
+
- {
- this.collectionRefreshing = e.detail.id;
- void this.collections.run([
- this.orgId,
- this.collectionsView,
- this.collectionPage,
- ++this.cacheBust,
- ]);
- }}
- >
- ${this.renderNoPublicCollections()}
- ${this.collectionsView === CollectionGridView.Public
- ? msg("Your org doesn’t have any public collections.")
- : msg("Your org doesn’t have any collections yet.")}
- ${this.collections.value &&
- this.collections.value.total > this.collections.value.items.length
- ? html`
- {
- this.collectionPage = e.detail.page;
- }}
- slot="pagination"
+ private renderCollections() {
+ const noCollections =
+ this.collections.value && !this.collections.value.items.length;
+
+ return html`
+ ${pageHeading({
+ content:
+ this.collectionsView === CollectionGridView.Public
+ ? msg("Public Collections")
+ : msg("All Collections"),
+ })}
+
+ `
+ : nothing}
+
+ ${this.collections.status === TaskStatus.PENDING &&
+ this.collections.value
+ ? html`
`;
}
private renderMiscStorage(metrics: Metrics) {
diff --git a/frontend/src/pages/org/dashboard/components/dashboard-guide-card.ts b/frontend/src/pages/org/dashboard/components/dashboard-guide-card.ts
new file mode 100644
index 0000000000..693c4afb79
--- /dev/null
+++ b/frontend/src/pages/org/dashboard/components/dashboard-guide-card.ts
@@ -0,0 +1,138 @@
+import { consume } from "@lit/context";
+import { localized, msg } from "@lit/localize";
+import type { SlIcon } from "@shoelace-style/shoelace";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import { TailwindElement } from "@/classes/TailwindElement";
+import { docsUrlContext, type DocsUrlContext } from "@/context/docs-url";
+import { type BtrixUserGuideShowEvent } from "@/events/btrix-user-guide-show";
+import { tw } from "@/utils/tailwind";
+
+/**
+ * @slot title
+ * @slot label
+ * @cssPart base
+ * @cssPart label
+ * @cssPart icon
+ * @cssPart icon-background
+ */
+@customElement("btrix-dashboard-guide-card")
+@localized()
+export class DashboardGuideCard extends TailwindElement {
+ @consume({ context: docsUrlContext })
+ private readonly docsUrl?: DocsUrlContext;
+
+ @property({ type: String })
+ variant: "button" | "card" = "card";
+
+ @property({ type: String })
+ icon?: SlIcon["name"];
+
+ @property({ type: String })
+ path?: string;
+
+ render() {
+ const link = `${this.docsUrl}user-guide/${this.path}`;
+
+ if (this.variant === "button") {
+ return html`
+
+ ${when(
+ this.collectionsView === CollectionGridView.Public,
+ () =>
+ html`
+
+ ${when(
+ this.appState.isAdmin,
+ () =>
+ html`
-
- `
- : nothing}
-
- ${this.collections.status === TaskStatus.PENDING &&
- this.collections.value
- ? html`
-
-
- `;
+
+ `,
+ )}`,
+ )}
+ ${when(
+ this.appState.isCrawler,
+ () => html`
+
+
+ `,
+ )}
+ {
+ this.collectionPage = 1;
+ this.collectionsView = (e.target as SlRadioGroup)
+ .value as CollectionGridView;
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+ {
+ this.collectionRefreshing = e.detail.id;
+ void this.collections.run([
+ this.orgId,
+ this.collectionsView,
+ this.collectionPage,
+ ++this.cacheBust,
+ ]);
+ }}
+ >
+ ${this.renderNoPublicCollections()}
+ ${this.collectionsView === CollectionGridView.Public
+ ? msg("Your org doesn’t have any public collections.")
+ : msg("Your org doesn’t have any collections yet.")}
+ ${this.collections.value &&
+ this.collections.value.total > this.collections.value.items.length
+ ? html`
+ {
+ this.collectionPage = e.detail.page;
+ }}
+ slot="pagination"
>
-
`
- : nothing}
-
+
`
+ : nothing}
+
+ ${this.renderIcon()}
+
+ ${msg("View Guide")}
+
+
+
+ ${this.renderTitle()} ${this.renderBody()}
+
+ `;
+ }
+
+ return html``;
+ }
+
+ private renderIcon() {
+ if (!this.icon) return;
+
+ return html`
+
`;
+ }
+
+ private renderTitle() {
+ return html`
+
`;
+ }
+
+ private renderBody() {
+ return html`
+
+ ${this.renderGeneralGuides()}
+
`}
+
+ ${dashboardHeading(msg("Quick Start"))}
+
`
+ : dashboardHeading(msg("Crawling"))}
+ ${this.renderCrawlingGuides()}
+ + ${msg("What would you like to archive?")} +
+
+
+ ${this.renderSettingsGuides()}
+
+
`;
+ }
+
+ private renderGeneralGuides({ classes }: { classes?: string } = {}) {
+ return generalGuides({
+ onboarding: this.onboarding,
+ trialing: this.appState.isTrialing,
+ billing: this.appState.settings?.billingEnabled,
+ classes,
+ });
+ }
+
+ private renderCrawlingGuides() {
+ const cardClasses = tw`col-span-full block h-full @container/card @xl/org:col-span-1`;
+
+ const trackProps = {
+ trialing: this.appState.isTrialing,
+ has_usage: hasUsage(this.org),
+ } satisfies AnalyticsTrackProps;
+
+ return html`
+
+
+
+ ${dashboardHeading(msg("Getting Started"), {
+ leading: false,
+ })}
+
+ + ${msg( + "Whether you’re new to web archiving or Browsertrix, we have guides to help you get started.", + )} +
+
+ ${this.renderGeneralGuides({
+ classes: tw`@4xl/org:rounded-none @4xl/org:border-0`,
+ })}
+
+
+
+ track(AnalyticsTrackEvent.OpenedCrawlingOnePageGuide, trackProps)}
+ >
+ ${msg("One Page")}
+ ${msg("Archive a single page on a website")}
+
+
+ track(
+ AnalyticsTrackEvent.OpenedCrawlingSocialMediaGuide,
+ trackProps,
+ )}
+ >
+ ${msg("Social Media Page")}
+ ${msg("Archive a social media post or profile")}
+
+
+ track(AnalyticsTrackEvent.OpenedCrawlingWebsiteGuide, trackProps)}
+ >
+ ${msg("Entire Website")}
+ ${msg("Archive every page on a website")}
+
+
+ `;
+ }
+
+ private renderSettingsGuides() {
+ const sectionClasses = tw`col-span-full flex flex-col @2xl/org:col-span-1`;
+ const headingClasses = tw`mb-3 text-base font-medium leading-6 @4xl/org:text-sm`;
+ const listClasses = tw`flex-1 [&>li:not(:last-of-type)]:mb-3.5`;
+
+ return html`
+
+
+
+
+
+
+
`;
+ }
+
+ private readonly renderGuideLink = ({
+ label,
+ icon,
+ path,
+ }: {
+ label: string;
+ icon: string;
+ path: string;
+ }) => {
+ const link = `${this.docsUrl}user-guide/${path}`;
+
+ return html``;
+ };
+}
diff --git a/frontend/src/pages/org/dashboard/layouts/dashboardHeading.ts b/frontend/src/pages/org/dashboard/layouts/dashboardHeading.ts
new file mode 100644
index 0000000000..425cbb14f1
--- /dev/null
+++ b/frontend/src/pages/org/dashboard/layouts/dashboardHeading.ts
@@ -0,0 +1,26 @@
+import clsx from "clsx";
+import { html } from "lit";
+
+import { tw } from "@/utils/tailwind";
+
+export function dashboardHeading(
+ content: string,
+ {
+ aside,
+ leading = true,
+ classes,
+ }: { aside?: boolean; leading?: boolean; classes?: string } = {},
+) {
+ return html`${msg("Crawl Settings")}
+-
+
- + ${this.renderGuideLink({ + label: msg("Exclude pages from the crawl"), + icon: "file-earmark-minus", + path: "workflow-setup/#exclude-pages", + })} + +
- + ${this.renderGuideLink({ + label: msg("Include extra pages"), + icon: "file-earmark-plus", + path: "workflow-setup/#additional-scope", + })} + +
- + ${this.renderGuideLink({ + label: msg("Watch pages in real-time"), + icon: "eye-fill", + path: "running-crawl/#watch-crawl", + })} + +
- + ${this.renderGuideLink({ + label: msg("Avoid crawler traps in real-time"), + icon: "shield-exclamation", + path: "running-crawl/#live-exclusion-editing", + })} + +
- + ${this.renderGuideLink({ + label: msg("Review, rate, and comment on crawled content"), + icon: "chat-square-text", + path: "quality-assurance", + })} + +
${msg("Org Settings")}
+-
+
- + ${this.renderGuideLink({ + label: msg("Manage billing"), + icon: "credit-card-fill", + path: "org-settings/#billing", + })} + +
- + ${this.renderGuideLink({ + label: msg("Invite team members"), + icon: "people-fill", + path: "org-members", + })} + +
- + ${this.renderGuideLink({ + label: msg("Import a collection"), + icon: "box-arrow-in-down", + path: "archived-items/#uploading-web-archives", + })} + +
- + ${this.renderGuideLink({ + label: msg("Create a public archive"), + icon: "globe", + path: "public-collections-gallery", + })} + +
- + ${this.renderGuideLink({ + label: msg("Enable deduplication"), + icon: "stack", + path: "deduplication/#enable-deduplication-across-your-entire-organization", + })} + +
${msg("Account Settings")}
+-
+
- + ${this.renderGuideLink({ + label: msg("Change your email"), + icon: "person-badge", + path: "user-settings", + })} + +
- + ${this.renderGuideLink({ + label: msg("Change your password"), + icon: "shield-lock-fill", + path: "change-password/#change-password", + })} + +
- + ${this.renderGuideLink({ + label: msg("Choose your preferred language"), + icon: "translate", + path: "user-settings/#language", + })} + +
- + ${this.renderGuideLink({ + label: msg("Change how your name appears to team members"), + icon: "file-person-fill", + path: "user-settings/#display-name", + })} + +
+ ${content} +
+
+
`;
+}
diff --git a/frontend/src/pages/org/dashboard/templates/docsFeedback.ts b/frontend/src/pages/org/dashboard/templates/docsFeedback.ts
new file mode 100644
index 0000000000..1d35c90ac1
--- /dev/null
+++ b/frontend/src/pages/org/dashboard/templates/docsFeedback.ts
@@ -0,0 +1,25 @@
+import { msg } from "@lit/localize";
+import { html } from "lit";
+
+export function docsFeedback(email: string) {
+ return html` ${primary}
+
+
+
+ + ${msg("Can’t find a specific guide?")} +
++ ${msg("Let us know what you’re looking for and how we can help.")} +
+
+
+
+
+
+ ${cards}
+
+ `;
+}
diff --git a/frontend/src/pages/org/dashboard/templates/onboardingChecklist.ts b/frontend/src/pages/org/dashboard/templates/onboardingChecklist.ts
new file mode 100644
index 0000000000..8f00152380
--- /dev/null
+++ b/frontend/src/pages/org/dashboard/templates/onboardingChecklist.ts
@@ -0,0 +1,52 @@
+import { html, type TemplateResult } from "lit";
+
+import { type OnboardingStep } from "@/utils/onboarding/onboardingEvents";
+import appState from "@/utils/state";
+
+export function onboardingChecklist(
+ items: {
+ key: OnboardingStep;
+ content: TemplateResult | string;
+ tooltip: TemplateResult | string;
+ }[],
+) {
+ return html`-
+ ${items.map((item, i) => {
+ const checked = appState.onboarding?.stepsComplete?.[item.key];
+
+ return html`
+
-
+ ${i === 0
+ ? html`+ +` + : i === items.length - 1 + ? html`+ ++ ++ +` + : html``} ++ ++ +
+ +${item.tooltip}+ +
+ `;
+ })}
+
-
+
- + ${externalLink({ + label: msg("Community Forum"), + icon: "menu-up", + href: "https://forum.webrecorder.net/", + })} + +
- + ${externalLink({ + label: msg("Product Announcements"), + icon: "megaphone", + href: "https://webrecorder.net/blog/product/", + })} + +
- + ${externalLink({ + label: msg("Feature Roadmap"), + icon: "kanban", + href: "https://github.com/orgs/webrecorder/projects/9/views/20", + rel: "noopener noreferrer nofollow", + })} + +
- + ${externalLink({ + label: msg(html`Webinars & Presentations`), + icon: "youtube", + href: "https://www.youtube.com/@webrecorder", + rel: "noopener noreferrer nofollow", + })} + +
- + ${externalLink({ + label: msg("More Resources"), + icon: "journal-bookmark", + href: "https://webrecorder.net/resources/", + })} + +
-
${when(this.userOrg, (userOrg) =>
@@ -549,8 +582,6 @@ export class Org extends BtrixElement {
private readonly renderDashboard = () => {
return html`
+
${this.orgCollections.render({
complete: (profile) =>
profile
diff --git a/frontend/src/plurals/trial-days-remaining.ts b/frontend/src/plurals/trial-days-remaining.ts
new file mode 100644
index 0000000000..59dc1f2899
--- /dev/null
+++ b/frontend/src/plurals/trial-days-remaining.ts
@@ -0,0 +1,34 @@
+import { msg, str } from "@lit/localize";
+
+import localize from "@/utils/localize";
+import { pluralize } from "@/utils/pluralize";
+
+export const pluralOfTrialDaysRemaining = (number: number) => {
+ const count = localize.number(number);
+ return pluralize(number, {
+ zero: msg("0 days left of trial", {
+ desc: "plural form of 'X days left of trial' for zero trial days remaining",
+ id: "trial_days_remaining.plural.zero",
+ }),
+ one: msg("1 day left of trial", {
+ desc: "plural form of 'X days left of trial' for one active crawl",
+ id: "trial_days_remaining.plural.one",
+ }),
+ two: msg("2 days left of trial", {
+ desc: "plural form of 'X days left of trial' for two trial days remaining",
+ id: "trial_days_remaining.plural.two",
+ }),
+ few: msg(str`${count} days left of trial`, {
+ desc: "plural form of 'X days left of trial' for few trial days remaining",
+ id: "trial_days_remaining.plural.few",
+ }),
+ many: msg(str`${count} days left of trial`, {
+ desc: "plural form of 'X days left of trial' for many trial days remaining",
+ id: "trial_days_remaining.plural.many",
+ }),
+ other: msg(str`${count} days left of trial`, {
+ desc: "plural form of 'X days left of trial' for other trial days remaining",
+ id: "trial_days_remaining.plural.other",
+ }),
+ });
+};
diff --git a/frontend/src/stories/decorators/orgDecorator.ts b/frontend/src/stories/decorators/orgDecorator.ts
index b9dbd908cf..0d2d7b350a 100644
--- a/frontend/src/stories/decorators/orgDecorator.ts
+++ b/frontend/src/stories/decorators/orgDecorator.ts
@@ -1,58 +1,128 @@
import type { StoryContext, StoryFn } from "@storybook/web-components";
-import { html, LitElement } from "lit";
+import { addDays } from "date-fns/fp";
+import { html } from "lit";
import { customElement, property } from "lit/decorators.js";
import mapValues from "lodash/fp/mapValues";
import orgMock from "@/__mocks__/api/orgs/[id]";
+import { TailwindElement } from "@/classes/TailwindElement";
+import { SubscriptionStatus } from "@/types/billing";
+import { type Onboarding } from "@/types/onboarding";
+import { type OrgData } from "@/types/org";
import { AppStateService } from "@/utils/state";
-const { users, usage, quotas, ...org } = orgMock;
+const {
+ users,
+ usage,
+ quotas,
+ bytesStored,
+ bytesStoredCrawls,
+ bytesStoredUploads,
+ bytesStoredProfiles,
+ ...org
+} = orgMock;
-export { orgMock };
+export const subscription = {
+ subId: "storybook-subscription-id",
+ planId: "starter",
+ status: SubscriptionStatus.Active,
+ futureCancelDate: addDays(7)(new Date()).toISOString(),
+ readOnlyOnCancel: false,
+};
+
+export { orgMock, subscription as orgSubscriptionMock };
export type StorybookOrgProps = {
- orgUsers?: boolean;
- orgUsage?: boolean;
- orgQuotas?: boolean;
+ orgUsers?: boolean | OrgData["users"];
+ orgUsage?: boolean | OrgData["usage"];
+ orgQuotas?: boolean | OrgData["quotas"];
+ orgSubscription?: boolean | OrgData["subscription"];
+ orgOnboarding?: Onboarding;
};
@customElement("btrix-storybook-org")
-export class StorybookOrg extends LitElement {
- @property({ type: Boolean })
- users?: boolean;
+export class StorybookOrg extends TailwindElement {
+ @property({ type: Object })
+ users?: OrgData["users"];
+
+ @property({ type: Object })
+ usage?: OrgData["usage"];
- @property({ type: Boolean })
- usage?: boolean;
+ @property({ type: Object })
+ quotas?: OrgData["quotas"];
- @property({ type: Boolean })
- quotas?: boolean;
+ @property({ type: Object })
+ subscription?: OrgData["subscription"];
+
+ @property({ type: Object })
+ onboarding?: Partial;
connectedCallback(): void {
super.connectedCallback();
+ // TODO Allow editing settings
+ AppStateService.updateSettings({
+ registrationEnabled: false,
+ jwtTokenLifetime: 0,
+ defaultBehaviorTimeSeconds: 0,
+ defaultPageLoadTimeSeconds: 0,
+ maxPagesPerCrawl: 0,
+ numBrowsersPerInstance: 0,
+ maxBrowserWindows: 0,
+ billingEnabled: true,
+ signUpUrl: "",
+ salesEmail: "",
+ supportEmail: "",
+ });
AppStateService.updateOrg({
...org,
- users: this.users ? users : {},
- usage: this.usage ? usage : {},
- quotas: this.quotas
- ? quotas
- : (mapValues(() => 0, quotas) as typeof quotas),
+ ...(this.usage
+ ? {
+ bytesStored,
+ bytesStoredCrawls,
+ bytesStoredUploads,
+ bytesStoredProfiles,
+ }
+ : {
+ bytesStored: 0,
+ bytesStoredCrawls: 0,
+ bytesStoredUploads: 0,
+ bytesStoredProfiles: 0,
+ }),
+ users: this.users || {},
+ usage: this.usage || {},
+ subscription: this.subscription || null,
+ quotas: this.quotas || (mapValues(() => 0, quotas) as typeof quotas),
+ note: "",
});
+
+ if (this.onboarding) {
+ AppStateService.partialUpdateOnboarding(this.onboarding);
+ }
}
render() {
- return html`
${story(args, context)}
`;
diff --git a/frontend/src/stories/decorators/userDecorator.ts b/frontend/src/stories/decorators/userDecorator.ts
index 956bfb1055..0829679065 100644
--- a/frontend/src/stories/decorators/userDecorator.ts
+++ b/frontend/src/stories/decorators/userDecorator.ts
@@ -3,20 +3,21 @@ import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import userMock from "@/__mocks__/api/users/me";
+import { AccessCode } from "@/types/org";
import { AppStateService } from "@/utils/state";
import { formatAPIUser } from "@/utils/user";
export { userMock };
export type StorybookUserProps = {
- user?: boolean;
+ user?: boolean | "admin" | "crawler";
auth?: boolean;
};
@customElement("btrix-storybook-user")
export class StorybookOrg extends LitElement {
- @property({ type: Boolean })
- user?: boolean;
+ @property({ type: String })
+ user?: "admin" | "crawler" | "viewer";
@property({ type: Boolean })
auth?: boolean;
@@ -33,7 +34,20 @@ export class StorybookOrg extends LitElement {
}
if (this.user) {
- AppStateService.updateUser(formatAPIUser(userMock));
+ AppStateService.updateUser(
+ formatAPIUser({
+ ...userMock,
+ orgs: userMock.orgs.map((org) => ({
+ ...org,
+ role:
+ this.user === "admin"
+ ? AccessCode.owner
+ : this.user === "crawler"
+ ? AccessCode.crawler
+ : AccessCode.viewer,
+ })),
+ }),
+ );
}
}
@@ -46,7 +60,10 @@ export function userDecorator(story: StoryFn, context: StoryContext) {
const { args } = context;
const { user, auth } = args as StorybookUserProps;
- return html`
+ return html`
${story(args, context)}
`;
}
diff --git a/frontend/src/stories/pages/dashboard/Dashboard.stories.ts b/frontend/src/stories/pages/dashboard/Dashboard.stories.ts
new file mode 100644
index 0000000000..4a443c7ea8
--- /dev/null
+++ b/frontend/src/stories/pages/dashboard/Dashboard.stories.ts
@@ -0,0 +1,329 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { addDays } from "date-fns/fp";
+import { delay, http, HttpResponse } from "msw";
+import { type DecoratorFunction } from "storybook/internal/types";
+
+import { renderComponent, type RenderProps } from "./Dashboard";
+import {
+ collections,
+ metrics,
+ metricsWithStorageQuota,
+ metricsWithUsage,
+ quotas,
+ quotasWithExecutionMinutes,
+ subscription,
+} from "./data";
+
+import collectionsMock from "@/__mocks__/api/collections";
+import { TRIAL_DAYS_LEFT_SHOW_WARNING } from "@/features/org/org-status-banner";
+import {
+ orgDecorator,
+ orgMock,
+ type StorybookOrgProps,
+} from "@/stories/decorators/orgDecorator";
+import {
+ userDecorator,
+ type StorybookUserProps,
+} from "@/stories/decorators/userDecorator";
+import { type APIPaginatedList } from "@/types/api";
+import { SubscriptionStatus } from "@/types/billing";
+import { type Collection } from "@/types/collection";
+import { type Metrics } from "@/types/org";
+
+const meta = {
+ title: "Pages/Dashboard",
+ component: "btrix-dashboard",
+ tags: ["autodocs"],
+ decorators: [
+ userDecorator as DecoratorFunction,
+ orgDecorator as DecoratorFunction,
+ ],
+ render: renderComponent,
+ argTypes: {},
+ args: {
+ user: "crawler",
+ auth: true,
+ orgUsers: true,
+ },
+ loaders: [
+ // Clear onboarding info from local storage
+ () => window.localStorage.clear(),
+ ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+const collectionsRequest = () =>
+ http.get(/\/collections/, async ({ request }) => {
+ const url = new URL(request.url);
+
+ await delay(500);
+
+ const collectionItems =
+ url.searchParams.get("access") === "public"
+ ? collectionsMock.items.filter(({ access }) => access === "public")
+ : collectionsMock.items;
+ const pageSize =
+ url.searchParams.get("pageSize") ?? collectionsMock.pageSize;
+
+ return HttpResponse.json>({
+ total: collectionItems.length,
+ page: 1,
+ pageSize,
+ items: collectionItems.slice(0, +pageSize),
+ } as APIPaginatedList);
+ });
+const emptyCollectionsRequest = () =>
+ http.get(/\/collections/, async () => {
+ await delay(500);
+ return HttpResponse.json>(collections);
+ });
+
+export const WithoutUsage: Story = {
+ args: {
+ orgQuotas: {
+ ...quotas,
+ ...quotasWithExecutionMinutes,
+ },
+ },
+ parameters: {
+ msw: {
+ handlers: [
+ http.get(/\/metrics/, async () => {
+ await delay(500);
+ return HttpResponse.json({
+ ...metrics,
+ ...metricsWithStorageQuota,
+ });
+ }),
+ emptyCollectionsRequest(),
+ ],
+ },
+ },
+};
+
+export const WithoutCollections: Story = {
+ args: {
+ orgQuotas: {
+ ...quotas,
+ ...quotasWithExecutionMinutes,
+ },
+ orgUsage: true,
+ },
+ parameters: {
+ msw: {
+ handlers: [
+ http.get(/\/metrics/, async () => {
+ await delay(500);
+ return HttpResponse.json({
+ ...metrics,
+ ...metricsWithStorageQuota,
+ ...metricsWithUsage,
+ });
+ }),
+ emptyCollectionsRequest(),
+ ],
+ },
+ },
+};
+
+export const WithCollections: Story = {
+ args: {
+ orgQuotas: {
+ ...quotas,
+ ...quotasWithExecutionMinutes,
+ },
+ orgUsage: true,
+ },
+ parameters: {
+ msw: {
+ handlers: [
+ http.get(/\/metrics/, async () => {
+ await delay(500);
+ return HttpResponse.json({
+ ...metrics,
+ ...metricsWithStorageQuota,
+ ...metricsWithUsage,
+ });
+ }),
+ collectionsRequest(),
+ ],
+ },
+ },
+};
+
+export const OnboardingWithUsage: Story = {
+ args: {
+ orgQuotas: {
+ ...quotas,
+ ...quotasWithExecutionMinutes,
+ },
+ orgUsage: true,
+ orgOnboarding: {
+ orgId: orgMock.id,
+ showOnboarding: true,
+ },
+ },
+ parameters: {
+ msw: {
+ handlers: [
+ http.get(/\/metrics/, async () => {
+ await delay(500);
+ return HttpResponse.json({
+ ...metrics,
+ ...metricsWithStorageQuota,
+ ...metricsWithUsage,
+ });
+ }),
+ collectionsRequest(),
+ ],
+ },
+ },
+};
+
+export const OnboardingFinished: Story = {
+ args: {
+ orgQuotas: {
+ ...quotas,
+ ...quotasWithExecutionMinutes,
+ },
+ orgUsage: true,
+ showOnboardingFinishedDialog: true,
+ },
+ parameters: {
+ msw: {
+ handlers: [
+ http.get(/\/metrics/, async () => {
+ await delay(500);
+ return HttpResponse.json({
+ ...metrics,
+ ...metricsWithStorageQuota,
+ ...metricsWithUsage,
+ });
+ }),
+ collectionsRequest(),
+ ],
+ },
+ },
+};
+
+export const TrialWithoutUsage: Story = {
+ args: {
+ orgQuotas: {
+ ...quotas,
+ ...quotasWithExecutionMinutes,
+ },
+ orgSubscription: {
+ ...subscription,
+ status: SubscriptionStatus.Trialing,
+ },
+ },
+ parameters: {
+ msw: {
+ handlers: [
+ http.get(/\/metrics/, async () => {
+ await delay(500);
+ return HttpResponse.json({
+ ...metrics,
+ ...metricsWithStorageQuota,
+ });
+ }),
+ emptyCollectionsRequest(),
+ ],
+ },
+ },
+};
+
+export const TrialWithUsage: Story = {
+ args: {
+ orgQuotas: {
+ ...quotas,
+ ...quotasWithExecutionMinutes,
+ },
+ orgUsage: true,
+ orgSubscription: {
+ ...subscription,
+ status: SubscriptionStatus.Trialing,
+ },
+ },
+ parameters: {
+ msw: {
+ handlers: [
+ http.get(/\/metrics/, async () => {
+ await delay(500);
+ return HttpResponse.json({
+ ...metrics,
+ ...metricsWithStorageQuota,
+ ...metricsWithUsage,
+ });
+ }),
+ emptyCollectionsRequest(),
+ ],
+ },
+ },
+};
+
+export const TrialEndingWithoutUsage: Story = {
+ args: {
+ orgQuotas: {
+ ...quotas,
+ ...quotasWithExecutionMinutes,
+ },
+ orgSubscription: {
+ ...subscription,
+ status: SubscriptionStatus.Trialing,
+ futureCancelDate: addDays(
+ TRIAL_DAYS_LEFT_SHOW_WARNING,
+ new Date(),
+ ).toISOString(),
+ },
+ },
+ parameters: {
+ msw: {
+ handlers: [
+ http.get(/\/metrics/, async () => {
+ await delay(500);
+ return HttpResponse.json({
+ ...metrics,
+ ...metricsWithStorageQuota,
+ });
+ }),
+ emptyCollectionsRequest(),
+ ],
+ },
+ },
+};
+
+export const TrialEndingWithUsage: Story = {
+ args: {
+ orgQuotas: {
+ ...quotas,
+ ...quotasWithExecutionMinutes,
+ },
+ orgUsage: true,
+ orgSubscription: {
+ ...subscription,
+ status: SubscriptionStatus.Trialing,
+ futureCancelDate: addDays(
+ TRIAL_DAYS_LEFT_SHOW_WARNING,
+ new Date(),
+ ).toISOString(),
+ },
+ },
+ parameters: {
+ msw: {
+ handlers: [
+ http.get(/\/metrics/, async () => {
+ await delay(500);
+ return HttpResponse.json({
+ ...metrics,
+ ...metricsWithStorageQuota,
+ ...metricsWithUsage,
+ });
+ }),
+ emptyCollectionsRequest(),
+ ],
+ },
+ },
+};
diff --git a/frontend/src/stories/pages/dashboard/Dashboard.ts b/frontend/src/stories/pages/dashboard/Dashboard.ts
new file mode 100644
index 0000000000..d7e6d6abfe
--- /dev/null
+++ b/frontend/src/stories/pages/dashboard/Dashboard.ts
@@ -0,0 +1,17 @@
+import { html } from "lit";
+
+import "@/features/collections";
+import "@/features/meters";
+import "@/pages/org/dashboard";
+
+import type { Dashboard } from "@/pages/org/dashboard";
+import { type StorybookOrgProps } from "@/stories/decorators/orgDecorator";
+import { type StorybookUserProps } from "@/stories/decorators/userDecorator";
+
+export type RenderProps = Dashboard & StorybookUserProps & StorybookOrgProps;
+
+export const renderComponent = (props: Partial) => {
+ return html`;
+
+export const metricsWithStorageQuota = {
+ storageQuotaBytes: orgMock.quotas.storageQuota,
+} satisfies Partial;
+
+export const subscription = {
+ ...orgSubscriptionMock,
+} satisfies OrgData["subscription"];
+
+export const quotas = {
+ ...orgMock.quotas,
+} satisfies OrgData["quotas"];
+
+export const quotasWithExecutionMinutes = {
+ maxExecMinutesPerMonth: 180,
+} satisfies Partial;
+
+export const collections = {
+ total: 0,
+ page: 1,
+ pageSize: 1000,
+ items: [],
+} satisfies APIPaginatedList;
diff --git a/frontend/src/theme.stylesheet.css b/frontend/src/theme.stylesheet.css
index fa5a394c68..5ad161ee98 100644
--- a/frontend/src/theme.stylesheet.css
+++ b/frontend/src/theme.stylesheet.css
@@ -35,10 +35,22 @@
/* Replay */
--btrix-rwp-height: calc(100vh - 4rem);
+ /* Layout */
+ --btrix-page-width: 82.5rem; /* 14 4.5rem columns with 1.5rem gutter (1320px) */
+ --btrix-user-guide-width: 31rem;
+ --btrix-full-without-user-guide-width: calc(
+ 100vw - var(--btrix-user-guide-width)
+ );
+ --btrix-3xl-with-user-guide-margin: calc(
+ calc(
+ var(--btrix-full-without-user-guide-width) - var(--btrix-page-width)
+ ) /
+ 2
+ );
+
/*
* Shoelace Theme Tokens
- */
- /* Primary */
+ */ /* Primary */
--sl-color-primary-50: theme(colors.primary.50);
--sl-color-primary-100: theme(colors.primary.100);
--sl-color-primary-200: theme(colors.primary.200);
diff --git a/frontend/src/trackEvents.ts b/frontend/src/trackEvents.ts
index 83cf2ab65e..3ffbec2d4b 100644
--- a/frontend/src/trackEvents.ts
+++ b/frontend/src/trackEvents.ts
@@ -17,16 +17,16 @@ export enum AnalyticsTrackEvent {
*/
ExpandWorkflowFormSection = "Expand workflow form section",
/**
- * Trial
+ * Onboarding
*/
- TrialOpenedUserGuide = "[Trial] Opened user guide",
- TrialCreatedWorkflow = "[Trial] Created workflow",
- TrialReplayedCrawledItem = "[Trial] Replayed crawled item",
- TrialVisitedBillingTab = "[Trial] Visited billing tab",
+ CompleteOnboardingStep = "Completed onboarding step",
+ FinishSetUp = "Finished set up",
+ UndoFinishSetUp = "Undo finished set up",
/**
* User Guide
*/
OpenedCrawlingOnePageGuide = "Opened crawling one page guide",
OpenedCrawlingSocialMediaGuide = "Opened crawling social media guide",
OpenedCrawlingWebsiteGuide = "Opened crawling website guide",
+ ClickSearchGuides = "Clicked search guides",
}
diff --git a/frontend/src/types/onboarding.ts b/frontend/src/types/onboarding.ts
new file mode 100644
index 0000000000..0819c1af08
--- /dev/null
+++ b/frontend/src/types/onboarding.ts
@@ -0,0 +1,7 @@
+import { type OnboardingStep } from "@/utils/onboarding/onboardingEvents";
+
+export type Onboarding = {
+ orgId: string;
+ showOnboarding?: boolean;
+ stepsComplete?: Partial>;
+};
diff --git a/frontend/src/utils/analytics.ts b/frontend/src/utils/analytics.ts
index 98e7c272c5..e358d71033 100644
--- a/frontend/src/utils/analytics.ts
+++ b/frontend/src/utils/analytics.ts
@@ -11,8 +11,10 @@ export type AnalyticsTrackProps = {
org_slug?: string | null;
logged_in?: boolean;
trialing?: boolean;
+ has_usage?: boolean;
collection_slug?: string;
section?: string;
+ completed_onboarding_step?: string;
};
declare global {
diff --git a/frontend/src/utils/onboarding/onboardingEvents.ts b/frontend/src/utils/onboarding/onboardingEvents.ts
new file mode 100644
index 0000000000..4c76ac176d
--- /dev/null
+++ b/frontend/src/utils/onboarding/onboardingEvents.ts
@@ -0,0 +1,57 @@
+import { msg } from "@lit/localize";
+import { html } from "lit";
+
+import { AnalyticsTrackEvent } from "@/trackEvents";
+import { track } from "@/utils/analytics";
+import appState, { AppStateService } from "@/utils/state";
+
+export enum OnboardingStep {
+ OpenUserGuide = "Open User Guide",
+ CreateWorkflow = "Create Workflow",
+ ReplayItem = "Replay Item",
+ ReviewPlan = "Review Plan",
+}
+
+export const onboardingSteps = [
+ {
+ key: OnboardingStep.OpenUserGuide,
+ label: msg("Locate the user guide"),
+ description: msg(
+ "To open the user guide without leaving the Browsertrix application, select the “User Guide” button at the top of each page.",
+ ),
+ },
+ {
+ key: OnboardingStep.CreateWorkflow,
+ label: msg("Create a crawl workflow"),
+ description: msg(
+ "Open the “Create New...” dropdown menu at the top of your dashboard and choose “Crawl Workflow”.",
+ ),
+ },
+ {
+ key: OnboardingStep.ReplayItem,
+ label: msg("Replay crawled item"),
+ description: msg(
+ "Navigate to “Archived Items”, select the crawled item, and go to “Replay” to view an interactive replay of crawled pages.",
+ ),
+ },
+ {
+ key: OnboardingStep.ReviewPlan,
+ label: msg("Review your plan"),
+ description: msg(
+ html`Navigate to “Settings” and review “Billing & Usage” to confirm that
+ the current plan is right for you.`,
+ ),
+ },
+] as const;
+
+export function completeOnboardingStep(step: OnboardingStep) {
+ if (appState.onboarding?.stepsComplete?.[step]) return;
+
+ AppStateService.partialUpdateOnboarding({
+ stepsComplete: { [step]: true },
+ });
+
+ track(AnalyticsTrackEvent.CompleteOnboardingStep, {
+ completed_onboarding_step: step,
+ });
+}
diff --git a/frontend/src/utils/orgs.ts b/frontend/src/utils/orgs.ts
index c5ede6e153..6cb642ed45 100644
--- a/frontend/src/utils/orgs.ts
+++ b/frontend/src/utils/orgs.ts
@@ -1,4 +1,5 @@
-import { AccessCode, type OrgData } from "@/types/org";
+import { SubscriptionStatus } from "@/types/billing";
+import { AccessCode, type Metrics, type OrgData } from "@/types/org";
export * from "@/types/org";
@@ -26,8 +27,23 @@ export function isArchivingDisabled(
): boolean {
return Boolean(
!org ||
- org.readOnly ||
- org.storageQuotaReached ||
- (checkExecMinutesQuota ? org.execMinutesQuotaReached : false),
+ org.readOnly ||
+ org.storageQuotaReached ||
+ (checkExecMinutesQuota ? org.execMinutesQuotaReached : false),
);
}
+
+export function isTrialing(org?: OrgData | null) {
+ return org?.subscription?.status === SubscriptionStatus.Trialing;
+}
+
+export function hasUsage(org?: OrgData | null, metrics?: Metrics) {
+ return org
+ ? Boolean(
+ org.bytesStored ||
+ metrics?.workflowsQueuedCount ||
+ metrics?.workflowsRunningCount ||
+ metrics?.collectionsCount,
+ )
+ : undefined;
+}
diff --git a/frontend/src/utils/state.ts b/frontend/src/utils/state.ts
index a113b851eb..7d44ac002c 100644
--- a/frontend/src/utils/state.ts
+++ b/frontend/src/utils/state.ts
@@ -1,6 +1,7 @@
/**
* Store and access application-wide state
*/
+import { differenceInDays } from "date-fns/fp";
import { mergeDeep } from "immutable";
import { locked, options, transaction, use } from "lit-shared-state";
@@ -8,6 +9,7 @@ import { persist } from "./persist";
import { authSchema, type Auth } from "@/types/auth";
import type { FeatureFlags } from "@/types/featureFlags";
+import { type Onboarding } from "@/types/onboarding";
import type { OrgData } from "@/types/org";
import {
userInfoSchema,
@@ -17,10 +19,12 @@ import {
type UserPreferences,
} from "@/types/user";
import type { AppSettings } from "@/utils/app";
-import { isAdmin, isCrawler } from "@/utils/orgs";
+import { hasUsage, isAdmin, isCrawler, isTrialing } from "@/utils/orgs";
export { use };
+const MAX_DAYS_ONBOARDING = 30;
+
export function makeAppStateService() {
// Prevent state updates from any component
const { state, unlock } = locked();
@@ -36,6 +40,9 @@ export function makeAppStateService() {
@options(persist(window.localStorage))
userPreferences: UserPreferences | null = null;
+ @options(persist(window.localStorage))
+ onboarding: Onboarding | null = null;
+
// TODO persist here
auth: Auth | null = null;
@@ -48,6 +55,7 @@ export function makeAppStateService() {
// Org details
org: OrgData | null | undefined = undefined;
+ @options(persist(window.sessionStorage))
userGuideOpen = false;
// Since org slug is used to ID an org, use `userOrg`
@@ -84,6 +92,14 @@ export function makeAppStateService() {
return false;
}
+ get isTrialing() {
+ return isTrialing(this.org);
+ }
+
+ get hasUsage() {
+ return hasUsage(this.org);
+ }
+
readonly featureFlags = {
has: (flag: FeatureFlags) => this.org?.featureFlags[flag] ?? false,
excludes: (flag: FeatureFlags) => !this.featureFlags.has(flag),
@@ -144,17 +160,40 @@ export function makeAppStateService() {
}
}
+ @transaction()
+ @unlock()
+ partialUpdateOnboarding(onboarding: Partial) {
+ if (onboarding) {
+ if (appState.onboarding) {
+ appState.onboarding = mergeDeep(appState.onboarding, onboarding);
+ } else {
+ appState.onboarding = {
+ ...onboarding,
+ orgId: onboarding.orgId || "",
+ };
+ }
+ } else {
+ appState.onboarding = onboarding;
+ }
+ }
+
@transaction()
@unlock()
updateOrgSlug(orgSlug: AppState["orgSlug"]) {
appState.orgSlug = orgSlug;
}
+ @transaction()
@unlock()
updateOrg(org: AppState["org"]) {
appState.org = org;
+
+ if (org) {
+ this.updateOnboardingForOrg(org);
+ }
}
+ @transaction()
@unlock()
partialUpdateOrg(org: { id: string } & Partial) {
if (org.id && appState.org?.id === org.id) {
@@ -162,6 +201,8 @@ export function makeAppStateService() {
...appState.org,
...org,
};
+
+ this.updateOnboardingForOrg(appState.org);
} else {
console.warn("no matching org in app state");
}
@@ -189,9 +230,34 @@ export function makeAppStateService() {
appState.auth = null;
appState.userInfo = null;
appState.userPreferences = null;
+ appState.onboarding = null;
appState.orgSlug = null;
appState.org = undefined;
}
+
+ private updateOnboardingForOrg(org: OrgData) {
+ const trialing = isTrialing(org);
+ const showOnboarding =
+ trialing ||
+ !hasUsage(org) ||
+ (org.created
+ ? differenceInDays(new Date(org.created))(new Date()) <=
+ MAX_DAYS_ONBOARDING
+ : false);
+
+ if (appState.onboarding?.orgId === org.id) {
+ appState.onboarding = {
+ ...appState.onboarding,
+ showOnboarding: appState.onboarding.showOnboarding ?? showOnboarding,
+ };
+ } else {
+ // Reset onboarding
+ appState.onboarding = {
+ orgId: org.id,
+ showOnboarding: showOnboarding,
+ };
+ }
+ }
}
return new AppStateActions();
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 934f663a17..c316ca97f3 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -112,9 +112,9 @@ function makeTheme() {
14: "repeat(14, minmax(0, 1fr))",
},
screens: {
- desktop: "82.5rem", // 14 4.5rem columns with 1.5rem gutter
- // Override default of:
- // => @media (min-width: 1024px) { ... }
+ desktop: "var(--btrix-page-width)",
+ // This should match --btrix-page-width + --btrix-user-guide-width
+ "3xl": "1816px",
},
transitionDuration: {
"x-slow": "var(--sl-transition-x-slow)",
diff --git a/frontend/web-test-runner.config.mjs b/frontend/web-test-runner.config.mjs
index c16c12a9c8..ba03a5fc8f 100644
--- a/frontend/web-test-runner.config.mjs
+++ b/frontend/web-test-runner.config.mjs
@@ -73,7 +73,6 @@ export default {
"node_modules/slugify/**/*",
"node_modules/parse-ms/**/*",
"node_modules/regex-colorize/**/*",
- "node_modules/@floating-ui/**/*",
],
}),
importMapsPlugin({
@@ -81,6 +80,10 @@ export default {
importMap: {
imports: {
...emptyImports,
+ // Prevents component dependencies from impacting page tests
+ "./src/components": fileURLToPath(
+ new URL("./src/__mocks__/_empty.js", import.meta.url),
+ ),
"./src/shoelace": fileURLToPath(
new URL("./src/__mocks__/shoelace.js", import.meta.url),
),
+
`;
}
}
export function orgDecorator(story: StoryFn, context: StoryContext) {
const { args } = context;
- const { orgUsers, orgUsage, orgQuotas } = args as StorybookOrgProps;
+ const { orgUsers, orgUsage, orgQuotas, orgSubscription, orgOnboarding } =
+ args as StorybookOrgProps;
return html`