feat(ui): disable Modal close button (#1253)

* allow disabling of close modal

* changeset

* tests

* update changeset

* fix disabled cancel button and add story

* fix misspelling

* update stories

Author: guoda-puidokaite

.changeset/fresh-jokes-move.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": minor
+---
+
+Allow disabling of close button with `disableCloseButton` in `Modal`.

packages/ui-components/src/components/Modal/Modal.component.tsx

@@ -94,6 +94,7 @@ export const Modal: React.FC<ModalProps> = ({
   closeable = true,
   closeOnEsc = true,
   closeOnBackdropClick = false,
+  disableCloseButton,
   size = "small",
   unpad = false,
   className = "",
@@ -212,7 +213,15 @@ export const Modal: React.FC<ModalProps> = ({
                   className={`juno-modal-header ${headerstyles} ${modalTitle ? `jn:justify-between` : `jn:justify-end`}`}
                 >
                   {renderModalTitle()}
-                  {isCloseable ? <Icon icon="close" onClick={handleCancelClick} aria-label="close" /> : ""}
+                  {isCloseable ? (
+                    <Icon
+                      icon="close"
+                      onClick={handleCancelClick}
+                      disabled={disableCancelButton || disableCloseButton}
+                    />
+                  ) : (
+                    ""
+                  )}
                 </div>
                 <div className={`juno-modal-content ${contentstyles} ${unpad ? "" : contentpaddingstyles}`}>
                   {children}
@@ -261,6 +270,8 @@ export interface ModalProps extends Omit<React.HTMLProps<HTMLDivElement>, "size"
   closeOnEsc?: boolean
   /** The Modal size */
   closeOnBackdropClick?: boolean
+  /** Determines whether the close button should be disabled */
+  disableCloseButton?: boolean
   /** Whether the modal can be closed by hitting the ESC key */
   size?: ModalSize
   /** Pass to remove default padding from the content area of the modal */

packages/ui-components/src/components/Modal/Modal.stories.tsx

@@ -102,7 +102,12 @@ export const SimpleConfirmDialog: Story = {
 export const SimpleConfirmDialogWithDisabledButtons: Story = {
   render: Template,
   args: {
-    children: <p>Are you sure you want to proceed?</p>,
+    children: (
+      <p>
+        This modal has a disabled Confirm and Cancel button. Note that disableCancelButton also disables the top-right
+        Close button.
+      </p>
+    ),
     cancelButtonLabel: "Cancel",
     confirmButtonLabel: "Yes, Proceed",
     disableConfirmButton: true,
@@ -223,6 +228,16 @@ export const CloseOnBackdropClick: Story = {
   },
 }
 
+export const DisabledCloseButton: Story = {
+  render: Template,
+  args: {
+    title: "Disabled Close Button Modal",
+    children: <p>This Modal has a disabled top-right close button.</p>,
+    disableCloseButton: true,
+    cancelButtonLabel: "Cancel",
+  },
+}
+
 export const Login: Story = {
   render: Template,
   args: {

packages/ui-components/src/components/Modal/Modal.test.tsx

@@ -386,7 +386,7 @@ describe("Modal", () => {
     expect(mockOnConfirm).not.toHaveBeenCalled()
   })
 
-  test("renders a disabled cancel action button and ensures onCancel is not triggered", async () => {
+  test("renders a disabled cancel action button, ensures onCancel isn't triggered and that the close button is disabled", async () => {
     await waitFor(() =>
       render(
         <PortalProvider>
@@ -399,7 +399,21 @@ describe("Modal", () => {
     expect(cancelButton).toBeInTheDocument()
     expect(cancelButton).toHaveAttribute("disabled")
 
+    expect(screen.getByRole("button", { name: "close" })).toBeDisabled()
+
     await waitFor(() => userEvent.click(cancelButton))
     expect(mockOnCancel).not.toHaveBeenCalled()
   })
+
+  test("renders a modal with a disabled close button if disableCloseButton is true", async () => {
+    await waitFor(() =>
+      render(
+        <PortalProvider>
+          <Modal open onCancel={mockOnCancel} disableCloseButton />
+        </PortalProvider>
+      )
+    )
+    expect(screen.getByRole("dialog")).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "close" })).toBeDisabled()
+  })
 })