[EuiSelectableSitewideTemplate][Fix] Do not show noMatchesMessage if one is provided by consumer

changelogs/upcoming/7758.md

@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed an issue with <SelectableTemplateSitewide>. If a consumer passes in a custom noMatchesMessage, then EUI should not pass the default empty message. On slow networks, this causes two no matches messages to appear to the end user.
+

packages/eui/changelogs/upcoming/7758.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed an issue with <SelectableTemplateSitewide>. If a consumer passes in a custom noMatchesMessage, then EUI should not pass the default empty message. On slow networks, this causes two no matches messages to appear to the end user. The user will see loading results message and then their custom noMatchesMessage.

packages/eui/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap

@@ -34,6 +34,7 @@ exports[`EuiSelectableTemplateSitewide is rendered 1`] = `
           aria-label="aria-label"
           autocomplete="off"
           class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
+          data-test-subj="nav-search-input"
           placeholder="Search for anything..."
           type="search"
           value=""
@@ -104,6 +105,7 @@ exports[`EuiSelectableTemplateSitewide props popoverFooter is rendered 1`] = `
           aria-label="Filter options"
           autocomplete="off"
           class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
+          data-test-subj="nav-search-input"
           placeholder="Search for anything..."
           type="search"
           value=""
@@ -154,6 +156,7 @@ exports[`EuiSelectableTemplateSitewide props popoverProps is rendered 1`] = `
           aria-label="Filter options"
           autocomplete="off"
           class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
+          data-test-subj="nav-search-input"
           placeholder="Search for anything..."
           type="search"
           value=""
@@ -204,6 +207,7 @@ exports[`EuiSelectableTemplateSitewide props popoverTitle is rendered 1`] = `
           aria-label="Filter options"
           autocomplete="off"
           class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
+          data-test-subj="nav-search-input"
           placeholder="Search for anything..."
           type="search"
           value=""

packages/eui/src/components/selectable/selectable_templates/selectable_template_sidewide.stories.tsx

@@ -15,6 +15,8 @@ import {
   EuiSelectableTemplateSitewideProps,
 } from './selectable_template_sitewide';
 import type { EuiSelectableTemplateSitewideOption } from './selectable_template_sitewide_option';
+import { EuiFlexGroup, EuiFlexItem } from '../../flex';
+import { EuiText } from '../../text';
 
 const options: EuiSelectableTemplateSitewideOption[] = [
   {
@@ -64,6 +66,27 @@ const options: EuiSelectableTemplateSitewideOption[] = [
   },
 ];
 
+const noMatchesMessage = (
+  <EuiFlexGroup
+    style={{ minHeight: 300 }}
+    data-test-subj="nav-search-no-results"
+    direction="column"
+    gutterSize="xs"
+    alignItems="center"
+    justifyContent="center"
+  >
+    <EuiFlexItem grow={false}>
+      <EuiText size="m">
+        <p>"No results found"</p>
+      </EuiText>
+
+      <p>
+        "Try searching for applications, dashboards, visualizations, and more."
+      </p>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);
+
 const meta: Meta<EuiSelectableTemplateSitewideProps> = {
   title: 'Templates/EuiSelectableTemplateSitewide',
   component: EuiSelectableTemplateSitewide,
@@ -89,6 +112,13 @@ const meta: Meta<EuiSelectableTemplateSitewideProps> = {
         false: undefined,
       },
     },
+    noMatchesMessage: {
+      control: 'boolean',
+      mapping: {
+        true: noMatchesMessage,
+        false: undefined,
+      },
+    },
   },
 };
 
@@ -104,5 +134,6 @@ export const Playground: Story = {
     popoverTitle: false,
     popoverFooter: false,
     popoverButtonBreakpoints: ['xs', 's', 'm', 'l', 'xl'],
+    noMatchesMessage: 'TEST',
   },
 };

packages/eui/src/components/selectable/selectable_templates/selectable_template_sitewide.spec.tsx

@@ -0,0 +1,88 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../../cypress/support" />
+
+import React from 'react';
+import { EuiSelectableTemplateSitewide } from './selectable_template_sitewide';
+
+describe('SelectableTemplateSitewide', () => {
+  beforeEach(() => {
+    cy.viewport(500, 300);
+  });
+  const props = {
+    options: [
+      {
+        label: 'Basic data application',
+        avatar: {
+          name: 'Default Space',
+        },
+        meta: [
+          {
+            text: 'Application',
+            type: 'application',
+          },
+        ],
+        url: 'welcome-dashboards',
+        'data-test-subj': 'test-this',
+      },
+      {
+        label: 'Platform with deployment highlighted',
+        icon: {
+          type: 'user',
+        },
+        meta: [
+          {
+            text: 'Account',
+            type: 'platform',
+          },
+          {
+            text: 'personal-databoard',
+            type: 'deployment',
+            highlightSearchString: true,
+          },
+        ],
+      },
+      {
+        label: 'Other metas',
+        searchableLabel: 'Totally custom with pink metadata',
+        icon: {
+          type: 'warning',
+          color: 'accent',
+        },
+        meta: [
+          {
+            text: 'Meta 1',
+            type: 'meta',
+          },
+          {
+            text: 'Meta 2',
+            type: 'meta',
+          },
+        ],
+      },
+    ],
+  };
+
+  it('uses a custom no match message if provided', () => {
+    cy.realMount(
+      <EuiSelectableTemplateSitewide
+        options={props.options}
+        noMatchesMessage={<span>THIS IS A CUSTOM MESSAGE</span>}
+      />
+    );
+    cy.get('[data-test-subj="nav-search-input"]').realClick();
+    cy.realType('adsdfadvs');
+    cy.wait(500); // need the popover to generate the message
+    cy.get('[data-test-subj="nav-search-popover"]').contains(
+      'THIS IS A CUSTOM MESSAGE'
+    );
+  });
+});

packages/eui/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx

@@ -78,6 +78,7 @@ export const EuiSelectableTemplateSitewide: FunctionComponent<
   isLoading,
   popoverButton,
   popoverButtonBreakpoints,
+  noMatchesMessage,
   ...rest
 }) => {
   /**
@@ -216,6 +217,7 @@ export const EuiSelectableTemplateSitewide: FunctionComponent<
       renderOption={euiSelectableTemplateSitewideRenderOptions}
       singleSelection={true}
       searchProps={{
+        'data-test-subj': 'nav-search-input',
         placeholder: searchPlaceholder,
         isClearable: true,
         // TS is mad that searchProps.className may be `undefined`, but we overwrite it below
@@ -243,7 +245,7 @@ export const EuiSelectableTemplateSitewide: FunctionComponent<
       }}
       loadingMessage={loadingMessage}
       emptyMessage={emptyMessage}
-      noMatchesMessage={emptyMessage}
+      noMatchesMessage={noMatchesMessage ?? emptyMessage}
       {...rest}
       className={classes}
       searchable
@@ -259,7 +261,10 @@ export const EuiSelectableTemplateSitewide: FunctionComponent<
           button={popoverTrigger ? popoverTrigger : search!}
           closePopover={closePopover}
         >
-          <div style={{ width: popoverWidth, maxWidth: '100%' }}>
+          <div
+            style={{ width: popoverWidth, maxWidth: '100%' }}
+            data-test-subj="nav-search-popover"
+          >
             {popoverTitle || popoverTrigger ? (
               <EuiPopoverTitle paddingSize="s">
                 {popoverTitle}