feat(widget-builder): Add error messaging to the Visualize field (#83103

)

Added the ability to show an error message for the visualize field when
validation fails. There are errors specifically for chart and non-chart
widgets so the correct error message will be displayed. This follows the
same error conventions that are in the current widget builder. The
following is an example of what the error message would look like:

<img width="553" alt="image"
src="https://github.com/user-attachments/assets/c9db10c3-99a3-48d9-8545-ae219b3903fb"
/>

Contributes to #81729

Note: There's a lot of random spacing changes so it's best to take a
look with hiding whitespace

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

@@ -648,6 +648,68 @@ describe('Visualize', () => {
     expect(screen.getAllByText('epm')).toHaveLength(1);
   });
 
+  it('shows appropriate error messages for non-chart widget queries', async () => {
+    render(
+      <WidgetBuilderProvider>
+        <Visualize
+          error={{
+            queries: [
+              {
+                fields: ['this field has an error'],
+                aggregates: ['this aggregate has an error'],
+              },
+            ],
+          }}
+        />
+      </WidgetBuilderProvider>,
+      {
+        organization,
+        router: RouterFixture({
+          location: LocationFixture({
+            query: {
+              dataset: WidgetType.TRANSACTIONS,
+              displayType: DisplayType.BIG_NUMBER,
+            },
+          }),
+        }),
+      }
+    );
+
+    expect(await screen.findByText('this field has an error')).toBeInTheDocument();
+    expect(screen.queryByText('this aggregate has an error')).not.toBeInTheDocument();
+  });
+
+  it('shows appropriate error messages for chart type widget queries', async () => {
+    render(
+      <WidgetBuilderProvider>
+        <Visualize
+          error={{
+            queries: [
+              {
+                fields: ['this field has an error'],
+                aggregates: ['this aggregate has an error'],
+              },
+            ],
+          }}
+        />
+      </WidgetBuilderProvider>,
+      {
+        organization,
+        router: RouterFixture({
+          location: LocationFixture({
+            query: {
+              dataset: WidgetType.TRANSACTIONS,
+              displayType: DisplayType.LINE,
+            },
+          }),
+        }),
+      }
+    );
+
+    expect(await screen.findByText('this aggregate has an error')).toBeInTheDocument();
+    expect(screen.queryByText('this field has an error')).not.toBeInTheDocument();
+  });
+
   describe('spans', () => {
     beforeEach(() => {
       jest.mocked(useSpanTags).mockImplementation((type?: 'string' | 'number') => {