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 = (
+  const body = filtered => (
+    <ResourceList.Body
+      emptyState={
+        <EmptyChecksList
+          showFirstTimeWidget={showFirstTimeWidget}
+          onCreateCheck={onCreateCheck}
+          searchTerm={searchTerm}
+        />
+      }
+    >
+      {cards(filtered)}
+    </ResourceList.Body>
+  )
+  const filteredChecks = (
     <FilterList<Check>
       list={checks}
       searchKeys={['name']}
       searchTerm={searchTerm}
     >
-      {filtered => cards(filtered)}
+      {filtered => body(filtered)}
     </FilterList>
   )
 
   return (
     <>
-      <ResourceList>
+      <ResourceList>{filteredChecks}</ResourceList>
-        <ResourceList.Body
-          emptyState={
-            <EmptyChecksList
-              showFirstTimeWidget={showFirstTimeWidget}
-              onCreateCheck={onCreateCheck}
-            />
-          }
-        >
-          {filteredCards}
-        </ResourceList.Body>
-      </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>{body}</ResourceList>
+}
+
+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 (
-    <ResourceList>
+    <EmptyState size={ComponentSize.Small} className="alert-column--empty">
-      <ResourceList.Body emptyState={<EmptyEndpointList />}>
+      <EmptyState.Text
-        {filteredCards}
+        text="Want to send notifications to Slack, LINEBREAK PagerDuty or an HTTP server? LINEBREAK LINEBREAK Try creating a Notification  Endpoint"
-      </ResourceList.Body>
+        highlightWords={['Notification', 'Endpoint']}
-    </ResourceList>
+      />
+    </EmptyState>
   )
 }
 
-const EmptyEndpointList: FC = () => (
-  <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 (
+  return <ResourceList>{filteredCards}</ResourceList>
-    <ResourceList>
-      <ResourceList.Body emptyState={<EmptyNotificationRulesList />}>
-        {filteredCards}
-      </ResourceList.Body>
-    </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