chore: Fix confirmation modal buttons layout

Added a storybook to show them
KaotoIO · Oct 11, 2024 · fcf5b9e · fcf5b9e
1 parent 21803d0
commit fcf5b9e
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 43 deletions.
diff --git a/packages/ui-tests/stories/modal/ActionConfirmationModal.stories.tsx b/packages/ui-tests/stories/modal/ActionConfirmationModal.stories.tsx
@@ -0,0 +1,66 @@
+import {
+  ActionConfirmationModalContextProvider,
+  ActionConfirmationModalContext,
+  ActionConfirmationButtonOption,
+} from '@kaoto/kaoto/testing';
+import { Meta, StoryFn } from '@storybook/react';
+import { FunctionComponent, useContext, useState } from 'react';
+import { ButtonVariant } from '@patternfly/react-core';
+
+export default {
+  title: 'Modal/ActionConfirmationModal',
+  component: ActionConfirmationModalContextProvider,
+} as Meta<typeof ActionConfirmationModalContextProvider>;
+
+type TestComponentProps = {
+  title: string;
+  btnTitle?: string;
+  text?: string;
+  additionalModalText?: string;
+  buttonOptions?: Record<string, ActionConfirmationButtonOption>;
+};
+
+const TestComponent: FunctionComponent<TestComponentProps> = (props) => {
+  const [confirmationResult, setConfirmationResult] = useState<string>('');
+  const { actionConfirmation: deleteConfirmation } = useContext(ActionConfirmationModalContext)!;
+  const handleDelete = async () => {
+    const res = await deleteConfirmation(props);
+    setConfirmationResult(res);
+  };
+
+  return (
+    <p>
+      <button onClick={handleDelete}>{props.btnTitle ?? props.title}</button>
+      <br />
+      <h4>{confirmationResult}</h4>
+    </p>
+  );
+};
+
+const Template: StoryFn<typeof ActionConfirmationModalContextProvider> = (_args) => {
+  return (
+    <ActionConfirmationModalContextProvider>
+      <TestComponent title="Confirm / Cancel" />
+      <TestComponent
+        title="Custom Title"
+        btnTitle="Delete step & file / Delete step only / Cancel"
+        text="Modal text: Delete step & file, Delete step only or Cancel."
+        additionalModalText="Additional text for 3 options modal text"
+        buttonOptions={{
+          'del-step-and-file': {
+            buttonText: 'Delete both step and file',
+            variant: ButtonVariant.danger,
+          },
+          'del-step-only': {
+            buttonText: 'Delete the step, but keep the file',
+            variant: ButtonVariant.secondary,
+            isDanger: true,
+          },
+        }}
+      />
+    </ActionConfirmationModalContextProvider>
+  );
+};
+
+export const ActionConfirmationModal = Template.bind({});
+ActionConfirmationModal.args = {};
diff --git a/packages/ui/src/providers/__snapshots__/action-confirmaton-modal.provider.test.tsx.snap b/packages/ui/src/providers/__snapshots__/action-confirmaton-modal.provider.test.tsx.snap
@@ -84,28 +84,40 @@ exports[`ActionConfirmationModalProvider should allow consumers to update the mo
   <footer
     class="pf-v5-c-modal-box__footer"
   >
-    <button
-      aria-disabled="false"
-      class="pf-v5-c-button pf-m-danger"
-      data-ouia-component-id="OUIA-Generated-Button-danger-3"
-      data-ouia-component-type="PF5/Button"
-      data-ouia-safe="true"
-      data-testid="action-confirmation-modal-btn-confirm"
-      type="button"
+    <div
+      class="pf-v5-l-split pf-m-gutter pf-m-wrap"
     >
-      Confirm
-    </button>
-    <button
-      aria-disabled="false"
-      class="pf-v5-c-button pf-m-link"
-      data-ouia-component-id="OUIA-Generated-Button-link-3"
-      data-ouia-component-type="PF5/Button"
-      data-ouia-safe="true"
-      data-testid="action-confirmation-modal-btn-cancel"
-      type="button"
-    >
-      Cancel
-    </button>
+      <div
+        class="pf-v5-l-split__item"
+      >
+        <button
+          aria-disabled="false"
+          class="pf-v5-c-button pf-m-danger"
+          data-ouia-component-id="OUIA-Generated-Button-danger-3"
+          data-ouia-component-type="PF5/Button"
+          data-ouia-safe="true"
+          data-testid="action-confirmation-modal-btn-confirm"
+          type="button"
+        >
+          Confirm
+        </button>
+      </div>
+      <div
+        class="pf-v5-l-split__item"
+      >
+        <button
+          aria-disabled="false"
+          class="pf-v5-c-button pf-m-link"
+          data-ouia-component-id="OUIA-Generated-Button-link-3"
+          data-ouia-component-type="PF5/Button"
+          data-ouia-safe="true"
+          data-testid="action-confirmation-modal-btn-cancel"
+          type="button"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
   </footer>
 </div>
 `;
diff --git a/packages/ui/src/providers/action-confirmation-modal.provider.tsx b/packages/ui/src/providers/action-confirmation-modal.provider.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
+import { Button, ButtonVariant, Modal, ModalVariant, Split, SplitItem } from '@patternfly/react-core';
 import { FunctionComponent, PropsWithChildren, createContext, useCallback, useMemo, useRef, useState } from 'react';
 
 export const ACTION_ID_CANCEL = 'cancel';
@@ -81,6 +81,34 @@ export const ActionConfirmationModalContextProvider: FunctionComponent<PropsWith
     [actionConfirmation],
   );
 
+  const footer = (
+    <Split hasGutter isWrappable>
+      {...Object.entries(buttonOptions).map(([actionId, option]) => (
+        <SplitItem key={actionId}>
+          <Button
+            key={actionId}
+            variant={option.variant}
+            onClick={() => handleAction(actionId)}
+            data-testid={`action-confirmation-modal-btn-${actionId}`}
+            isDanger={option.isDanger}
+          >
+            {option.buttonText}
+          </Button>
+        </SplitItem>
+      ))}
+      <SplitItem key="cancel">
+        <Button
+          key="cancel"
+          variant="link"
+          onClick={handleCloseModal}
+          data-testid={`action-confirmation-modal-btn-${ACTION_ID_CANCEL}`}
+        >
+          Cancel
+        </Button>
+      </SplitItem>
+    </Split>
+  );
+
   return (
     <ActionConfirmationModalContext.Provider value={value}>
       {props.children}
@@ -93,27 +121,7 @@ export const ActionConfirmationModalContextProvider: FunctionComponent<PropsWith
           titleIconVariant={'warning'}
           onClose={handleCloseModal}
           ouiaId="ActionConfirmationModal"
-          actions={[
-            ...Object.entries(buttonOptions).map(([actionId, option]) => (
-              <Button
-                key={actionId}
-                variant={option.variant}
-                onClick={() => handleAction(actionId)}
-                data-testid={`action-confirmation-modal-btn-${actionId}`}
-                isDanger={option.isDanger}
-              >
-                {option.buttonText}
-              </Button>
-            )),
-            <Button
-              key="cancel"
-              variant="link"
-              onClick={handleCloseModal}
-              data-testid={`action-confirmation-modal-btn-${ACTION_ID_CANCEL}`}
-            >
-              Cancel
-            </Button>,
-          ]}
+          footer={footer}
         >
           {textParagraphs.length === 1
             ? textParagraphs[0]