Add show request buttons

elastic · Jan 9, 2025 · f1d8410 · f1d8410
1 parent b8c93af
commit f1d8410
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 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
@@ -140,13 +140,15 @@ export const RuleFlyout = (props: RuleFlyoutProps) => {
           <RuleFlyoutEditFooter
             onCancel={onCancel}
             onSave={onSaveInternal}
+            onShowRequest={() => {} /* TODO */}
             isSaving={isSaving}
             hasErrors={hasErrors}
           />
         ) : (
           <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
@@ -20,13 +20,15 @@ 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 {
   isSaving: boolean;
   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
@@ -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