[Lens] Metric non-clickable if not filterable (#154212)

## Summary Closes #153621 In case metric is not filterable the cursor should not indicate that it is. ![1](https://user-images.githubusercontent.com/17003240/229454467-32247bc7-e38f-4486-9dc1-833238c226b0.gif) ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
elastic · Apr 3, 2023 · 9bfd8b6 · 9bfd8b6
1 parent affc443
commit 9bfd8b6
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 23 deletions.
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx
@@ -1103,15 +1103,27 @@ describe('MetricVisComponent', function () {
     });
 
     it('should do nothing if primary metric is not filterable', () => {
-      const event: MetricElementEvent = {
-        type: 'metricElementEvent',
-        rowIndex: 1,
-        columnIndex: 0,
+      const props = {
+        ...defaultProps,
+        filterable: false,
       };
+      const metricComponent = shallow(
+        <MetricVis
+          config={{
+            metric: {
+              progressDirection: 'vertical',
+              maxCols: 5,
+            },
+            dimensions: {
+              metric: basePriceColumnId,
+            },
+          }}
+          data={table}
+          {...props}
+        />
+      );
 
-      fireFilter(event, false, true);
-
-      expect(fireEventSpy).not.toHaveBeenCalled();
+      expect(metricComponent.find(Settings).props().onElementClick).toBeUndefined();
     });
   });
 

diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx
@@ -362,22 +362,27 @@ export const MetricVis = ({
             ]}
             baseTheme={baseTheme}
             onRenderChange={onRenderChange}
-            onElementClick={(events) => {
-              if (!filterable) {
-                return;
-              }
-              events.forEach((event) => {
-                if (isMetricElementEvent(event)) {
-                  const colIdx = breakdownByColumn
-                    ? data.columns.findIndex((col) => col === breakdownByColumn)
-                    : data.columns.findIndex((col) => col === primaryMetricColumn);
-                  const rowLength = grid[0].length;
-                  fireEvent(
-                    buildFilterEvent(event.rowIndex * rowLength + event.columnIndex, colIdx, data)
-                  );
-                }
-              });
-            }}
+            onElementClick={
+              filterable
+                ? (events) => {
+                    events.forEach((event) => {
+                      if (isMetricElementEvent(event)) {
+                        const colIdx = breakdownByColumn
+                          ? data.columns.findIndex((col) => col === breakdownByColumn)
+                          : data.columns.findIndex((col) => col === primaryMetricColumn);
+                        const rowLength = grid[0].length;
+                        fireEvent(
+                          buildFilterEvent(
+                            event.rowIndex * rowLength + event.columnIndex,
+                            colIdx,
+                            data
+                          )
+                        );
+                      }
+                    });
+                  }
+                : undefined
+            }
           />
           <Metric id="metric" data={grid} />
         </Chart>