fix(dashboards): Widget Viewer edit button regression fix (#32182)

edwardgou-sentry · web-flow · commit d9617094679d · 2022-03-01T16:28:25.000-05:00
Edit button in the Widget Viewer stopped working since we added shareable links.
This fixes by adding an onEdit handler to detail.tsx
diff --git a/static/app/components/modals/widgetViewerModal.tsx b/static/app/components/modals/widgetViewerModal.tsx
@@ -48,7 +48,17 @@ const HALF_TABLE_ITEM_LIMIT = 10;
 const GEO_COUNTRY_CODE = 'geo.country_code';
 
 function WidgetViewerModal(props: Props) {
-  const {organization, widget, selection, location, Footer, Body, Header, onEdit} = props;
+  const {
+    organization,
+    widget,
+    selection,
+    location,
+    Footer,
+    Body,
+    Header,
+    closeModal,
+    onEdit,
+  } = props;
   const isTableWidget = widget.displayType === DisplayType.TABLE;
   const renderWidgetViewer = () => {
     const api = useApi();
@@ -202,9 +212,17 @@ function WidgetViewerModal(props: Props) {
       <Body>{renderWidgetViewer()}</Body>
       <StyledFooter>
         <ButtonBar gap={1}>
-          <Button type="button" onClick={onEdit}>
-            {t('Edit Widget')}
-          </Button>
+          {onEdit && (
+            <Button
+              type="button"
+              onClick={() => {
+                closeModal();
+                onEdit();
+              }}
+            >
+              {t('Edit Widget')}
+            </Button>
+          )}
           <Button to={path} priority="primary" type="button">
             {openLabel}
           </Button>
diff --git a/static/app/views/dashboardsV2/detail.tsx b/static/app/views/dashboardsV2/detail.tsx
@@ -1,6 +1,7 @@
 import {cloneElement, Component, isValidElement} from 'react';
 import {browserHistory, PlainRoute, RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
+import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
 import omit from 'lodash/omit';
 
@@ -125,6 +126,19 @@ class DashboardDetail extends Component<Props, State> {
               query: location.query,
             });
           },
+          onEdit: () => {
+            openAddDashboardWidgetModal({
+              organization,
+              widget,
+              onUpdateWidget: (nextWidget: Widget) => {
+                const updateIndex = dashboard.widgets.indexOf(widget);
+                const nextWidgetsList = cloneDeep(dashboard.widgets);
+                nextWidgetsList[updateIndex] = nextWidget;
+                this.handleUpdateWidgetList(nextWidgetsList);
+              },
+              source: DashboardWidgetSource.DASHBOARDS,
+            });
+          },
         });
       } else {
         // Replace the URL if the widget isn't found and raise an error in toast
diff --git a/static/app/views/dashboardsV2/widgetCard/index.tsx b/static/app/views/dashboardsV2/widgetCard/index.tsx
@@ -145,6 +145,7 @@ class WidgetCard extends React.Component<Props> {
       showWidgetViewerButton,
       router,
       isEditing,
+      onEdit,
     } = this.props;
     return (
       <ErrorBoundary
@@ -168,6 +169,7 @@ class WidgetCard extends React.Component<Props> {
                     openWidgetViewerModal({
                       organization,
                       widget,
+                      onEdit,
                     });
                   }
                 }}
diff --git a/tests/js/spec/components/modals/widgetViewerModal.spec.tsx b/tests/js/spec/components/modals/widgetViewerModal.spec.tsx
@@ -35,6 +35,7 @@ function mountModal({initialData: {organization, routerContext}, widget}) {
         closeModal={() => undefined}
         organization={organization}
         widget={widget}
+        onEdit={() => undefined}
       />
     </div>,
     {
diff --git a/tests/js/spec/views/dashboardsV2/gridLayout/detail.spec.jsx b/tests/js/spec/views/dashboardsV2/gridLayout/detail.spec.jsx
@@ -1,5 +1,6 @@
 import {enforceActOnUseLegacyStoreHook, mountWithTheme} from 'sentry-test/enzyme';
 import {initializeOrg} from 'sentry-test/initializeOrg';
+import {mountGlobalModal} from 'sentry-test/modal';
 import {
   act,
   mountWithTheme as rtlMountWithTheme,
@@ -11,6 +12,7 @@ import {
 import * as modals from 'sentry/actionCreators/modal';
 import ProjectsStore from 'sentry/stores/projectsStore';
 import {constructGridItemKey} from 'sentry/views/dashboardsV2/layoutUtils';
+import {DashboardWidgetSource} from 'sentry/views/dashboardsV2/types';
 import * as types from 'sentry/views/dashboardsV2/types';
 import ViewEditDashboard from 'sentry/views/dashboardsV2/view';
 
@@ -654,5 +656,42 @@ describe('Dashboards > Detail', function () {
         })
       );
     });
+
+    it('opens the edit widget modal when clicking the edit button', async () => {
+      const widget = TestStubs.Widget(
+        [{name: '', conditions: 'event.type:error', fields: ['count()']}],
+        {
+          title: 'First Widget',
+          interval: '1d',
+          id: '1',
+          layout: null,
+        }
+      );
+      MockApiClient.addMockResponse({
+        url: '/organizations/org-slug/dashboards/1/',
+        body: TestStubs.Dashboard([widget], {id: '1', title: 'Custom Errors'}),
+      });
+
+      rtlMountWithTheme(
+        <ViewEditDashboard
+          organization={initialData.organization}
+          params={{orgId: 'org-slug', dashboardId: '1', widgetId: '1'}}
+          router={initialData.router}
+          location={{...initialData.router.location, pathname: '/widget/123/'}}
+        />,
+        {context: initialData.routerContext}
+      );
+
+      await mountGlobalModal();
+
+      userEvent.click(screen.getByRole('button', {name: 'Edit Widget'}));
+      expect(openEditModal).toHaveBeenCalledWith(
+        expect.objectContaining({
+          widget,
+          organization: initialData.organization,
+          source: DashboardWidgetSource.DASHBOARDS,
+        })
+      );
+    });
   });
 });

Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@ function mountModal({initialData: {organization, routerContext}, widget}) {`
`35`	`35`	`closeModal={() => undefined}`
`36`	`36`	`organization={organization}`
`37`	`37`	`widget={widget}`
	`38`	`+ onEdit={() => undefined}`
`38`	`39`	`/>`
`39`	`40`	`</div>,`
`40`	`41`	`{`