From 1db1d17f49c75e40012539bc24c269f02f4392a8 Mon Sep 17 00:00:00 2001
From: Nikki Kapadia <72356613+nikkikapadia@users.noreply.github.com>
Date: Wed, 11 Dec 2024 10:35:18 -0500
Subject: [PATCH] feat(widget-builder): Add limit field to widget builder hook
 (#81944)

Added the limit field to widget builder hook and made test. I put it as
a number and use a deserializer to go from query param string to number.
Let me know if there was a different way you were thinking of doing it.
---
 .../hooks/useWidgetBuilderState.spec.tsx      | 27 +++++++++++++++
 .../hooks/useWidgetBuilderState.tsx           | 34 ++++++++++++++++---
 2 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.spec.tsx b/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.spec.tsx
index cbc5f6babc085f..bae91b456810f3 100644
--- a/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.spec.tsx
+++ b/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.spec.tsx
@@ -266,4 +266,31 @@ describe('useWidgetBuilderState', () => {
       expect(result.current.state.sort).toEqual([{field: 'testField', kind: 'asc'}]);
     });
   });
+
+  describe('limit', () => {
+    it('can decode and update limit', () => {
+      mockedUsedLocation.mockReturnValue(
+        LocationFixture({
+          query: {
+            limit: '4',
+          },
+        })
+      );
+
+      const {result} = renderHook(() => useWidgetBuilderState(), {
+        wrapper: WidgetBuilderProvider,
+      });
+
+      expect(result.current.state.limit).toEqual(4);
+
+      act(() => {
+        result.current.dispatch({
+          type: BuilderStateAction.SET_LIMIT,
+          payload: 10,
+        });
+      });
+
+      expect(result.current.state.limit).toEqual(10);
+    });
+  });
 });
diff --git a/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx b/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx
index a0aa5412c524a3..4926dd86dd61a0 100644
--- a/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx
+++ b/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx
@@ -6,9 +6,15 @@ import {
   generateFieldAsString,
   type Sort,
 } from 'sentry/utils/discover/fields';
-import {decodeList, decodeSorts} from 'sentry/utils/queryString';
+import {
+  decodeInteger,
+  decodeList,
+  decodeScalar,
+  decodeSorts,
+} from 'sentry/utils/queryString';
 import {DisplayType, WidgetType} from 'sentry/views/dashboards/types';
 import {useQueryParamState} from 'sentry/views/dashboards/widgetBuilder/hooks/useQueryParamState';
+import {DEFAULT_RESULTS_LIMIT} from 'sentry/views/dashboards/widgetBuilder/utils';
 
 export type WidgetBuilderStateQueryParams = {
   dataset?: WidgetType;
@@ -30,6 +36,7 @@ export const BuilderStateAction = {
   SET_Y_AXIS: 'SET_Y_AXIS',
   SET_QUERY: 'SET_QUERY',
   SET_SORT: 'SET_SORT',
+  SET_LIMIT: 'SET_LIMIT',
 } as const;
 
 type WidgetAction =
@@ -40,13 +47,15 @@ type WidgetAction =
   | {payload: Column[]; type: typeof BuilderStateAction.SET_FIELDS}
   | {payload: Column[]; type: typeof BuilderStateAction.SET_Y_AXIS}
   | {payload: string[]; type: typeof BuilderStateAction.SET_QUERY}
-  | {payload: Sort[]; type: typeof BuilderStateAction.SET_SORT};
+  | {payload: Sort[]; type: typeof BuilderStateAction.SET_SORT}
+  | {payload: number; type: typeof BuilderStateAction.SET_LIMIT};
 
 export interface WidgetBuilderState {
   dataset?: WidgetType;
   description?: string;
   displayType?: DisplayType;
   fields?: Column[];
+  limit?: number;
   query?: string[];
   sort?: Sort[];
   title?: string;
@@ -90,10 +99,15 @@ function useWidgetBuilderState(): {
     decoder: decodeSorts,
     serializer: serializeSorts,
   });
+  const [limit, setLimit] = useQueryParamState<number>({
+    fieldName: 'limit',
+    decoder: decodeScalar,
+    deserializer: deserializeLimit,
+  });
 
   const state = useMemo(
-    () => ({title, description, displayType, dataset, fields, yAxis, query, sort}),
-    [title, description, displayType, dataset, fields, yAxis, query, sort]
+    () => ({title, description, displayType, dataset, fields, yAxis, query, sort, limit}),
+    [title, description, displayType, dataset, fields, yAxis, query, sort, limit]
   );
 
   const dispatch = useCallback(
@@ -126,6 +140,9 @@ function useWidgetBuilderState(): {
         case BuilderStateAction.SET_SORT:
           setSort(action.payload);
           break;
+        case BuilderStateAction.SET_LIMIT:
+          setLimit(action.payload);
+          break;
         default:
           break;
       }
@@ -139,6 +156,7 @@ function useWidgetBuilderState(): {
       setYAxis,
       setQuery,
       setSort,
+      setLimit,
     ]
   );
 
@@ -193,4 +211,12 @@ function serializeSorts(sorts: Sort[]): string[] {
   });
 }
 
+/**
+ * Decodes the limit from the query params
+ * Returns the default limit if the value is not a valid limit
+ */
+function deserializeLimit(value: string): number {
+  return decodeInteger(value, DEFAULT_RESULTS_LIMIT);
+}
+
 export default useWidgetBuilderState;