feat(widget-builder): Validate widget before saving

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

@@ -1,7 +1,11 @@
 import {useCallback} from 'react';
 
+import {validateWidget} from 'sentry/actionCreators/dashboards';
+import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import {Button} from 'sentry/components/button';
 import {t} from 'sentry/locale';
+import useApi from 'sentry/utils/useApi';
+import useOrganization from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
 import type {Widget} from 'sentry/views/dashboards/types';
 import {useWidgetBuilderContext} from 'sentry/views/dashboards/widgetBuilder/contexts/widgetBuilderContext';
@@ -15,11 +19,18 @@ interface SaveButtonProps {
 function SaveButton({isEditing, onSave}: SaveButtonProps) {
   const {state} = useWidgetBuilderContext();
   const {widgetIndex} = useParams();
+  const api = useApi();
+  const organization = useOrganization();
 
-  const handleSave = useCallback(() => {
+  const handleSave = useCallback(async () => {
     const widget = convertBuilderStateToWidget(state);
-    onSave({index: Number(widgetIndex), widget});
-  }, [onSave, state, widgetIndex]);
+    try {
+      await validateWidget(api, organization.slug, widget);
+      onSave({index: Number(widgetIndex), widget});
+    } catch (error) {
+      addErrorMessage('Unable to save widget');
+    }
+  }, [api, onSave, organization.slug, state, widgetIndex]);
 
   return (
     <Button priority="primary" onClick={handleSave}>

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

@@ -11,6 +11,7 @@ import {
   waitFor,
 } from 'sentry-test/reactTestingLibrary';
 
+import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import ModalStore from 'sentry/stores/modalStore';
 import useCustomMeasurements from 'sentry/utils/useCustomMeasurements';
 import {DisplayType, WidgetType} from 'sentry/views/dashboards/types';
@@ -20,6 +21,7 @@ import {useSpanTags} from 'sentry/views/explore/contexts/spanTagsContext';
 
 jest.mock('sentry/utils/useCustomMeasurements');
 jest.mock('sentry/views/explore/contexts/spanTagsContext');
+jest.mock('sentry/actionCreators/indicator');
 
 describe('WidgetBuilderSlideout', () => {
   let organization!: ReturnType<typeof OrganizationFixture>;
@@ -35,6 +37,15 @@ describe('WidgetBuilderSlideout', () => {
     MockApiClient.addMockResponse({
       url: '/organizations/org-slug/recent-searches/',
     });
+
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/dashboards/widgets/',
+      method: 'POST',
+      body: {
+        title: 'Title is required during creation',
+      },
+      statusCode: 400,
+    });
   });
 
   afterEach(() => {
@@ -202,4 +213,43 @@ describe('WidgetBuilderSlideout', () => {
       ).not.toBeInTheDocument();
     });
   });
+
+  it('should not save and close the widget builder if the widget is invalid', async () => {
+    render(
+      <WidgetBuilderProvider>
+        <WidgetBuilderSlideout
+          dashboard={DashboardFixture([])}
+          dashboardFilters={{release: undefined}}
+          isWidgetInvalid
+          onClose={jest.fn()}
+          onQueryConditionChange={jest.fn()}
+          onSave={jest.fn()}
+          setIsPreviewDraggable={jest.fn()}
+          isOpen
+        />
+      </WidgetBuilderProvider>,
+      {
+        organization,
+        router: RouterFixture({
+          location: LocationFixture({
+            query: {
+              field: [],
+              yAxis: ['count()'],
+              dataset: WidgetType.TRANSACTIONS,
+              displayType: DisplayType.LINE,
+              title: undefined,
+            },
+          }),
+        }),
+      }
+    );
+
+    await userEvent.click(await screen.findByText('Add Widget'));
+
+    await waitFor(() => {
+      expect(addErrorMessage).toHaveBeenCalledWith('Unable to save widget');
+    });
+
+    expect(screen.getByText('Create Custom Widget')).toBeInTheDocument();
+  });
 });