refactor: migrate atomic-no-results from Stencil to Lit (#6322)

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: fpbrault <[email protected]>
Co-authored-by: Felix Perron-Brault <[email protected]>
Co-authored-by: Louis Bompart <[email protected]>
Co-authored-by: developer-experience-bot[bot] <91079284+developer-experience-bot[bot]@users.noreply.github.com>
Co-authored-by: louis-bompart <[email protected]>
Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>

Author: 5 people

packages/atomic-react/.gitignore

@@ -2,4 +2,4 @@ node_modules/
 dist
 
 # Stencil generated files
-stencil-generated/
+stencil-generated/

packages/atomic-react/src/components/search/components.ts

@@ -10,6 +10,7 @@ import {
   AtomicInsightInterface as LitAtomicInsightInterface,
   AtomicLayoutSection as LitAtomicLayoutSection,
   AtomicLoadMoreResults as LitAtomicLoadMoreResults,
+  AtomicNoResults as LitAtomicNoResults,
   AtomicNumericRange as LitAtomicNumericRange,
   AtomicPager as LitAtomicPager,
   AtomicQueryError as LitAtomicQueryError,
@@ -108,6 +109,12 @@ export const AtomicLoadMoreResults = createComponent({
   elementClass: LitAtomicLoadMoreResults,
 });
 
+export const AtomicNoResults = createComponent({
+  tagName: 'atomic-no-results',
+  react: React,
+  elementClass: LitAtomicNoResults,
+});
+
 export const AtomicNumericRange = createComponent({
   tagName: 'atomic-numeric-range',
   react: React,

packages/atomic/cypress/e2e/no-results-selectors.ts

@@ -1094,15 +1094,6 @@ export namespace Components {
     }
     interface AtomicIpxTabs {
     }
-    /**
-     * The `atomic-no-results` component displays search tips and a "Cancel last action" button when there are no results. Any additional content slotted inside of its element will be displayed as well.
-     */
-    interface AtomicNoResults {
-        /**
-          * Whether to display a button which cancels the last available action.
-         */
-        "enableCancelLastAction": boolean;
-    }
     /**
      * The `atomic-notifications` component is responsible for displaying notifications generated by the Coveo Search API (see [Trigger](https://docs.coveo.com/en/1458)).
      */
@@ -2697,15 +2688,6 @@ declare global {
         prototype: HTMLAtomicIpxTabsElement;
         new (): HTMLAtomicIpxTabsElement;
     };
-    /**
-     * The `atomic-no-results` component displays search tips and a "Cancel last action" button when there are no results. Any additional content slotted inside of its element will be displayed as well.
-     */
-    interface HTMLAtomicNoResultsElement extends Components.AtomicNoResults, HTMLStencilElement {
-    }
-    var HTMLAtomicNoResultsElement: {
-        prototype: HTMLAtomicNoResultsElement;
-        new (): HTMLAtomicNoResultsElement;
-    };
     /**
      * The `atomic-notifications` component is responsible for displaying notifications generated by the Coveo Search API (see [Trigger](https://docs.coveo.com/en/1458)).
      */
@@ -3328,7 +3310,6 @@ declare global {
         "atomic-ipx-result-link": HTMLAtomicIpxResultLinkElement;
         "atomic-ipx-tab": HTMLAtomicIpxTabElement;
         "atomic-ipx-tabs": HTMLAtomicIpxTabsElement;
-        "atomic-no-results": HTMLAtomicNoResultsElement;
         "atomic-notifications": HTMLAtomicNotificationsElement;
         "atomic-numeric-facet": HTMLAtomicNumericFacetElement;
         "atomic-popover": HTMLAtomicPopoverElement;
@@ -4407,15 +4388,6 @@ declare namespace LocalJSX {
     }
     interface AtomicIpxTabs {
     }
-    /**
-     * The `atomic-no-results` component displays search tips and a "Cancel last action" button when there are no results. Any additional content slotted inside of its element will be displayed as well.
-     */
-    interface AtomicNoResults {
-        /**
-          * Whether to display a button which cancels the last available action.
-         */
-        "enableCancelLastAction"?: boolean;
-    }
     /**
      * The `atomic-notifications` component is responsible for displaying notifications generated by the Coveo Search API (see [Trigger](https://docs.coveo.com/en/1458)).
      */
@@ -5458,7 +5430,6 @@ declare namespace LocalJSX {
         "atomic-ipx-result-link": AtomicIpxResultLink;
         "atomic-ipx-tab": AtomicIpxTab;
         "atomic-ipx-tabs": AtomicIpxTabs;
-        "atomic-no-results": AtomicNoResults;
         "atomic-notifications": AtomicNotifications;
         "atomic-numeric-facet": AtomicNumericFacet;
         "atomic-popover": AtomicPopover;
@@ -5659,10 +5630,6 @@ declare module "@stencil/core" {
             "atomic-ipx-result-link": LocalJSX.AtomicIpxResultLink & JSXBase.HTMLAttributes<HTMLAtomicIpxResultLinkElement>;
             "atomic-ipx-tab": LocalJSX.AtomicIpxTab & JSXBase.HTMLAttributes<HTMLAtomicIpxTabElement>;
             "atomic-ipx-tabs": LocalJSX.AtomicIpxTabs & JSXBase.HTMLAttributes<HTMLAtomicIpxTabsElement>;
-            /**
-             * The `atomic-no-results` component displays search tips and a "Cancel last action" button when there are no results. Any additional content slotted inside of its element will be displayed as well.
-             */
-            "atomic-no-results": LocalJSX.AtomicNoResults & JSXBase.HTMLAttributes<HTMLAtomicNoResultsElement>;
             /**
              * The `atomic-notifications` component is responsible for displaying notifications generated by the Coveo Search API (see [Trigger](https://docs.coveo.com/en/1458)).
              */

packages/atomic/cypress/e2e/no-results.cypress.ts

@@ -0,0 +1,77 @@
+import type {i18n} from 'i18next';
+import {html} from 'lit';
+import {beforeAll, describe, expect, it, vi} from 'vitest';
+import {renderFunctionFixture} from '@/vitest-utils/testing-helpers/fixture';
+import {createTestI18n} from '@/vitest-utils/testing-helpers/i18n-utils';
+import {type CancelProps, renderCancel} from './cancel';
+
+describe('#renderCancel', () => {
+  let i18n: i18n;
+
+  beforeAll(async () => {
+    i18n = await createTestI18n();
+  });
+
+  const locators = (element: Element) => ({
+    get button() {
+      return element.querySelector('button[part="cancel-button"]');
+    },
+  });
+
+  const renderComponent = async (props: Partial<CancelProps> = {}) => {
+    return await renderFunctionFixture(
+      html`${renderCancel({
+        props: {
+          i18n,
+          onClick: vi.fn(),
+          ...props,
+        },
+      })}`
+    );
+  };
+
+  it('should render with valid props', async () => {
+    const element = await renderComponent();
+    expect(element).toBeDefined();
+  });
+
+  it('should render button with the correct part', async () => {
+    const element = await renderComponent();
+    const button = locators(element).button;
+
+    expect(button).not.toBeNull();
+    expect(button?.tagName).toBe('BUTTON');
+    expect(button?.part).toContain('cancel-button');
+  });
+
+  it('should render button with correct text', async () => {
+    const element = await renderComponent();
+    const button = locators(element).button;
+
+    expect(button).toHaveTextContent('Cancel last action');
+  });
+
+  it('should render button with primary style', async () => {
+    const element = await renderComponent();
+    const button = locators(element).button;
+
+    expect(button?.classList).toContain('btn-primary');
+  });
+
+  it('should render button with correct classes', async () => {
+    const element = await renderComponent();
+    const button = locators(element).button;
+
+    expect(button).toHaveClass('my-3', 'px-2.5', 'py-3', 'font-bold');
+  });
+
+  it('should call onClick when button is clicked', async () => {
+    const handleClick = vi.fn();
+    const element = await renderComponent({onClick: handleClick});
+    const button = locators(element).button as HTMLButtonElement;
+
+    button.click();
+
+    expect(handleClick).toHaveBeenCalledOnce();
+  });
+});

packages/atomic/src/components.d.ts

@@ -0,0 +1,20 @@
+import type {i18n} from 'i18next';
+import {nothing} from 'lit';
+import {renderButton} from '@/src/components/common/button.js';
+import type {FunctionalComponent} from '@/src/utils/functional-component-utils';
+
+export interface CancelProps {
+  i18n: i18n;
+  onClick: () => void;
+}
+
+export const renderCancel: FunctionalComponent<CancelProps> = ({props}) =>
+  renderButton({
+    props: {
+      style: 'primary',
+      part: 'cancel-button',
+      text: props.i18n.t('cancel-last-action'),
+      onClick: props.onClick,
+      class: 'my-3 px-2.5 py-3 font-bold',
+    },
+  })(nothing);

packages/atomic/src/components/common/no-items/cancel.spec.ts

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as AtomicNoResultsStories from './atomic-no-results.new.stories';
+import { AtomicDocTemplate } from '../../../../storybook-utils/documentation/atomic-doc-template';
+
+
+<Meta of={AtomicNoResultsStories} />
+
+<AtomicDocTemplate
+  stories={AtomicNoResultsStories}
+  githubPath="search/atomic-no-results/atomic-no-results.ts"
+  tagName="atomic-no-results"
+  className="AtomicNoResults"
+>
+
+The `atomic-no-results` component displays search tips and a "Cancel last action" button when there are no results. Any additional content slotted inside of its element will be displayed as well.
+
+This component is typically placed within the results section of the search interface layout.
+```html
+<atomic-search-interface>
+  ...
+  <atomic-search-layout>
+    ...
+    <atomic-layout-section section="main">
+      ...
+      <atomic-layout-section section="results">
+
+        <atomic-no-results></atomic-no-results>
+
+      </atomic-layout-section>
+    </atomic-layout-section>
+  </atomic-search-layout>
+</atomic-search-interface>
+```
+
+</AtomicDocTemplate>