feat(widget-builder): Do not trigger URL updates for every keystroke (#98903)

This is one of a series of improvements I'm trying to make to the widget
builder state management. The goal of this PR is to prevent keystrokes
in fields such as the title, description, or the alias input fields from
immediately trigging a re-render as a result from updating the URL
params. Those changes should only be pushed to the URL during the
`onBlur` when a user clicks out of a field.

Author: narsaynorath

static/app/utils/url/useQueryParamState.tsx

@@ -32,6 +32,10 @@ type UseQueryParamStateProps<T> =
   | UseQueryParamStateWithListDecoder<T>
   | UseQueryParamStateWithSortsDecoder<T>;
 
+type UseQueryParamStateOptions = {
+  updateUrl?: boolean;
+};
+
 /**
  * Hook to manage a state that is synced with a query param in the URL
  *
@@ -44,7 +48,10 @@ export function useQueryParamState<T = string>({
   decoder,
   deserializer,
   serializer,
-}: UseQueryParamStateProps<T>): [T | undefined, (newField: T | undefined) => void] {
+}: UseQueryParamStateProps<T>): [
+  T | undefined,
+  (newField: T | undefined, options?: UseQueryParamStateOptions) => void,
+] {
   const {batchUrlParamUpdates} = useUrlBatchContext();
 
   // The URL query params give us our initial state
@@ -69,9 +76,13 @@ export function useQueryParamState<T = string>({
   });
 
   const updateField = useCallback(
-    (newField: T | undefined) => {
+    (newField: T | undefined, options: UseQueryParamStateOptions = {updateUrl: true}) => {
       setLocalState(newField);
 
+      if (!options?.updateUrl) {
+        return;
+      }
+
       if (!defined(newField)) {
         batchUrlParamUpdates({[fieldName]: undefined});
       } else if (serializer) {

static/app/views/dashboards/widgetBuilder/components/nameAndDescFields.spec.tsx

@@ -43,6 +43,9 @@ describe('WidgetBuilder', () => {
     );
 
     await userEvent.type(await screen.findByPlaceholderText('Name'), 'some name');
+
+    // trigger blur
+    await userEvent.tab();
     expect(mockNavigate).toHaveBeenLastCalledWith(
       expect.objectContaining({
         ...router.location,
@@ -57,6 +60,9 @@ describe('WidgetBuilder', () => {
       await screen.findByPlaceholderText('Description'),
       'some description'
     );
+
+    // trigger blur
+    await userEvent.tab();
     expect(mockNavigate).toHaveBeenLastCalledWith(
       expect.objectContaining({
         ...router.location,

static/app/views/dashboards/widgetBuilder/components/nameAndDescFields.tsx

@@ -46,10 +46,19 @@ function WidgetBuilderNameAndDescription({
         value={state.title}
         onChange={(newTitle: any) => {
           // clear error once user starts typing
-          setError?.({...error, title: undefined});
-          dispatch({type: BuilderStateAction.SET_TITLE, payload: newTitle});
+          if (error?.title) {
+            setError?.({...error, title: undefined});
+          }
+          dispatch(
+            {type: BuilderStateAction.SET_TITLE, payload: newTitle},
+            {updateUrl: false}
+          );
         }}
-        onBlur={() => {
+        onBlur={value => {
+          dispatch(
+            {type: BuilderStateAction.SET_TITLE, payload: value},
+            {updateUrl: true}
+          );
           trackAnalytics('dashboards_views.widget_builder.change', {
             from: source,
             widget_type: state.dataset ?? '',
@@ -85,9 +94,19 @@ function WidgetBuilderNameAndDescription({
           rows={4}
           value={state.description}
           onChange={e => {
-            dispatch({type: BuilderStateAction.SET_DESCRIPTION, payload: e.target.value});
+            dispatch(
+              {type: BuilderStateAction.SET_DESCRIPTION, payload: e.target.value},
+              {updateUrl: false}
+            );
           }}
-          onBlur={() => {
+          onBlur={e => {
+            dispatch(
+              {
+                type: BuilderStateAction.SET_DESCRIPTION,
+                payload: e.target.value,
+              },
+              {updateUrl: true}
+            );
             trackAnalytics('dashboards_views.widget_builder.change', {
               from: source,
               widget_type: state.dataset ?? '',

static/app/views/dashboards/widgetBuilder/components/queryFilterBuilder.tsx

@@ -203,18 +203,34 @@ function WidgetBuilderQueryFilterBuilder({
           {canHaveAlias && (
             <LegendAliasInput
               type="text"
-              name="name"
+              name="alias"
               placeholder={t('Legend Alias')}
               value={state.legendAlias?.[index] || ''}
               onChange={e => {
-                dispatch({
-                  type: BuilderStateAction.SET_LEGEND_ALIAS,
-                  payload: state.legendAlias?.length
-                    ? state.legendAlias?.map((q, i) => (i === index ? e.target.value : q))
-                    : [e.target.value],
-                });
+                dispatch(
+                  {
+                    type: BuilderStateAction.SET_LEGEND_ALIAS,
+                    payload: state.legendAlias?.length
+                      ? state.legendAlias?.map((q, i) =>
+                          i === index ? e.target.value : q
+                        )
+                      : [e.target.value],
+                  },
+                  {updateUrl: false}
+                );
               }}
-              onBlur={() => {
+              onBlur={e => {
+                dispatch(
+                  {
+                    type: BuilderStateAction.SET_LEGEND_ALIAS,
+                    payload: state.legendAlias?.length
+                      ? state.legendAlias?.map((q, i) =>
+                          i === index ? e.target.value : q
+                        )
+                      : [e.target.value],
+                  },
+                  {updateUrl: true}
+                );
                 trackAnalytics('dashboards_views.widget_builder.change', {
                   builder_version: WidgetBuilderVersion.SLIDEOUT,
                   field: 'filter.alias',

static/app/views/dashboards/widgetBuilder/components/visualize/index.tsx

@@ -700,17 +700,25 @@ function Visualize({error, setError}: VisualizeProps) {
                         <FieldExtras isChartWidget={isChartWidget || isBigNumberWidget}>
                           {!isChartWidget && !isBigNumberWidget && (
                             <LegendAliasInput
-                              type="text"
-                              name="name"
+                              name="alias"
                               placeholder={t('Add Alias')}
                               value={field.alias ?? ''}
                               disabled={disableTransactionWidget}
                               onChange={e => {
                                 const newFields = cloneDeep(fields);
                                 newFields[index]!.alias = e.target.value;
-                                dispatch({type: updateAction, payload: newFields});
+                                dispatch(
+                                  {type: updateAction, payload: newFields},
+                                  {updateUrl: false}
+                                );
                               }}
-                              onBlur={() => {
+                              onBlur={e => {
+                                const newFields = cloneDeep(fields);
+                                newFields[index]!.alias = e.target.value;
+                                dispatch(
+                                  {type: updateAction, payload: newFields},
+                                  {updateUrl: true}
+                                );
                                 trackAnalytics('dashboards_views.widget_builder.change', {
                                   builder_version: WidgetBuilderVersion.SLIDEOUT,
                                   field: 'visualize.legendAlias',

static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.spec.tsx

@@ -84,6 +84,24 @@ describe('useWidgetBuilderState', () => {
     );
   });
 
+  it('does not update the url when the updateUrl option is false', () => {
+    const {result} = renderHook(() => useWidgetBuilderState(), {
+      wrapper: WidgetBuilderProvider,
+    });
+
+    act(() => {
+      result.current.dispatch(
+        {
+          type: BuilderStateAction.SET_TITLE,
+          payload: 'new title',
+        },
+        {updateUrl: false}
+      );
+    });
+
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
   describe('display type', () => {
     it('returns the display type from the query params', () => {
       mockedUsedLocation.mockReturnValue(