fix(alerts): empty state

ui/src/alerting/components/CheckCards.tsx

@@ -32,30 +32,32 @@ const CheckCards: FunctionComponent<Props> = ({
   onCreateCheck,
 }) => {
   const cards = cs => cs.map(c => <CheckCard key={c.id} check={c} />)
-  const filteredCards = (
-    <FilterList<Check>
-      list={checks}
-      searchKeys={['name']}
-      searchTerm={searchTerm}
-    >
-      {filtered => cards(filtered)}
-    </FilterList>
-  )
-
-  return (
-    <>
-      <ResourceList>
+  const body = filtered => (
     <ResourceList.Body
       emptyState={
         <EmptyChecksList
           showFirstTimeWidget={showFirstTimeWidget}
           onCreateCheck={onCreateCheck}
+          searchTerm={searchTerm}
         />
       }
     >
-          {filteredCards}
+      {cards(filtered)}
     </ResourceList.Body>
-      </ResourceList>
+  )
+  const filteredChecks = (
+    <FilterList<Check>
+      list={checks}
+      searchKeys={['name']}
+      searchTerm={searchTerm}
+    >
+      {filtered => body(filtered)}
+    </FilterList>
+  )
+
+  return (
+    <>
+      <ResourceList>{filteredChecks}</ResourceList>
     </>
   )
 }
@@ -63,12 +65,25 @@ const CheckCards: FunctionComponent<Props> = ({
 interface EmptyProps {
   showFirstTimeWidget: boolean
   onCreateCheck: () => void
+  searchTerm: string
 }
 
 const EmptyChecksList: FunctionComponent<EmptyProps> = ({
   showFirstTimeWidget,
   onCreateCheck,
+  searchTerm,
 }) => {
+  if (searchTerm) {
+    return (
+      <EmptyState size={ComponentSize.Small} className="alert-column--empty">
+        <EmptyState.Text
+          text="No checks  match your search"
+          highlightWords={['checks']}
+        />
+      </EmptyState>
+    )
+  }
+
   if (showFirstTimeWidget) {
     return (
       <Panel

ui/src/alerting/components/endpoints/EndpointCards.tsx

@@ -20,32 +20,45 @@ const EndpointCards: FC<Props> = ({endpoints, searchTerm}) => {
       <EndpointCard key={endpoint.id} endpoint={endpoint} />
     ))
 
-  const filteredCards = (
+  const body = (
     <FilterList<NotificationEndpoint>
       list={endpoints}
       searchKeys={['name']}
       searchTerm={searchTerm}
     >
-      {filteredEndpoints => cards(filteredEndpoints)}
+      {filteredEndpoints => (
+        <ResourceList.Body
+          emptyState={<EmptyEndpointList searchTerm={searchTerm} />}
+        >
+          {cards(filteredEndpoints)}
+        </ResourceList.Body>
+      )}
     </FilterList>
   )
 
-  return (
-    <ResourceList>
-      <ResourceList.Body emptyState={<EmptyEndpointList />}>
-        {filteredCards}
-      </ResourceList.Body>
-    </ResourceList>
-  )
+  return <ResourceList>{body}</ResourceList>
 }
 
-const EmptyEndpointList: FC = () => (
+const EmptyEndpointList: FC<{searchTerm: string}> = ({searchTerm}) => {
+  if (searchTerm) {
+    return (
+      <EmptyState size={ComponentSize.Small} className="alert-column--empty">
+        <EmptyState.Text
+          text="No endpoints  match your search"
+          highlightWords={['endpoints']}
+        />
+      </EmptyState>
+    )
+  }
+
+  return (
     <EmptyState size={ComponentSize.Small} className="alert-column--empty">
       <EmptyState.Text
         text="Want to send notifications to Slack, LINEBREAK PagerDuty or an HTTP server? LINEBREAK LINEBREAK Try creating a Notification  Endpoint"
         highlightWords={['Notification', 'Endpoint']}
       />
     </EmptyState>
-)
+  )
+}
 
 export default EndpointCards

ui/src/alerting/components/notifications/RuleCards.tsx

@@ -15,7 +15,7 @@ interface Props {
   searchTerm: string
 }
 
-const NotificationRuleCards: FC<Props> = ({rules}) => {
+const NotificationRuleCards: FC<Props> = ({rules, searchTerm}) => {
   const cards = rules =>
     rules.map(nr => <NotificationRuleCard key={nr.id} rule={nr} />)
 
@@ -23,22 +23,33 @@ const NotificationRuleCards: FC<Props> = ({rules}) => {
     <FilterList<NotificationRuleDraft>
       list={rules}
       searchKeys={['name']}
-      searchTerm=""
+      searchTerm={searchTerm}
     >
-      {filtered => cards(filtered)}
+      {filtered => (
+        <ResourceList.Body
+          emptyState={<EmptyNotificationRulesList searchTerm={searchTerm} />}
+        >
+          {cards(filtered)}
+        </ResourceList.Body>
+      )}
     </FilterList>
   )
 
-  return (
-    <ResourceList>
-      <ResourceList.Body emptyState={<EmptyNotificationRulesList />}>
-        {filteredCards}
-      </ResourceList.Body>
-    </ResourceList>
-  )
+  return <ResourceList>{filteredCards}</ResourceList>
 }
 
-const EmptyNotificationRulesList: FC = () => {
+const EmptyNotificationRulesList: FC<{searchTerm: string}> = ({searchTerm}) => {
+  if (searchTerm) {
+    return (
+      <EmptyState size={ComponentSize.Small} className="alert-column--empty">
+        <EmptyState.Text
+          text="No rules  match your search"
+          highlightWords={['rules']}
+        />
+      </EmptyState>
+    )
+  }
+
   return (
     <EmptyState size={ComponentSize.Small} className="alert-column--empty">
       <EmptyState.Text