From 2966bb5d668dbd31e66e773ac7e8895aac0a6f46 Mon Sep 17 00:00:00 2001
From: Stephanie Yang <stephanie@pilosa.com>
Date: Mon, 24 May 2021 20:27:58 -0500
Subject: [PATCH] add helper text for using GroupBy filter

---
 .../App/QueryBuilder/QueryBuilder.module.scss |  5 +++++
 lattice/src/App/QueryBuilder/QueryBuilder.tsx | 19 +++++++++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/lattice/src/App/QueryBuilder/QueryBuilder.module.scss b/lattice/src/App/QueryBuilder/QueryBuilder.module.scss
index 00be260ab..b5bc0985a 100644
--- a/lattice/src/App/QueryBuilder/QueryBuilder.module.scss
+++ b/lattice/src/App/QueryBuilder/QueryBuilder.module.scss
@@ -122,6 +122,11 @@
     justify-content: space-between;
     margin-top: 8px;
   }
+
+  .filterInfo {
+    vertical-align: text-top;
+    margin-left: 4px;
+  }
 }
 
 .savePopover {
diff --git a/lattice/src/App/QueryBuilder/QueryBuilder.tsx b/lattice/src/App/QueryBuilder/QueryBuilder.tsx
index 5eda528ed..812302324 100644
--- a/lattice/src/App/QueryBuilder/QueryBuilder.tsx
+++ b/lattice/src/App/QueryBuilder/QueryBuilder.tsx
@@ -493,7 +493,7 @@ export const QueryBuilder: FC<QueryBuilderProps> = ({
               />
             </div>
 
-            {selectedTable
+            {selectedTable && operation !== 'GroupBy'
               ? rowCalls.map((rowCall, idx) => (
                   <Fragment key={`group-${idx}`}>
                     {idx > 0 ? (
@@ -589,6 +589,16 @@ export const QueryBuilder: FC<QueryBuilderProps> = ({
                 <div className={css.filterHeader}>
                   <Typography variant="caption" color="textSecondary">
                     Filter (optional)
+                    {groupByFilters.length > 0 && (
+                      <Tooltip
+                        className={css.filterInfo}
+                        title={`To use filters, save an Extract query for ${selectedTable.name} with a Row call.`}
+                        placement="top"
+                        arrow
+                      >
+                        <InfoIcon fontSize="inherit" />
+                      </Tooltip>
+                    )}
                   </Typography>
                   {filter ? (
                     <span
@@ -601,7 +611,7 @@ export const QueryBuilder: FC<QueryBuilderProps> = ({
                 </div>
                 {filter ? (
                   <Typography variant="caption">{filter}</Typography>
-                ) : (
+                ) : groupByFilters.length > 0 ? (
                   <SavedQueries
                     queries={groupByFilters}
                     tables={tables}
@@ -613,6 +623,11 @@ export const QueryBuilder: FC<QueryBuilderProps> = ({
                       }
                     }}
                   />
+                ) : (
+                  <div className={css.infoMessage}>
+                    No available filters. To use filters, save an Extract query
+                    for {selectedTable.name} with a Row call.
+                  </div>
                 )}
               </div>
             ) : (