refactor(ui/forms): add Actions title

app/react/components/form-components/FormActions.tsx

@@ -1,13 +1,16 @@
 import { PropsWithChildren } from 'react';
 
+import { AutomationTestingProps } from '@/types';
+
 import { LoadingButton } from '@@/buttons';
 
-interface Props {
+import { FormSection } from './FormSection';
+
+interface Props extends AutomationTestingProps {
   submitLabel: string;
   loadingText: string;
   isLoading: boolean;
   isValid: boolean;
-  'data-cy'?: string;
 }
 
 export function FormActions({
@@ -19,20 +22,22 @@ export function FormActions({
   'data-cy': dataCy,
 }: PropsWithChildren<Props>) {
   return (
-    <div className="form-group">
+    <FormSection title="Actions">
-      <div className="col-sm-12">
+      <div className="form-group">
-        <LoadingButton
+        <div className="col-sm-12">
-          className="!ml-0"
+          <LoadingButton
-          loadingText={loadingText}
+            className="!ml-0"
-          isLoading={isLoading}
+            loadingText={loadingText}
-          disabled={!isValid}
+            isLoading={isLoading}
-          data-cy={dataCy}
+            disabled={!isValid}
-        >
+            data-cy={dataCy}
-          {submitLabel}
+          >
-        </LoadingButton>
+            {submitLabel}
+          </LoadingButton>
 
-        {children}
+          {children}
+        </div>
       </div>
-    </div>
+    </FormSection>
   );
 }