feat(edge/templates): introduce custom templates [EE-6208] (#10561)

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">
-      <div className="col-sm-12">
-        <LoadingButton
-          className="!ml-0"
-          loadingText={loadingText}
-          isLoading={isLoading}
-          disabled={!isValid}
-          data-cy={dataCy}
-        >
-          {submitLabel}
-        </LoadingButton>
+    <FormSection title="Actions">
+      <div className="form-group">
+        <div className="col-sm-12">
+          <LoadingButton
+            className="!ml-0"
+            loadingText={loadingText}
+            isLoading={isLoading}
+            disabled={!isValid}
+            data-cy={dataCy}
+          >
+            {submitLabel}
+          </LoadingButton>
 
-        {children}
+          {children}
+        </div>
       </div>
-    </div>
+    </FormSection>
   );
 }