[ENHANCEMENT] Tempo: update more-traces-available alert styling (#538)

Signed-off-by: Andreas Gerstmayr <agerstmayr@redhat.com>

Author: andreasgerstmayr

tempo/src/components/ClosableAlert.tsx

@@ -0,0 +1,29 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { useCallback, useState } from 'react';
+import { Alert, AlertProps } from '@mui/material';
+
+export function ClosableAlert(props: AlertProps) {
+  const [isVisible, setVisible] = useState(true);
+
+  const handleClose = useCallback(() => {
+    setVisible(false);
+  }, [setVisible]);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return <Alert {...props} onClose={handleClose} />;
+}

tempo/src/explore/TempoExplorer.tsx

@@ -11,14 +11,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Alert, Box, Stack } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import { ErrorAlert, ErrorBoundary, LoadingOverlay, NoDataOverlay } from '@perses-dev/components';
 import { QueryDefinition, isValidTraceId } from '@perses-dev/core';
 import { Panel } from '@perses-dev/dashboards';
 import { useExplorerManagerContext } from '@perses-dev/explore';
 import { DataQueriesProvider, MultiQueryEditor, useDataQueries } from '@perses-dev/plugin-system';
 import { ReactElement, useState } from 'react';
 import { TempoTraceQuerySpec } from '../model';
+import { ClosableAlert } from '../components/ClosableAlert';
 import { linkToSpan, linkToTrace } from './links';
 
 interface TracesExplorerQueryParams {
@@ -56,6 +57,11 @@ function SearchResultsPanel({ queries }: SearchResultsPanelProps): ReactElement
 
   return (
     <Stack sx={{ height: '100%' }} gap={2}>
+      {hasMoreResults && (
+        <ClosableAlert severity="warning">
+          Not all matching traces are currently visible. Increase the display limit to view more.
+        </ClosableAlert>
+      )}
       <Box sx={{ height: '35%', flexShrink: 0 }}>
         <Panel
           panelOptions={{
@@ -97,11 +103,6 @@ function SearchResultsPanel({ queries }: SearchResultsPanelProps): ReactElement
           },
         }}
       />
-      {hasMoreResults && (
-        <Alert severity="info">
-          Not all matching traces are currently displayed. Increase the result limit to view additional traces.
-        </Alert>
-      )}
     </Stack>
   );
 }