From 24a6e6a1b471b43f63cb1abbc13a7982df060e99 Mon Sep 17 00:00:00 2001
From: Darren Janeczek <38694490+darrenjaneczek@users.noreply.github.com>
Date: Mon, 29 Jan 2024 16:54:56 -0500
Subject: [PATCH] fix: datatrails: show a warning when search yields empty
 results (#81444)

* fix: datatrails: show a warning when search yields empty results
---
 public/app/features/trails/MetricSelectScene.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/public/app/features/trails/MetricSelectScene.tsx b/public/app/features/trails/MetricSelectScene.tsx
index a32f47aea9f..e93604cc227 100644
--- a/public/app/features/trails/MetricSelectScene.tsx
+++ b/public/app/features/trails/MetricSelectScene.tsx
@@ -217,9 +217,14 @@ export class MetricSelectScene extends SceneObjectBase<MetricSelectSceneState> {
   };
 
   public static Component = ({ model }: SceneComponentProps<MetricSelectScene>) => {
-    const { showHeading, searchQuery, showPreviews } = model.useState();
+    const { showHeading, searchQuery, showPreviews, body } = model.useState();
+    const { children } = body.useState();
     const styles = useStyles2(getStyles);
 
+    const searchTooStrictWarning = children.length === 0 && searchQuery && (
+      <div className={styles.alternateMessage}>There are no results found. Try adjusting your search or filters.</div>
+    );
+
     return (
       <div className={styles.container}>
         {showHeading && (
@@ -231,6 +236,7 @@ export class MetricSelectScene extends SceneObjectBase<MetricSelectSceneState> {
           <Input placeholder="Search metrics" value={searchQuery} onChange={model.onSearchChange} />
           <InlineSwitch showLabel={true} label="Show previews" value={showPreviews} onChange={model.onTogglePreviews} />
         </div>
+        {searchTooStrictWarning}
         <model.state.body.Component model={model.state.body} />
       </div>
     );
@@ -318,6 +324,11 @@ function getStyles(theme: GrafanaTheme2) {
       gap: theme.spacing(2),
       marginBottom: theme.spacing(1),
     }),
+    alternateMessage: css({
+      fontStyle: 'italic',
+      marginTop: theme.spacing(7),
+      textAlign: 'center',
+    }),
   };
 }