From 3c0ef4085728d934bc2d4e04fb15bc9b81ecd16d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Lef=C3=A8vre=20=28lul=29?= <lul@odoo.com>
Date: Tue, 8 Oct 2024 17:11:34 +0200
Subject: [PATCH] [IMP] pivot: allow to open side panel in readonly mode

In read-only mode, you can't open the pivots/lists/charts side panels.
It's useful to know what you're looking at (range, domain, sorting, etc.),
even if you can't edit anything.

Task: 4187705
---
 .../pivot_dimension/pivot_dimension.xml       |   3 +-
 .../pivot_layout_configurator.xml             |  10 +-
 .../pivot_measure/pivot_measure.xml           |   1 +
 .../pivot_spreadsheet_side_panel.xml          |   4 +-
 .../pivot_title_section.xml                   |   5 +-
 src/helpers/pivot/pivot_menu_items.ts         |   1 +
 src/registries/menus/topbar_menu_registry.ts  |   1 +
 .../pivot_side_panel.test.ts.snap             | 159 ++++++++++++++++++
 tests/pivots/pivot_side_panel.test.ts         |   7 +
 9 files changed, 185 insertions(+), 6 deletions(-)
 create mode 100644 tests/pivots/__snapshots__/pivot_side_panel.test.ts.snap

diff --git a/src/components/side_panel/pivot/pivot_layout_configurator/pivot_dimension/pivot_dimension.xml b/src/components/side_panel/pivot/pivot_layout_configurator/pivot_dimension/pivot_dimension.xml
index 9d5c33a91f..d3fe20f8b5 100644
--- a/src/components/side_panel/pivot/pivot_layout_configurator/pivot_dimension/pivot_dimension.xml
+++ b/src/components/side_panel/pivot/pivot_layout_configurator/pivot_dimension/pivot_dimension.xml
@@ -1,5 +1,6 @@
 <templates>
   <t t-name="o-spreadsheet-PivotDimension">
+    <t t-set="isReadonly" t-value="env.model.getters.isReadonly()"/>
     <div
       class="py-1 px-2 d-flex flex-column shadow-sm pivot-dimension"
       t-att-class="{'pivot-dimension-invalid': !props.dimension.isValid}">
@@ -20,7 +21,7 @@
           <t t-slot="upper-right-icons"/>
           <i
             class="o-button-icon fa fa-trash pe-1 ps-2"
-            t-if="props.onRemoved"
+            t-if="props.onRemoved and !isReadonly"
             t-on-click="() => props.onRemoved(props.dimension)"
           />
         </div>
diff --git a/src/components/side_panel/pivot/pivot_layout_configurator/pivot_layout_configurator.xml b/src/components/side_panel/pivot/pivot_layout_configurator/pivot_layout_configurator.xml
index b1836d99b6..011691e155 100644
--- a/src/components/side_panel/pivot/pivot_layout_configurator/pivot_layout_configurator.xml
+++ b/src/components/side_panel/pivot/pivot_layout_configurator/pivot_layout_configurator.xml
@@ -1,10 +1,12 @@
 <templates>
   <t t-name="o-spreadsheet-PivotLayoutConfigurator">
-    <div class="pivot-dimensions o-section" t-ref="pivot-dimensions">
+    <t t-set="isReadonly" t-value="env.model.getters.isReadonly()"/>
+    <div class="pivot-dimensions o-section" t-ref="pivot-dimensions" t-att-class="{'pe-none': isReadonly}">
       <div
         class="o-fw-bold py-1 d-flex flex-row justify-content-between align-items-center o-section-title">
         Columns
         <AddDimensionButton
+          t-if="!isReadonly"
           onFieldPicked.bind="addColumnDimension"
           fields="props.unusedGroupableFields"
         />
@@ -31,6 +33,7 @@
         t-att-style="dragAndDrop.itemsStyle['__rows_title__']">
         Rows
         <AddDimensionButton
+          t-if="!isReadonly"
           onFieldPicked.bind="addRowDimension"
           fields="props.unusedGroupableFields"
         />
@@ -55,7 +58,10 @@
       <div
         class="o-fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center o-section-title o-pivot-measure">
         Measures
-        <AddDimensionButton onFieldPicked.bind="addMeasureDimension" fields="props.measureFields">
+        <AddDimensionButton
+          t-if="!isReadonly"
+          onFieldPicked.bind="addMeasureDimension"
+          fields="props.measureFields">
           <div
             t-on-click="addCalculatedMeasure"
             class="p-2 bg-white border-top d-flex align-items-center sticky-bottom add-calculated-measure">
diff --git a/src/components/side_panel/pivot/pivot_layout_configurator/pivot_measure/pivot_measure.xml b/src/components/side_panel/pivot/pivot_layout_configurator/pivot_measure/pivot_measure.xml
index 3576d3ca1e..777f141e86 100644
--- a/src/components/side_panel/pivot/pivot_layout_configurator/pivot_measure/pivot_measure.xml
+++ b/src/components/side_panel/pivot/pivot_layout_configurator/pivot_measure/pivot_measure.xml
@@ -12,6 +12,7 @@
           t-on-click="toggleMeasureVisibility"
         />
         <i
+          t-if="!env.model.getters.isReadonly()"
           class="o-button-icon pe-1 ps-2 fa fa-cog"
           title="Show values as"
           t-on-click="openShowValuesAs"
diff --git a/src/components/side_panel/pivot/pivot_side_panel/pivot_spreadsheet_side_panel/pivot_spreadsheet_side_panel.xml b/src/components/side_panel/pivot/pivot_side_panel/pivot_spreadsheet_side_panel/pivot_spreadsheet_side_panel.xml
index 38ddda5039..3b9d252901 100644
--- a/src/components/side_panel/pivot/pivot_side_panel/pivot_spreadsheet_side_panel/pivot_spreadsheet_side_panel.xml
+++ b/src/components/side_panel/pivot/pivot_side_panel/pivot_spreadsheet_side_panel/pivot_spreadsheet_side_panel.xml
@@ -1,9 +1,10 @@
 <templates>
   <t t-name="o-spreadsheet-PivotSpreadsheetSidePanel">
+    <t t-set="isReadonly" t-value="env.model.getters.isReadonly()"/>
     <div class="d-flex flex-column h-100 justify-content-between overflow-hidden">
       <div class="h-100 position-relative overflow-x-hidden overflow-y-auto">
         <PivotTitleSection pivotId="props.pivotId" flipAxis.bind="flipAxis"/>
-        <Section title.translate="Range">
+        <Section title.translate="Range" class="isReadonly ? 'pe-none' : ''">
           <SelectionInput
             ranges="ranges"
             required="true"
@@ -32,6 +33,7 @@
         />
       </div>
       <PivotDeferUpdate
+        t-if="!isReadonly"
         deferUpdate="store.updatesAreDeferred"
         toggleDeferUpdate="(value) => store.deferUpdates(value)"
         isDirty="store.isDirty"
diff --git a/src/components/side_panel/pivot/pivot_title_section/pivot_title_section.xml b/src/components/side_panel/pivot/pivot_title_section/pivot_title_section.xml
index fad7d23877..effd71792d 100644
--- a/src/components/side_panel/pivot/pivot_title_section/pivot_title_section.xml
+++ b/src/components/side_panel/pivot/pivot_title_section/pivot_title_section.xml
@@ -1,10 +1,11 @@
 <templates>
   <t t-name="o-spreadsheet-PivotTitleSection">
-    <Section>
+    <t t-set="isReadonly" t-value="env.model.getters.isReadonly()"/>
+    <Section class="isReadonly ? 'pe-none' : ''">
       <t t-set-slot="title">
         <div class="d-flex flex-row justify-content-between align-items-center">
           Name
-          <CogWheelMenu items="cogWheelMenuItems"/>
+          <CogWheelMenu t-if="!isReadonly" items="cogWheelMenuItems"/>
         </div>
       </t>
       <TextInput class="'os-pivot-title'" value="name" onChange.bind="onNameChanged"/>
diff --git a/src/helpers/pivot/pivot_menu_items.ts b/src/helpers/pivot/pivot_menu_items.ts
index d4e9f40bab..6825f00f63 100644
--- a/src/helpers/pivot/pivot_menu_items.ts
+++ b/src/helpers/pivot/pivot_menu_items.ts
@@ -14,6 +14,7 @@ export const pivotProperties: ActionSpec = {
     const pivotId = env.model.getters.getPivotIdFromPosition(position);
     return (pivotId && env.model.getters.isExistingPivot(pivotId)) || false;
   },
+  isReadonlyAllowed: true,
   icon: "o-spreadsheet-Icon.PIVOT",
 };
 
diff --git a/src/registries/menus/topbar_menu_registry.ts b/src/registries/menus/topbar_menu_registry.ts
index 2324d4cd1d..7010c86716 100644
--- a/src/registries/menus/topbar_menu_registry.ts
+++ b/src/registries/menus/topbar_menu_registry.ts
@@ -473,6 +473,7 @@ topbarMenuRegistry
         id: `item_pivot_${env.model.getters.getPivotFormulaId(pivotId)}`,
         name: env.model.getters.getPivotDisplayName(pivotId),
         sequence: sequence + index,
+        isReadonlyAllowed: true,
         execute: (env) => env.openSidePanel("PivotSidePanel", { pivotId }),
         onStartHover: (env) => env.getStore(HighlightStore).register(highlightProvider),
         onStopHover: (env) => env.getStore(HighlightStore).unRegister(highlightProvider),
diff --git a/tests/pivots/__snapshots__/pivot_side_panel.test.ts.snap b/tests/pivots/__snapshots__/pivot_side_panel.test.ts.snap
new file mode 100644
index 0000000000..20aefdc3fd
--- /dev/null
+++ b/tests/pivots/__snapshots__/pivot_side_panel.test.ts.snap
@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pivot side panel readonly panel snapshot 1`] = `
+<div
+  class="o-sidePanel"
+>
+  <div
+    class="o-sidePanelHeader"
+  >
+    <div
+      class="o-sidePanelTitle o-heading-3"
+    >
+      Pivot #2
+    </div>
+    <div
+      class="o-sidePanelClose"
+    >
+      ✕
+    </div>
+  </div>
+  <div
+    class="o-sidePanelBody-container d-flex flex-grow-1 "
+  >
+    <div
+      class="o-sidePanel-handle-container"
+    >
+      <div
+        class="o-sidePanel-handle"
+      >
+        <svg
+          class="o-icon"
+          fill="currentColor"
+          viewBox="0 0 4 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="2"
+            cy="3.5"
+            r="1"
+          />
+          <circle
+            cx="2"
+            cy="6.5"
+            r="1"
+          />
+          <circle
+            cx="2"
+            cy="9.5"
+            r="1"
+          />
+          <circle
+            cx="2"
+            cy="12.5"
+            r="1"
+          />
+        </svg>
+      </div>
+    </div>
+    <div
+      class="o-sidePanelBody"
+    >
+      <div
+        class="d-flex flex-column h-100 justify-content-between overflow-hidden"
+      >
+        <div
+          class="h-100 position-relative overflow-x-hidden overflow-y-auto"
+        >
+          <div
+            class="o-section pe-none"
+          >
+            <div
+              class="o-section-title"
+            >
+              <div
+                class="d-flex flex-row justify-content-between align-items-center"
+              >
+                 Name 
+                
+              </div>
+            </div>
+            
+            <div
+              class="w-100"
+            >
+              <input
+                class="os-input w-100 os-pivot-title"
+                type="text"
+              />
+            </div>
+            
+          </div>
+          
+          <div
+            class="o-section pe-none"
+          >
+            <div
+              class="o-section-title"
+            >
+              Range
+            </div>
+            
+            <div
+              class="o-selection"
+            >
+              <div
+                class="o-selection-input d-flex flex-row"
+              >
+                <div
+                  class="position-relative w-100"
+                >
+                  <input
+                    class="o-input mb-2 o-invalid border-danger position-relative"
+                    placeholder="e.g. A1:A2"
+                    spellcheck="false"
+                    style=""
+                    type="text"
+                  />
+                  <span
+                    class="error-icon text-danger position-absolute d-flex align-items-center"
+                    title="This range is invalid"
+                  >
+                    <div
+                      class="o-icon"
+                    >
+                      <i
+                        class="fa fa-exclamation-circle"
+                      />
+                    </div>
+                  </span>
+                  
+                </div>
+                
+              </div>
+              
+              
+              <div
+                class="d-flex flex-row w-100 o-selection-input"
+              >
+                
+                
+              </div>
+            </div>
+            <span
+              class="text-danger sp_range_error_message"
+            >
+              The pivot cannot be created because cell A1 is empty
+            </span>
+            
+          </div>
+          
+          
+        </div>
+        
+      </div>
+    </div>
+    
+  </div>
+</div>
+`;
diff --git a/tests/pivots/pivot_side_panel.test.ts b/tests/pivots/pivot_side_panel.test.ts
index 4a0a76ec9f..8c230f5901 100644
--- a/tests/pivots/pivot_side_panel.test.ts
+++ b/tests/pivots/pivot_side_panel.test.ts
@@ -19,6 +19,13 @@ describe("Pivot side panel", () => {
     addPivot(model, "A1:D5", {}, "2");
   });
 
+  test("readonly panel snapshot", async () => {
+    model.updateMode("readonly");
+    env.openSidePanel("PivotSidePanel", { pivotId: "2" });
+    await nextTick();
+    expect(fixture.querySelector(".o-sidePanel")).toMatchSnapshot();
+  });
+
   test("It should open the pivot editor when pivotId is provided", async () => {
     env.openSidePanel("PivotSidePanel", { pivotId: "2" });
     await nextTick();