From d5f9538902233075e38a60abf70efc52838f5804 Mon Sep 17 00:00:00 2001
From: SreeJith <40453569+Sreejith-CS@users.noreply.github.com>
Date: Mon, 9 Sep 2024 23:29:52 +0530
Subject: [PATCH] fix(CreateTearsheet): add custom button (#5666)

* fix(CreateTearsheet): add custom button

* fix(CreateTearsheet): replace custom button position and rename it

* fix(CreateTearsheet): move all custom button props to the object

* fix(CreateTearsheet): change prop name to experimentalSecondarySubmit

---------

Co-authored-by: elysia <elysia.hwang@gmail.com>
---
 .../CreateTearsheet/CreateTearsheet.test.js   | 71 +++++++++++++++++++
 .../CreateTearsheet/CreateTearsheet.tsx       | 23 +++++-
 .../CreateTearsheet/CreateTearsheetStep.tsx   | 48 ++++++++++++-
 .../js/hooks/useCreateComponentStepChange.js  | 22 ++++++
 4 files changed, 162 insertions(+), 2 deletions(-)

diff --git a/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.test.js b/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.test.js
index 7259f40da4..c9180d56aa 100644
--- a/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.test.js
+++ b/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.test.js
@@ -49,6 +49,9 @@ const submitButtonText = 'Submit';
 const cancelButtonText = 'Cancel';
 const backButtonText = 'Back';
 const nextButtonText = 'Next';
+const experimentalSecondarySubmitText = 'Secondary submit';
+const experimentalSecondaryLabelText = 'Skip all step';
+const onExperimentalSecondarySubmitClickFn = jest.fn();
 const step3Title = uuidv4();
 const step2Title = uuidv4();
 const step1Title = uuidv4();
@@ -79,6 +82,12 @@ const renderCreateTearsheet = ({
   onPrevious = onPreviousStepFn,
   finalOnNextFn = finalStepOnNext,
   rejectOnSubmitNext = false,
+  experimentalSecondarySubmit = {
+    labelText: '',
+    disabled: false,
+    hideSecondarySubmit: false,
+    onClick: onExperimentalSecondarySubmitClickFn,
+  },
   ...rest
 }) =>
   render(
@@ -93,6 +102,12 @@ const renderCreateTearsheet = ({
         onMount={onMountFn}
         description={step1Description}
         subtitle={step1Subtitle}
+        experimentalSecondarySubmit={{
+          labelText: experimentalSecondarySubmit.labelText,
+          disabled: experimentalSecondarySubmit.disabled,
+          hideSecondarySubmit: experimentalSecondarySubmit.hideSecondarySubmit,
+          onClick: experimentalSecondarySubmit.onClick,
+        }}
       >
         step 1 content
         <button type="button" disabled>
@@ -475,6 +490,62 @@ describe(CreateTearsheet.displayName, () => {
     );
   });
 
+  it('should show experimentalSecondarySubmit button (4th button)', () => {
+    renderCreateTearsheet({
+      ...defaultProps,
+      experimentalSecondarySubmitText,
+    });
+    const button = screen.getByText(experimentalSecondarySubmitText);
+    expect(button).toBeInTheDocument();
+  });
+
+  it('should disabled experimentalSecondarySubmit button', () => {
+    renderCreateTearsheet({
+      ...defaultProps,
+      experimentalSecondarySubmitText,
+      experimentalSecondarySubmit: { disabled: true },
+    });
+    const button = screen.getByText(experimentalSecondarySubmitText);
+    expect(button).toBeDisabled();
+  });
+
+  it('should hide experimentalSecondarySubmit button', () => {
+    renderCreateTearsheet({
+      ...defaultProps,
+      experimentalSecondarySubmitText,
+      experimentalSecondarySubmit: { hideSecondarySubmit: true },
+    });
+    const button = screen.queryByText(experimentalSecondarySubmitText);
+    expect(button).toBeNull();
+  });
+
+  it('should rename experimentalSecondarySubmit button text', () => {
+    renderCreateTearsheet({
+      ...defaultProps,
+      experimentalSecondarySubmitText,
+      experimentalSecondarySubmit: {
+        labelText: experimentalSecondaryLabelText,
+      },
+    });
+
+    const button = screen.getByText(experimentalSecondaryLabelText);
+    expect(button).toBeInTheDocument();
+  });
+  it('should call experimentalSecondarySubmit onClick', async () => {
+    renderCreateTearsheet({
+      ...defaultProps,
+      experimentalSecondarySubmitText,
+      experimentalSecondarySubmit: {
+        onClick: onExperimentalSecondarySubmitClickFn,
+      },
+    });
+    const button = screen.getByText(experimentalSecondarySubmitText);
+    await act(() => click(button));
+    await waitFor(() =>
+      expect(onExperimentalSecondarySubmitClickFn).toHaveBeenCalled()
+    );
+  });
+
   it('should create a console warning when using CreateTearsheet with only one step', async () => {
     jest.spyOn(console, 'warn').mockImplementation(jest.fn());
     renderSingleStepCreateTearsheet(defaultProps);
diff --git a/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.tsx b/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.tsx
index a44fddec9d..a7347abae6 100644
--- a/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.tsx
+++ b/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.tsx
@@ -34,6 +34,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { getNumberOfHiddenSteps } from '../../global/js/utils/getNumberOfHiddenSteps';
 import { lastIndexInArray } from '../../global/js/utils/lastIndexInArray';
 import { pkg } from '../../settings';
+import { ExperimentalSecondarySubmit } from './CreateTearsheetStep';
 
 const componentName = 'CreateTearsheet';
 const blockClass = `${pkg.prefix}--tearsheet-create`;
@@ -44,6 +45,9 @@ const blockClass = `${pkg.prefix}--tearsheet-create`;
 
 export interface StepsContextType {
   currentStep: number;
+  setExperimentalSecondarySubmit: Dispatch<
+    SetStateAction<ExperimentalSecondarySubmit>
+  >;
   setIsDisabled: Dispatch<SetStateAction<boolean>>;
   setOnPrevious: (fn: any) => void;
   setOnNext: (fn: any) => void;
@@ -78,6 +82,11 @@ export interface CreateTearsheetProps extends PropsWithChildren {
    */
   className?: string;
 
+  /**
+   * The experimentalSecondary submit button text
+   */
+  experimentalSecondarySubmitText?: string;
+
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
@@ -171,6 +180,7 @@ export let CreateTearsheet = forwardRef(
       cancelButtonText,
       children,
       className,
+      experimentalSecondarySubmitText,
       description,
       influencerWidth = 'narrow',
       initialStep,
@@ -202,7 +212,8 @@ export let CreateTearsheet = forwardRef(
     const [stepData, setStepData] = useState<Step[]>([]);
     const [firstIncludedStep, setFirstIncludedStep] = useState(1);
     const [lastIncludedStep, setLastIncludedStep] = useState<number>();
-
+    const [experimentalSecondarySubmit, setExperimentalSecondarySubmit] =
+      useState<ExperimentalSecondarySubmit>({});
     const previousState = usePreviousValue({ currentStep, open });
     const contentRef = useRef<HTMLDivElement>(null);
 
@@ -270,6 +281,10 @@ export let CreateTearsheet = forwardRef(
       nextButtonText,
       isSubmitting,
       componentBlockClass: blockClass,
+      experimentalSecondarySubmit,
+      experimentalSecondarySubmitText: experimentalSecondarySubmit.labelText
+        ? experimentalSecondarySubmit.labelText
+        : experimentalSecondarySubmitText,
       setCreateComponentActions: setCreateTearsheetActions,
     });
 
@@ -301,6 +316,7 @@ export let CreateTearsheet = forwardRef(
             <StepsContext.Provider
               value={{
                 currentStep,
+                setExperimentalSecondarySubmit,
                 setIsDisabled,
                 setOnPrevious: (fn) => setOnPrevious(() => fn),
                 setOnNext: (fn) => setOnNext(() => fn),
@@ -357,6 +373,11 @@ CreateTearsheet.propTypes = {
    */
   description: PropTypes.node,
 
+  /**
+   * The experimentalSecondary submit button text
+   */
+  experimentalSecondarySubmitText: PropTypes.string,
+
   /**
    * Specifies elements to focus on first on render.
    */
diff --git a/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheetStep.tsx b/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheetStep.tsx
index a54d445b15..b8c3413999 100644
--- a/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheetStep.tsx
+++ b/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheetStep.tsx
@@ -84,6 +84,11 @@ interface CreateTearsheetStepBaseProps extends PropsWithChildren {
    */
   disableSubmit?: boolean;
 
+  /**
+   * Configuration options for customizing the behavior of the experimentalSecondary submit button.
+   */
+  experimentalSecondarySubmit?: ExperimentalSecondarySubmit;
+
   /**
    * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator
    * steps. If this value is `true` then the step will be included in the list of visible steps, as well as being included in the ProgressIndicator step list
@@ -139,6 +144,21 @@ interface PreviousStateProps {
 type CreateTearsheetStepProps = CreateTearsheetStepBaseProps &
   fieldsetLegendTextProps;
 
+/**
+ * Configuration options for customizing the behavior of the experimentalSecondary submit button.
+ *
+ * @property {string} [labelText] - Optional text to replace the default button text.
+ * @property {boolean} [disabled] - If true, the button will be disabled and not clickable.
+ * @property {boolean} [hideSecondarySubmit] - If true, the button will be hidden from view.
+ * @property {() => void} [onClick] - Optional click handler function to be executed when the button is clicked.
+ */
+export type ExperimentalSecondarySubmit = {
+  labelText?: string;
+  disabled?: boolean;
+  hideSecondarySubmit?: boolean;
+  onClick?: () => void;
+};
+
 export let CreateTearsheetStep = forwardRef(
   (
     {
@@ -148,6 +168,7 @@ export let CreateTearsheetStep = forwardRef(
       className,
       description,
       disableSubmit,
+      experimentalSecondarySubmit,
       fieldsetLegendText,
       hasFieldset = defaults.hasFieldset,
       includeStep = defaults.includeStep,
@@ -194,8 +215,17 @@ export let CreateTearsheetStep = forwardRef(
         previousState?.currentStep !== stepsContext?.currentStep
       ) {
         stepsContext?.setOnMount(onMount);
+        stepsContext?.setExperimentalSecondarySubmit({
+          ...experimentalSecondarySubmit,
+        });
       }
-    }, [onMount, stepsContext, stepNumber, previousState?.currentStep]);
+    }, [
+      onMount,
+      experimentalSecondarySubmit,
+      stepsContext,
+      stepNumber,
+      previousState?.currentStep,
+    ]);
 
     // Used to take the `includeStep` prop and use it as a local state value
     useEffect(() => {
@@ -332,6 +362,22 @@ CreateTearsheetStep.propTypes = {
    */
   disableSubmit: PropTypes.bool,
 
+  /**
+   * Configuration options for customizing the behavior of the experimentalSecondary submit button.
+   *
+   * @property {string} [labelText] - Optional text to replace the default button text.
+   * @property {boolean} [disabled] - If true, the button will be disabled and not clickable.
+   * @property {boolean} [hideSecondarySubmit] - If true, the button will be hidden from view.
+   * @property {() => void} [onClick] - Optional click handler function to be executed when the button is clicked.
+   */
+  /**@ts-ignore*/
+  experimentalSecondarySubmit: PropTypes.shape({
+    labelText: PropTypes.string,
+    disabled: PropTypes.bool,
+    hideSecondarySubmit: PropTypes.bool,
+    onClick: PropTypes.func,
+  }),
+
   /**
    * This is the required legend text that appears above a fieldset html element for accessibility purposes.
    * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.
diff --git a/packages/ibm-products/src/global/js/hooks/useCreateComponentStepChange.js b/packages/ibm-products/src/global/js/hooks/useCreateComponentStepChange.js
index a85e9b55c6..b8f5e8ee2c 100644
--- a/packages/ibm-products/src/global/js/hooks/useCreateComponentStepChange.js
+++ b/packages/ibm-products/src/global/js/hooks/useCreateComponentStepChange.js
@@ -30,6 +30,8 @@ export const useCreateComponentStepChange = ({
   componentBlockClass,
   setCreateComponentActions,
   setModalIsOpen,
+  experimentalSecondarySubmit,
+  experimentalSecondarySubmitText,
 }) => {
   const continueToNextStep = useCallback(() => {
     setIsSubmitting(false);
@@ -120,6 +122,11 @@ export const useCreateComponentStepChange = ({
         await handleOnRequestSubmit();
       }
     };
+    const handleExperimentalSecondarySubmit = () => {
+      if (typeof experimentalSecondarySubmit?.onClick === 'function') {
+        experimentalSecondarySubmit.onClick();
+      }
+    };
     if (stepData?.length > 0) {
       const buttons = [];
       if (stepData?.length > 1) {
@@ -141,6 +148,18 @@ export const useCreateComponentStepChange = ({
             : onUnmount,
         kind: 'ghost',
       });
+      if (
+        experimentalSecondarySubmitText &&
+        !experimentalSecondarySubmit?.hideSecondarySubmit
+      ) {
+        buttons.push({
+          key: 'create-action-button-experimentalSecondarySubmit',
+          label: experimentalSecondarySubmitText,
+          onClick: handleExperimentalSecondarySubmit,
+          kind: 'secondary',
+          disabled: experimentalSecondarySubmit?.disabled,
+        });
+      }
       buttons.push({
         key: 'create-action-button-submit',
         label:
@@ -151,6 +170,7 @@ export const useCreateComponentStepChange = ({
         loading: isSubmitting,
         className: `${componentBlockClass}__create-button`,
       });
+
       setCreateComponentActions(buttons);
     }
   }, [
@@ -178,5 +198,7 @@ export const useCreateComponentStepChange = ({
     onPrevious,
     setLoadingPrevious,
     loadingPrevious,
+    experimentalSecondarySubmit,
+    experimentalSecondarySubmitText,
   ]);
 };