Handle failure to fetch Coveo credentials in UI

assets/js/coveo.js

@@ -71,28 +71,38 @@ async function getValidSearchCredentials() {
 }
 
 async function atomicCoveo() {
-  await customElements.whenDefined('atomic-search-interface');
-  const credentials = await getValidSearchCredentials();
-
-  document.querySelectorAll('atomic-search-interface').forEach(async (el) => {
-    await el.initialize({
-      ...credentials,
-      analytics: { analyticsMode: 'legacy' },
-      preprocessRequest: (request) => {
-        const body = JSON.parse(request.body);
-        body.q = `<@- ${body.q} -@>`;
-        request.body = JSON.stringify(body);
-        return request;
-      },
+  try {
+    await customElements.whenDefined('atomic-search-interface');
+    const credentials = await getValidSearchCredentials();
+
+    document.querySelectorAll('atomic-search-interface').forEach(async (el) => {
+      await el.initialize({
+        ...credentials,
+        analytics: { analyticsMode: 'legacy' },
+        preprocessRequest: (request) => {
+          const body = JSON.parse(request.body);
+          body.q = `<@- ${body.q} -@>`;
+          request.body = JSON.stringify(body);
+          return request;
+        },
+      });
+
+      // No standalone searchboxes should be getting executing first search.
+      if (el.id === 'search-v2') await el.executeFirstSearch();
     });
 
-    // No standalone searchboxes should be getting executing first search.
-    if (el.id === 'search-v2') await el.executeFirstSearch();
-  });
-
-  const headerSearchBar = document.querySelector('#search-standalone-header');
-  if (headerSearchBar?.shadowRoot) {
-    hideShadowElement(headerSearchBar.shadowRoot, 'atomic-relevance-inspector');
+    const headerSearchBar = document.querySelector('#search-standalone-header');
+    if (headerSearchBar?.shadowRoot) {
+      hideShadowElement(
+        headerSearchBar.shadowRoot,
+        'atomic-relevance-inspector'
+      );
+    }
+  } catch (error) {
+    // Handle coveo error from only a LACK of credentials.
+    // INCORRECT credentials will cause the page to load but spin waiting.
+    const coveoErrorContainer = document.getElementById('coveo-error-content');
+    coveoErrorContainer.style.display = 'block';
   }
 }
 

layouts/partials/search-error.html

@@ -0,0 +1,10 @@
+{{ $coveoEnabled := partial "get-feature-flags.html" "disable_coveo" }}
+
+<div class="content" data-testid="coveo-error-content" id="coveo-error-content" style="{{- if $coveoEnabled -}}display: none;{{- else -}}{{- end -}}">
+  <div class="not-found-container" data-testid="not-found-container">
+    <h1 class="info-header">
+      Search functionality is unavailable.
+    </h1>
+    <a href="{{ site.BaseURL | relLangURL }}" aria-label="Return home">Return to the {{ site.Title }} homepage.</a>
+  </div>
+</div>

layouts/search/single.html

@@ -2,16 +2,10 @@
   {{ $coveoEnabled := partial "get-feature-flags.html" "disable_coveo" }}
   {{ if $coveoEnabled }} 
     <section class="search no-sidebar">
-      {{ partial "coveo-atomic.html" .}}
+      {{ partial "coveo-atomic.html" . }}
     </section>
+    {{ partial "search-error.html" }}
   {{ else }}
-    <div class="content" data-testid="content">
-      <div class="not-found-container" data-testid="not-found-container">
-        <h1 class="info-header">
-          Search functionality is unavailable.
-        </h1>
-        <a href="{{ .Site.BaseURL | relLangURL }}" aria-label="Return home">Return to the {{ .Site.Title }} homepage.</a>
-      </div>
-    </div>
+   {{ partial "search-error.html" }}
   {{ end }}
 {{ end }}

tests/src/constants/constants.js

@@ -1 +1,3 @@
 export const TIMEOUT = 4000;
+export const COVEO_CREDENTIALS_BASE_URL = 'https://docs-dev.nginx.com';
+export const COVEO_CREDENTIALS_ENDPOINT = 'api/v1/auth/search_token';

tests/src/coveo.spec.js

@@ -1,4 +1,5 @@
 import { expect, test } from '@playwright/test';
+import { COVEO_CREDENTIALS_ENDPOINT } from './constants';
 import { mockCoveoCredentials, mockCoveoData } from './mock';
 import {
   buildURLFragment,
@@ -26,7 +27,8 @@ test.describe('Coveo test', () => {
 
   test.afterEach(async ({ page }) => {
     // Run basic smoke tests on all valid queries
-    if (!test.info().title.includes('invalid search query')) {
+    const excludedTests = ['invalid search query', 'missing coveo credentials'];
+    if (!excludedTests.includes(test.info().title)) {
       await runSmokeTestCoveo(page);
     }
   });
@@ -57,4 +59,20 @@ test.describe('Coveo test', () => {
     await page.reload();
     expect(page.url()).toContain(endpoint);
   });
+
+  test('missing coveo credentials', async ({ page }) => {
+    const searchEndpoint = 'search.html';
+    await page.unroute(`**/${COVEO_CREDENTIALS_ENDPOINT}`);
+    await page.evaluate(() => window.localStorage.clear());
+    await page.route(`**/${COVEO_CREDENTIALS_ENDPOINT}`, async (route) => {
+      await route.fulfill({
+        status: 404,
+        contentType: 'text/html; charset=utf-8',
+      });
+    });
+    await page.goto(`/${searchEndpoint}`);
+
+    const coveoErrorContent = page.getByTestId('coveo-error-content');
+    await expect(coveoErrorContent).toBeVisible();
+  });
 });

tests/src/mock/coveo.mock.js

@@ -1,4 +1,8 @@
 import { expect } from '@playwright/test';
+import {
+  COVEO_CREDENTIALS_BASE_URL,
+  COVEO_CREDENTIALS_ENDPOINT,
+} from '../constants';
 
 export const mockCoveoData = {
   validQuery: 'proxy',
@@ -8,24 +12,25 @@ export const mockCoveoData = {
 
 export async function mockCoveoCredentials(page, request) {
   // Get credentials
-  const tokenBaseURL = 'https://docs-dev.nginx.com';
-  const tokenEndpoint = '/api/v1/auth/search_token';
   const username = process.env.FRONT_DOOR_USERNAME;
   const password = process.env.FRONT_DOOR_PASSWORD;
-  const response = await request.get(tokenBaseURL + tokenEndpoint, {
-    headers: {
-      Authorization:
-        'Basic ' + Buffer.from(`${username}:${password}`).toString('base64'),
-    },
-  });
+  const response = await request.get(
+    `${COVEO_CREDENTIALS_BASE_URL}/${COVEO_CREDENTIALS_ENDPOINT}`,
+    {
+      headers: {
+        Authorization:
+          'Basic ' + Buffer.from(`${username}:${password}`).toString('base64'),
+      },
+    }
+  );
 
   expect(response.ok()).toBeTruthy();
   expect(response.status()).toBe(200);
 
   const credentials = await response.json();
 
   // Mock the local request to be successful, then reload the page.
-  await page.route(`**${tokenEndpoint}`, async (route) => {
+  await page.route(`**/${COVEO_CREDENTIALS_ENDPOINT}`, async (route) => {
     await route.fulfill({
       status: 200,
       contentType: 'application/json',