From 7f8dc816cdf8f6c7393a6682ddf7e342301b1278 Mon Sep 17 00:00:00 2001
From: Harshil Sharma <harshilsharma63@gmail.com>
Date: Mon, 30 Aug 2021 11:43:21 +0530
Subject: [PATCH] Made calculation options hidden when empty: (#1076)

* Made calculation options hidden when empty:

* WIP

* Made calculation row visible on hover

* Updated tests

* Fixed issue with plugin mode

* Fixed a bug where options didn't hide after selecting an option

* Updating opacity

Co-authored-by: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
---
 .../__snapshots__/calculation.test.tsx.snap   |  10 +-
 .../components/calculations/calculation.scss  |  11 +-
 .../calculations/calculation.test.tsx         |   5 +
 .../components/calculations/calculation.tsx   |   3 +-
 .../table/__snapshots__/table.test.tsx.snap   | 246 +++++++++---------
 .../calculationRow.test.tsx.snap              |  72 ++---
 .../table/calculation/calculationRow.tsx      |  15 +-
 7 files changed, 203 insertions(+), 159 deletions(-)

diff --git a/webapp/src/components/calculations/__snapshots__/calculation.test.tsx.snap b/webapp/src/components/calculations/__snapshots__/calculation.test.tsx.snap
index 8aa2d4057..7ca942f13 100644
--- a/webapp/src/components/calculations/__snapshots__/calculation.test.tsx.snap
+++ b/webapp/src/components/calculations/__snapshots__/calculation.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`components/calculations/Calculation should match snapshot - count 1`] = `
 <div>
   <div
-    class="Calculation count fooClass"
+    class="Calculation count fooClass  hovered"
     tabindex="0"
   >
     <span
@@ -23,7 +23,7 @@ exports[`components/calculations/Calculation should match snapshot - count 1`] =
 exports[`components/calculations/Calculation should match snapshot - countUniqueValue 1`] = `
 <div>
   <div
-    class="Calculation countUniqueValue fooClass"
+    class="Calculation countUniqueValue fooClass  hovered"
     tabindex="0"
   >
     <span
@@ -43,7 +43,7 @@ exports[`components/calculations/Calculation should match snapshot - countUnique
 exports[`components/calculations/Calculation should match snapshot - countValue 1`] = `
 <div>
   <div
-    class="Calculation countValue fooClass"
+    class="Calculation countValue fooClass  hovered"
     tabindex="0"
   >
     <span
@@ -63,7 +63,7 @@ exports[`components/calculations/Calculation should match snapshot - countValue
 exports[`components/calculations/Calculation should match snapshot - none 1`] = `
 <div>
   <div
-    class="Calculation none fooClass"
+    class="Calculation none fooClass  hovered"
     tabindex="0"
   >
     <span
@@ -81,7 +81,7 @@ exports[`components/calculations/Calculation should match snapshot - none 1`] =
 exports[`components/calculations/Calculation should match snapshot - option change 1`] = `
 <div>
   <div
-    class="Calculation none fooClass"
+    class="Calculation none fooClass menuOpen hovered"
     tabindex="0"
   >
     <div>
diff --git a/webapp/src/components/calculations/calculation.scss b/webapp/src/components/calculations/calculation.scss
index 6ae3f89a8..56afb6cce 100644
--- a/webapp/src/components/calculations/calculation.scss
+++ b/webapp/src/components/calculations/calculation.scss
@@ -3,9 +3,10 @@
 
 .Calculation {
     cursor: pointer;
+    transition: opacity 0.1s ease-in;
 
     &.none {
-        color: rgba(var(--body-color), 0.64);
+        opacity: 0;
 
         .calculationLabel {
             text-transform: capitalize;
@@ -13,6 +14,14 @@
             font-size: 14px;
             margin-right: 0;
         }
+
+        &.hovered {
+            opacity: 0.64;
+        }
+
+        &.menuOpen {
+            opacity: 1;
+        }
     }
 
     .calculationLabel {
diff --git a/webapp/src/components/calculations/calculation.test.tsx b/webapp/src/components/calculations/calculation.test.tsx
index a7b511c06..065317000 100644
--- a/webapp/src/components/calculations/calculation.test.tsx
+++ b/webapp/src/components/calculations/calculation.test.tsx
@@ -34,6 +34,7 @@ describe('components/calculations/Calculation', () => {
                 onMenuOpen={() => {}}
                 onChange={() => {}}
                 cards={[card, card2]}
+                hovered={true}
                 property={{
                     id: 'property_2',
                     name: '',
@@ -58,6 +59,7 @@ describe('components/calculations/Calculation', () => {
                 onMenuOpen={() => {}}
                 onChange={() => {}}
                 cards={[card, card2]}
+                hovered={true}
                 property={{
                     id: 'property_2',
                     name: '',
@@ -82,6 +84,7 @@ describe('components/calculations/Calculation', () => {
                 onMenuOpen={() => {}}
                 onChange={() => {}}
                 cards={[card, card2]}
+                hovered={true}
                 property={{
                     id: 'property_3',
                     name: '',
@@ -106,6 +109,7 @@ describe('components/calculations/Calculation', () => {
                 onMenuOpen={() => {}}
                 onChange={() => {}}
                 cards={[card, card2]}
+                hovered={true}
                 property={{
                     id: 'property_4',
                     name: '',
@@ -134,6 +138,7 @@ describe('components/calculations/Calculation', () => {
                 onMenuOpen={onMenuOpen}
                 onChange={onChange}
                 cards={[card, card2]}
+                hovered={true}
                 property={{
                     id: 'property_2',
                     name: '',
diff --git a/webapp/src/components/calculations/calculation.tsx b/webapp/src/components/calculations/calculation.tsx
index b24482c63..51f056c72 100644
--- a/webapp/src/components/calculations/calculation.tsx
+++ b/webapp/src/components/calculations/calculation.tsx
@@ -23,6 +23,7 @@ type Props = {
     onChange: (value: string) => void
     cards: readonly Card[]
     property: IPropertyTemplate
+    hovered: boolean
 }
 
 const Calculation = (props: Props): JSX.Element => {
@@ -35,7 +36,7 @@ const Calculation = (props: Props): JSX.Element => {
         // See this for more details-
         // https://stackoverflow.com/questions/47308081/onblur-event-is-not-firing
         <div
-            className={`Calculation ${value} ${props.class}`}
+            className={`Calculation ${value} ${props.class} ${props.menuOpen ? 'menuOpen' : ''} ${props.hovered ? 'hovered' : ''}`}
             style={props.style}
             onClick={() => (props.menuOpen ? props.onMenuClose() : props.onMenuOpen())}
             tabIndex={0}
diff --git a/webapp/src/components/table/__snapshots__/table.test.tsx.snap b/webapp/src/components/table/__snapshots__/table.test.tsx.snap
index a4553ed8c..2f8a780ad 100644
--- a/webapp/src/components/table/__snapshots__/table.test.tsx.snap
+++ b/webapp/src/components/table/__snapshots__/table.test.tsx.snap
@@ -333,7 +333,23 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
         class="CalculationRow octo-table-row"
       >
         <div
-          class="Calculation none octo-table-cell"
+          class="Calculation count octo-table-cell  "
+          style="width: 100px;"
+          tabindex="0"
+        >
+          <span
+            class="calculationLabel"
+          >
+            Count
+          </span>
+          <span
+            class="calculationValue"
+          >
+            2
+          </span>
+        </div>
+        <div
+          class="Calculation none octo-table-cell  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -347,7 +363,7 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
           />
         </div>
         <div
-          class="Calculation none octo-table-cell"
+          class="Calculation none octo-table-cell  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -361,21 +377,7 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
           />
         </div>
         <div
-          class="Calculation none octo-table-cell"
-          style="width: 100px;"
-          tabindex="0"
-        >
-          <span
-            class="calculationLabel"
-          >
-            Calculate
-          </span>
-          <i
-            class="CompassIcon icon-chevron-up ChevronUpIcon"
-          />
-        </div>
-        <div
-          class="Calculation none octo-table-cell"
+          class="Calculation none octo-table-cell  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -727,7 +729,23 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
         class="CalculationRow octo-table-row"
       >
         <div
-          class="Calculation none octo-table-cell"
+          class="Calculation count octo-table-cell  "
+          style="width: 100px;"
+          tabindex="0"
+        >
+          <span
+            class="calculationLabel"
+          >
+            Count
+          </span>
+          <span
+            class="calculationValue"
+          >
+            2
+          </span>
+        </div>
+        <div
+          class="Calculation none octo-table-cell  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -741,7 +759,7 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
           />
         </div>
         <div
-          class="Calculation none octo-table-cell"
+          class="Calculation none octo-table-cell  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -755,21 +773,7 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
           />
         </div>
         <div
-          class="Calculation none octo-table-cell"
-          style="width: 100px;"
-          tabindex="0"
-        >
-          <span
-            class="calculationLabel"
-          >
-            Calculate
-          </span>
-          <i
-            class="CompassIcon icon-chevron-up ChevronUpIcon"
-          />
-        </div>
-        <div
-          class="Calculation none octo-table-cell"
+          class="Calculation none octo-table-cell  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -1121,7 +1125,23 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
         class="CalculationRow octo-table-row"
       >
         <div
-          class="Calculation none octo-table-cell"
+          class="Calculation count octo-table-cell  "
+          style="width: 100px;"
+          tabindex="0"
+        >
+          <span
+            class="calculationLabel"
+          >
+            Count
+          </span>
+          <span
+            class="calculationValue"
+          >
+            2
+          </span>
+        </div>
+        <div
+          class="Calculation none octo-table-cell  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -1135,7 +1155,7 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
           />
         </div>
         <div
-          class="Calculation none octo-table-cell"
+          class="Calculation none octo-table-cell  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -1149,21 +1169,7 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
           />
         </div>
         <div
-          class="Calculation none octo-table-cell"
-          style="width: 100px;"
-          tabindex="0"
-        >
-          <span
-            class="calculationLabel"
-          >
-            Calculate
-          </span>
-          <i
-            class="CompassIcon icon-chevron-up ChevronUpIcon"
-          />
-        </div>
-        <div
-          class="Calculation none octo-table-cell"
+          class="Calculation none octo-table-cell  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -1515,7 +1521,23 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
         class="CalculationRow octo-table-row"
       >
         <div
-          class="Calculation none octo-table-cell"
+          class="Calculation count octo-table-cell  "
+          style="width: 100px;"
+          tabindex="0"
+        >
+          <span
+            class="calculationLabel"
+          >
+            Count
+          </span>
+          <span
+            class="calculationValue"
+          >
+            2
+          </span>
+        </div>
+        <div
+          class="Calculation none octo-table-cell  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -1529,7 +1551,7 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
           />
         </div>
         <div
-          class="Calculation none octo-table-cell"
+          class="Calculation none octo-table-cell  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -1543,21 +1565,7 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
           />
         </div>
         <div
-          class="Calculation none octo-table-cell"
-          style="width: 100px;"
-          tabindex="0"
-        >
-          <span
-            class="calculationLabel"
-          >
-            Calculate
-          </span>
-          <i
-            class="CompassIcon icon-chevron-up ChevronUpIcon"
-          />
-        </div>
-        <div
-          class="Calculation none octo-table-cell"
+          class="Calculation none octo-table-cell  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -1781,7 +1789,23 @@ exports[`components/table/Table should match snapshot 1`] = `
         class="CalculationRow octo-table-row"
       >
         <div
-          class="Calculation none octo-table-cell"
+          class="Calculation count octo-table-cell  "
+          style="width: 100px;"
+          tabindex="0"
+        >
+          <span
+            class="calculationLabel"
+          >
+            Count
+          </span>
+          <span
+            class="calculationValue"
+          >
+            1
+          </span>
+        </div>
+        <div
+          class="Calculation none octo-table-cell  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -1795,21 +1819,7 @@ exports[`components/table/Table should match snapshot 1`] = `
           />
         </div>
         <div
-          class="Calculation none octo-table-cell"
-          style="width: 100px;"
-          tabindex="0"
-        >
-          <span
-            class="calculationLabel"
-          >
-            Calculate
-          </span>
-          <i
-            class="CompassIcon icon-chevron-up ChevronUpIcon"
-          />
-        </div>
-        <div
-          class="Calculation none octo-table-cell"
+          class="Calculation none octo-table-cell  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -2005,7 +2015,23 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
         class="CalculationRow octo-table-row"
       >
         <div
-          class="Calculation none octo-table-cell"
+          class="Calculation count octo-table-cell  "
+          style="width: 100px;"
+          tabindex="0"
+        >
+          <span
+            class="calculationLabel"
+          >
+            Count
+          </span>
+          <span
+            class="calculationValue"
+          >
+            1
+          </span>
+        </div>
+        <div
+          class="Calculation none octo-table-cell  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -2019,21 +2045,7 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
           />
         </div>
         <div
-          class="Calculation none octo-table-cell"
-          style="width: 100px;"
-          tabindex="0"
-        >
-          <span
-            class="calculationLabel"
-          >
-            Calculate
-          </span>
-          <i
-            class="CompassIcon icon-chevron-up ChevronUpIcon"
-          />
-        </div>
-        <div
-          class="Calculation none octo-table-cell"
+          class="Calculation none octo-table-cell  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -2230,7 +2242,23 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
         class="CalculationRow octo-table-row"
       >
         <div
-          class="Calculation none octo-table-cell"
+          class="Calculation count octo-table-cell  "
+          style="width: 100px;"
+          tabindex="0"
+        >
+          <span
+            class="calculationLabel"
+          >
+            Count
+          </span>
+          <span
+            class="calculationValue"
+          >
+            1
+          </span>
+        </div>
+        <div
+          class="Calculation none octo-table-cell  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -2244,21 +2272,7 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
           />
         </div>
         <div
-          class="Calculation none octo-table-cell"
-          style="width: 100px;"
-          tabindex="0"
-        >
-          <span
-            class="calculationLabel"
-          >
-            Calculate
-          </span>
-          <i
-            class="CompassIcon icon-chevron-up ChevronUpIcon"
-          />
-        </div>
-        <div
-          class="Calculation none octo-table-cell"
+          class="Calculation none octo-table-cell  "
           style="width: 100px;"
           tabindex="0"
         >
diff --git a/webapp/src/components/table/calculation/__snapshots__/calculationRow.test.tsx.snap b/webapp/src/components/table/calculation/__snapshots__/calculationRow.test.tsx.snap
index 63ec6df29..59e28bd07 100644
--- a/webapp/src/components/table/calculation/__snapshots__/calculationRow.test.tsx.snap
+++ b/webapp/src/components/table/calculation/__snapshots__/calculationRow.test.tsx.snap
@@ -6,21 +6,7 @@ exports[`components/table/calculation/CalculationRow should match snapshot 1`] =
     class="CalculationRow octo-table-row"
   >
     <div
-      class="Calculation none octo-table-cell"
-      style="width: 100px;"
-      tabindex="0"
-    >
-      <span
-        class="calculationLabel"
-      >
-        Calculate
-      </span>
-      <i
-        class="CompassIcon icon-chevron-up ChevronUpIcon"
-      />
-    </div>
-    <div
-      class="Calculation count octo-table-cell"
+      class="Calculation count octo-table-cell  "
       style="width: 100px;"
       tabindex="0"
     >
@@ -36,7 +22,23 @@ exports[`components/table/calculation/CalculationRow should match snapshot 1`] =
       </span>
     </div>
     <div
-      class="Calculation countValue octo-table-cell"
+      class="Calculation count octo-table-cell  "
+      style="width: 100px;"
+      tabindex="0"
+    >
+      <span
+        class="calculationLabel"
+      >
+        Count
+      </span>
+      <span
+        class="calculationValue"
+      >
+        2
+      </span>
+    </div>
+    <div
+      class="Calculation countValue octo-table-cell  "
       style="width: 100px;"
       tabindex="0"
     >
@@ -52,7 +54,7 @@ exports[`components/table/calculation/CalculationRow should match snapshot 1`] =
       </span>
     </div>
     <div
-      class="Calculation countUniqueValue octo-table-cell"
+      class="Calculation countUniqueValue octo-table-cell  "
       style="width: 100px;"
       tabindex="0"
     >
@@ -77,7 +79,23 @@ exports[`components/table/calculation/CalculationRow should render three calcula
     class="CalculationRow octo-table-row"
   >
     <div
-      class="Calculation none octo-table-cell"
+      class="Calculation count octo-table-cell  "
+      style="width: 100px;"
+      tabindex="0"
+    >
+      <span
+        class="calculationLabel"
+      >
+        Count
+      </span>
+      <span
+        class="calculationValue"
+      >
+        2
+      </span>
+    </div>
+    <div
+      class="Calculation none octo-table-cell  "
       style="width: 100px;"
       tabindex="0"
     >
@@ -91,7 +109,7 @@ exports[`components/table/calculation/CalculationRow should render three calcula
       />
     </div>
     <div
-      class="Calculation none octo-table-cell"
+      class="Calculation none octo-table-cell  "
       style="width: 100px;"
       tabindex="0"
     >
@@ -105,21 +123,7 @@ exports[`components/table/calculation/CalculationRow should render three calcula
       />
     </div>
     <div
-      class="Calculation none octo-table-cell"
-      style="width: 100px;"
-      tabindex="0"
-    >
-      <span
-        class="calculationLabel"
-      >
-        Calculate
-      </span>
-      <i
-        class="CompassIcon icon-chevron-up ChevronUpIcon"
-      />
-    </div>
-    <div
-      class="Calculation none octo-table-cell"
+      class="Calculation none octo-table-cell  "
       style="width: 100px;"
       tabindex="0"
     >
diff --git a/webapp/src/components/table/calculation/calculationRow.tsx b/webapp/src/components/table/calculation/calculationRow.tsx
index 2dff7d997..29edaad26 100644
--- a/webapp/src/components/table/calculation/calculationRow.tsx
+++ b/webapp/src/components/table/calculation/calculationRow.tsx
@@ -12,6 +12,7 @@ import Calculation from '../../calculations/calculation'
 import {columnWidth} from '../tableRow'
 import {BoardView} from '../../../blocks/boardView'
 import {Card} from '../../../blocks/card'
+import {Options} from '../../calculations/options'
 
 type Props = {
     board: Board
@@ -40,12 +41,20 @@ const CalculationRow = (props: Props): JSX.Element => {
 
     const selectedCalculations = props.board.fields.columnCalculations || []
 
+    const [hovered, setHovered] = useState(false)
+    const toggleHover = () => setHovered(!hovered)
+
     return (
-        <div className='CalculationRow octo-table-row'>
+        <div
+            className={'CalculationRow octo-table-row'}
+            onMouseEnter={toggleHover}
+            onMouseLeave={toggleHover}
+        >
             {
                 templates.map((template) => {
                     const style = {width: columnWidth(props.resizingColumn, props.activeView.fields.columnWidths, props.offset, template.id)}
-                    const value = selectedCalculations[template.id] || 'none'
+                    const defaultValue = template.id === Constants.titleColumnId ? Options.count.value : Options.none.value
+                    const value = selectedCalculations[template.id] || defaultValue
 
                     return (
                         <Calculation
@@ -62,9 +71,11 @@ const CalculationRow = (props: Props): JSX.Element => {
                                 const newBoard = createBoard(props.board)
                                 newBoard.fields.columnCalculations = calculations
                                 mutator.updateBlock(newBoard, props.board, 'update_calculation')
+                                toggleHover()
                             }}
                             cards={props.cards}
                             property={template}
+                            hovered={hovered}
                         />
                     )
                 })