feat(dashboards): Issues in Dashboards add widget control (#29926)

Adds Add Issue Widget button to Dashboards using feature flag

static/app/actionCreators/modal.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import ModalActions from 'app/actions/modalActions';
 import type {ModalTypes} from 'app/components/globalModal';
+import type {DashboardIssueWidgetModalOptions} from 'app/components/modals/addDashboardIssueWidgetModal';
 import type {DashboardWidgetModalOptions} from 'app/components/modals/addDashboardWidgetModal';
 import {DashboardWidgetLibraryModalOptions} from 'app/components/modals/dashboardWidgetLibraryModal';
 import type {DashboardWidgetQuerySelectorModalOptions} from 'app/components/modals/dashboardWidgetQuerySelectorModal';
@@ -233,6 +234,15 @@ export async function openAddDashboardWidgetModal(options: DashboardWidgetModalO
   openModal(deps => <Modal {...deps} {...options} />, {backdrop: 'static', modalCss});
 }
 
+export async function openAddDashboardIssueWidgetModal(
+  options: DashboardIssueWidgetModalOptions
+) {
+  const issuesModal = await import('app/components/modals/addDashboardIssueWidgetModal');
+  const {default: Modal, modalCss} = issuesModal;
+
+  openModal(deps => <Modal {...deps} {...options} />, {backdrop: 'static', modalCss});
+}
+
 export async function openReprocessEventModal({
   onClose,
   ...options

static/app/views/dashboardsV2/controls.tsx

@@ -22,6 +22,7 @@ type Props = {
   onCommit: () => void;
   onDelete: () => void;
   onAddWidget: () => void;
+  onAddIssueWidget: () => void;
   dashboardState: DashboardState;
 };
 
@@ -36,6 +37,7 @@ class Controls extends React.Component<Props> {
       onCommit,
       onDelete,
       onAddWidget,
+      onAddIssueWidget,
     } = this.props;
 
     const cancelButton = (
@@ -128,6 +130,20 @@ class Controls extends React.Component<Props> {
                   {t('Add Widget')}
                 </Button>
               ) : null}
+              {organization.features.includes('issues-in-dashboards') ? (
+                <Button
+                  data-test-id="dashboard-add-issues-widget"
+                  priority="primary"
+                  icon={<IconAdd isCircled size="s" />}
+                  onClick={e => {
+                    e.preventDefault();
+                    onAddIssueWidget();
+                  }}
+                  disabled={!hasFeature}
+                >
+                  {t('Add Issue Widget')}
+                </Button>
+              ) : null}
             </React.Fragment>
           )}
         </DashboardEditFeature>

static/app/views/dashboardsV2/detail.tsx

@@ -9,7 +9,10 @@ import {
   updateDashboard,
 } from 'app/actionCreators/dashboards';
 import {addSuccessMessage} from 'app/actionCreators/indicator';
-import {openDashboardWidgetLibraryModal} from 'app/actionCreators/modal';
+import {
+  openAddDashboardIssueWidgetModal,
+  openDashboardWidgetLibraryModal,
+} from 'app/actionCreators/modal';
 import {Client} from 'app/api';
 import Breadcrumbs from 'app/components/breadcrumbs';
 import HookOrDefault from 'app/components/hookOrDefault';
@@ -409,6 +412,21 @@ class DashboardDetail extends Component<Props, State> {
     );
   };
 
+  onAddIssueWidget = () => {
+    const {organization, dashboard} = this.props;
+
+    openAddDashboardIssueWidgetModal({
+      organization,
+      onAddWidget: widget => {
+        this.setState({
+          dashboardState: DashboardState.EDIT,
+          modifiedDashboard: cloneDashboard(dashboard),
+        });
+        this.onUpdateWidget([...dashboard.widgets, widget]);
+      },
+    });
+  };
+
   renderWidgetBuilder(dashboard: DashboardDetails) {
     const {children} = this.props;
     const {modifiedDashboard, widgetToBeUpdated} = this.state;
@@ -455,6 +473,7 @@ class DashboardDetail extends Component<Props, State> {
                 onCommit={this.onCommit}
                 onAddWidget={this.onAddWidget}
                 onDelete={this.onDelete(dashboard)}
+                onAddIssueWidget={this.onAddIssueWidget}
                 dashboardState={dashboardState}
               />
             </StyledPageHeader>
@@ -530,6 +549,7 @@ class DashboardDetail extends Component<Props, State> {
                 onCommit={this.onCommit}
                 onAddWidget={this.onAddWidget}
                 onDelete={this.onDelete(dashboard)}
+                onAddIssueWidget={this.onAddIssueWidget}
                 dashboardState={dashboardState}
               />
             </Layout.HeaderActions>