consistent empty state

Author: SuaYoo

frontend/src/pages/org/archived-items.ts

@@ -28,9 +28,11 @@ import orgUploadsContext from "@/context/org-uploads";
 import { ClipboardController } from "@/controllers/clipboard";
 import PollTask from "@/controllers/poll";
 import { SearchParamsValue } from "@/controllers/searchParamsValue";
+import { type BtrixUserGuideShowEvent } from "@/events/btrix-user-guide-show";
 import { type BtrixChangeArchivedItemStateFilterEvent } from "@/features/archived-items/archived-item-state-filter";
 import { CrawlStatus } from "@/features/archived-items/crawl-status";
 import { type BtrixChangeQARatingFilterEvent } from "@/features/archived-items/qa-rating-filter";
+import { emptyMessage } from "@/layouts/emptyMessage";
 import { pageHeader } from "@/layouts/pageHeader";
 import type { APIPaginatedList, APIPaginationQuery } from "@/types/api";
 import { UPLOAD_STATES, type CrawlState } from "@/types/crawlState";
@@ -1005,13 +1007,59 @@ export class CrawlsList extends BtrixElement {
       `;
     }
 
-    return html`
-      <div class="border-b border-t py-5">
-        <p class="text-center text-neutral-500">
-          ${msg("No archived items yet.")}
-        </p>
-      </div>
-    `;
+    if (this.itemType === "crawl") {
+      return html`
+        <div class="border-b border-t py-5">
+          <p class="text-center text-neutral-500">
+            ${msg("No crawled items yet.")}
+          </p>
+        </div>
+      `;
+    }
+
+    const message = msg("Your org doesn’t have any archived items yet.");
+    const guideButton = html`<sl-button
+      variant="text"
+      @click=${() => {
+        this.dispatchEvent(
+          new CustomEvent<BtrixUserGuideShowEvent["detail"]>(
+            "btrix-user-guide-show",
+            {
+              detail: { path: "archived-items" },
+              bubbles: true,
+              composed: true,
+            },
+          ),
+        );
+      }}
+    >
+      <sl-icon slot="prefix" name="book"></sl-icon>
+      ${msg("Read Guide")}
+    </sl-button>`;
+
+    if (this.isCrawler) {
+      return emptyMessage({
+        classNames: tw`border-y`,
+        message,
+        detail: msg(
+          "Archived items are the result of a web archiving process, like crawl workflows.",
+        ),
+        actions: html`<sl-button
+            @click=${() => (this.isUploadingArchive = true)}
+            ?disabled=${isArchivingDisabled(this.org)}
+          >
+            <sl-icon slot="prefix" name="plus-lg"></sl-icon>
+            ${msg("Import Archived Item")}
+          </sl-button>
+          ${guideButton}`,
+      });
+    }
+
+    return emptyMessage({
+      classNames: tw`border-y`,
+      message,
+      actions: guideButton,
+    });
   }
 
   private async getArchivedItems(

frontend/src/pages/org/browser-profiles-list.ts

@@ -20,6 +20,7 @@ import { parsePage, type PageChangeEvent } from "@/components/ui/pagination";
 import type { BtrixChangeTagFilterEvent } from "@/components/ui/tag-filter/types";
 import { ClipboardController } from "@/controllers/clipboard";
 import { SearchParamsValue } from "@/controllers/searchParamsValue";
+import { type BtrixUserGuideShowEvent } from "@/events/btrix-user-guide-show";
 import { originsWithRemainder } from "@/features/browser-profiles/templates/origins-with-remainder";
 import { emptyMessage } from "@/layouts/emptyMessage";
 import { pageHeader } from "@/layouts/pageHeader";
@@ -33,6 +34,7 @@ import { SortDirection as SortDirectionEnum } from "@/types/utils";
 import { isApiError } from "@/utils/api";
 import { isArchivingDisabled } from "@/utils/orgs";
 import { toSearchItem, type SearchValues } from "@/utils/searchValues";
+import { tw } from "@/utils/tailwind";
 
 const SORT_DIRECTIONS = ["asc", "desc"] as const;
 type SortDirection = (typeof SORT_DIRECTIONS)[number];
@@ -316,11 +318,17 @@ export class BrowserProfilesList extends BtrixElement {
               `
             : this.renderEmpty()}
         `,
+        this.renderLoading,
       )}
       ${when(this.selectedProfile, this.renderDuplicateDialog)}
     `;
   };
 
+  private readonly renderLoading = () =>
+    html`<div class="my-24 flex w-full items-center justify-center text-2xl">
+      <sl-spinner></sl-spinner>
+    </div>`;
+
   private readonly renderDuplicateDialog = (profile: Profile) => {
     return html`<btrix-profile-browser-dialog
       .profile=${profile}
@@ -353,9 +361,28 @@ export class BrowserProfilesList extends BtrixElement {
     }
 
     const message = msg("Your org doesn’t have any browser profiles yet.");
+    const guideButton = html`<sl-button
+      variant="text"
+      @click=${() => {
+        this.dispatchEvent(
+          new CustomEvent<BtrixUserGuideShowEvent["detail"]>(
+            "btrix-user-guide-show",
+            {
+              detail: { path: "browser-profiles" },
+              bubbles: true,
+              composed: true,
+            },
+          ),
+        );
+      }}
+    >
+      <sl-icon slot="prefix" name="book"></sl-icon>
+      ${msg("Read Guide")}
+    </sl-button>`;
 
     if (this.isCrawler) {
       return emptyMessage({
+        classNames: tw`border-y`,
         message,
         detail: msg(
           "Browser profiles let you crawl pages behind paywalls and logins.",
@@ -376,11 +403,16 @@ export class BrowserProfilesList extends BtrixElement {
             <sl-icon slot="prefix" name="plus-lg"></sl-icon>
             ${msg("Create Browser Profile")}
           </sl-button>
+          ${guideButton}
         `,
       });
     }
 
-    return emptyMessage({ message });
+    return emptyMessage({
+      classNames: tw`border-y`,
+      message,
+      actions: guideButton,
+    });
   }
 
   private renderControls() {

frontend/src/pages/org/collections-list.ts

@@ -13,13 +13,12 @@ import { when } from "lit/directives/when.js";
 import debounce from "lodash/fp/debounce";
 import queryString from "query-string";
 
-import type { SelectNewDialogEvent } from ".";
-
 import { BtrixElement } from "@/classes/BtrixElement";
 import { parsePage, type PageChangeEvent } from "@/components/ui/pagination";
 import { WithSearchOrgContext } from "@/context/search-org/WithSearchOrgContext";
 import { ClipboardController } from "@/controllers/clipboard";
 import type { BtrixRequestOrgUpdate } from "@/events/btrix-request-org-update";
+import { type BtrixUserGuideShowEvent } from "@/events/btrix-user-guide-show";
 import { SelectCollectionAccess } from "@/features/collections/select-collection-access";
 import { emptyMessage } from "@/layouts/emptyMessage";
 import { pageHeader } from "@/layouts/pageHeader";
@@ -299,7 +298,7 @@ export class CollectionsList extends WithSearchOrgContext(BtrixElement) {
   }
 
   private readonly renderLoading = () =>
-    html`<div class="my-24 flex w-full items-center justify-center text-3xl">
+    html`<div class="my-24 flex w-full items-center justify-center text-2xl">
       <sl-spinner></sl-spinner>
     </div>`;
 
@@ -535,39 +534,51 @@ export class CollectionsList extends WithSearchOrgContext(BtrixElement) {
     }
 
     const message = msg("Your org doesn’t have any collections yet.");
+    const guideButton = html`<sl-button
+      variant="text"
+      @click=${() => {
+        this.dispatchEvent(
+          new CustomEvent<BtrixUserGuideShowEvent["detail"]>(
+            "btrix-user-guide-show",
+            {
+              detail: { path: "collection" },
+              bubbles: true,
+              composed: true,
+            },
+          ),
+        );
+      }}
+    >
+      <sl-icon slot="prefix" name="book"></sl-icon>
+      ${msg("Read Guide")}
+    </sl-button>`;
 
-    return html`
-      ${when(
-        this.isCrawler,
-        () =>
-          emptyMessage({
-            classNames: tw`border-y`,
-            message,
-            detail: msg(
-              "Collections let you easily organize, replay, and share multiple crawls.",
-            ),
-            actions: html`
-              <sl-button
-                @click=${() => {
-                  this.dispatchEvent(
-                    new CustomEvent("select-new-dialog", {
-                      detail: "collection",
-                    }) as SelectNewDialogEvent,
-                  );
-                }}
-              >
-                <sl-icon slot="prefix" name="plus-lg"></sl-icon>
-                ${msg("Create Collection")}
-              </sl-button>
-            `,
-          }),
-        () =>
-          emptyMessage({
-            classNames: tw`border-y`,
-            message,
-          }),
-      )}
-    `;
+    if (this.isCrawler) {
+      return emptyMessage({
+        classNames: tw`border-y`,
+        message,
+        detail: msg(
+          "Collections let you easily organize, replay, and share multiple crawls.",
+        ),
+        actions: html`
+          <sl-button
+            @click=${() => {
+              this.openDialogName = "create";
+            }}
+          >
+            <sl-icon slot="prefix" name="plus-lg"></sl-icon>
+            ${msg("Create New Collection")}
+          </sl-button>
+          ${guideButton}
+        `,
+      });
+    }
+
+    return emptyMessage({
+      classNames: tw`border-y`,
+      message,
+      actions: guideButton,
+    });
   };
 
   private readonly renderItem = (col: Collection) => {

frontend/src/pages/org/crawling.ts

@@ -45,14 +45,18 @@ export class OrgCrawling extends BtrixElement {
                   variant="primary"
                   size="small"
                   ?disabled=${this.org?.readOnly}
-                  @click=${() =>
-                    this.navigate.to(
-                      `${this.navigate.orgBasePath}/workflows/new`,
-                      {
-                        scopeType:
-                          this.appState.userPreferences?.newWorkflowScopeType,
-                      },
-                    )}
+                  href=${`${this.navigate.orgBasePath}/workflows/new`}
+                  @click=${(e: MouseEvent) => {
+                    if (e.metaKey) {
+                      return;
+                    }
+                    e.preventDefault();
+
+                    this.navigate.to((e.target as HTMLAnchorElement).href, {
+                      scopeType:
+                        this.appState.userPreferences?.newWorkflowScopeType,
+                    });
+                  }}
                 >
                   <sl-icon slot="prefix" name="plus-lg"></sl-icon>
                   ${msg("New Workflow")}</sl-button

frontend/src/pages/org/workflows-list.ts

@@ -29,6 +29,7 @@ import activeCrawlsCountContext, {
 } from "@/context/active-crawls-count";
 import { makeUpdateActiveCrawlsCountEvent } from "@/context/active-crawls-count/events";
 import { SearchParamsValue } from "@/controllers/searchParamsValue";
+import { type BtrixUserGuideShowEvent } from "@/events/btrix-user-guide-show";
 import {
   Action,
   type BtrixSelectActionEvent,
@@ -40,6 +41,7 @@ import {
   WorkflowSearch,
   type SearchFields,
 } from "@/features/crawl-workflows/workflow-search";
+import { emptyMessage } from "@/layouts/emptyMessage";
 import { WorkflowTab } from "@/routes";
 import { deleteConfirmation } from "@/strings/ui";
 import type { APIPaginatedList, APIPaginationQuery } from "@/types/api";
@@ -754,7 +756,7 @@ export class WorkflowsList extends BtrixElement {
         <div class="rounded-lg border bg-neutral-50 p-4">
           <p class="text-center">
             <span class="text-neutral-400"
-              >${msg("No matching Workflows found.")}</span
+              >${msg("No matching workflows found.")}</span
             >
             <button
               class="font-medium text-neutral-500 underline hover:no-underline"
@@ -777,16 +779,63 @@ export class WorkflowsList extends BtrixElement {
       `;
     }
 
-    return html`
-      <div class="border-b border-t py-5">
-        <p class="text-center text-neutral-500">${msg("No Workflows yet.")}</p>
-      </div>
-    `;
+    const message = msg("Your org doesn’t have any crawl workflows yet.");
+    const guideButton = html`<sl-button
+      variant="text"
+      @click=${() => {
+        this.dispatchEvent(
+          new CustomEvent<BtrixUserGuideShowEvent["detail"]>(
+            "btrix-user-guide-show",
+            {
+              detail: { path: "crawl-workflows" },
+              bubbles: true,
+              composed: true,
+            },
+          ),
+        );
+      }}
+    >
+      <sl-icon slot="prefix" name="book"></sl-icon>
+      ${msg("Read Guide")}
+    </sl-button>`;
+
+    if (this.appState.isCrawler) {
+      return emptyMessage({
+        classNames: tw`border-y`,
+        message,
+        detail: msg("Schedule, run, and manage crawls with crawl workflows."),
+        actions: html`
+          <sl-button
+            href=${`${this.navigate.orgBasePath}/workflows/new`}
+            @click=${(e: MouseEvent) => {
+              if (e.metaKey) {
+                return;
+              }
+              e.preventDefault();
+
+              this.navigate.to((e.target as HTMLAnchorElement).href, {
+                scopeType: this.appState.userPreferences?.newWorkflowScopeType,
+              });
+            }}
+          >
+            <sl-icon slot="prefix" name="plus-lg"></sl-icon>
+            ${msg("Create New Workflow")}
+          </sl-button>
+          ${guideButton}
+        `,
+      });
+    }
+
+    return emptyMessage({
+      classNames: tw`border-y`,
+      message,
+      actions: guideButton,
+    });
   }
 
   private renderLoading() {
     return html`<div
-      class="my-24 flex w-full items-center justify-center text-3xl"
+      class="my-24 flex w-full items-center justify-center text-2xl"
     >
       <sl-spinner></sl-spinner>
     </div>`;