Add empty state for crawls (#121)

frontend/src/pages/archive/crawl-templates-list.ts

@@ -221,7 +221,7 @@ export class CrawlTemplatesList extends LiteElement {
                             name="slash-circle"
                           ></sl-icon
                           ><span class="inline-block align-middle text-0-400"
-                            >${msg("No crawls")}</span
+                            >${msg("No finished crawls")}</span
                           >
                         `}
                   </div>

frontend/src/pages/archive/crawl-templates-new.ts

@@ -239,12 +239,11 @@ export class CrawlTemplatesNew extends LiteElement {
               </sl-select>
             </div>
           </div>
-          <div class="grid grid-flow-col gap-2 items-center mt-2">
-            <span class="px-1">${msg("At")}</span>
+          <div class="flex items-center mt-2">
+            <span class="px-3">${msg("At")}</span>
             <sl-select
               name="scheduleHour"
               value=${this.scheduleTime.hour}
-              class="w-24"
               ?disabled=${!this.scheduleInterval}
               @sl-select=${(e: any) =>
                 (this.scheduleTime = {
@@ -257,11 +256,11 @@ export class CrawlTemplatesNew extends LiteElement {
                   html`<sl-menu-item value=${value}>${label}</sl-menu-item>`
               )}
             </sl-select>
-            <span>:</span>
+            <span class="px-1">:</span>
             <sl-select
               name="scheduleMinute"
+              class="mr-2"
               value=${this.scheduleTime.minute}
-              class="w-24"
               ?disabled=${!this.scheduleInterval}
               @sl-select=${(e: any) =>
                 (this.scheduleTime = {
@@ -276,7 +275,6 @@ export class CrawlTemplatesNew extends LiteElement {
             </sl-select>
             <sl-select
               value=${this.scheduleTime.period}
-              class="w-24"
               ?disabled=${!this.scheduleInterval}
               @sl-select=${(e: any) =>
                 (this.scheduleTime = {
@@ -291,7 +289,7 @@ export class CrawlTemplatesNew extends LiteElement {
                 >${msg("PM", { desc: "Time AM/PM" })}</sl-menu-item
               >
             </sl-select>
-            <span class="px-1">${this.timeZoneShortName}</span>
+            <span class="px-3">${this.timeZoneShortName}</span>
           </div>
           <div class="text-sm text-gray-500 mt-2">
             ${this.formattededNextCrawlDate
@@ -374,9 +372,8 @@ export class CrawlTemplatesNew extends LiteElement {
         <sl-menu-item value="host">Host</sl-menu-item>
         <sl-menu-item value="any">Any</sl-menu-item>
       </sl-select>
-      <sl-checkbox
-        name="extraHopsOne"
-      >${msg("Include External Links ('one hop out')")}
+      <sl-checkbox name="extraHopsOne"
+        >${msg("Include External Links ('one hop out')")}
       </sl-checkbox>
       <sl-input
         name="limit"

frontend/src/pages/archive/crawls-list.ts

@@ -135,7 +135,15 @@ export class CrawlsList extends LiteElement {
     return html`
       <main>
         <header class="pb-4">${this.renderControls()}</header>
-        <section>${this.renderCrawlList()}</section>
+        <section>
+          ${this.crawls.length
+            ? this.renderCrawlList()
+            : html`
+                <div class="border-t border-b py-5">
+                  <p class="text-center text-0-500">${msg("No crawls yet.")}</p>
+                </div>
+              `}
+        </section>
         <footer class="mt-2">
           <span class="text-0-400 text-sm">
             ${this.lastFetched
@@ -166,6 +174,7 @@ export class CrawlsList extends LiteElement {
             placeholder=${msg("Search by Crawl Template name or ID")}
             pill
             clearable
+            ?disabled=${!this.crawls?.length}
             @sl-input=${this.onSearchInput}
           >
             <sl-icon name="search" slot="prefix"></sl-icon>
@@ -186,7 +195,11 @@ export class CrawlsList extends LiteElement {
               };
             }}
           >
-            <sl-button slot="trigger" pill caret
+            <sl-button
+              slot="trigger"
+              pill
+              caret
+              ?disabled=${!this.crawls?.length}
               >${(sortableFieldLabels as any)[this.orderBy.field] ||
               sortableFieldLabels[
                 `${this.orderBy.field}_${this.orderBy.direction}`

frontend/src/pages/archive/index.ts

@@ -13,7 +13,7 @@ import "./crawl-templates-list";
 import "./crawl-templates-new";
 import "./crawls-list";
 
-export type ArchiveTab = "crawls" | "crawl-templates" | "settings" | "members";
+export type ArchiveTab = "crawls" | "crawl-templates" | "members";
 
 const defaultTab = "crawls";
 
@@ -114,12 +114,6 @@ export class Archive extends LiteElement {
               this.navTo(`/archives/${this.archiveId}/crawl-templates`)}
             >${msg("Crawl Templates")}
           </sl-tab>
-          <sl-tab
-            slot="nav"
-            panel="settings"
-            ?active=${this.archiveTab === "settings"}
-            >${msg("Settings")}</sl-tab
-          >
           ${showMembersTab
             ? html`<sl-tab
                 slot="nav"
@@ -137,11 +131,6 @@ export class Archive extends LiteElement {
             ?active=${this.archiveTab === "crawl-templates"}
             >${this.renderCrawlTemplates()}</sl-tab-panel
           >
-          <sl-tab-panel
-            name="settings"
-            ?active=${this.archiveTab === "settings"}
-            >${this.renderSettings()}</sl-tab-panel
-          >
           ${showMembersTab
             ? html`<sl-tab-panel
                 name="members"
@@ -170,42 +159,29 @@ export class Archive extends LiteElement {
   }
 
   private renderCrawlTemplates() {
-    const crawlConfig = this.viewStateData?.crawlConfig;
-
-    if (this.isNewResourceTab || this.crawlConfigId) {
+    if (this.crawlConfigId) {
       return html`
-        <div class="md:grid grid-cols-6 gap-6">
-          <nav class="col-span-1 mb-6">
-            <a
-              class="font-medium text-sm text-primary hover:opacity-80 flex items-center"
-              href=${`/archives/${this.archiveId}/crawl-templates`}
-              @click=${this.navLink}
-              ><sl-icon class="mr-1" name="arrow-left"></sl-icon> ${msg(
-                "Back to templates"
-              )}</a
-            >
-          </nav>
-
-          ${this.crawlConfigId
-            ? html`
-                <btrix-crawl-templates-detail
-                  class="col-span-5 mt-6"
-                  .authState=${this.authState!}
-                  .archiveId=${this.archiveId!}
-                  .crawlConfigId=${this.crawlConfigId}
-                  .isEditing=${this.isEditing}
-                ></btrix-crawl-templates-detail>
-              `
-            : html` <btrix-crawl-templates-new
-                class="col-span-5 mt-6"
-                .authState=${this.authState!}
-                .archiveId=${this.archiveId!}
-                .initialCrawlConfig=${crawlConfig}
-              ></btrix-crawl-templates-new>`}
-        </div>
+        <btrix-crawl-templates-detail
+          class="col-span-5 mt-6"
+          .authState=${this.authState!}
+          .archiveId=${this.archiveId!}
+          .crawlConfigId=${this.crawlConfigId}
+          .isEditing=${this.isEditing}
+        ></btrix-crawl-templates-detail>
       `;
     }
 
+    if (this.isNewResourceTab) {
+      const crawlConfig = this.viewStateData?.crawlConfig;
+
+      return html` <btrix-crawl-templates-new
+        class="col-span-5 mt-6"
+        .authState=${this.authState!}
+        .archiveId=${this.archiveId!}
+        .initialCrawlConfig=${crawlConfig}
+      ></btrix-crawl-templates-new>`;
+    }
+
     return html`<btrix-crawl-templates-list
       .authState=${this.authState!}
       .archiveId=${this.archiveId!}

frontend/src/pages/archives.ts

@@ -69,7 +69,7 @@ export class Archives extends LiteElement {
   }
 
   makeOnArchiveClick(archive: ArchiveData): Function {
-    const navigate = () => this.navTo(`/archives/${archive.id}/settings`);
+    const navigate = () => this.navTo(`/archives/${archive.id}/crawls`);
 
     if (typeof window.getSelection !== undefined) {
       return () => {