Refactor archive tabs & navigation improvements (#123)

closes #112

frontend/src/index.ts

@@ -383,9 +383,7 @@ export class App extends LiteElement {
           .userInfo=${this.userInfo}
           .viewStateData=${this.viewState.data}
           archiveId=${this.viewState.params.id}
-          archiveTab=${this.viewState.params.crawlConfigId
+          archiveTab=${this.viewState.params.tab as ArchiveTab}
-            ? "crawl-templates"
-            : (this.viewState.params.tab as ArchiveTab)}
           crawlConfigId=${this.viewState.params.crawlConfigId}
           crawlId=${this.viewState.params.crawlId}
           ?isAddingMember=${this.viewState.route === "archiveAddMember"}
@@ -480,6 +478,9 @@ export class App extends LiteElement {
     event.stopPropagation();
 
     this.navigate(event.detail.url, event.detail.state);
+
+    // Scroll to top of page
+    window.scrollTo({ top: 0 });
   }
 
   onUserInfoChange(event: CustomEvent<Partial<CurrentUser>>) {

frontend/src/pages/archive/crawl-detail.ts

@@ -153,7 +153,7 @@ export class CrawlDetail extends LiteElement {
               ? html`
                   <a
                     class="font-medium  hover:underline"
-                    href=${`/archives/${this.archiveId}/crawl-templates/${this.crawl.cid}`}
+                    href=${`/archives/${this.archiveId}/crawl-templates/config/${this.crawl.cid}`}
                     @click=${this.navLink}
                     >${this.crawl.configName}</a
                   >

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

@@ -218,9 +218,11 @@ export class CrawlTemplatesDetail extends LiteElement {
                   ? html`
                       <sl-button
                         size="small"
-                        href=${`/archives/${this.archiveId}/crawl-templates/${
+                        href=${`/archives/${
-                          this.crawlTemplate.id
+                          this.archiveId
-                        }${this.isEditing ? "" : "?edit=true"}`}
+                        }/crawl-templates/config/${this.crawlTemplate.id}${
+                          this.isEditing ? "" : "?edit=true"
+                        }`}
                         @click=${(e: any) => {
                           const hasChanges =
                             this.isEditing && this.editedSchedule;
@@ -470,7 +472,9 @@ export class CrawlTemplatesDetail extends LiteElement {
       });
 
       this.navTo(
-        `/archives/${this.archiveId}/crawl-templates/${this.crawlTemplate!.id}`
+        `/archives/${this.archiveId}/crawl-templates/config/${
+          this.crawlTemplate!.id
+        }`
       );
     } catch (e: any) {
       console.error(e);

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

@@ -95,13 +95,13 @@ export class CrawlTemplatesList extends LiteElement {
               role="button"
               @click=${() => {
                 this.navTo(
-                  `/archives/${this.archiveId}/crawl-templates/${t.id}`
+                  `/archives/${this.archiveId}/crawl-templates/config/${t.id}`
                 );
               }}
             >
               <header class="flex">
                 <a
-                  href=${`/archives/${this.archiveId}/crawl-templates/${t.id}`}
+                  href=${`/archives/${this.archiveId}/crawl-templates/config/${t.id}`}
                   class="block flex-1 px-3 pt-3 font-medium whitespace-nowrap truncate mb-1"
                   title=${t.name}
                   @click=${(e: any) => {

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

@@ -412,7 +412,7 @@ export class CrawlsList extends LiteElement {
               role="menuitem"
               @click=${(e: any) => {
                 this.navTo(
-                  `/archives/${this.archiveId}/crawl-templates/${crawl.cid}`
+                  `/archives/${this.archiveId}/crawl-templates/config/${crawl.cid}`
                 );
               }}
             >

frontend/src/pages/archive/index.ts

@@ -89,6 +89,29 @@ export class Archive extends LiteElement {
 
     const showMembersTab = Boolean(this.archive.users);
 
+    let tabPanelContent = "" as any;
+
+    switch (this.archiveTab) {
+      case "crawls":
+        tabPanelContent = this.renderCrawls();
+        break;
+      case "crawl-templates":
+        tabPanelContent = this.renderCrawlTemplates();
+        break;
+      case "members":
+        if (this.isAddingMember) {
+          tabPanelContent = this.renderAddMember();
+        } else {
+          tabPanelContent = this.renderMembers();
+        }
+        break;
+      default:
+        tabPanelContent = html`<btrix-not-found
+          class="flex items-center justify-center"
+        ></btrix-not-found>`;
+        break;
+    }
+
     return html`<article class="grid gap-4">
       <nav class="font-medium text-sm text-gray-500">
         <a
@@ -102,56 +125,47 @@ export class Archive extends LiteElement {
       </nav>
 
       <main>
-        <sl-tab-group @sl-tab-show=${this.updateUrl}>
+        <nav class="flex items-end overflow-x-auto">
-          <sl-tab
+          ${this.renderNavTab({ tabName: "crawls", label: msg("Crawls") })}
-            slot="nav"
+          ${this.renderNavTab({
-            panel="crawls"
+            tabName: "crawl-templates",
-            ?active=${this.archiveTab === "crawls"}
+            label: msg("Crawl Templates"),
-            @click=${() => this.navTo(`/archives/${this.archiveId}/crawls`)}
+          })}
-            >${msg("Crawls")}
-          </sl-tab>
-          <sl-tab
-            slot="nav"
-            panel="crawl-templates"
-            ?active=${this.archiveTab === "crawl-templates"}
-            @click=${() =>
-              this.navTo(`/archives/${this.archiveId}/crawl-templates`)}
-            >${msg("Crawl Templates")}
-          </sl-tab>
           ${showMembersTab
-            ? html`<sl-tab
+            ? this.renderNavTab({ tabName: "members", label: msg("Members") })
-                slot="nav"
-                panel="members"
-                ?active=${this.archiveTab === "members"}
-                >${msg("Members")}</sl-tab
-              >`
             : ""}
+          <hr class="flex-1 border-t-2" />
+        </nav>
 
-          <sl-tab-panel name="crawls" ?active=${this.archiveTab === "crawls"}
+        <div class="my-5" aria-labelledby="${this.archiveTab}-tab">
-            >${this.renderCrawls()}</sl-tab-panel
+          ${tabPanelContent}
-          >
+        </div>
-          <sl-tab-panel
-            name="crawl-templates"
-            ?active=${this.archiveTab === "crawl-templates"}
-            >${this.renderCrawlTemplates()}</sl-tab-panel
-          >
-          ${showMembersTab
-            ? html`<sl-tab-panel
-                name="members"
-                ?active=${this.archiveTab === "members"}
-              >
-                ${this.isAddingMember
-                  ? this.renderAddMember()
-                  : this.renderMembers()}
-              </sl-tab-panel>`
-            : ""}
-        </sl-tab-group>
       </main>
     </article>`;
   }
 
-  private renderSettings() {
+  private renderNavTab({
-    return html` TODO `;
+    tabName,
+    label,
+  }: {
+    tabName: ArchiveTab;
+    label: string;
+  }) {
+    const isActive = this.archiveTab === tabName;
+
+    return html`
+      <a
+        id="${tabName}-tab"
+        class="block flex-shrink-0 text-sm font-medium p-3 md:px-5 border-b-2 transition-colors ${isActive
+          ? "border-primary text-primary"
+          : "text-0-600"}"
+        href=${`/archives/${this.archiveId}/${tabName}`}
+        aria-selected=${isActive}
+        @click=${this.navLink}
+      >
+        ${label}
+      </a>
+    `;
   }
 
   private renderCrawls() {

frontend/src/routes.ts

@@ -15,8 +15,8 @@ export const ROUTES = {
   archiveNewResourceTab: "/archives/:id/:tab/new",
   archiveAddMember: "/archives/:id/:tab/add-member",
   crawl: "/archives/:id/:tab/crawl/:crawlId",
-  crawlTemplate: "/archives/:id/crawl-templates/:crawlConfigId",
+  crawlTemplate: "/archives/:id/:tab/config/:crawlConfigId",
-  crawlTemplateEdit: "/archives/:id/crawl-templates/:crawlConfigId?edit",
+  crawlTemplateEdit: "/archives/:id/:tab/config/:crawlConfigId?edit",
   users: "/users",
   usersInvite: "/users/invite",
 } as const;