From 680c918b03cc686596ca742adf144fb36a5f4275 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 13 Dec 2024 16:25:25 +0100
Subject: [PATCH] ui: hide addevent in heatmaps

---
 .../components/FilterSeries/FilterSeries.tsx  |  3 ++
 .../components/WidgetForm/WidgetFormNew.tsx   | 14 ++---
 .../shared/Filters/FilterList/FilterList.tsx  | 52 ++++++++++++++-----
 3 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
index a5ad36c3e..5d9eebc8d 100644
--- a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
+++ b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
@@ -111,6 +111,7 @@ interface Props {
   excludeFilterKeys?: Array<string>;
   canExclude?: boolean;
   expandable?: boolean;
+  isHeatmap?: boolean;
 }
 
 function FilterSeries(props: Props) {
@@ -123,6 +124,7 @@ function FilterSeries(props: Props) {
     excludeFilterKeys = [],
     canExclude = false,
     expandable = false,
+    isHeatmap,
   } = props;
   const [expanded, setExpanded] = useState(hideHeader || !expandable);
   const { series, seriesIndex } = props;
@@ -215,6 +217,7 @@ function FilterSeries(props: Props) {
           onAddFilter={onAddFilter}
           mergeUp={!hideHeader}
           mergeDown
+          cannotAdd={isHeatmap}
         />
         <FilterList
           filter={series.filter}
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
index edf218709..d2fd50393 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
@@ -24,9 +24,9 @@ function WidgetFormNew() {
   const { metricStore } = useStore();
   const metric: any = metricStore.instance;
 
-  const isClickMap = metric.metricType === HEATMAP;
+  const isHeatMap = metric.metricType === HEATMAP;
   const isPathAnalysis = metric.metricType === USER_PATH;
-  const excludeFilterKeys = isClickMap || isPathAnalysis ? eventKeys : [];
+  const excludeFilterKeys = isHeatMap || isPathAnalysis ? eventKeys : [];
   const isPredefined = metric.metricType === ERRORS
 
   return isPredefined ? <PredefinedMessage /> : (
@@ -41,15 +41,14 @@ export default observer(WidgetFormNew);
 
 const FilterSection = observer(({ metric, excludeFilterKeys }: any) => {
   const isTable = metric.metricType === TABLE;
-  const isClickMap = metric.metricType === HEATMAP;
+  const isHeatMap = metric.metricType === HEATMAP;
   const isFunnel = metric.metricType === FUNNEL;
   const isInsights = metric.metricType === INSIGHTS;
   const isPathAnalysis = metric.metricType === USER_PATH;
   const isRetention = metric.metricType === RETENTION;
   const canAddSeries = metric.series.length < 3;
 
-  const isSingleSeries = isTable || isFunnel || isClickMap || isInsights || isRetention;
-
+  const isSingleSeries = isTable || isFunnel || isHeatMap || isInsights || isRetention;
   return (
     <>
       {metric.series.length > 0 &&
@@ -58,13 +57,14 @@ const FilterSection = observer(({ metric, excludeFilterKeys }: any) => {
           .map((series: any, index: number) => (
             <div className="mb-2 rounded-xl border border-gray-lighter" key={series.name}>
               <FilterSeries
+                isHeatmap={isHeatMap}
                 canExclude={isPathAnalysis}
-                supportsEmpty={!isClickMap && !isPathAnalysis}
+                supportsEmpty={!isHeatMap && !isPathAnalysis}
                 excludeFilterKeys={excludeFilterKeys}
                 observeChanges={() => metric.updateKey('hasChanged', true)}
                 hideHeader={
                   isTable ||
-                  isClickMap ||
+                  isHeatMap ||
                   isInsights ||
                   isPathAnalysis ||
                   isFunnel
diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
index 16f634a6e..119f6e641 100644
--- a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
+++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
@@ -25,6 +25,7 @@ interface Props {
   mergeDown?: boolean;
   mergeUp?: boolean;
   borderless?: boolean;
+  cannotAdd?: boolean;
 }
 
 export const FilterList = observer((props: Props) => {
@@ -35,7 +36,7 @@ export const FilterList = observer((props: Props) => {
     isConditional,
     onAddFilter,
     readonly,
-    borderless
+    borderless,
   } = props;
 
   const filters = filter.filters;
@@ -46,7 +47,10 @@ export const FilterList = observer((props: Props) => {
   };
   return (
     <div
-      className={cn('bg-white', borderless ? '' : 'py-2 px-4 rounded-xl  border border-gray-lighter')}
+      className={cn(
+        'bg-white',
+        borderless ? '' : 'py-2 px-4 rounded-xl  border border-gray-lighter'
+      )}
       style={{
         borderBottomLeftRadius: props.mergeDown ? 0 : undefined,
         borderBottomRightRadius: props.mergeDown ? 0 : undefined,
@@ -56,8 +60,17 @@ export const FilterList = observer((props: Props) => {
     >
       <div className={'flex items-center mb-2'} style={{ gap: '0.65rem' }}>
         <div className="font-medium">Filters</div>
-        <FilterSelection mode={'filters'} filter={undefined} onFilterClick={onAddFilter} disabled={readonly}>
-          <Button icon={<Filter size={16} strokeWidth={1} />} type="default" size={'small'}>
+        <FilterSelection
+          mode={'filters'}
+          filter={undefined}
+          onFilterClick={onAddFilter}
+          disabled={readonly}
+        >
+          <Button
+            icon={<Filter size={16} strokeWidth={1} />}
+            type="default"
+            size={'small'}
+          >
             Add
           </Button>
         </FilterSelection>
@@ -101,6 +114,7 @@ export const EventsList = observer((props: Props) => {
     isConditional,
     actions = [],
     onAddFilter,
+    cannotAdd,
   } = props;
 
   const filters = filter.filters;
@@ -177,7 +191,9 @@ export const EventsList = observer((props: Props) => {
   const eventsNum = filters.filter((i: any) => i.isEvent).length;
   return (
     <div
-      className={'border-b border-b-gray-lighter py-2 px-4 rounded-xl bg-white border border-gray-lighter'}
+      className={
+        'border-b border-b-gray-lighter py-2 px-4 rounded-xl bg-white border border-gray-lighter'
+      }
       style={{
         borderBottomLeftRadius: props.mergeDown ? 0 : undefined,
         borderBottomRightRadius: props.mergeDown ? 0 : undefined,
@@ -188,11 +204,21 @@ export const EventsList = observer((props: Props) => {
     >
       <div className="flex items-center mb-2 gap-2">
         <div className="font-medium">Events</div>
-        <FilterSelection mode={'events'} filter={undefined} onFilterClick={onAddFilter}>
-          <Button icon={<Plus size={16} strokeWidth={1} />} type="default" size={'small'}>
-            Add
-          </Button>
-        </FilterSelection>
+        {cannotAdd ? null : (
+          <FilterSelection
+            mode={'events'}
+            filter={undefined}
+            onFilterClick={onAddFilter}
+          >
+            <Button
+              icon={<Plus size={16} strokeWidth={1} />}
+              type="default"
+              size={'small'}
+            >
+              Add
+            </Button>
+          </FilterSelection>
+        )}
 
         <div className={'ml-auto'}>
           {!hideEventsOrder && (
@@ -221,8 +247,6 @@ export const EventsList = observer((props: Props) => {
                 marginLeft: '-1.25rem',
                 width: 'calc(100% + 2.5rem)',
                 alignItems: 'start',
-                
-                
               }}
               className={'hover:bg-active-blue px-5 gap-2 items-center flex'}
               id={`${filter.key}-${filterIndex}`}
@@ -232,7 +256,9 @@ export const EventsList = observer((props: Props) => {
             >
               {!!props.onFilterMove && eventsNum > 1 ? (
                 <div
-                  className={'p-2 cursor-grab text-neutral-500/90 hover:bg-gray-lighter	px-1 pt-2 rounded-lg'}
+                  className={
+                    'p-2 cursor-grab text-neutral-500/90 hover:bg-gray-lighter	px-1 pt-2 rounded-lg'
+                  }
                   draggable={!!props.onFilterMove}
                   onDragStart={(e) =>
                     handleDragStart(