Improve new config navigation UX (#508)

* add job type to url

* add back to choose crawl type

* update for duplicate

* enable jumping into section

frontend/src/index.ts

@@ -578,6 +578,7 @@ export class App extends LiteElement {
       case "browser":
       case "crawlTemplate":
       case "crawlTemplateEdit":
+      case "crawlTemplateNew":
         return html`<btrix-org
           class="w-full"
           @navigate=${this.onNavigateTo}
@@ -593,7 +594,8 @@ export class App extends LiteElement {
           crawlConfigId=${this.viewState.params.crawlConfigId}
           crawlId=${this.viewState.params.crawlId}
           ?isAddingMember=${this.viewState.route === "orgAddMember"}
-          ?isNewResourceTab=${this.viewState.route === "orgNewResourceTab"}
+          ?isNewResourceTab=${this.viewState.route === "orgNewResourceTab" ||
+          this.viewState.route === "crawlTemplateNew"}
           ?isEditing=${"edit" in this.viewState.params}
         ></btrix-org>`;
 

frontend/src/pages/org/crawl-config-editor.ts

@@ -100,7 +100,7 @@ type FormState = {
 
 const getDefaultProgressState = (hasConfigId = false): ProgressState => {
   let activeTab: StepName = "crawlSetup";
-  if (hasConfigId && window.location.hash) {
+  if (window.location.hash) {
     const hashValue = window.location.hash.slice(1);
 
     if (STEPS.includes(hashValue as any)) {

frontend/src/pages/org/crawl-configs-detail.ts

@@ -459,9 +459,12 @@ export class CrawlTemplatesDetail extends LiteElement {
       tags: this.crawlConfig.tags,
     };
 
-    this.navTo(`/orgs/${this.orgId}/crawl-configs/new`, {
-      crawlTemplate,
-    });
+    this.navTo(
+      `/orgs/${this.orgId}/crawl-configs/new?jobType=${crawlTemplate.jobType}`,
+      {
+        crawlTemplate,
+      }
+    );
 
     this.notify({
       message: msg(str`Copied crawl configuration to new template.`),

frontend/src/pages/org/crawl-configs-list.ts

@@ -169,7 +169,7 @@ export class CrawlTemplatesList extends LiteElement {
 
         <div class="grow-0 mb-4">
           <sl-button
-            href=${`/orgs/${this.orgId}/crawl-configs/new`}
+            href=${`/orgs/${this.orgId}/crawl-configs/new?jobType`}
             variant="primary"
             @click=${this.navLink}
           >
@@ -611,9 +611,12 @@ export class CrawlTemplatesList extends LiteElement {
       tags: template.tags,
     };
 
-    this.navTo(`/orgs/${this.orgId}/crawl-configs/new`, {
-      crawlTemplate,
-    });
+    this.navTo(
+      `/orgs/${this.orgId}/crawl-configs/new?jobType=${crawlTemplate.jobType}`,
+      {
+        crawlTemplate,
+      }
+    );
 
     this.notify({
       message: msg(str`Copied crawl configuration to new template.`),

frontend/src/pages/org/crawl-configs-new.ts

@@ -50,21 +50,38 @@ export class CrawlTemplatesNew extends LiteElement {
   @state()
   private jobType?: JobType;
 
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.jobType) {
+      const url = new URL(window.location.href);
+      this.jobType = (url.searchParams.get("jobType") as JobType) || undefined;
+    }
+  }
+
   private renderHeader() {
+    let href = `/orgs/${this.orgId}/crawl-configs`;
+    let label = msg("Back to Crawl Configs");
+
+    // Allow user to go back to choose crawl type if new (not duplicated) config
+    if (this.jobType && !this.initialCrawlTemplate.jobType) {
+      href = `/orgs/${this.orgId}/crawl-configs/new`;
+      label = msg("Choose Crawl Type");
+    }
     return html`
       <nav class="mb-5">
         <a
           class="text-gray-600 hover:text-gray-800 text-sm font-medium"
-          href=${`/orgs/${this.orgId}/crawl-configs`}
-          @click=${this.navLink}
+          href=${href}
+          @click=${(e: any) => {
+            this.navLink(e);
+            this.jobType = undefined;
+          }}
         >
           <sl-icon
             name="arrow-left"
             class="inline-block align-middle"
           ></sl-icon>
-          <span class="inline-block align-middle"
-            >${msg("Back to Crawl Configs")}</span
-          >
+          <span class="inline-block align-middle">${label}</span>
         </a>
       </nav>
     `;
@@ -116,10 +133,14 @@ export class CrawlTemplatesNew extends LiteElement {
       <div
         class="border rounded p-8 md:py-12 flex flex-col md:flex-row items-start justify-evenly"
       >
-        <div
+        <a
           role="button"
           class="jobTypeButton"
-          @click=${() => (this.jobType = "url-list")}
+          href=${`/orgs/${this.orgId}/crawl-configs/new?jobType=url-list`}
+          @click=${(e: any) => {
+            this.navLink(e);
+            this.jobType = "url-list";
+          }}
         >
           <figure class="w-64 m-4">
             <img class="transition-transform" src=${urlListSvg} />
@@ -132,11 +153,15 @@ export class CrawlTemplatesNew extends LiteElement {
               </p>
             </figcaption>
           </figure>
-        </div>
-        <div
+        </a>
+        <a
           role="button"
           class="jobTypeButton"
-          @click=${() => (this.jobType = "seed-crawl")}
+          href=${`/orgs/${this.orgId}/crawl-configs/new?jobType=seed-crawl`}
+          @click=${(e: any) => {
+            this.navLink(e);
+            this.jobType = "seed-crawl";
+          }}
         >
           <figure class="w-64 m-4">
             <img class="transition-transform" src=${seededCrawlSvg} />
@@ -149,7 +174,7 @@ export class CrawlTemplatesNew extends LiteElement {
               </p>
             </figcaption>
           </figure>
-        </div>
+        </a>
       </div>
     `;
   }

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

@@ -736,9 +736,12 @@ export class CrawlsList extends LiteElement {
       tags: template.tags,
     };
 
-    this.navTo(`/orgs/${crawl.oid}/crawl-configs/new`, {
-      crawlTemplate,
-    });
+    this.navTo(
+      `/orgs/${crawl.oid}/crawl-configs/new?jobType=${crawlTemplate.jobType}`,
+      {
+        crawlTemplate,
+      }
+    );
 
     this.notify({
       message: msg(str`Copied crawl configuration to new template.`),

frontend/src/routes.ts

@@ -19,6 +19,7 @@ export const ROUTES = {
     "/orgs/:id/:tab/profile/browser/:browserId?name&description&profileId&navigateUrl",
   crawlTemplate: "/orgs/:id/:tab/config/:crawlConfigId",
   crawlTemplateEdit: "/orgs/:id/:tab/config/:crawlConfigId?edit",
+  crawlTemplateNew: "/orgs/:id/:tab/new?jobType",
   users: "/users",
   usersInvite: "/users/invite",
   crawls: "/crawls",