feat(dashboard): Add duplicate widget button in dashboard edit mode (#31776)

Adds a duplicate widget button to Dashboard Widgets in Edit mode

Author: edwardgou-sentry

static/app/views/dashboardsV2/dashboard.tsx

@@ -30,6 +30,7 @@ import withPageFilters from 'sentry/utils/withPageFilters';
 import AddWidget, {ADD_WIDGET_BUTTON_DRAG_ID} from './addWidget';
 import {
   assignDefaultLayout,
+  assignTempId,
   calculateColumnDepths,
   constructGridItemKey,
   DEFAULT_WIDGET_WIDTH,
@@ -305,16 +306,17 @@ class Dashboard extends Component<Props, State> {
   };
 
   handleDuplicateWidget = (widget: Widget, index: number) => () => {
-    const {dashboard, isEditing, handleUpdateWidgetList} = this.props;
+    const {dashboard, onUpdate, isEditing, handleUpdateWidgetList} = this.props;
 
-    const widgetCopy = cloneDeep(widget);
-    widgetCopy.id = undefined;
-    widgetCopy.tempId = undefined;
+    const widgetCopy = cloneDeep(
+      assignTempId({...widget, id: undefined, tempId: undefined})
+    );
 
     let nextList = [...dashboard.widgets];
     nextList.splice(index, 0, widgetCopy);
     nextList = generateWidgetsAfterCompaction(nextList);
 
+    onUpdate(nextList);
     if (!!!isEditing) {
       handleUpdateWidgetList(nextList);
     }

static/app/views/dashboardsV2/widgetCard/index.tsx

@@ -11,7 +11,7 @@ import ErrorBoundary from 'sentry/components/errorBoundary';
 import {Panel} from 'sentry/components/panels';
 import Placeholder from 'sentry/components/placeholder';
 import Tooltip from 'sentry/components/tooltip';
-import {IconDelete, IconEdit, IconGrabbable} from 'sentry/icons';
+import {IconCopy, IconDelete, IconEdit, IconGrabbable} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import space from 'sentry/styles/space';
@@ -54,8 +54,15 @@ type Props = WithRouterProps & {
 
 class WidgetCard extends React.Component<Props> {
   renderToolbar() {
-    const {onEdit, onDelete, draggableProps, hideToolbar, isEditing, isMobile} =
-      this.props;
+    const {
+      onEdit,
+      onDelete,
+      onDuplicate,
+      draggableProps,
+      hideToolbar,
+      isEditing,
+      isMobile,
+    } = this.props;
 
     if (!isEditing) {
       return null;
@@ -77,6 +84,9 @@ class WidgetCard extends React.Component<Props> {
           <IconClick data-test-id="widget-edit" onClick={onEdit}>
             <IconEdit color="textColor" />
           </IconClick>
+          <IconClick aria-label={t('Duplicate Widget')} onClick={onDuplicate}>
+            <IconCopy color="textColor" />
+          </IconClick>
           <IconClick data-test-id="widget-delete" onClick={onDelete}>
             <IconDelete color="textColor" />
           </IconClick>

tests/js/spec/views/dashboardsV2/gridLayout/dashboard.spec.tsx

@@ -14,6 +14,14 @@ describe('Dashboards > Dashboard', () => {
   const organization = TestStubs.Organization({
     features: ['dashboards-basic', 'dashboards-edit', 'dashboard-grid-layout'],
   });
+  const organizationWithFlag = TestStubs.Organization({
+    features: [
+      'dashboards-basic',
+      'dashboards-edit',
+      'dashboard-grid-layout',
+      'issues-in-dashboards',
+    ],
+  });
   const mockDashboard = {
     dateCreated: '2021-08-10T21:20:46.798237Z',
     id: '1',
@@ -101,6 +109,11 @@ describe('Dashboards > Dashboard', () => {
         },
       ],
     });
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/tags/',
+      method: 'GET',
+      body: TestStubs.Tags(),
+    });
   });
 
   it('dashboard adds new widget if component is mounted with newWidget prop', async () => {
@@ -186,14 +199,6 @@ describe('Dashboards > Dashboard', () => {
     });
 
     it('dashboard displays issue widgets if the user has issue widgets feature flag', async () => {
-      const organizationWithFlag = TestStubs.Organization({
-        features: [
-          'dashboards-basic',
-          'dashboards-edit',
-          'dashboard-grid-layout',
-          'issues-in-dashboards',
-        ],
-      });
       const mockDashboardWithIssueWidget = {
         ...mockDashboard,
         widgets: [newWidget, issueWidget],
@@ -204,14 +209,6 @@ describe('Dashboards > Dashboard', () => {
     });
 
     it('renders suggested assignees', async () => {
-      const organizationWithFlag = TestStubs.Organization({
-        features: [
-          'dashboards-basic',
-          'dashboards-edit',
-          'dashboard-grid-layout',
-          'issues-in-dashboards',
-        ],
-      });
       const mockDashboardWithIssueWidget = {
         ...mockDashboard,
         widgets: [{...issueWidget}],
@@ -225,4 +222,47 @@ describe('Dashboards > Dashboard', () => {
       expect(await screen.findByText('Matching Issue Owners Rule')).toBeInTheDocument();
     });
   });
+
+  describe('Edit mode', () => {
+    let widgets: Widget[];
+    const mount = dashboard => {
+      const getDashboardComponent = () => (
+        <Dashboard
+          paramDashboardId="1"
+          dashboard={dashboard}
+          organization={initialData.organization}
+          isEditing
+          onUpdate={newWidgets => {
+            widgets.splice(0, widgets.length, ...newWidgets);
+          }}
+          handleUpdateWidgetList={() => undefined}
+          handleAddCustomWidget={() => undefined}
+          onSetWidgetToBeUpdated={() => undefined}
+          router={initialData.router}
+          location={initialData.location}
+          widgetLimitReached={false}
+        />
+      );
+      const {rerender} = rtlMountWithTheme(getDashboardComponent());
+      return {rerender: () => rerender(getDashboardComponent())};
+    };
+
+    beforeEach(() => {
+      widgets = [newWidget];
+    });
+
+    it('displays the copy widget button in edit mode', () => {
+      const dashboardWithOneWidget = {...mockDashboard, widgets};
+      mount(dashboardWithOneWidget);
+      expect(screen.getByLabelText('Duplicate Widget')).toBeInTheDocument();
+    });
+
+    it('duplicates the widget', async () => {
+      const dashboardWithOneWidget = {...mockDashboard, widgets};
+      const {rerender} = mount(dashboardWithOneWidget);
+      userEvent.click(screen.getByLabelText('Duplicate Widget'));
+      rerender();
+      expect(screen.getAllByText('Test Discover Widget')).toHaveLength(2);
+    });
+  });
 });