feat(widget-builder): Add error field in WidgetBuilderState (#82887)

Add an error field to the widget builder state. It is just a regular
state, not a queryParamState so it is not stored in the URL. This will
be used to keep track of the errors we get on validation so we can
highlight the correct fields to prompt users to change the input. This
PR is the baseline to set up that functionality.

Contributes to #81729

Author: nikkikapadia

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

@@ -33,7 +33,7 @@ describe('WidgetBuilder', () => {
 
     render(
       <WidgetBuilderProvider>
-        <WidgetBuilderNameAndDescription />
+        <WidgetBuilderNameAndDescription error={{}} />
       </WidgetBuilderProvider>,
       {
         router,

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

@@ -10,7 +10,11 @@ import {SectionHeader} from 'sentry/views/dashboards/widgetBuilder/components/co
 import {useWidgetBuilderContext} from 'sentry/views/dashboards/widgetBuilder/contexts/widgetBuilderContext';
 import {BuilderStateAction} from 'sentry/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState';
 
-function WidgetBuilderNameAndDescription() {
+interface WidgetBuilderNameAndDescriptionProps {
+  error: Record<string, any>;
+}
+
+function WidgetBuilderNameAndDescription({}: WidgetBuilderNameAndDescriptionProps) {
   const {state, dispatch} = useWidgetBuilderContext();
   const [isDescSelected, setIsDescSelected] = useState(state.description ? true : false);
 

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

@@ -33,7 +33,7 @@ describe('QueryFilterBuilder', () => {
   it('renders a dataset-specific query filter bar', async () => {
     render(
       <WidgetBuilderProvider>
-        <WidgetBuilderQueryFilterBuilder onQueryConditionChange={() => {}} />
+        <WidgetBuilderQueryFilterBuilder onQueryConditionChange={() => {}} error={{}} />
       </WidgetBuilderProvider>,
       {
         organization,
@@ -54,7 +54,7 @@ describe('QueryFilterBuilder', () => {
 
     render(
       <WidgetBuilderProvider>
-        <WidgetBuilderQueryFilterBuilder onQueryConditionChange={() => {}} />
+        <WidgetBuilderQueryFilterBuilder onQueryConditionChange={() => {}} error={{}} />
       </WidgetBuilderProvider>,
       {
         organization,
@@ -77,7 +77,7 @@ describe('QueryFilterBuilder', () => {
   it('renders a legend alias input for charts', async () => {
     render(
       <WidgetBuilderProvider>
-        <WidgetBuilderQueryFilterBuilder onQueryConditionChange={() => {}} />
+        <WidgetBuilderQueryFilterBuilder onQueryConditionChange={() => {}} error={{}} />
       </WidgetBuilderProvider>,
       {
         organization,

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

@@ -22,6 +22,7 @@ import {getDiscoverDatasetFromWidgetType} from 'sentry/views/dashboards/widgetBu
 import {convertBuilderStateToWidget} from 'sentry/views/dashboards/widgetBuilder/utils/convertBuilderStateToWidget';
 
 interface WidgetBuilderQueryFilterBuilderProps {
+  error: Record<string, any>;
   onQueryConditionChange: (valid: boolean) => void;
 }
 

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

@@ -14,9 +14,10 @@ import {convertBuilderStateToWidget} from 'sentry/views/dashboards/widgetBuilder
 interface SaveButtonProps {
   isEditing: boolean;
   onSave: ({index, widget}: {index: number; widget: Widget}) => void;
+  setError: (error: Record<string, any>) => void;
 }
 
-function SaveButton({isEditing, onSave}: SaveButtonProps) {
+function SaveButton({isEditing, onSave, setError}: SaveButtonProps) {
   const {state} = useWidgetBuilderContext();
   const {widgetIndex} = useParams();
   const api = useApi();
@@ -28,9 +29,11 @@ function SaveButton({isEditing, onSave}: SaveButtonProps) {
       await validateWidget(api, organization.slug, widget);
       onSave({index: Number(widgetIndex), widget});
     } catch (error) {
+      const errorDetails = error.responseJSON || error;
+      setError(errorDetails);
       addErrorMessage(t('Unable to save widget'));
     }
-  }, [api, onSave, organization.slug, state, widgetIndex]);
+  }, [api, onSave, organization.slug, state, widgetIndex, setError]);
 
   return (
     <Button priority="primary" onClick={handleSave}>

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

@@ -27,7 +27,7 @@ describe('TypeSelector', () => {
 
     render(
       <WidgetBuilderProvider>
-        <TypeSelector />
+        <TypeSelector error={{}} />
       </WidgetBuilderProvider>,
       {
         router,

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

@@ -28,7 +28,11 @@ const displayTypes = {
   [DisplayType.BIG_NUMBER]: t('Big Number'),
 };
 
-function WidgetBuilderTypeSelector() {
+interface WidgetBuilderTypeSelectorProps {
+  error: Record<string, any>;
+}
+
+function WidgetBuilderTypeSelector({}: WidgetBuilderTypeSelectorProps) {
   const {state, dispatch} = useWidgetBuilderContext();
   const config = getDatasetConfig(state.dataset);
 

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

@@ -56,6 +56,7 @@ function WidgetBuilderSlideout({
   const organization = useOrganization();
   const {state} = useWidgetBuilderContext();
   const [initialState] = useState(state);
+  const [error, setError] = useState<Record<string, any>>({});
   const {widgetIndex} = useParams();
   const theme = useTheme();
 
@@ -128,7 +129,7 @@ function WidgetBuilderSlideout({
             </Section>
           )}
         <Section>
-          <WidgetBuilderTypeSelector />
+          <WidgetBuilderTypeSelector error={error} />
         </Section>
         <div ref={previewRef}>
           {isSmallScreen && (
@@ -147,6 +148,7 @@ function WidgetBuilderSlideout({
         <Section>
           <WidgetBuilderQueryFilterBuilder
             onQueryConditionChange={onQueryConditionChange}
+            error={error}
           />
         </Section>
         {isChartWidget && (
@@ -160,9 +162,9 @@ function WidgetBuilderSlideout({
           </Section>
         )}
         <Section>
-          <WidgetBuilderNameAndDescription />
+          <WidgetBuilderNameAndDescription error={error} />
         </Section>
-        <SaveButton isEditing={isEditing} onSave={onSave} />
+        <SaveButton isEditing={isEditing} onSave={onSave} setError={setError} />
       </SlideoutBodyWrapper>
     </SlideOverPanel>
   );