Add support for displaying helpPopover next to the button in NoData

src/components/Label/index.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import classnames from "classnames";
 import PropTypes from "prop-types";
 
-import HelpContent from "./HelpContent";
+import { HelpContent } from "components/commons";
 
 import Button from "../Button";
 import Tooltip from "../Tooltip";

src/components/NoData/index.jsx

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import { isEmpty, isNil, omit } from "ramda";
 
 import Button from "components/Button";
+import { HelpContent } from "components/commons";
 import Tooltip from "components/Tooltip";
 import Typography from "components/Typography";
 
@@ -20,11 +21,13 @@ const NoData = ({
   secondaryButtonProps = {},
   buttonSeparatorText = "",
   showTooltipWhenButtonDisabled = false,
+  helpIconProps = {},
   ...otherProps
 }) => {
   const hasPrimaryButtonProps = !isEmpty(primaryButtonProps);
   const hasSecondaryButtonProps = !isEmpty(secondaryButtonProps);
   const hasButtonSeparatorText = !isEmpty(buttonSeparatorText);
+  const hasHelpIconProps = !isEmpty(helpIconProps);
 
   const showButtonSeparator =
     hasButtonSeparatorText && hasPrimaryButtonProps && hasSecondaryButtonProps;
@@ -78,12 +81,13 @@ const NoData = ({
                 (!showTooltipWhenButtonDisabled && primaryButtonProps?.disabled)
               }
             >
-              <div>
+              <div className="flex items-center gap-1">
                 <Button
                   data-cy="no-data-primary-button"
                   data-testid="no-data-primary-button"
                   {...omit(["tooltipProps"], primaryButtonProps)}
                 />
+                {hasHelpIconProps && <HelpContent {...{ helpIconProps }} />}
               </div>
             </Tooltip>
           )}
@@ -154,6 +158,10 @@ NoData.propTypes = {
    * To specify the text that appears between the primary and secondary buttons.
    * */
   buttonSeparatorText: PropTypes.string,
+  /**
+   * To specify the props to be passed to the help popover for the disabled button.
+   */
+  helpIconProps: PropTypes.object,
 };
 
 export default NoData;

src/components/commons/index.js

@@ -0,0 +1,3 @@
+import HelpContent from "./HelpContent";
+
+export { HelpContent };

stories/Components/NoData.stories.jsx

@@ -134,6 +134,27 @@ const WithHelpText = args => (
 
 WithHelpText.storyName = "No Data with help text";
 
+const WithHelpIcon = args => (
+  <div className="flex w-full items-center justify-center">
+    <NoData
+      {...args}
+      description="You can try adding a new ticket or learn more about how tickets work."
+      primaryButtonProps={{ label: "Add new ticket" }}
+      title="There are no tickets to show"
+      helpIconProps={{
+        popoverProps: {
+          title: "What is KB keywords?",
+          description:
+            "Keywords represent the key concepts of an article. These will be shown on the KB and will be used for SEO",
+          helpLinkProps: { label: "View help article" },
+        },
+      }}
+    />
+  </div>
+);
+
+WithHelpIcon.storyName = "No Data with help icon";
+
 const WithCustomImageAsSVG = args => (
   <div className="flex w-full items-center justify-center">
     <NoData
@@ -208,6 +229,7 @@ export {
   WithDescription,
   WithSecondaryButton,
   WithHelpText,
+  WithHelpIcon,
   WithCustomImageAsSVG,
   WithCustomImageFromURL,
   CSSCustomization,

tests/NoData.test.jsx

@@ -95,4 +95,31 @@ describe("Typography", () => {
     await userEvent.hover(secondaryButton);
     await expect(screen.getByText("Secondary tooltip")).toBeInTheDocument();
   });
+
+  it("should display help icon popover when hovered", async () => {
+    const { container } = render(
+      <NoData
+        primaryButtonProps={{ label: "Add new ticket" }}
+        title="There are no tickets to show"
+        helpIconProps={{
+          popoverProps: {
+            title: "About Tickets",
+            description: "Tickets help you track customer issues.",
+            helpLinkProps: { label: "Learn more" },
+          },
+        }}
+      />
+    );
+
+    const helpIcon = container.querySelector(".neeto-ui-label__help-icon-wrap");
+    expect(helpIcon).toBeInTheDocument();
+
+    await userEvent.hover(helpIcon);
+
+    await expect(screen.getByText("About Tickets")).toBeInTheDocument();
+    await expect(
+      screen.getByText("Tickets help you track customer issues.")
+    ).toBeInTheDocument();
+    await expect(screen.getByText("Learn more")).toBeInTheDocument();
+  });
 });

types/NoData.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { ButtonProps } from "./Button";
+import { HelpContentProps } from "./HelpContent";
 
 export type NoDataProps = {
   title?: string;
@@ -8,6 +9,7 @@ export type NoDataProps = {
   primaryButtonProps?: ButtonProps;
   secondaryButtonProps?: ButtonProps;
   showTooltipWhenButtonDisabled?: boolean;
+  helpIconProps?: HelpContentProps;
   className?: string;
 };