Chack and redirect to search query from 404 page, if results exist

Author: suprith-hub

frontend/src/static/js/components/webstatus-feature-page.ts

@@ -30,6 +30,7 @@ import {
   TEST_COUNT_METRIC_VIEW,
   SUBTEST_COUNT_METRIC_VIEW,
   DEFAULT_TEST_VIEW,
+  FeatureSortOrderType,
 } from '../api/client.js';
 import {
   formatFeaturePageUrl,
@@ -238,17 +239,36 @@ export class FeaturePage extends BaseChartsPage {
       this.location.params['featureId']?.toString() || 'undefined';
   }
 
+  private async handleNotFound(featureId: string): Promise<void> {
+    try {
+      const response = await this.apiClient.getFeatures(
+        featureId,
+        '' as FeatureSortOrderType,
+        undefined,
+        0,
+        1,
+      );
+
+      const data = response.data;
+
+      // TODO: cannot use navigateToUrl because it creates a
+      // circular dependency.
+      // For now use the window href and revisit when navigateToUrl
+      // is move to another location.
+      const queryParam = Array.isArray(data) && data.length > 0 ? `?q=${featureId}` : "";
+      window.location.href = `/errors-404/feature-not-found${queryParam}`;
+    } catch (error) {
+      window.location.href = `/errors-404/feature-not-found`;
+    }
+  }
+
   render(): TemplateResult {
     return html`
       ${this._loadingTask?.render({
         complete: () => this.renderWhenComplete(),
         error: error => {
           if (error instanceof NotFoundError) {
-            // TODO: cannot use navigateToUrl because it creates a
-            // circular dependency.
-            // For now use the window href and revisit when navigateToUrl
-            // is move to another location.
-            window.location.href = '/errors-404/feature-not-found';
+            this.handleNotFound(this.featureId);
           }
           return this.renderWhenError();
         },

frontend/src/static/js/components/webstatus-notfound-error-page.ts

@@ -97,6 +97,10 @@ export class WebstatusNotFoundErrorPage extends LitElement {
     ];
   }
   protected render(): TemplateResult {
+    // Extract query params
+    const params = new URLSearchParams(window.location.search);
+    const badId = params.get('q');
+
     return html`
       <div id="error-container">
         <div id="error-header">
@@ -108,16 +112,34 @@ export class WebstatusNotFoundErrorPage extends LitElement {
         </div>
 
         <div id="error-actions">
-          <div id="error-action-home">
-            <sl-button id="error-action-home-btn" variant="primary" href="/"
-              >Go back home</sl-button
-            >
-          </div>
+          ${badId
+            ? html`
+                <div id="error-action-search">
+                  <sl-button
+                    id="error-action-search-btn"
+                    variant="primary"
+                    href="/?q=${badId}"
+                  >
+                    Search for Similar names
+                  </sl-button>
+                </div>
+              `
+            : html`
+                <div id="error-action-home">
+                  <sl-button
+                    id="error-action-home-btn"
+                    variant="primary"
+                    href="/"
+                  >
+                    Go back home
+                  </sl-button>
+                </div>
+              `}
           <div id="error-action-report">
             <sl-icon name="github"></sl-icon>
-            <a href="${GITHUB_REPO_ISSUE_LINK}" target="_blank"
-              >Report an issue</a
-            >
+            <a href="${GITHUB_REPO_ISSUE_LINK}" target="_blank">
+              Report an issue
+            </a>
           </div>
         </div>
       </div>