feat(dashboards): Adds action menu to prebuilt dashboard widgets (#103976)

- Removes `Widget` title wrapper usage in `VisualizationWidget`
- Reuse `WidgetFrame` wrapper on `VisualizationWidget` call site. This
primarily enables the context menu for widgets using the new time series
visualization component
- Also wraps `VisualizationWidget` in `VisuallyCompleteWithData` for
telemetry
- Updates the common `SortableWidget` component to conditionally
`showContextMenu` depending on if the dashboard `isEmbedded`.

Author: edwardgou-sentry

static/app/views/dashboards/dashboard.spec.tsx

@@ -289,6 +289,45 @@ describe('Dashboards > Dashboard', () => {
     expect(mockOnUpdate).toHaveBeenCalledWith(expectedWidgets);
   });
 
+  it('hides widget context menu when dashboard is embedded', async () => {
+    const dashboardWithOneWidget = {
+      ...mockDashboard,
+      widgets: [
+        WidgetFixture({
+          id: '1',
+          title: 'Test Widget',
+          layout: {
+            h: 1,
+            w: 1,
+            x: 0,
+            y: 0,
+            minH: 1,
+          },
+        }),
+      ],
+    };
+
+    render(
+      <OrganizationContext value={initialData.organization}>
+        <MEPSettingProvider forceTransactions={false}>
+          <Dashboard
+            dashboard={dashboardWithOneWidget}
+            isEditingDashboard={false}
+            onUpdate={() => undefined}
+            handleUpdateWidgetList={() => undefined}
+            handleAddCustomWidget={() => undefined}
+            widgetLimitReached={false}
+            isEmbedded
+            widgetLegendState={widgetLegendState}
+          />
+        </MEPSettingProvider>
+      </OrganizationContext>
+    );
+
+    await screen.findByText('Test Widget');
+    expect(screen.queryByLabelText('Widget actions')).not.toBeInTheDocument();
+  });
+
   describe('Issue Widgets', () => {
     beforeEach(() => {
       MemberListStore.init();

static/app/views/dashboards/dashboard.tsx

@@ -81,6 +81,7 @@ type Props = {
   widgetLegendState: WidgetLegendSelectionState;
   widgetLimitReached: boolean;
   handleChangeSplitDataset?: (widget: Widget, index: number) => void;
+  isEmbedded?: boolean;
   isPreview?: boolean;
   newWidget?: Widget;
   newlyAddedWidget?: Widget;
@@ -104,6 +105,7 @@ function Dashboard({
   onUpdate,
   widgetLegendState,
   widgetLimitReached,
+  isEmbedded,
   isPreview,
   newWidget,
   newlyAddedWidget,
@@ -426,6 +428,7 @@ function Dashboard({
             onEdit={handleEditWidget(index)}
             onDuplicate={handleDuplicateWidget(widget)}
             onSetTransactionsDataset={() => handleChangeSplitDataset(widget, index)}
+            isEmbedded={isEmbedded}
             isPreview={isPreview}
             dashboardFilters={getDashboardFiltersFromURL(location) ?? dashboard.filters}
             dashboardPermissions={dashboard.permissions}

static/app/views/dashboards/detail.tsx

@@ -986,6 +986,7 @@ class DashboardDetail extends Component<Props, State> {
                           onUpdate={this.onUpdateWidget}
                           handleUpdateWidgetList={this.handleUpdateWidgetList}
                           handleAddCustomWidget={this.handleAddCustomWidget}
+                          isEmbedded={this.isEmbedded}
                           isPreview={this.isPreview}
                           widgetLegendState={this.state.widgetLegendState}
                         />
@@ -1269,6 +1270,7 @@ class DashboardDetail extends Component<Props, State> {
                                       onAddWidget={this.onAddWidget}
                                       newWidget={newWidget}
                                       onSetNewWidget={onSetNewWidget}
+                                      isEmbedded={this.isEmbedded}
                                       isPreview={this.isPreview}
                                       widgetLegendState={this.state.widgetLegendState}
                                       onEditWidget={this.onEditWidget}

static/app/views/dashboards/sortableWidget.tsx

@@ -40,6 +40,7 @@ type Props = {
   dashboardCreator?: User;
   dashboardFilters?: DashboardFilters;
   dashboardPermissions?: DashboardPermissions;
+  isEmbedded?: boolean;
   isMobile?: boolean;
   isPreview?: boolean;
   newlyAddedWidget?: Widget;
@@ -60,6 +61,7 @@ function SortableWidget(props: Props) {
     onEdit,
     onDuplicate,
     onSetTransactionsDataset,
+    isEmbedded,
     isPreview,
     isMobile,
     windowWidth,
@@ -120,7 +122,7 @@ function SortableWidget(props: Props) {
     onEdit,
     onDuplicate,
     onSetTransactionsDataset,
-    showContextMenu: true,
+    showContextMenu: !isEmbedded,
     isPreview,
     index,
     dashboardFilters,

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

@@ -315,17 +315,45 @@ function WidgetCard(props: Props) {
       <ErrorBoundary
         customComponent={() => <ErrorCard>{t('Error loading widget data')}</ErrorCard>}
       >
-        <VisualizationWidget
-          widget={widget}
-          selection={selection}
-          dashboardFilters={dashboardFilters}
-          onDataFetched={onDataFetched}
-          onWidgetTableSort={onWidgetTableSort}
-          onWidgetTableResizeColumn={onWidgetTableResizeColumn}
-          renderErrorMessage={renderErrorMessage}
-          onDataFetchStart={onDataFetchStart}
-          tableItemLimit={tableItemLimit}
-        />
+        <VisuallyCompleteWithData
+          id="DashboardList-FirstWidgetCard"
+          hasData={
+            ((data?.tableResults?.length || data?.timeseriesResults?.length) ?? 0) > 0
+          }
+          disabled={Number(props.index) !== 0}
+        >
+          <WidgetFrame
+            title={widget.title}
+            description={widget.description}
+            badgeProps={badges}
+            warnings={warnings}
+            actionsDisabled={actionsDisabled}
+            error={widgetQueryError}
+            actionsMessage={actionsMessage}
+            actions={actions}
+            onFullScreenViewClick={
+              disableFullscreen
+                ? undefined
+                : currentDashboardId
+                  ? onFullScreenViewClick
+                  : undefined
+            }
+            borderless={props.borderless}
+            revealTooltip={props.forceDescriptionTooltip ? 'always' : undefined}
+          >
+            <VisualizationWidget
+              widget={widget}
+              selection={selection}
+              dashboardFilters={dashboardFilters}
+              onDataFetched={onDataFetched}
+              onWidgetTableSort={onWidgetTableSort}
+              onWidgetTableResizeColumn={onWidgetTableResizeColumn}
+              renderErrorMessage={renderErrorMessage}
+              onDataFetchStart={onDataFetchStart}
+              tableItemLimit={tableItemLimit}
+            />
+          </WidgetFrame>
+        </VisuallyCompleteWithData>
       </ErrorBoundary>
     );
   }

static/app/views/dashboards/widgetCard/visualizationWidget.tsx

@@ -6,7 +6,6 @@ import {useReleaseStats} from 'sentry/utils/useReleaseStats';
 import type {DashboardFilters, Widget} from 'sentry/views/dashboards/types';
 import type {TabularColumn} from 'sentry/views/dashboards/widgets/common/types';
 import {TimeSeriesWidgetVisualization} from 'sentry/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization';
-import {Widget as CommonWidget} from 'sentry/views/dashboards/widgets/widget/widget';
 import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
 
 import {WidgetCardDataLoader} from './widgetCardDataLoader';
@@ -69,20 +68,18 @@ export function VisualizationWidget({
         const errorDisplay =
           renderErrorMessage && errorMessage ? renderErrorMessage(errorMessage) : null;
 
+        if (loading) {
+          return <TimeSeriesWidgetVisualization.LoadingPlaceholder />;
+        }
+        if (errorDisplay) {
+          return errorDisplay;
+        }
+
         return (
-          <CommonWidget
-            Title={<CommonWidget.WidgetTitle title={widget.title} />}
-            Visualization={
-              errorDisplay || loading ? (
-                errorDisplay
-              ) : (
-                <TimeSeriesWidgetVisualization
-                  plottables={plottables}
-                  releases={releases}
-                  showReleaseAs={showReleaseAs}
-                />
-              )
-            }
+          <TimeSeriesWidgetVisualization
+            plottables={plottables}
+            releases={releases}
+            showReleaseAs={showReleaseAs}
           />
         );
       }}