@patternfly/chatbot 6.4.0-prerelease.20 → 6.4.0-prerelease.22

package/src/FileDetails/__snapshots__/FileDetails.test.tsx.snap

@@ -9,6 +9,7 @@ exports[`FileDetails should render file details 1`] = `
       class="pf-v6-l-flex pf-m-align-items-center pf-m-align-self-center pf-m-justify-content-center pf-chatbot__code-icon"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -40,30 +41,38 @@ exports[`FileDetails should render file details 1`] = `
       </svg>
     </div>
     <div
-      class="pf-v6-l-stack"
+      class="pf-v6-l-flex pf-m-gap-xs"
     >
       <div
-        class="pf-v6-l-stack__item"
+        class=""
       >
-        <span
-          class="pf-chatbot__code-fileName"
+        <div
+          class="pf-v6-l-flex pf-m-column pf-m-gap-none"
         >
-          <span
-            class="pf-v6-c-truncate"
-            tabindex="0"
+          <div
+            class=""
           >
             <span
-              class="pf-v6-c-truncate__start"
+              class="pf-chatbot__code-fileName"
             >
-              test
+              <span
+                class="pf-v6-c-truncate"
+                tabindex="0"
+              >
+                <span
+                  class="pf-v6-c-truncate__start"
+                >
+                  test
+                </span>
+              </span>
             </span>
-          </span>
-        </span>
-      </div>
-      <div
-        class="pf-v6-l-stack__item pf-chatbot__code-language"
-      >
-        TEXT
+          </div>
+          <div
+            class="pf-chatbot__code-language"
+          >
+            TEXT
+          </div>
+        </div>
       </div>
     </div>
   </div>

package/src/FileDetailsLabel/FileDetailsLabel.test.tsx

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import FileDetailsLabel from './FileDetailsLabel';
 import userEvent from '@testing-library/user-event';
+import { BellIcon } from '@patternfly/react-icons';
 
 describe('FileDetailsLabel', () => {
   it('should render file details label', () => {
@@ -18,6 +19,19 @@ describe('FileDetailsLabel', () => {
     expect(screen.getByText('test')).toBeTruthy();
     expect(screen.queryByTestId('language')).toBeFalsy();
   });
+  it('should pass file size down', () => {
+    render(<FileDetailsLabel fileName="test.svg" fileSize="100MB" />);
+    expect(screen.getByText('100MB')).toBeTruthy();
+  });
+  it('should pass truncation prop down as true by default', () => {
+    render(<FileDetailsLabel fileName="test.svg" />);
+    expect(screen.getByText('test')).toBeTruthy();
+    expect(screen.queryByText('test.svg')).toBeFalsy();
+  });
+  it('should pass truncation prop down when false', () => {
+    render(<FileDetailsLabel fileName="test.svg" hasTruncation={false} />);
+    expect(screen.getByText('test.svg')).toBeTruthy();
+  });
   it('should not show spinner by default', () => {
     render(<FileDetailsLabel fileName="test.txt" spinnerTestId="spinner" />);
     expect(screen.queryByTestId('spinner')).toBeFalsy();
@@ -42,6 +56,12 @@ describe('FileDetailsLabel', () => {
   });
   it('should use closeButtonAriaLabel prop appropriately', () => {
     render(<FileDetailsLabel fileName="test.txt" onClose={jest.fn()} closeButtonAriaLabel="Delete file" />);
-    screen.getByRole('button', { name: /Delete file/i });
+    expect(screen.getByRole('button', { name: /Delete file/i })).toBeTruthy();
+  });
+  it('should support custom close icon', () => {
+    render(
+      <FileDetailsLabel fileName="test.txt" onClose={jest.fn()} closeButtonIcon={<BellIcon data-testid="bell" />} />
+    );
+    expect(screen.getByTestId('bell')).toBeTruthy();
   });
 });

package/src/FileDetailsLabel/FileDetailsLabel.tsx

@@ -4,7 +4,7 @@ import FileDetails from '../FileDetails';
 import { Spinner } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';
 
-interface FileDetailsLabelProps {
+export interface FileDetailsLabelProps {
   /** Name of file, including extension */
   fileName: string;
   /** Unique id of file */
@@ -21,6 +21,12 @@ interface FileDetailsLabelProps {
   languageTestId?: string;
   /** Custom test id for the loading spinner in the component */
   spinnerTestId?: string;
+  /** File size */
+  fileSize?: string;
+  /** Whether to truncate file name */
+  hasTruncation?: boolean;
+  /** Icon used for close button */
+  closeButtonIcon?: React.ReactNode;
 }
 
 export const FileDetailsLabel = ({
@@ -31,7 +37,11 @@ export const FileDetailsLabel = ({
   onClose,
   closeButtonAriaLabel,
   languageTestId,
-  spinnerTestId
+  spinnerTestId,
+  fileSize,
+  hasTruncation = true,
+  closeButtonIcon = <TimesIcon />,
+  ...props
 }: PropsWithChildren<FileDetailsLabelProps>) => {
   const handleClose = (event) => {
     onClose && onClose(event, fileName, fileId);
@@ -45,17 +55,20 @@ export const FileDetailsLabel = ({
           type="button"
           variant="plain"
           aria-label={closeButtonAriaLabel ?? `Close ${fileName}`}
-          icon={<TimesIcon />}
+          icon={closeButtonIcon}
           onClick={handleClose}
         />
       }
       {...(onClick && { onClick: (event) => onClick(event, fileName, fileId) })}
+      {...props}
     >
       <div className="pf-chatbot__file-label-contents">
         <FileDetails
           className={isLoading ? 'pf-chatbot__file-label-loading' : undefined}
           fileName={fileName}
           languageTestId={languageTestId}
+          fileSize={fileSize}
+          hasTruncation={hasTruncation}
         />
         {isLoading && <Spinner data-testid={spinnerTestId} size="sm" />}
       </div>

package/src/FileDetailsLabel/__snapshots__/FileDetailsLabel.test.tsx.snap

@@ -21,6 +21,7 @@ exports[`FileDetailsLabel should render file details label 1`] = `
               class="pf-v6-l-flex pf-m-align-items-center pf-m-align-self-center pf-m-justify-content-center pf-chatbot__code-icon"
             >
               <svg
+                aria-hidden="true"
                 fill="currentColor"
                 height="24"
                 viewBox="0 0 24 24"
@@ -52,30 +53,38 @@ exports[`FileDetailsLabel should render file details label 1`] = `
               </svg>
             </div>
             <div
-              class="pf-v6-l-stack"
+              class="pf-v6-l-flex pf-m-gap-xs"
             >
               <div
-                class="pf-v6-l-stack__item"
+                class=""
               >
-                <span
-                  class="pf-chatbot__code-fileName"
+                <div
+                  class="pf-v6-l-flex pf-m-column pf-m-gap-none"
                 >
-                  <span
-                    class="pf-v6-c-truncate"
-                    tabindex="0"
+                  <div
+                    class=""
                   >
                     <span
-                      class="pf-v6-c-truncate__start"
+                      class="pf-chatbot__code-fileName"
                     >
-                      test
+                      <span
+                        class="pf-v6-c-truncate"
+                        tabindex="0"
+                      >
+                        <span
+                          class="pf-v6-c-truncate__start"
+                        >
+                          test
+                        </span>
+                      </span>
                     </span>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="pf-v6-l-stack__item pf-chatbot__code-language"
-              >
-                TEXT
+                  </div>
+                  <div
+                    class="pf-chatbot__code-language"
+                  >
+                    TEXT
+                  </div>
+                </div>
               </div>
             </div>
           </div>

package/src/ImagePreview/ImagePreview.scss

@@ -0,0 +1,61 @@
+.pf-chatbot__image-preview-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-label--MaxWidth: initial;
+  --pf-v6-c-modal-box--ZIndex: var(--pf-t--global--z-index--2xl);
+
+  img {
+    flex: 1 0 0;
+    align-self: stretch;
+  }
+  .pf-chatbot__file-label {
+    min-width: fit-content;
+  }
+}
+
+.pf-chatbot__image-preview-stack {
+  height: unset;
+}
+
+.pf-v6-c-modal-box__footer.pf-chatbot__image-preview-footer {
+  padding-block-start: var(--pf-t--global--spacer--sm);
+}
+
+.pf-chatbot__image-preview-footer-buttons {
+  display: flex;
+  gap: var(--pf-t--global--spacer--xs);
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+
+  .pf-v6-c-button {
+    border-radius: var(--pf-t--global--border--radius--pill);
+    padding: var(--pf-t--global--spacer--sm);
+    width: 2.31rem;
+    height: 2.31rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  button:disabled,
+  button[disabled] {
+    .pf-v6-c-icon__content {
+      color: var(--pf-t--global--icon--color--disabled);
+    }
+  }
+  .pf-v6-c-button__text {
+    display: flex;
+    align-items: center;
+  }
+  // Interactive states
+  .pf-v6-c-button:hover,
+  .pf-v6-c-button:focus {
+    .pf-v6-c-button__icon {
+      color: var(--pf-t--global--icon--color--regular);
+    }
+  }
+  .pf-v6-c-button__icon {
+    color: var(--pf-t--global--icon--color--subtle);
+  }
+}

package/src/ImagePreview/ImagePreview.test.tsx

@@ -0,0 +1,253 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ImagePreview from './ImagePreview';
+import { ChatbotDisplayMode } from '../Chatbot';
+
+const mockImages = [
+  {
+    fileName: 'image1.jpg',
+    fileSize: '2.5 MB',
+    image: <img src="" alt="Test image 1" />
+  },
+  {
+    fileName: 'image2.png',
+    fileSize: '1.8 MB',
+    image: <img src="" alt="Test image 2" />
+  },
+  {
+    fileName: 'image3.gif',
+    image: <img src="" alt="Test image 3" />
+  }
+];
+
+const defaultProps = {
+  isModalOpen: true,
+  handleModalToggle: jest.fn(),
+  images: mockImages
+};
+
+describe('ImagePreview', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders modal when isModalOpen is true', () => {
+    render(<ImagePreview {...defaultProps} />);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('does not render modal when isModalOpen is false', () => {
+    render(<ImagePreview {...defaultProps} isModalOpen={false} />);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('displays custom title when provided', () => {
+    const customTitle = 'Custom image preview';
+    render(<ImagePreview {...defaultProps} title={customTitle} />);
+    expect(screen.getByRole('heading', { name: customTitle })).toBeInTheDocument();
+  });
+
+  it('displays default title when no title provided', () => {
+    render(<ImagePreview {...defaultProps} />);
+    expect(screen.getByRole('heading', { name: /Preview images/i })).toBeInTheDocument();
+  });
+
+  it('calls handleModalToggle when modal is closed', () => {
+    const mockHandleToggle = jest.fn();
+    render(<ImagePreview {...defaultProps} handleModalToggle={mockHandleToggle} />);
+    const closeButton = screen.getByRole('button', { name: /close/i });
+    fireEvent.click(closeButton);
+    expect(mockHandleToggle).toHaveBeenCalledTimes(1);
+  });
+
+  it('displays first image by default', () => {
+    render(<ImagePreview {...defaultProps} />);
+    expect(screen.getByText('image1.jpg')).toBeInTheDocument();
+    expect(screen.getByText('2.5 MB')).toBeInTheDocument();
+    expect(screen.getByAltText('Test image 1')).toBeInTheDocument();
+  });
+
+  it('displays page counter correctly', () => {
+    render(<ImagePreview {...defaultProps} />);
+    expect(screen.getByText('1/3')).toBeInTheDocument();
+  });
+
+  it('navigates to next image when next button is clicked', () => {
+    const mockOnNextClick = jest.fn();
+    render(<ImagePreview {...defaultProps} onNextClick={mockOnNextClick} />);
+    const nextButton = screen.getByRole('button', { name: /Go to next image/i });
+    fireEvent.click(nextButton);
+    expect(mockOnNextClick).toHaveBeenCalled();
+    expect(screen.getByText('2/3')).toBeInTheDocument();
+    expect(screen.getByText('image2.png')).toBeInTheDocument();
+  });
+
+  it('navigates to previous image when previous button is clicked', () => {
+    const mockOnPreviousClick = jest.fn();
+    render(<ImagePreview {...defaultProps} onPreviousClick={mockOnPreviousClick} />);
+    // First go to page 2
+    const nextButton = screen.getByRole('button', { name: /Go to next image/i });
+    fireEvent.click(nextButton);
+    // Then go back to page 1
+    const previousButton = screen.getByRole('button', { name: /Go to previous image/i });
+    fireEvent.click(previousButton);
+    expect(mockOnPreviousClick).toHaveBeenCalled();
+    expect(screen.getByText('1/3')).toBeInTheDocument();
+  });
+
+  it('calls onSetPage when page changes', () => {
+    const mockOnSetPage = jest.fn();
+    render(<ImagePreview {...defaultProps} onSetPage={mockOnSetPage} />);
+    const nextButton = screen.getByRole('button', { name: /Go to next image/i });
+    fireEvent.click(nextButton);
+    expect(mockOnSetPage).toHaveBeenCalledWith(expect.any(Object), 2);
+  });
+
+  it('disables previous button on first page', () => {
+    render(<ImagePreview {...defaultProps} />);
+    const previousButton = screen.getByRole('button', { name: /Go to previous image/i });
+    expect(previousButton).toBeDisabled();
+  });
+
+  it('disables next button on last page', () => {
+    render(<ImagePreview {...defaultProps} />);
+    // Navigate to last page
+    const nextButton = screen.getByRole('button', { name: /Go to next image/i });
+    fireEvent.click(nextButton); // page 2
+    fireEvent.click(nextButton); // page 3
+    expect(nextButton).toBeDisabled();
+  });
+
+  it('disables both navigation buttons when isDisabled is true', () => {
+    render(<ImagePreview {...defaultProps} isDisabled={true} />);
+    const previousButton = screen.getByRole('button', { name: /Go to previous image/i });
+    const nextButton = screen.getByRole('button', { name: /Go to next image/i });
+    expect(previousButton).toBeDisabled();
+    expect(nextButton).toBeDisabled();
+  });
+
+  it('uses custom aria labels for pagination', () => {
+    const customLabels = {
+      paginationAriaLabel: 'Custom pagination',
+      toPreviousPageAriaLabel: 'Go to previous image',
+      toNextPageAriaLabel: 'Go to next image'
+    };
+
+    render(<ImagePreview {...defaultProps} {...customLabels} />);
+    expect(screen.getByRole('navigation', { name: 'Custom pagination' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Go to previous image' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Go to next image' })).toBeInTheDocument();
+  });
+
+  it('renders with compact mode when isCompact is true', () => {
+    render(<ImagePreview {...defaultProps} isCompact={true} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveClass('pf-m-compact');
+  });
+
+  it('applies custom className when provided', () => {
+    const customClassName = 'custom-image-preview';
+    render(<ImagePreview {...defaultProps} className={customClassName} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveClass(customClassName);
+  });
+
+  it('applies display mode class correctly', () => {
+    render(<ImagePreview {...defaultProps} displayMode={ChatbotDisplayMode.embedded} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveClass('pf-chatbot__image-preview-modal--embedded');
+  });
+
+  it('passes additional props to ChatbotModal', () => {
+    const modalClass = 'custom-modal-class';
+    const additionalProps = {
+      'data-testid': 'modal',
+      className: modalClass
+    };
+    render(<ImagePreview {...defaultProps} {...additionalProps} />);
+    const modal = screen.getByTestId('modal');
+    expect(modal).toBeInTheDocument();
+    expect(modal).toBeInTheDocument();
+    expect(modal).toHaveClass(modalClass);
+  });
+
+  it('passes modalHeaderProps correctly', () => {
+    const headerClass = 'custom-modal-header-class';
+    const headerProps = {
+      'data-testid': 'header',
+      className: headerClass
+    };
+    render(<ImagePreview {...defaultProps} modalHeaderProps={headerProps} />);
+    expect(screen.getByTestId('header')).toBeInTheDocument();
+    expect(screen.getByTestId('header')).toHaveClass(headerClass);
+  });
+
+  it('passes modalBodyProps correctly', () => {
+    const bodyClass = 'custom-modal-body-class';
+    const bodyProps = {
+      'data-testid': 'body',
+      className: bodyClass
+    };
+    render(<ImagePreview {...defaultProps} modalBodyProps={bodyProps} />);
+    expect(screen.getByTestId('body')).toBeInTheDocument();
+    expect(screen.getByTestId('body')).toHaveClass(bodyClass);
+  });
+
+  it('handles single image without pagination', () => {
+    const singleImage = [mockImages[0]];
+    render(<ImagePreview {...defaultProps} images={singleImage} />);
+    expect(screen.queryByText('1/1')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Go to previous image/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Go to next image/i })).not.toBeInTheDocument();
+  });
+
+  it('calls onCloseFileDetailsLabel when file details close button is clicked', () => {
+    const mockOnClose = jest.fn();
+    render(<ImagePreview {...defaultProps} onCloseFileDetailsLabel={mockOnClose} />);
+    const closeButton = screen.getByRole('button', { name: /Close image1.jpg/i });
+    fireEvent.click(closeButton);
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('passes fileDetailsLabelProps correctly to FileDetailsLabel', () => {
+    const customFileDetailsProps = {
+      'data-testid': 'custom-file-details'
+    };
+    render(<ImagePreview {...defaultProps} fileDetailsLabelProps={customFileDetailsProps as any} />);
+    expect(screen.getByTestId('custom-file-details')).toBeInTheDocument();
+  });
+
+  it('displays file details for current page when navigating', () => {
+    render(<ImagePreview {...defaultProps} />);
+    // Initially shows first image details
+    expect(screen.getByText('image1.jpg')).toBeInTheDocument();
+    expect(screen.getByText('2.5 MB')).toBeInTheDocument();
+
+    // Navigate to second page
+    const nextButton = screen.getByRole('button', { name: /Go to next image/i });
+    fireEvent.click(nextButton);
+
+    // Should now show second image details
+    expect(screen.getByText('image2.png')).toBeInTheDocument();
+    expect(screen.getByText('1.8 MB')).toBeInTheDocument();
+
+    // Navigate to third page
+    fireEvent.click(nextButton);
+
+    // Should now show third image details (no file size)
+    expect(screen.getByText('image3.gif')).toBeInTheDocument();
+    expect(screen.queryByText(/MB/)).not.toBeInTheDocument();
+  });
+
+  it('sets hasTruncation to false on FileDetailsLabel', () => {
+    const longFileName = 'very-long-filename-that-would-normally-be-truncated-in-other-contexts.jpg';
+    const imageWithLongName = {
+      fileName: longFileName,
+      fileSize: '1.0 MB',
+      image: <img src="" alt="Test image with long name" />
+    };
+    render(<ImagePreview {...defaultProps} images={[imageWithLongName]} />);
+    expect(screen.getByText(longFileName)).toBeInTheDocument();
+  });
+});