refactor(console): support onSubmit in SubmitFormChangesActionBar (#2517)

packages/console/src/components/DetailsForm/index.tsx

@@ -1,26 +1,25 @@
 import { forwardRef } from 'react';
-import type { ForwardedRef, HTMLProps, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import SubmitFormChangesActionBar from '../SubmitFormChangesActionBar';
 import * as styles from './index.module.scss';
 
-type Props = HTMLProps<HTMLFormElement> & {
+type Props = {
   isDirty: boolean;
   isSubmitting: boolean;
   children: ReactNode;
+  onSubmit: () => Promise<void>;
   onDiscard: () => void;
 };
 
-const DetailsForm = (
-  { isDirty, isSubmitting, onDiscard, children, ...rest }: Props,
-  reference: ForwardedRef<HTMLFormElement>
-) => {
+const DetailsForm = ({ isDirty, isSubmitting, onSubmit, onDiscard, children }: Props) => {
   return (
-    <form {...rest} ref={reference} className={styles.container}>
+    <form className={styles.container}>
       <div className={styles.fields}>{children}</div>
       <SubmitFormChangesActionBar
         isOpen={isDirty}
         isSubmitting={isSubmitting}
+        onSubmit={onSubmit}
         onDiscard={onDiscard}
       />
     </form>

packages/console/src/components/SubmitFormChangesActionBar/index.tsx

@@ -4,10 +4,11 @@ import * as styles from './index.module.scss';
 type Props = {
   isOpen: boolean;
   isSubmitting: boolean;
+  onSubmit: () => Promise<void>;
   onDiscard: () => void;
 };
 
-const SubmitFormChangesActionBar = ({ isOpen, isSubmitting, onDiscard }: Props) => {
+const SubmitFormChangesActionBar = ({ isOpen, isSubmitting, onSubmit, onDiscard }: Props) => {
   if (!isOpen) {
     return null;
   }
@@ -24,10 +25,10 @@ const SubmitFormChangesActionBar = ({ isOpen, isSubmitting, onDiscard }: Props)
       />
       <Button
         isLoading={isSubmitting}
-        htmlType="submit"
         type="primary"
         size="medium"
         title="general.save_changes"
+        onClick={async () => onSubmit()}
       />
     </div>
   );