Made table calculations uneditable in readonly view (#1320)

* Made table calculations uneditable in readonly view

* Updated snapshots

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>

webapp/src/components/calculations/calculation.scss

@@ -5,6 +5,10 @@
     cursor: pointer;
     transition: opacity 0.1s ease-in;
 
+    &.disabled {
+        cursor: unset;
+    }
+
     &.none {
         opacity: 0;
 

webapp/src/components/table/__snapshots__/table.test.tsx.snap

@@ -325,7 +325,7 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
         class="CalculationRow octo-table-row"
       >
         <div
-          class="Calculation count octo-table-cell  "
+          class="Calculation count octo-table-cell   "
           style="width: 100px;"
           tabindex="0"
         >
@@ -341,7 +341,7 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
           </span>
         </div>
         <div
-          class="Calculation none octo-table-cell  "
+          class="Calculation none octo-table-cell   "
           style="width: 100px;"
           tabindex="0"
         >
@@ -355,7 +355,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"
         >
@@ -369,7 +369,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"
         >
@@ -713,7 +713,7 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
         class="CalculationRow octo-table-row"
       >
         <div
-          class="Calculation count octo-table-cell  "
+          class="Calculation count octo-table-cell   "
           style="width: 100px;"
           tabindex="0"
         >
@@ -729,7 +729,7 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
           </span>
         </div>
         <div
-          class="Calculation none octo-table-cell  "
+          class="Calculation none octo-table-cell   "
           style="width: 100px;"
           tabindex="0"
         >
@@ -743,7 +743,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"
         >
@@ -757,7 +757,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"
         >
@@ -1101,7 +1101,7 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
         class="CalculationRow octo-table-row"
       >
         <div
-          class="Calculation count octo-table-cell  "
+          class="Calculation count octo-table-cell   "
           style="width: 100px;"
           tabindex="0"
         >
@@ -1117,7 +1117,7 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
           </span>
         </div>
         <div
-          class="Calculation none octo-table-cell  "
+          class="Calculation none octo-table-cell   "
           style="width: 100px;"
           tabindex="0"
         >
@@ -1131,7 +1131,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"
         >
@@ -1145,7 +1145,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"
         >
@@ -1489,7 +1489,7 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
         class="CalculationRow octo-table-row"
       >
         <div
-          class="Calculation count octo-table-cell  "
+          class="Calculation count octo-table-cell   "
           style="width: 100px;"
           tabindex="0"
         >
@@ -1505,7 +1505,7 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
           </span>
         </div>
         <div
-          class="Calculation none octo-table-cell  "
+          class="Calculation none octo-table-cell   "
           style="width: 100px;"
           tabindex="0"
         >
@@ -1519,7 +1519,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"
         >
@@ -1533,7 +1533,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"
         >
@@ -1755,7 +1755,7 @@ exports[`components/table/Table should match snapshot 1`] = `
         class="CalculationRow octo-table-row"
       >
         <div
-          class="Calculation count octo-table-cell  "
+          class="Calculation count octo-table-cell   "
           style="width: 100px;"
           tabindex="0"
         >
@@ -1771,7 +1771,7 @@ exports[`components/table/Table should match snapshot 1`] = `
           </span>
         </div>
         <div
-          class="Calculation none octo-table-cell  "
+          class="Calculation none octo-table-cell   "
           style="width: 100px;"
           tabindex="0"
         >
@@ -1785,7 +1785,7 @@ exports[`components/table/Table should match snapshot 1`] = `
           />
         </div>
         <div
-          class="Calculation none octo-table-cell  "
+          class="Calculation none octo-table-cell   "
           style="width: 100px;"
           tabindex="0"
         >
@@ -1989,7 +1989,7 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
         class="CalculationRow octo-table-row"
       >
         <div
-          class="Calculation count octo-table-cell  "
+          class="Calculation count octo-table-cell   "
           style="width: 100px;"
           tabindex="0"
         >
@@ -2005,7 +2005,7 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
           </span>
         </div>
         <div
-          class="Calculation none octo-table-cell  "
+          class="Calculation none octo-table-cell   "
           style="width: 100px;"
           tabindex="0"
         >
@@ -2019,7 +2019,7 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
           />
         </div>
         <div
-          class="Calculation none octo-table-cell  "
+          class="Calculation none octo-table-cell   "
           style="width: 100px;"
           tabindex="0"
         >
@@ -2224,7 +2224,7 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
         class="CalculationRow octo-table-row"
       >
         <div
-          class="Calculation count octo-table-cell  "
+          class="Calculation count octo-table-cell disabled  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -2240,7 +2240,7 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
           </span>
         </div>
         <div
-          class="Calculation none octo-table-cell  "
+          class="Calculation none octo-table-cell disabled  "
           style="width: 100px;"
           tabindex="0"
         >
@@ -2254,7 +2254,7 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
           />
         </div>
         <div
-          class="Calculation none octo-table-cell  "
+          class="Calculation none octo-table-cell disabled  "
           style="width: 100px;"
           tabindex="0"
         >

webapp/src/components/table/calculation/__snapshots__/calculationRow.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`components/table/calculation/CalculationRow should match snapshot 1`] =
     class="CalculationRow octo-table-row"
   >
     <div
-      class="Calculation count octo-table-cell  "
+      class="Calculation count octo-table-cell   "
       style="width: 100px;"
       tabindex="0"
     >
@@ -22,7 +22,7 @@ exports[`components/table/calculation/CalculationRow should match snapshot 1`] =
       </span>
     </div>
     <div
-      class="Calculation count octo-table-cell  "
+      class="Calculation count octo-table-cell   "
       style="width: 100px;"
       tabindex="0"
     >
@@ -38,7 +38,7 @@ exports[`components/table/calculation/CalculationRow should match snapshot 1`] =
       </span>
     </div>
     <div
-      class="Calculation countValue octo-table-cell  "
+      class="Calculation countValue octo-table-cell   "
       style="width: 100px;"
       tabindex="0"
     >
@@ -54,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"
     >
@@ -79,7 +79,7 @@ exports[`components/table/calculation/CalculationRow should render three calcula
     class="CalculationRow octo-table-row"
   >
     <div
-      class="Calculation count octo-table-cell  "
+      class="Calculation count octo-table-cell   "
       style="width: 100px;"
       tabindex="0"
     >
@@ -95,7 +95,7 @@ exports[`components/table/calculation/CalculationRow should render three calcula
       </span>
     </div>
     <div
-      class="Calculation none octo-table-cell  "
+      class="Calculation none octo-table-cell   "
       style="width: 100px;"
       tabindex="0"
     >
@@ -109,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"
     >
@@ -123,7 +123,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"
     >

webapp/src/components/table/calculation/calculationRow.test.tsx

@@ -73,6 +73,7 @@ describe('components/table/calculation/CalculationRow', () => {
                 activeView={view}
                 resizingColumn={''}
                 offset={0}
+                readonly={false}
             />,
         )
 
@@ -94,6 +95,7 @@ describe('components/table/calculation/CalculationRow', () => {
                 activeView={view}
                 resizingColumn={''}
                 offset={0}
+                readonly={false}
             />,
         )
 

webapp/src/components/table/calculation/calculationRow.tsx

@@ -20,6 +20,7 @@ type Props = {
     activeView: BoardView
     resizingColumn: string
     offset: number
+    readonly: boolean
 }
 
 const CalculationRow = (props: Props): JSX.Element => {
@@ -46,7 +47,7 @@ const CalculationRow = (props: Props): JSX.Element => {
     return (
         <div
             className={'CalculationRow octo-table-row'}
-            onMouseEnter={() => setHovered(true)}
+            onMouseEnter={() => setHovered(!props.readonly)}
             onMouseLeave={() => setHovered(false)}
         >
             {
@@ -59,9 +60,9 @@ const CalculationRow = (props: Props): JSX.Element => {
                         <Calculation
                             key={template.id}
                             style={style}
-                            class='octo-table-cell'
+                            class={`octo-table-cell ${props.readonly ? 'disabled' : ''}`}
                             value={value}
-                            menuOpen={Boolean(showOptions.get(template.id))}
+                            menuOpen={Boolean(props.readonly ? false : showOptions.get(template.id))}
                             onMenuClose={() => toggleOptions(template.id, false)}
                             onMenuOpen={() => toggleOptions(template.id, true)}
                             onChange={(v: string) => {

webapp/src/components/table/table.tsx

@@ -397,6 +397,7 @@ const Table = (props: Props): JSX.Element => {
                     activeView={activeView}
                     resizingColumn={resizingColumn}
                     offset={offset}
+                    readonly={props.readonly}
                 />
             </div>
         </div>