From c40ee68603d9ddfa88bb4ba6f56a00eae62c0c43 Mon Sep 17 00:00:00 2001
From: Oliver Gupte <olivergupte@gmail.com>
Date: Mon, 1 Mar 2021 17:05:43 -0500
Subject: [PATCH] [APM] Fix hidden search bar in error pages while loading
 (#84476)

---
 .../app/ErrorGroupDetails/index.tsx           | 68 +++++++++++--------
 .../app/error_group_overview/index.tsx        |  2 +-
 2 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx
index 4b8d8ddc6f746..5fcd2914f2225 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx
@@ -60,6 +60,45 @@ function getShortGroupId(errorGroupId?: string) {
   return errorGroupId.slice(0, 5);
 }
 
+function ErrorGroupHeader({
+  groupId,
+  isUnhandled,
+}: {
+  groupId: string;
+  isUnhandled?: boolean;
+}) {
+  return (
+    <>
+      <ApmHeader>
+        <EuiFlexGroup alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiTitle>
+              <h1>
+                {i18n.translate('xpack.apm.errorGroupDetails.errorGroupTitle', {
+                  defaultMessage: 'Error group {errorGroupId}',
+                  values: {
+                    errorGroupId: getShortGroupId(groupId),
+                  },
+                })}
+              </h1>
+            </EuiTitle>
+          </EuiFlexItem>
+          {isUnhandled && (
+            <EuiFlexItem grow={false}>
+              <EuiBadge color="warning">
+                {i18n.translate('xpack.apm.errorGroupDetails.unhandledLabel', {
+                  defaultMessage: 'Unhandled',
+                })}
+              </EuiBadge>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      </ApmHeader>
+      <SearchBar />
+    </>
+  );
+}
+
 type ErrorGroupDetailsProps = RouteComponentProps<{
   groupId: string;
   serviceName: string;
@@ -101,7 +140,7 @@ export function ErrorGroupDetails({ location, match }: ErrorGroupDetailsProps) {
   useTrackPageview({ app: 'apm', path: 'error_group_details', delay: 15000 });
 
   if (!errorGroupData || !errorDistributionData) {
-    return null;
+    return <ErrorGroupHeader groupId={groupId} />;
   }
 
   // If there are 0 occurrences, show only distribution chart w. empty message
@@ -114,32 +153,7 @@ export function ErrorGroupDetails({ location, match }: ErrorGroupDetailsProps) {
 
   return (
     <>
-      <ApmHeader>
-        <EuiFlexGroup alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiTitle>
-              <h1>
-                {i18n.translate('xpack.apm.errorGroupDetails.errorGroupTitle', {
-                  defaultMessage: 'Error group {errorGroupId}',
-                  values: {
-                    errorGroupId: getShortGroupId(groupId),
-                  },
-                })}
-              </h1>
-            </EuiTitle>
-          </EuiFlexItem>
-          {isUnhandled && (
-            <EuiFlexItem grow={false}>
-              <EuiBadge color="warning">
-                {i18n.translate('xpack.apm.errorGroupDetails.unhandledLabel', {
-                  defaultMessage: 'Unhandled',
-                })}
-              </EuiBadge>
-            </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-      </ApmHeader>
-      <SearchBar />
+      <ErrorGroupHeader groupId={groupId} isUnhandled={isUnhandled} />
       <EuiPage>
         <EuiPageBody>
           <EuiPanel>
diff --git a/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx
index 49e1cc44f9255..96657bcfb4734 100644
--- a/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx
@@ -68,7 +68,7 @@ export function ErrorGroupOverview({ serviceName }: ErrorGroupOverviewProps) {
   useTrackPageview({ app: 'apm', path: 'error_group_overview', delay: 15000 });
 
   if (!errorDistributionData || !errorGroupListData) {
-    return null;
+    return <SearchBar />;
   }
 
   return (