From 1018364540caf3893b5680c43cf618b78c037ae0 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Wed, 7 Sep 2022 00:02:14 -0700
Subject: [PATCH] default to no compare

---
 .../table-filterable-cell/table-filterable-cell.tsx   |  6 +++---
 web-console/src/react-table/react-table-inputs.tsx    |  4 ++--
 .../__snapshots__/segments-view.spec.tsx.snap         |  3 ++-
 web-console/src/views/segments-view/segments-view.tsx | 11 ++++++-----
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/web-console/src/components/table-filterable-cell/table-filterable-cell.tsx b/web-console/src/components/table-filterable-cell/table-filterable-cell.tsx
index d3387fd37e81..14f568013f09 100644
--- a/web-console/src/components/table-filterable-cell/table-filterable-cell.tsx
+++ b/web-console/src/components/table-filterable-cell/table-filterable-cell.tsx
@@ -34,14 +34,14 @@ export interface TableFilterableCellProps {
   value: string;
   filters: Filter[];
   onFiltersChange(filters: Filter[]): void;
-  disableComparisons?: boolean;
+  enableComparisons?: boolean;
   children?: ReactNode;
 }
 
 export const TableFilterableCell = React.memo(function TableFilterableCell(
   props: TableFilterableCellProps,
 ) {
-  const { field, value, children, filters, disableComparisons, onFiltersChange } = props;
+  const { field, value, children, filters, enableComparisons, onFiltersChange } = props;
 
   return (
     <Popover2
@@ -51,7 +51,7 @@ export const TableFilterableCell = React.memo(function TableFilterableCell(
           content={() => (
             <Menu>
               <MenuDivider title="Filter" />
-              {(disableComparisons ? FILTER_MODES_NO_COMPARISONS : FILTER_MODES).map((mode, i) => (
+              {(enableComparisons ? FILTER_MODES : FILTER_MODES_NO_COMPARISONS).map((mode, i) => (
                 <MenuItem
                   key={i}
                   icon={filterModeToIcon(mode)}
diff --git a/web-console/src/react-table/react-table-inputs.tsx b/web-console/src/react-table/react-table-inputs.tsx
index d7e02c3dc37e..7dbb69b18f3e 100644
--- a/web-console/src/react-table/react-table-inputs.tsx
+++ b/web-console/src/react-table/react-table-inputs.tsx
@@ -43,7 +43,7 @@ export function GenericFilterInput({ column, filter, onChange, key }: FilterRend
   const [menuOpen, setMenuOpen] = useState(false);
   const [focused, setFocused] = useState(false);
 
-  const disableComparisons = String(column.headerClassName).includes('disable-comparisons');
+  const enableComparisons = String(column.headerClassName).includes('enable-comparisons');
 
   const { mode, needle } = (filter ? parseFilterModeAndNeedle(filter, true) : undefined) || {
     mode: '~',
@@ -64,7 +64,7 @@ export function GenericFilterInput({ column, filter, onChange, key }: FilterRend
           onInteraction={setMenuOpen}
           content={
             <Menu>
-              {(disableComparisons ? FILTER_MODES_NO_COMPARISON : FILTER_MODES).map((m, i) => (
+              {(enableComparisons ? FILTER_MODES : FILTER_MODES_NO_COMPARISON).map((m, i) => (
                 <MenuItem
                   key={i}
                   icon={filterModeToIcon(m)}
diff --git a/web-console/src/views/segments-view/__snapshots__/segments-view.spec.tsx.snap b/web-console/src/views/segments-view/__snapshots__/segments-view.spec.tsx.snap
index 6ac125bfdf43..5d273a286915 100755
--- a/web-console/src/views/segments-view/__snapshots__/segments-view.spec.tsx.snap
+++ b/web-console/src/views/segments-view/__snapshots__/segments-view.spec.tsx.snap
@@ -169,6 +169,7 @@ exports[`SegmentsView matches snapshot 1`] = `
             "accessor": "start",
             "defaultSortDesc": true,
             "filterable": true,
+            "headerClassName": "enable-comparisons",
             "show": true,
             "sortable": true,
             "width": 160,
@@ -179,6 +180,7 @@ exports[`SegmentsView matches snapshot 1`] = `
             "accessor": "end",
             "defaultSortDesc": true,
             "filterable": true,
+            "headerClassName": "enable-comparisons",
             "show": true,
             "sortable": true,
             "width": 160,
@@ -206,7 +208,6 @@ exports[`SegmentsView matches snapshot 1`] = `
             "Cell": [Function],
             "Header": "Shard type",
             "accessor": [Function],
-            "headerClassName": "disable-comparisons",
             "id": "shard_type",
             "show": true,
             "sortable": false,
diff --git a/web-console/src/views/segments-view/segments-view.tsx b/web-console/src/views/segments-view/segments-view.tsx
index b0327182be13..85d027962268 100644
--- a/web-console/src/views/segments-view/segments-view.tsx
+++ b/web-console/src/views/segments-view/segments-view.tsx
@@ -485,7 +485,7 @@ END AS "time_span"`,
     });
   }
 
-  private renderFilterableCell(field: string, disableComparisons = false) {
+  private renderFilterableCell(field: string, enableComparisons = false) {
     const { segmentFilter } = this.state;
 
     return (row: { value: any }) => (
@@ -494,7 +494,7 @@ END AS "time_span"`,
         value={row.value}
         filters={segmentFilter}
         onFiltersChange={filters => this.setState({ segmentFilter: filters })}
-        disableComparisons={disableComparisons}
+        enableComparisons={enableComparisons}
       >
         {row.value}
       </TableFilterableCell>
@@ -582,21 +582,23 @@ END AS "time_span"`,
             Header: 'Start',
             show: visibleColumns.shown('Start'),
             accessor: 'start',
+            headerClassName: 'enable-comparisons',
             width: 160,
             sortable: hasSql,
             defaultSortDesc: true,
             filterable: allowGeneralFilter,
-            Cell: this.renderFilterableCell('start'),
+            Cell: this.renderFilterableCell('start', true),
           },
           {
             Header: 'End',
             show: visibleColumns.shown('End'),
             accessor: 'end',
+            headerClassName: 'enable-comparisons',
             width: 160,
             sortable: hasSql,
             defaultSortDesc: true,
             filterable: allowGeneralFilter,
-            Cell: this.renderFilterableCell('end'),
+            Cell: this.renderFilterableCell('end', true),
           },
           {
             Header: 'Version',
@@ -623,7 +625,6 @@ END AS "time_span"`,
             id: 'shard_type',
             width: 100,
             sortable: false,
-            headerClassName: 'disable-comparisons',
             accessor: d => {
               let v: any;
               try {