From f1d84100696cda543a3717c2525b649b2e349ed6 Mon Sep 17 00:00:00 2001
From: Zacqary Xeper <zacqary.xeper@elastic.co>
Date: Thu, 9 Jan 2025 11:21:36 -0600
Subject: [PATCH] Add show request buttons

---
 .../rule_form/src/rule_flyout/rule_flyout.tsx |  2 ++
 .../rule_flyout/rule_flyout_create_footer.tsx | 29 ++++++++++---------
 .../rule_flyout/rule_flyout_edit_footer.tsx   | 23 ++++++++-------
 3 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/packages/response-ops/rule_form/src/rule_flyout/rule_flyout.tsx b/packages/response-ops/rule_form/src/rule_flyout/rule_flyout.tsx
index 7002dc1f852b4..bc43c173b5e61 100644
--- a/packages/response-ops/rule_form/src/rule_flyout/rule_flyout.tsx
+++ b/packages/response-ops/rule_form/src/rule_flyout/rule_flyout.tsx
@@ -140,6 +140,7 @@ export const RuleFlyout = (props: RuleFlyoutProps) => {
           <RuleFlyoutEditFooter
             onCancel={onCancel}
             onSave={onSaveInternal}
+            onShowRequest={() => {} /* TODO */}
             isSaving={isSaving}
             hasErrors={hasErrors}
           />
@@ -147,6 +148,7 @@ export const RuleFlyout = (props: RuleFlyoutProps) => {
           <RuleFlyoutCreateFooter
             onCancel={onCancel}
             onSave={onSaveInternal}
+            onShowRequest={() => {} /* TODO */}
             goToNextStep={goToNextStep}
             goToPreviousStep={goToPreviousStep}
             isSaving={isSaving}
diff --git a/packages/response-ops/rule_form/src/rule_flyout/rule_flyout_create_footer.tsx b/packages/response-ops/rule_form/src/rule_flyout/rule_flyout_create_footer.tsx
index 8b1c091dc22bc..caacacb9240dc 100644
--- a/packages/response-ops/rule_form/src/rule_flyout/rule_flyout_create_footer.tsx
+++ b/packages/response-ops/rule_form/src/rule_flyout/rule_flyout_create_footer.tsx
@@ -20,6 +20,7 @@ import {
   RULE_FLYOUT_FOOTER_CANCEL_TEXT,
   RULE_FLYOUT_FOOTER_CREATE_TEXT,
   RULE_FLYOUT_FOOTER_NEXT_TEXT,
+  RULE_PAGE_FOOTER_SHOW_REQUEST_TEXT,
 } from '../translations';
 
 export interface RuleFlyoutCreateFooterProps {
@@ -27,6 +28,7 @@ export interface RuleFlyoutCreateFooterProps {
   hasErrors: boolean;
   onCancel: () => void;
   onSave: () => void;
+  onShowRequest: () => void;
   hasNextStep: boolean;
   hasPreviousStep: boolean;
   goToNextStep: () => void;
@@ -35,6 +37,7 @@ export interface RuleFlyoutCreateFooterProps {
 export const RuleFlyoutCreateFooter = ({
   onCancel,
   onSave,
+  onShowRequest,
   hasErrors,
   isSaving,
   hasNextStep,
@@ -62,20 +65,18 @@ export const RuleFlyoutCreateFooter = ({
 
         <EuiFlexItem grow={false}>
           <EuiFlexGroup justifyContent="flexEnd" gutterSize="m">
-            {/* <EuiFlexItem grow={false}>
-              <EuiButton
-                fill
-                color="primary"
-                data-test-subj="showRequestButton"
-                isDisabled={loadingHealthCheck || !isRuleValid}
-                onClick={onShowRequest}
-              >
-                <FormattedMessage
-                  id="xpack.triggersActionsUI.sections.ruleAddFooter.showRequestButtonLabel"
-                  defaultMessage="Show API request"
-                />
-              </EuiButton>
-            </EuiFlexItem> */}
+            {!hasNextStep && (
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  color="primary"
+                  data-test-subj="ruleFlyoutFooterShowRequestButton"
+                  isDisabled={isSaving || hasErrors}
+                  onClick={onShowRequest}
+                >
+                  {RULE_PAGE_FOOTER_SHOW_REQUEST_TEXT}
+                </EuiButton>
+              </EuiFlexItem>
+            )}
             <EuiFlexItem grow={false}>
               {hasNextStep ? (
                 <EuiButton
diff --git a/packages/response-ops/rule_form/src/rule_flyout/rule_flyout_edit_footer.tsx b/packages/response-ops/rule_form/src/rule_flyout/rule_flyout_edit_footer.tsx
index 63e03fda3a3fe..5cb64b40fb180 100644
--- a/packages/response-ops/rule_form/src/rule_flyout/rule_flyout_edit_footer.tsx
+++ b/packages/response-ops/rule_form/src/rule_flyout/rule_flyout_edit_footer.tsx
@@ -15,17 +15,23 @@ import {
   EuiFlyoutFooter,
 } from '@elastic/eui';
 import React from 'react';
-import { RULE_FLYOUT_FOOTER_CANCEL_TEXT, RULE_FLYOUT_FOOTER_SAVE_TEXT } from '../translations';
+import {
+  RULE_FLYOUT_FOOTER_CANCEL_TEXT,
+  RULE_FLYOUT_FOOTER_SAVE_TEXT,
+  RULE_PAGE_FOOTER_SHOW_REQUEST_TEXT,
+} from '../translations';
 
 export interface RuleFlyoutEditFooterProps {
   isSaving: boolean;
   hasErrors: boolean;
   onCancel: () => void;
   onSave: () => void;
+  onShowRequest: () => void;
 }
 export const RuleFlyoutEditFooter = ({
   onCancel,
   onSave,
+  onShowRequest,
   hasErrors,
   isSaving,
 }: RuleFlyoutEditFooterProps) => {
@@ -40,20 +46,17 @@ export const RuleFlyoutEditFooter = ({
 
         <EuiFlexItem grow={false}>
           <EuiFlexGroup justifyContent="flexEnd" gutterSize="m">
-            {/* <EuiFlexItem grow={false}>
+            <EuiFlexItem grow={false}>
               <EuiButton
-                fill
                 color="primary"
-                data-test-subj="showRequestButton"
-                isDisabled={loadingHealthCheck || !isRuleValid}
+                data-test-subj="ruleFlyoutFooterShowRequestButton"
+                isDisabled={isSaving || hasErrors}
                 onClick={onShowRequest}
               >
-                <FormattedMessage
-                  id="xpack.triggersActionsUI.sections.ruleAddFooter.showRequestButtonLabel"
-                  defaultMessage="Show API request"
-                />
+                {RULE_PAGE_FOOTER_SHOW_REQUEST_TEXT}
               </EuiButton>
-            </EuiFlexItem> */}
+            </EuiFlexItem>
+
             <EuiFlexItem grow={false}>
               <EuiButton
                 fill