feat(widget-builder): Templates add to dashboard functionality (#83302)

Now clicking the "Add to dashboard" button on the widget templates are
functional. It will validate the widget and then save it to your
dashboard or display an error message. (Note the PR for hooking up the
templates to the widget preview is not merged yet so it will not show
the preview before adding to dashboard).

Author: nikkikapadia

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

@@ -188,7 +188,7 @@ function WidgetBuilderSlideout({
                 </Section>
               )}
             </div>
-            <WidgetTemplatesList />
+            <WidgetTemplatesList onSave={onSave} />
           </Fragment>
         )}
       </SlideoutBodyWrapper>

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

@@ -1,8 +1,9 @@
 import {LocationFixture} from 'sentry-fixture/locationFixture';
 import {RouterFixture} from 'sentry-fixture/routerFixture';
 
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
+import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import WidgetTemplatesList from 'sentry/views/dashboards/widgetBuilder/components/widgetTemplatesList';
 import {WidgetBuilderProvider} from 'sentry/views/dashboards/widgetBuilder/contexts/widgetBuilderContext';
@@ -30,10 +31,21 @@ const router = RouterFixture({
   location: LocationFixture({query: {}}),
 });
 
+jest.mock('sentry/actionCreators/indicator');
+
 describe('WidgetTemplatesList', () => {
+  const onSave = jest.fn();
+
   beforeEach(() => {
     const mockNavigate = jest.fn();
     mockUseNavigate.mockReturnValue(mockNavigate);
+
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/dashboards/widgets/',
+      method: 'POST',
+      body: {},
+      statusCode: 400,
+    });
   });
 
   afterEach(() => {
@@ -43,7 +55,7 @@ describe('WidgetTemplatesList', () => {
   it('should render the widget templates list', async () => {
     render(
       <WidgetBuilderProvider>
-        <WidgetTemplatesList />
+        <WidgetTemplatesList onSave={onSave} />
       </WidgetBuilderProvider>
     );
 
@@ -54,7 +66,7 @@ describe('WidgetTemplatesList', () => {
   it('should render buttons when the user clicks on a widget template', async () => {
     render(
       <WidgetBuilderProvider>
-        <WidgetTemplatesList />
+        <WidgetTemplatesList onSave={onSave} />
       </WidgetBuilderProvider>
     );
 
@@ -71,7 +83,7 @@ describe('WidgetTemplatesList', () => {
 
     render(
       <WidgetBuilderProvider>
-        <WidgetTemplatesList />
+        <WidgetTemplatesList onSave={onSave} />
       </WidgetBuilderProvider>,
       {router}
     );
@@ -91,4 +103,24 @@ describe('WidgetTemplatesList', () => {
       })
     );
   });
+
+  it('should show error message when the widget fails to save', async () => {
+    render(
+      <WidgetBuilderProvider>
+        <WidgetTemplatesList onSave={onSave} />
+      </WidgetBuilderProvider>
+    );
+
+    const widgetTemplate = await screen.findByText('Duration Distribution');
+    await userEvent.click(widgetTemplate);
+
+    await userEvent.click(await screen.findByText('Add to dashboard'));
+
+    await waitFor(() => {
+      expect(addErrorMessage).toHaveBeenCalledWith('Unable to add widget');
+    });
+
+    // show we're still on the widget templates list
+    expect(await screen.findByText('Add to dashboard')).toBeInTheDocument();
+  });
 });

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

@@ -1,25 +1,49 @@
-import {Fragment, useState} from 'react';
+import {Fragment, useCallback, useState} from 'react';
+import {useParams} from 'react-router-dom';
 import styled from '@emotion/styled';
 
+import {validateWidget} from 'sentry/actionCreators/dashboards';
+import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import {Button} from 'sentry/components/button';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import theme from 'sentry/utils/theme';
+import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
+import type {Widget} from 'sentry/views/dashboards/types';
 import {useWidgetBuilderContext} from 'sentry/views/dashboards/widgetBuilder/contexts/widgetBuilderContext';
 import {BuilderStateAction} from 'sentry/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState';
 import {convertWidgetToBuilderStateParams} from 'sentry/views/dashboards/widgetBuilder/utils/convertWidgetToBuilderStateParams';
 import {getTopNConvertedDefaultWidgets} from 'sentry/views/dashboards/widgetLibrary/data';
 import {getWidgetIcon} from 'sentry/views/dashboards/widgetLibrary/widgetCard';
 
-function WidgetTemplatesList() {
+type WidgetTemplatesListProps = {
+  onSave: ({index, widget}: {index: number; widget: Widget}) => void;
+};
+
+function WidgetTemplatesList({onSave}: WidgetTemplatesListProps) {
   const organization = useOrganization();
   const [selectedWidget, setSelectedWidget] = useState<number | null>(null);
 
   const {dispatch} = useWidgetBuilderContext();
+  const {widgetIndex} = useParams();
+  const api = useApi();
 
   const widgets = getTopNConvertedDefaultWidgets(organization);
 
+  const handleSave = useCallback(
+    async (widget: Widget) => {
+      try {
+        const newWidget = {...widget, id: undefined};
+        await validateWidget(api, organization.slug, newWidget);
+        onSave({index: Number(widgetIndex), widget: newWidget});
+      } catch (error) {
+        addErrorMessage(t('Unable to add widget'));
+      }
+    },
+    [api, organization.slug, widgetIndex, onSave]
+  );
+
   return (
     <Fragment>
       {widgets.map((widget, index) => {
@@ -48,7 +72,9 @@ function WidgetTemplatesList() {
                 {selectedWidget === index && (
                   <ButtonsWrapper>
                     <Button size="sm">{t('Customize')}</Button>
-                    <Button size="sm">{t('Add to dashboard')}</Button>
+                    <Button size="sm" onClick={() => handleSave(widget)}>
+                      {t('Add to dashboard')}
+                    </Button>
                   </ButtonsWrapper>
                 )}
               </div>