Add Preview label with tooltip to chatbot header (#1761)

Introduces an orange 'Preview' label with an info icon and tooltip to the chatbot header actions, indicating the feature is in Developer Preview. Updates tests to verify the label's presence, attributes, and correct placement in the UI.

Author: mabashian

ansible_ai_connect_chatbot/src/AnsibleChatbot/AnsibleChatbot.tsx

@@ -6,6 +6,8 @@ import {
   DropdownList,
   DropdownItem,
   ExpandableSection,
+  Label,
+  Tooltip,
 } from "@patternfly/react-core";
 
 import ChatbotContent from "@patternfly/chatbot/dist/dynamic/ChatbotContent";
@@ -22,6 +24,7 @@ import ChatbotHeader, {
   ChatbotHeaderTitle,
 } from "@patternfly/chatbot/dist/dynamic/ChatbotHeader";
 
+import InfoCircleIcon from "@patternfly/react-icons/dist/esm/icons/info-circle-icon";
 import lightspeedLogo from "../assets/lightspeed.svg";
 import lightspeedLogoDark from "../assets/lightspeed_dark.svg";
 
@@ -294,6 +297,16 @@ export const AnsibleChatbot: React.FunctionComponent = () => {
                   </ChatbotHeaderTitle>
                 </ChatbotHeaderMain>
                 <ChatbotHeaderActions>
+                  <Tooltip
+                    content="This is a Developer Preview feature containing functionality that Red Hat is considering for possible inclusion into supported versions. Developer Preview versions are not fully tested and are not intended for production use. Features may change or be removed at any time."
+                    position="left"
+                    maxWidth="25rem"
+                    isContentLeftAligned
+                  >
+                    <Label color="orange" icon={<InfoCircleIcon />}>
+                      Preview
+                    </Label>
+                  </Tooltip>
                   <InventoryDocumentationModal />
                   {inDebugMode() && (
                     <ChatbotHeaderSelectorDropdown

ansible_ai_connect_chatbot/src/App.test.tsx

@@ -1067,3 +1067,50 @@ test("Documentation modal can be closed and reopened", async () => {
   // Verify modal is open again
   await expect.element(modalTitle).toBeVisible();
 });
+
+test("Preview label is visible next to documentation link", async () => {
+  mockAxios(200);
+  const view = await renderApp();
+
+  // Check that the documentation link button is visible
+  const docButton = view.getByRole("button", {
+    name: "Generate Inventory File User Documentation",
+  });
+  expect(docButton).toBeVisible();
+
+  // Check that the Preview label is visible
+  const previewLabel = view.getByText("Preview");
+  expect(previewLabel).toBeVisible();
+
+  // Verify the label has the correct attributes by finding it in the container
+  const labelElement = view.container.querySelector(
+    ".pf-v6-c-label.pf-m-orange",
+  );
+  expect(labelElement).toBeInTheDocument();
+  expect(labelElement).toHaveTextContent("Preview");
+
+  // Check that the info icon is present in the label
+  const infoIcon = labelElement?.querySelector("svg");
+  expect(infoIcon).toBeInTheDocument();
+});
+
+test("Preview label appears in the header actions area", async () => {
+  mockAxios(200);
+  const view = await renderApp();
+
+  // Find the header actions container
+  const headerActions =
+    view.container.querySelector("[class*='ChatbotHeaderActions']") ||
+    view.container.querySelector(".pf-chatbot__header-actions");
+
+  if (headerActions) {
+    // Check that the Preview label is within the header actions
+    const previewLabel = headerActions.querySelector(".pf-v6-c-label");
+    expect(previewLabel).toBeInTheDocument();
+    expect(previewLabel).toHaveTextContent("Preview");
+  } else {
+    // Fallback: just ensure the label exists somewhere in the component
+    const previewLabel = view.getByText("Preview");
+    expect(previewLabel).toBeVisible();
+  }
+});