diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx
index 3be3a17fb6a9e..cad4dabbe8275 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx
@@ -12,7 +12,14 @@ import { mountWithIntl, nextTick } from '@kbn/test/jest';
 import { act } from '@testing-library/react';
 import { AlertDetails } from './alert_details';
 import { Alert, ActionType, AlertTypeModel, AlertType } from '../../../../types';
-import { EuiBadge, EuiFlexItem, EuiSwitch, EuiButtonEmpty, EuiText } from '@elastic/eui';
+import {
+  EuiBadge,
+  EuiFlexItem,
+  EuiSwitch,
+  EuiButtonEmpty,
+  EuiText,
+  EuiPageHeaderProps,
+} from '@elastic/eui';
 import {
   ActionGroup,
   AlertExecutionStatusErrorReasons,
@@ -302,16 +309,29 @@ describe('alert_details', () => {
         minimumLicenseRequired: 'basic',
         enabledInLicense: true,
       };
-
-      expect(
-        shallow(
-          <AlertDetails alert={alert} alertType={alertType} actionTypes={[]} {...mockAlertApis} />
-        )
-          .find(EuiButtonEmpty)
-          .find('[data-test-subj="openEditAlertFlyoutButton"]')
-          .first()
-          .exists()
-      ).toBeTruthy();
+      const pageHeaderProps = shallow(
+        <AlertDetails alert={alert} alertType={alertType} actionTypes={[]} {...mockAlertApis} />
+      )
+        .find('EuiPageHeader')
+        .props() as EuiPageHeaderProps;
+      const rightSideItems = pageHeaderProps.rightSideItems;
+      expect(!!rightSideItems && rightSideItems[2]!).toMatchInlineSnapshot(`
+      <React.Fragment>
+        <EuiButtonEmpty
+          data-test-subj="openEditAlertFlyoutButton"
+          disabled={false}
+          iconType="pencil"
+          name="edit"
+          onClick={[Function]}
+        >
+          <FormattedMessage
+            defaultMessage="Edit"
+            id="xpack.triggersActionsUI.sections.alertDetails.editAlertButtonLabel"
+            values={Object {}}
+          />
+        </EuiButtonEmpty>
+      </React.Fragment>
+    `);
     });
   });
 });
@@ -761,20 +781,34 @@ describe('edit button', () => {
       enabledInLicense: true,
     };
 
-    expect(
-      shallow(
-        <AlertDetails
-          alert={alert}
-          alertType={alertType}
-          actionTypes={actionTypes}
-          {...mockAlertApis}
+    const pageHeaderProps = shallow(
+      <AlertDetails
+        alert={alert}
+        alertType={alertType}
+        actionTypes={actionTypes}
+        {...mockAlertApis}
+      />
+    )
+      .find('EuiPageHeader')
+      .props() as EuiPageHeaderProps;
+    const rightSideItems = pageHeaderProps.rightSideItems;
+    expect(!!rightSideItems && rightSideItems[2]!).toMatchInlineSnapshot(`
+    <React.Fragment>
+      <EuiButtonEmpty
+        data-test-subj="openEditAlertFlyoutButton"
+        disabled={false}
+        iconType="pencil"
+        name="edit"
+        onClick={[Function]}
+      >
+        <FormattedMessage
+          defaultMessage="Edit"
+          id="xpack.triggersActionsUI.sections.alertDetails.editAlertButtonLabel"
+          values={Object {}}
         />
-      )
-        .find(EuiButtonEmpty)
-        .find('[name="edit"]')
-        .first()
-        .exists()
-    ).toBeTruthy();
+      </EuiButtonEmpty>
+    </React.Fragment>
+  `);
   });
 
   it('should not render an edit button when alert editable but actions arent', () => {
@@ -844,20 +878,34 @@ describe('edit button', () => {
       enabledInLicense: true,
     };
 
-    expect(
-      shallow(
-        <AlertDetails
-          alert={alert}
-          alertType={alertType}
-          actionTypes={actionTypes}
-          {...mockAlertApis}
+    const pageHeaderProps = shallow(
+      <AlertDetails
+        alert={alert}
+        alertType={alertType}
+        actionTypes={actionTypes}
+        {...mockAlertApis}
+      />
+    )
+      .find('EuiPageHeader')
+      .props() as EuiPageHeaderProps;
+    const rightSideItems = pageHeaderProps.rightSideItems;
+    expect(!!rightSideItems && rightSideItems[2]!).toMatchInlineSnapshot(`
+    <React.Fragment>
+      <EuiButtonEmpty
+        data-test-subj="openEditAlertFlyoutButton"
+        disabled={false}
+        iconType="pencil"
+        name="edit"
+        onClick={[Function]}
+      >
+        <FormattedMessage
+          defaultMessage="Edit"
+          id="xpack.triggersActionsUI.sections.alertDetails.editAlertButtonLabel"
+          values={Object {}}
         />
-      )
-        .find(EuiButtonEmpty)
-        .find('[name="edit"]')
-        .first()
-        .exists()
-    ).toBeTruthy();
+      </EuiButtonEmpty>
+    </React.Fragment>
+  `);
   });
 });
 
@@ -878,7 +926,7 @@ describe('refresh button', () => {
     };
 
     const requestRefresh = jest.fn();
-    const refreshButton = shallow(
+    const wrapper = mountWithIntl(
       <AlertDetails
         alert={alert}
         alertType={alertType}
@@ -886,10 +934,9 @@ describe('refresh button', () => {
         {...mockAlertApis}
         requestRefresh={requestRefresh}
       />
-    )
-      .find('[data-test-subj="refreshAlertsButton"]')
-      .first();
+    );
 
+    const refreshButton = wrapper.find('[data-test-subj="refreshAlertsButton"]').first();
     expect(refreshButton.exists()).toBeTruthy();
 
     refreshButton.simulate('click');
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx
index 20f8ee1900807..3e411913520ad 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx
@@ -42,7 +42,7 @@ import { alertsErrorReasonTranslationsMapping } from '../../alerts_list/translat
 import { useKibana } from '../../../../common/lib/kibana';
 import { alertReducer } from '../../alert_form/alert_reducer';
 
-type AlertDetailsProps = {
+export type AlertDetailsProps = {
   alert: Alert;
   alertType: AlertType;
   actionTypes: ActionType[];
@@ -120,7 +120,6 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
   const rightPageHeaderButtons = hasEditButton
     ? [
         <>
-          {' '}
           <EuiButtonEmpty
             data-test-subj="openEditAlertFlyoutButton"
             iconType="pencil"
diff --git a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts
index 34e08ad257f84..9c659c9d8acda 100644
--- a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts
+++ b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts
@@ -136,7 +136,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
 
       it('renders the alert details', async () => {
         const headingText = await pageObjects.alertDetailsUI.getHeadingText();
-        expect(headingText).to.be(`test-alert-${testRunUuid}`);
+        expect(headingText.includes(`test-alert-${testRunUuid}`)).to.be(true);
 
         const alertType = await pageObjects.alertDetailsUI.getAlertType();
         expect(alertType).to.be(`Always Firing`);