From 848936b5dc2f082d0581e75147efbc6e5f5ace46 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Mon, 9 Sep 2019 14:35:14 -0700
Subject: [PATCH] fix(alerts): empty state

---
 ui/src/alerting/components/CheckCards.tsx     | 43 ++++++++++++------
 .../components/endpoints/EndpointCards.tsx    | 45 ++++++++++++-------
 .../components/notifications/RuleCards.tsx    | 33 +++++++++-----
 3 files changed, 80 insertions(+), 41 deletions(-)

diff --git a/ui/src/alerting/components/CheckCards.tsx b/ui/src/alerting/components/CheckCards.tsx
index 6b30af11b3..663dbf4cc4 100644
--- a/ui/src/alerting/components/CheckCards.tsx
+++ b/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.Body
-          emptyState={
-            <EmptyChecksList
-              showFirstTimeWidget={showFirstTimeWidget}
-              onCreateCheck={onCreateCheck}
-            />
-          }
-        >
-          {filteredCards}
-        </ResourceList.Body>
-      </ResourceList>
+      <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
diff --git a/ui/src/alerting/components/endpoints/EndpointCards.tsx b/ui/src/alerting/components/endpoints/EndpointCards.tsx
index 6ff1f9f6ff..5f9241bb97 100644
--- a/ui/src/alerting/components/endpoints/EndpointCards.tsx
+++ b/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>
-      <ResourceList.Body emptyState={<EmptyEndpointList />}>
-        {filteredCards}
-      </ResourceList.Body>
-    </ResourceList>
+    <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>
   )
 }
 
-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
diff --git a/ui/src/alerting/components/notifications/RuleCards.tsx b/ui/src/alerting/components/notifications/RuleCards.tsx
index c2298ca250..e8476d8890 100644
--- a/ui/src/alerting/components/notifications/RuleCards.tsx
+++ b/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