Reuse modal props, add title and description props

packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagementModal/ColumnManagementModalExample.tsx

@@ -60,17 +60,17 @@ const ROWS = [
 
 export const ColumnManagementModalExample: React.FunctionComponent = () => {
   const [ columns, setColumns ] = React.useState(DEFAULT_COLUMNS);
-  const [ isModalOpen, setModalOpen ] = React.useState(false);
+  const [ isOpen, setOpen ] = React.useState(false);
 
   return (
     <>
       <ColumnManagementModal
         appliedColumns={columns}
         applyColumns={newColumns => setColumns(newColumns)}
-        isModalOpen={isModalOpen}
-        setModalOpen={setModalOpen}
+        isOpen={isOpen}
+        onClose={() => setOpen(false)}
       />
-      <Button onClick={() => setModalOpen(true)}>Manage columns</Button>
+      <Button onClick={() => setOpen(true)}>Manage columns</Button>
       <Table
         aria-label="Simple table"
         variant="compact"

packages/module/src/ColumnManagementModal/ColumnManagementModal.test.tsx

@@ -31,15 +31,15 @@ const DEFAULT_COLUMNS : ColumnManagementModalColumn[] = [
   }
 ];
 
-const setModalOpen = jest.fn();
+const onClose = jest.fn();
 const setColumns = jest.fn();
 
 beforeEach(() => {
   render(<ColumnManagementModal
     appliedColumns={DEFAULT_COLUMNS}
     applyColumns={newColumns => setColumns(newColumns)}
-    isModalOpen
-    setModalOpen={setModalOpen}
+    isOpen
+    onClose={onClose}
     data-testid="column-mgmt-modal"
   />);
 });
@@ -55,7 +55,7 @@ describe('ColumnManagementModal component', () => {
   });
 
   it('should have checkbox checked if column is shown by default', () => {
-    const idCheckbox = screen.getByTestId('column-mgmt-modal').querySelector('input[type="checkbox"][aria-labelledby="id"]');
+    const idCheckbox = screen.getByTestId('column-mgmt-modal').querySelector('input[type="checkbox"][data-ouia-component-id="ColumnManagementModal-column0-checkbox"]');
 
     expect(idCheckbox).toHaveAttribute('disabled');
     expect(idCheckbox).toHaveAttribute('checked');
@@ -95,15 +95,15 @@ describe('ColumnManagementModal component', () => {
 
     impactColumn.isShown = false;
 
-    expect(setModalOpen).toHaveBeenCalledWith(false);
+    expect(onClose).toHaveBeenCalled();
     expect(setColumns).toHaveBeenCalledWith(expectedColumns);
   });
 
   it('should retain columns on cancel', () => {
     fireEvent.click(screen.getByText('Impact'));
     fireEvent.click(screen.getByText('Cancel'));
 
-    expect(setModalOpen).toHaveBeenCalledWith(false);
+    expect(onClose).toHaveBeenCalled();
     expect(setColumns).toHaveBeenCalledWith(DEFAULT_COLUMNS);
   });
 });

packages/module/src/ColumnManagementModal/ColumnManagementModal.tsx

@@ -33,20 +33,26 @@ export interface ColumnManagementModalColumn {
 
 export interface ColumnManagementModalProps extends Omit<ModalProps, 'ref' | 'children'> {
   /** Flag to show the modal */
-  isModalOpen: boolean,
+  isOpen?: boolean,
   /** Invoked when modal visibility is changed */
-  setModalOpen: (shouldOpen: boolean) => void
+  onClose?: (event: KeyboardEvent | React.MouseEvent) => void,
   /** Current column state */
   appliedColumns: ColumnManagementModalColumn[],
   /** Invoked with new column state after save button is clicked */
   applyColumns: (newColumns: ColumnManagementModalColumn[]) => void,
+  /* Modal description text */
+  description?: string,
+  /* Modal title text */
+  title?: string,
   /** Custom OUIA ID */
   ouiaId?: string | number,
 };
 
 const ColumnManagementModal: React.FunctionComponent<ColumnManagementModalProps> = (
-  { isModalOpen,
-    setModalOpen,
+  { title = 'Manage columns',
+    description = 'Selected categories will be displayed in the table.',
+    isOpen = false,
+    onClose = () => undefined,
     appliedColumns,
     applyColumns,
     ouiaId = 'ColumnManagementModal',
@@ -77,25 +83,25 @@ const ColumnManagementModal: React.FunctionComponent<ColumnManagementModalProps>
     setCurrentColumns(currentColumns.map(column => ({ ...column, isShown: column.isShownByDefault ?? false })));
   };
 
-  const handleSave = () => {
-    setModalOpen(false);
+  const handleSave = event => {
     applyColumns(currentColumns);
+    onClose(event);
   };
-
-  const handleCancel = () => {
-    setModalOpen(false);
+
+  const handleCancel = event => {
     setCurrentColumns(appliedColumns.map(column => ({ ...column, isShown: column.isShown ?? column.isShownByDefault })));
+    onClose(event);
   };
 
   return (
     <Modal
-      title="Manage columns"
-      onClose={() => setModalOpen(false)}
-      isOpen={isModalOpen}
+      title={title}
+      onClose={onClose}
+      isOpen={isOpen}
       variant={ModalVariant.small}
       description={
         <TextContent>
-          <Text component={TextVariants.p}>Selected categories will be displayed in the table.</Text>
+          <Text component={TextVariants.p}>{description}</Text>
           <Split hasGutter>
             <SplitItem>
               <Button isInline onClick={selectAll} variant={ButtonVariant.link} ouiaId={`${ouiaId}-selectAll-button`}>