feat(explore): Limit explore visualizes to 8 (#103826)

There was not guard in the aggregates column editor.

Author: Zylphrex

static/app/views/explore/contexts/pageParamsContext/visualizes.tsx

@@ -15,8 +15,6 @@ import {
 import {ChartType} from 'sentry/views/insights/common/components/chart';
 import {SpanFields} from 'sentry/views/insights/types';
 
-export const MAX_VISUALIZES = 8;
-
 export const DEFAULT_VISUALIZATION_AGGREGATE = ALLOWED_EXPLORE_VISUALIZE_AGGREGATES[0]!;
 export const DEFAULT_VISUALIZATION_FIELD = ALLOWED_EXPLORE_VISUALIZE_FIELDS[0]!;
 export const DEFAULT_VISUALIZATION = `${DEFAULT_VISUALIZATION_AGGREGATE}(${DEFAULT_VISUALIZATION_FIELD})`;

static/app/views/explore/tables/aggregateColumnEditorModal.tsx

@@ -53,6 +53,7 @@ import type {
 } from 'sentry/views/explore/queryParams/aggregateField';
 import {
   isVisualizeEquation,
+  MAX_VISUALIZES,
   Visualize,
   VisualizeEquation,
   VisualizeFunction,
@@ -101,8 +102,12 @@ export function AggregateColumnEditorModal({
     closeModal();
   }, [closeModal, onColumnsChange, tempColumns]);
 
-  const canDeleteGroupBy = tempColumns.filter(isGroupBy).length > 1;
-  const canDeleteVisualize = tempColumns.filter(isVisualize).length > 1;
+  const groupByColumnss = tempColumns.filter(isGroupBy);
+  const visualizeColumns = tempColumns.filter(isVisualize);
+
+  const canDeleteGroupBy = groupByColumnss.length > 1;
+  const canDeleteVisualize = visualizeColumns.length > 1;
+  const canAddVisualize = visualizeColumns.length < MAX_VISUALIZES;
 
   return (
     <DragNDropContext columns={tempColumns} setColumns={setTempColumns}>
@@ -143,6 +148,7 @@ export function AggregateColumnEditorModal({
                     key: 'add-visualize',
                     label: t('Visualize / Function'),
                     details: t('ex. p50(span.duration)'),
+                    disabled: !canAddVisualize,
                     onAction: () =>
                       insertColumn(new VisualizeFunction(DEFAULT_VISUALIZATION)),
                   },
@@ -152,6 +158,7 @@ export function AggregateColumnEditorModal({
                           key: 'add-equation',
                           label: t('Equation'),
                           details: t('ex. p50(span.duration) / 2'),
+                          disabled: !canAddVisualize,
                           onAction: () =>
                             insertColumn(new VisualizeEquation(EQUATION_PREFIX)),
                         },

static/app/views/explore/toolbar/toolbarVisualize.tsx

@@ -21,14 +21,14 @@ import {VisualizeEquation as VisualizeEquationInput} from 'sentry/views/explore/
 import type {BaseVisualize} from 'sentry/views/explore/contexts/pageParamsContext/visualizes';
 import {
   DEFAULT_VISUALIZATION,
-  MAX_VISUALIZES,
   updateVisualizeAggregate,
 } from 'sentry/views/explore/contexts/pageParamsContext/visualizes';
 import {useTraceItemTags} from 'sentry/views/explore/contexts/spanTagsContext';
 import {useVisualizeFields} from 'sentry/views/explore/hooks/useVisualizeFields';
 import {
   isVisualizeEquation,
   isVisualizeFunction,
+  MAX_VISUALIZES,
   Visualize,
   VisualizeEquation,
   VisualizeFunction,