feat(atomic): empty no-result-text prop hides component when no child results found

packages/atomic/cypress/e2e/result-list/folded-result-list-actions.ts

@@ -1,4 +1,4 @@
-import {generateComponentHTML} from '../../fixtures/test-fixture';
+import {TagProps, generateComponentHTML} from '../../fixtures/test-fixture';
 import {
   resultChildrenComponent,
   resultChildrenTemplateComponent,
@@ -7,15 +7,21 @@ import {
 import {resultLinkComponent} from './result-components/result-link-selectors';
 import {resultSectionTags} from './result-list-selectors';
 
-export function buildResultTopChild(children?: HTMLElement): HTMLElement[] {
+export function buildResultTopChild(
+  children?: HTMLElement,
+  props?: TagProps
+): HTMLElement[] {
   return [
     generateComponentHTML(resultLinkComponent),
-    buildResultChildren(children),
+    buildResultChildren(children, props),
   ];
 }
 
-export function buildResultChildren(grandChildren?: HTMLElement): HTMLElement {
-  const children = generateComponentHTML(resultChildrenComponent);
+export function buildResultChildren(
+  grandChildren?: HTMLElement,
+  props?: TagProps
+): HTMLElement {
+  const children = generateComponentHTML(resultChildrenComponent, props);
   const childrenTemplate = generateComponentHTML(
     resultChildrenTemplateComponent
   );

packages/atomic/cypress/e2e/result-list/folded-result-list-selectors.ts

@@ -60,6 +60,11 @@ export const FoldedResultListSelectors = {
       .find(resultComponent)
       .shadow()
       .eq(grandChildIndex),
+  noResultsLabel: () =>
+    FoldedResultListSelectors.resultChildren()
+      .should('have.attr', 'data-atomic-rendered', 'true')
+      .shadow()
+      .find('[part="no-result-root"]'),
   sections: {
     visual: () =>
       FoldedResultListSelectors.firstResult().find(resultSectionTags.visual),

packages/atomic/cypress/e2e/result-list/folded-result-list.cypress.ts

@@ -21,6 +21,7 @@ import {
   addFoldedResultList,
   buildTemplateWithoutSections,
   buildTemplateWithSections,
+  removeResultChildrenFromResponse,
 } from './result-list-actions';
 
 const setSourceAndSortCriteria = () => {
@@ -51,6 +52,34 @@ describe('Folded Result List Component', () => {
       .contains(ExpectedHierarchy.children[1].name);
   });
 
+  it('should show a "no results" label when no child results are found', () => {
+    new TestFixture()
+      .with(setSourceAndSortCriteria)
+      .with(
+        addFoldedResultList(buildTemplateWithoutSections(buildResultTopChild()))
+      )
+      .with(removeResultChildrenFromResponse)
+      .init();
+
+    FoldedResultListSelectors.noResultsLabel().should('be.visible');
+  });
+
+  it('should not show a "no results" label when no child results are found when no-result-text is empty', () => {
+    new TestFixture()
+      .with(setSourceAndSortCriteria)
+      .with(
+        addFoldedResultList(
+          buildTemplateWithoutSections(
+            buildResultTopChild(undefined, {'no-result-text': ''})
+          )
+        )
+      )
+      .with(removeResultChildrenFromResponse)
+      .init();
+
+    FoldedResultListSelectors.noResultsLabel().should('not.exist');
+  });
+
   it('renders content before and after children only when there are children', () => {
     const components = buildResultTopChild();
 

packages/atomic/cypress/e2e/result-list/result-list-actions.ts

@@ -1,3 +1,4 @@
+import {ResultWithFolding} from '@coveo/headless/dist/definitions/features/folding/folding-slice';
 import {
   TestFixture,
   generateComponentHTML,
@@ -77,3 +78,11 @@ export const addFoldedResultList =
     }
     fixture.withElement(foldedResultList);
   };
+
+export const removeResultChildrenFromResponse = (fixture: TestFixture) => {
+  fixture.withCustomResponse((response) =>
+    response.results.forEach((result) => {
+      (result as ResultWithFolding).childResults = [];
+    })
+  );
+};

packages/atomic/src/components.d.ts

@@ -654,7 +654,7 @@ export namespace Components {
          */
         "inheritTemplates": boolean;
         /**
-          * The non-localized copy for an empty result state.
+          * The non-localized copy for an empty result state. An empty string will result in the component being hidden.
          */
         "noResultText": string;
     }
@@ -1400,7 +1400,7 @@ export namespace Components {
          */
         "inheritTemplates": boolean;
         /**
-          * The non-localized copy for an empty result state.
+          * The non-localized copy for an empty result state. An empty string will result in the component being hidden.
          */
         "noResultText": string;
     }
@@ -3606,7 +3606,7 @@ declare namespace LocalJSX {
          */
         "inheritTemplates"?: boolean;
         /**
-          * The non-localized copy for an empty result state.
+          * The non-localized copy for an empty result state. An empty string will result in the component being hidden.
          */
         "noResultText"?: string;
     }
@@ -4309,7 +4309,7 @@ declare namespace LocalJSX {
          */
         "inheritTemplates"?: boolean;
         /**
-          * The non-localized copy for an empty result state.
+          * The non-localized copy for an empty result state. An empty string will result in the component being hidden.
          */
         "noResultText"?: string;
     }

packages/atomic/src/components/common/result-children/result-children-common.tsx

@@ -128,7 +128,9 @@ export class ResultChildrenCommon {
     }
 
     if (!collection.moreResultsAvailable && !this.hasChildren) {
-      return this.renderNoResult();
+      return this.props.getNoResultText()?.trim().length
+        ? this.renderNoResult()
+        : null;
     }
 
     if (!this.hasChildren) {

packages/atomic/src/components/common/result/result-row-desktop.pcss

@@ -9,7 +9,8 @@
       padding: $margin-lg;
     }
 
-    atomic-result-children::part(show-hide-button) {
+    atomic-result-children::part(show-hide-button),
+    atomic-insight-result-children::part(show-hide-button) {
       margin-top: $margin-sm;
       margin-bottom: $margin-sm;
     }

packages/atomic/src/components/insight/atomic-insight-result/atomic-insight-result.pcss

@@ -6,29 +6,30 @@ atomic-result-section-children {
   padding-left: 1rem;
 }
 
-:host(:hover) {
-  .with-sections {
-    background-color: var(--atomic-neutral-lighter);
-  }
-
-  atomic-insight-result-action-bar {
-    @apply visible;
-  }
-}
-
 :host {
   @apply relative;
-  .with-sections {
+
+  .with-sections:not(.child-result) {
     @apply p-6;
   }
-}
 
-:host(:first-of-type) {
-  .with-sections {
-    @apply pt-8;
+  &(:hover) {
+    .with-sections {
+      background-color: var(--atomic-neutral-lighter);
+    }
+
+    atomic-insight-result-action-bar {
+      @apply visible;
+    }
   }
 
-  atomic-insight-result-action-bar {
-    @apply top-0;
+  &(:first-of-type) {
+    .with-sections:not(.child-result) {
+      @apply pt-8;
+    }
+
+    atomic-insight-result-action-bar {
+      @apply top-0;
+    }
   }
 }

packages/atomic/src/components/insight/result-lists/atomic-insight-folded-result-list/atomic-insight-folded-result-list.pcss

@@ -1,6 +1,2 @@
 @import '../../../common/result-list/styles/placeholders.pcss';
 @import '../styles/list-display.pcss';
-
-.list-root {
-  @apply p-0;
-}

packages/atomic/src/components/insight/result-lists/atomic-insight-result-list/atomic-insight-result-list.pcss

@@ -1,6 +1,2 @@
 @import '../../../common/result-list/styles/placeholders.pcss';
 @import '../styles/list-display.pcss';
-
-.list-root {
-  @apply p-0;
-}

packages/atomic/src/components/insight/result-lists/styles/list-display.pcss

@@ -8,18 +8,24 @@
   margin-bottom: 1rem;
 }
 
-.list-root.display-list {
-  display: flex;
-  flex-direction: column;
+.list-root {
+  &.display-list {
+    display: flex;
+    flex-direction: column;
 
-  .result-component,
-  atomic-result-placeholder {
-    width: auto;
-  }
+    .result-component,
+    atomic-result-placeholder {
+      width: auto;
+    }
+
+    @mixin atomic-list-with-dividers;
 
-  @mixin atomic-list-with-dividers;
+    .result-component[part~='outline']::before {
+      @apply my-0 mx-6;
+    }
+  }
 
-  .result-component[part~='outline']::before {
-    @apply my-0 mx-6;
+  &.placeholder {
+    padding: 0.5rem 1.5rem;
   }
 }

packages/atomic/src/components/insight/result-templates/atomic-insight-result-children/atomic-insight-result-children.tsx

@@ -71,7 +71,7 @@ export class AtomicResultChildren
    */
   @Prop({reflect: true}) imageSize?: ResultDisplayImageSize;
   /**
-   * The non-localized copy for an empty result state.
+   * The non-localized copy for an empty result state. An empty string will result in the component being hidden.
    */
   @Prop() public noResultText = 'no-documents-related';
 

packages/atomic/src/components/search/result-lists/atomic-result-children/atomic-result-children.tsx

@@ -75,7 +75,7 @@ export class AtomicResultChildren implements InitializableComponent {
    */
   @Prop({reflect: true}) imageSize?: ResultDisplayImageSize;
   /**
-   * The non-localized copy for an empty result state.
+   * The non-localized copy for an empty result state. An empty string will result in the component being hidden.
    */
   @Prop() public noResultText = 'no-documents-related';