Merge pull request #552 from karthikjeeyar/codemodal-footer-configuration

thatblindgeye · web-flow · commit 6eda9d8d2ca6 · 2025-05-14T08:11:20.000-04:00
add footer action button text props in Attachment components.
diff --git a/packages/module/src/AttachmentEdit/AttachmentEdit.test.tsx b/packages/module/src/AttachmentEdit/AttachmentEdit.test.tsx
@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import AttachmentEdit, { AttachmentEditProps } from './AttachmentEdit';
 
 describe('AttachmentEdit', () => {
@@ -51,4 +52,48 @@ describe('AttachmentEdit', () => {
     fireEvent.click(screen.getByText('Cancel'));
     expect(onCancelHandler).toHaveBeenCalled();
   });
+
+  it('should render custom button text for footer actions buttons', () => {
+    render(
+      <AttachmentEdit
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onCancel={jest.fn()}
+        onSave={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Save"
+        secondaryActionButtonText="Close"
+      />
+    );
+
+    expect(screen.getByText('Save')).toBeInTheDocument();
+    expect(screen.getByText('Close')).toBeInTheDocument();
+  });
+
+  it('should render AttachmentEdit with custom classNames', async () => {
+    render(
+      <AttachmentEdit
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onCancel={jest.fn()}
+        onSave={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Save"
+        secondaryActionButtonText="Close"
+        modalHeaderClassName="custom-header-class"
+        modalBodyClassName="custom-body-class"
+        modalFooterClassName="custom-footer-class"
+      ></AttachmentEdit>
+    );
+
+    const modal = screen.getByRole('dialog');
+    const modalHeader = within(modal).getByRole('banner');
+    expect(modalHeader).toHaveClass('custom-header-class');
+    const modalBody = modal.querySelector('#code-modal-body');
+    expect(modalBody).toHaveClass('custom-body-class');
+    const modalfooter = within(modal).getByRole('contentinfo');
+    expect(modalfooter).toHaveClass('custom-footer-class');
+  });
 });
diff --git a/packages/module/src/AttachmentEdit/AttachmentEdit.tsx b/packages/module/src/AttachmentEdit/AttachmentEdit.tsx
@@ -24,6 +24,16 @@ export interface AttachmentEditProps {
   displayMode?: ChatbotDisplayMode;
   /** Sets modal to compact styling. */
   isCompact?: boolean;
+  /** Primary action button text */
+  primaryActionButtonText?: string;
+  /** Secondary action button text */
+  secondaryActionButtonText?: string;
+  /** Class applied to modal header */
+  modalHeaderClassName?: string;
+  /** Class applied to modal body */
+  modalBodyClassName?: string;
+  /** Class applied to modal footer */
+  modalFooterClassName?: string;
 }
 
 export const AttachmentEdit: FunctionComponent<AttachmentEditProps> = ({
@@ -35,7 +45,12 @@ export const AttachmentEdit: FunctionComponent<AttachmentEditProps> = ({
   onSave,
   title = 'Edit attachment',
   displayMode = ChatbotDisplayMode.default,
-  isCompact
+  isCompact,
+  modalHeaderClassName,
+  modalBodyClassName,
+  modalFooterClassName,
+  primaryActionButtonText = 'Save',
+  secondaryActionButtonText = 'Cancel'
 }: AttachmentEditProps) => {
   const handleSave = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent, code) => {
     handleModalToggle(_event);
@@ -55,11 +70,14 @@ export const AttachmentEdit: FunctionComponent<AttachmentEditProps> = ({
       isModalOpen={isModalOpen}
       onPrimaryAction={handleSave}
       onSecondaryAction={handleCancel}
-      primaryActionBtn="Save"
-      secondaryActionBtn="Cancel"
+      primaryActionBtn={primaryActionButtonText}
+      secondaryActionBtn={secondaryActionButtonText}
       title={title}
       displayMode={displayMode}
       isCompact={isCompact}
+      modalHeaderClassName={modalHeaderClassName}
+      modalBodyClassName={modalBodyClassName}
+      modalFooterClassName={modalFooterClassName}
     />
   );
 };
diff --git a/packages/module/src/CodeModal/CodeModal.test.tsx b/packages/module/src/CodeModal/CodeModal.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import CodeModal from './CodeModal';
 
@@ -20,4 +20,32 @@ describe('ChatbotModal', () => {
     );
     expect(screen.getByRole('dialog')).toHaveClass('pf-m-compact');
   });
+
+  it('should render CodeModal with custom classNames', async () => {
+    render(
+      <CodeModal
+        isCompact
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        handleModalToggle={jest.fn()}
+        onPrimaryAction={jest.fn()}
+        onSecondaryAction={jest.fn()}
+        title="Preview attachment"
+        primaryActionBtn="Submit"
+        secondaryActionBtn="Cancel"
+        modalHeaderClassName="custom-header-class"
+        modalBodyClassName="custom-body-class"
+        modalFooterClassName="custom-footer-class"
+      ></CodeModal>
+    );
+
+    const modal = screen.getByRole('dialog');
+    const modalHeader = within(modal).getByRole('banner');
+    expect(modalHeader).toHaveClass('custom-header-class');
+    const modalBody = modal.querySelector('#code-modal-body');
+    expect(modalBody).toHaveClass('custom-body-class');
+    const modalfooter = within(modal).getByRole('contentinfo');
+    expect(modalfooter).toHaveClass('custom-footer-class');
+  });
 });
diff --git a/packages/module/src/CodeModal/CodeModal.tsx b/packages/module/src/CodeModal/CodeModal.tsx
@@ -43,6 +43,12 @@ export interface CodeModalProps {
   displayMode?: ChatbotDisplayMode;
   /** Sets modal to compact styling. */
   isCompact?: boolean;
+  /** Class applied to modal header */
+  modalHeaderClassName?: string;
+  /** Class applied to modal body */
+  modalBodyClassName?: string;
+  /** Class applied to modal footer */
+  modalFooterClassName?: string;
 }
 
 export const CodeModal: FunctionComponent<CodeModalProps> = ({
@@ -61,6 +67,9 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
   title,
   displayMode = ChatbotDisplayMode.default,
   isCompact,
+  modalHeaderClassName,
+  modalBodyClassName,
+  modalFooterClassName,
   ...props
 }: CodeModalProps) => {
   const [newCode, setNewCode] = useState(code);
@@ -102,8 +111,8 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
       displayMode={displayMode}
       isCompact={isCompact}
     >
-      <ModalHeader title={title} labelId="code-modal-title" />
-      <ModalBody id="code-modal-body">
+      <ModalHeader className={modalHeaderClassName} title={title} labelId="code-modal-title" />
+      <ModalBody className={modalBodyClassName} id="code-modal-body">
         <Stack className="pf-chatbot__code-modal-body">
           <StackItem className="pf-chatbot__code-modal-file-details">
             <FileDetails fileName={fileName} />
@@ -130,7 +139,7 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
           </StackItem>
         </Stack>
       </ModalBody>
-      <ModalFooter>
+      <ModalFooter className={modalFooterClassName}>
         <Button isBlock key="code-modal-primary" variant="primary" onClick={handlePrimaryAction} form="code-modal-form">
           {primaryActionBtn}
         </Button>
diff --git a/packages/module/src/PreviewAttachment/PreviewAttachment.test.tsx b/packages/module/src/PreviewAttachment/PreviewAttachment.test.tsx
@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { PreviewAttachment } from './PreviewAttachment';
 
 describe('PreviewAttachment', () => {
@@ -47,4 +48,46 @@ describe('PreviewAttachment', () => {
 
     expect(onDismiss).toHaveBeenCalled();
   });
+
+  it('should render custom button text for footer actions buttons', () => {
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Edit"
+        secondaryActionButtonText="Close"
+      />
+    );
+
+    screen.getByText('Edit');
+    screen.getByText('Close');
+  });
+
+  it('should render PreviewAttachment with custom classNames', async () => {
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Edit"
+        secondaryActionButtonText="Close"
+        modalHeaderClassName="custom-header-class"
+        modalBodyClassName="custom-body-class"
+        modalFooterClassName="custom-footer-class"
+      ></PreviewAttachment>
+    );
+
+    const modal = screen.getByRole('dialog');
+    const modalHeader = within(modal).getByRole('banner');
+    expect(modalHeader).toHaveClass('custom-header-class');
+    const modalBody = modal.querySelector('#code-modal-body');
+    expect(modalBody).toHaveClass('custom-body-class');
+    const modalfooter = within(modal).getByRole('contentinfo');
+    expect(modalfooter).toHaveClass('custom-footer-class');
+  });
 });
diff --git a/packages/module/src/PreviewAttachment/PreviewAttachment.tsx b/packages/module/src/PreviewAttachment/PreviewAttachment.tsx
@@ -24,6 +24,16 @@ export interface PreviewAttachmentProps {
   displayMode?: ChatbotDisplayMode;
   /** Sets modal to compact styling. */
   isCompact?: boolean;
+  /** Primary action button text */
+  primaryActionButtonText?: string;
+  /** Secondary action button text */
+  secondaryActionButtonText?: string;
+  /** Class applied to modal header */
+  modalHeaderClassName?: string;
+  /** Class applied to modal body */
+  modalBodyClassName?: string;
+  /** Class applied to modal footer */
+  modalFooterClassName?: string;
 }
 
 export const PreviewAttachment: FunctionComponent<PreviewAttachmentProps> = ({
@@ -34,7 +44,12 @@ export const PreviewAttachment: FunctionComponent<PreviewAttachmentProps> = ({
   onDismiss = undefined,
   onEdit,
   title = 'Preview attachment',
+  primaryActionButtonText = 'Edit',
+  secondaryActionButtonText = 'Dismiss',
   displayMode = ChatbotDisplayMode.default,
+  modalHeaderClassName,
+  modalBodyClassName,
+  modalFooterClassName,
   isCompact
 }: PreviewAttachmentProps) => {
   const handleEdit = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
@@ -58,12 +73,15 @@ export const PreviewAttachment: FunctionComponent<PreviewAttachmentProps> = ({
       isModalOpen={isModalOpen}
       onPrimaryAction={handleEdit}
       onSecondaryAction={handleDismiss}
-      primaryActionBtn="Edit"
-      secondaryActionBtn="Dismiss"
+      primaryActionBtn={primaryActionButtonText}
+      secondaryActionBtn={secondaryActionButtonText}
       title={title}
       isReadOnly
       displayMode={displayMode}
       isCompact={isCompact}
+      modalHeaderClassName={modalHeaderClassName}
+      modalBodyClassName={modalBodyClassName}
+      modalFooterClassName={modalFooterClassName}
     />
   );
 };
