From 8dc2105b63a1f266c71f069951698474b78d3072 Mon Sep 17 00:00:00 2001
From: Stephanie Yang <stephanie@pilosa.com>
Date: Wed, 28 Jul 2021 11:38:13 -0500
Subject: [PATCH] add clear link for sort

---
 .../GroupByBuilder/GroupByBuilder.module.scss    |  2 +-
 .../GroupByBuilder/GroupByBuilder.tsx            | 16 ++++++++++++----
 .../App/QueryBuilder/GroupBySort/GroupBySort.tsx |  4 +++-
 .../RowCallBuilder/RowCallBuilder.tsx            |  1 -
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/lattice/src/App/QueryBuilder/GroupByBuilder/GroupByBuilder.module.scss b/lattice/src/App/QueryBuilder/GroupByBuilder/GroupByBuilder.module.scss
index 68c527523..74cdd6f6e 100644
--- a/lattice/src/App/QueryBuilder/GroupByBuilder/GroupByBuilder.module.scss
+++ b/lattice/src/App/QueryBuilder/GroupByBuilder/GroupByBuilder.module.scss
@@ -3,7 +3,7 @@
     margin-bottom: 16px;
   }
 
-  .filtersHeader {
+  .header {
     display: flex;
     align-items: center;
     justify-content: space-between;
diff --git a/lattice/src/App/QueryBuilder/GroupByBuilder/GroupByBuilder.tsx b/lattice/src/App/QueryBuilder/GroupByBuilder/GroupByBuilder.tsx
index 56a535d0f..c0486352f 100644
--- a/lattice/src/App/QueryBuilder/GroupByBuilder/GroupByBuilder.tsx
+++ b/lattice/src/App/QueryBuilder/GroupByBuilder/GroupByBuilder.tsx
@@ -98,7 +98,7 @@ export const GroupByBuilder: FC<GroupByBuilderProps> = ({
       />
 
       <div className={css.filtersSection}>
-        <div className={css.filtersHeader}>
+        <div className={css.header}>
           <Typography variant="caption" color="textSecondary">
             Filter (optional)
             {filters.length > 0 && (
@@ -144,9 +144,17 @@ export const GroupByBuilder: FC<GroupByBuilderProps> = ({
       </div>
 
       <div className={css.sortSection}>
-        <Typography variant="caption" color="textSecondary">
-          Sort (optional)
-        </Typography>
+        <div className={css.header}>
+          <Typography variant="caption" color="textSecondary">
+            Sort (optional)
+          </Typography>
+          <span
+            className={css.textLink}
+            onClick={() => onChange({ ...query, sort: [] })}
+          >
+            Clear
+          </span>
+        </div>
         <GroupBySort
           sort={sort ? sort : []}
           onUpdate={(value) => {
diff --git a/lattice/src/App/QueryBuilder/GroupBySort/GroupBySort.tsx b/lattice/src/App/QueryBuilder/GroupBySort/GroupBySort.tsx
index fca83a954..c75f9320b 100644
--- a/lattice/src/App/QueryBuilder/GroupBySort/GroupBySort.tsx
+++ b/lattice/src/App/QueryBuilder/GroupBySort/GroupBySort.tsx
@@ -20,7 +20,7 @@ export const GroupBySort: FC<GroupBySortProps> = ({
   showErrors,
   onUpdate
 }) => {
-  const hasPrimary = sort.length > 0;
+  const hasPrimary = sort.length > 0 && sort[0].sortValue;
   const primary = hasPrimary ? sort[0].sortValue.split(' ')[0] : '';
   const hasSecondary = sort.length > 1;
   const secondary = hasSecondary ? sort[1].sortValue.split(' ')[0] : '';
@@ -76,6 +76,7 @@ export const GroupBySort: FC<GroupBySortProps> = ({
           value={hasPrimary ? sort[0].sortValue : ''}
           options={sortOptions}
           onChange={(value) => onPrimaryChange(value)}
+          allowEmpty={true}
         />
 
         {primary.includes('sum') ? (
@@ -99,6 +100,7 @@ export const GroupBySort: FC<GroupBySortProps> = ({
               (option) => !option.value.includes(primary)
             )}
             onChange={(value) => onSecondaryChange(value)}
+            allowEmpty={true}
           />
 
           {secondary.includes('sum') ? (
diff --git a/lattice/src/App/QueryBuilder/RowCallBuilder/RowCallBuilder.tsx b/lattice/src/App/QueryBuilder/RowCallBuilder/RowCallBuilder.tsx
index ba8a1ad8f..7ba6fc7ae 100644
--- a/lattice/src/App/QueryBuilder/RowCallBuilder/RowCallBuilder.tsx
+++ b/lattice/src/App/QueryBuilder/RowCallBuilder/RowCallBuilder.tsx
@@ -12,7 +12,6 @@ import {
 } from 'App/QueryBuilder/rowTypes';
 import { RowCall } from './RowCall';
 import css from './RowCallBuilder.module.scss';
-import { useEffect } from 'react';
 
 type RowCallBuilderProps = {
   rowCalls: RowGrouping[];