fix(dashboards): auto select first widget in library (#91754)

When we open the widget library, we've now autoselected the first widget
in the library. This should work on the "add widget" button and the
breadcrumbs backlink.

Author: nikkikapadia

static/app/views/dashboards/detail.tsx

@@ -70,6 +70,7 @@ import {convertWidgetToBuilderStateParams} from 'sentry/views/dashboards/widgetB
 import {getDefaultWidget} from 'sentry/views/dashboards/widgetBuilder/utils/getDefaultWidget';
 import {DATA_SET_TO_WIDGET_TYPE} from 'sentry/views/dashboards/widgetBuilder/widgetBuilder';
 import WidgetLegendNameEncoderDecoder from 'sentry/views/dashboards/widgetLegendNameEncoderDecoder';
+import {getTopNConvertedDefaultWidgets} from 'sentry/views/dashboards/widgetLibrary/data';
 import {generatePerformanceEventView} from 'sentry/views/performance/data';
 import {MetricsDataSwitcher} from 'sentry/views/performance/landing/metricsDataSwitcher';
 import {MetricsDataSwitcherAlert} from 'sentry/views/performance/landing/metricsDataSwitcherAlert';
@@ -675,14 +676,18 @@ class DashboardDetail extends Component<Props, State> {
         if (!defined(dashboardId)) {
           pathname = `/organizations/${organization.slug}/dashboards/new/widget-builder/widget/new/`;
         }
+
+        const defaultLibraryWidget = getTopNConvertedDefaultWidgets(organization)[0];
         navigate(
           normalizeUrl({
             // TODO: Replace with the old widget builder path when swapping over
             pathname,
             query: {
               ...location.query,
               ...(openWidgetTemplates
-                ? {}
+                ? defaultLibraryWidget
+                  ? convertWidgetToBuilderStateParams(defaultLibraryWidget)
+                  : {}
                 : convertWidgetToBuilderStateParams(
                     getDefaultWidget(DATA_SET_TO_WIDGET_TYPE[dataset ?? DataSet.ERRORS])
                   )),

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

@@ -2,23 +2,19 @@ import {Fragment, useEffect, useRef, useState} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import isEqual from 'lodash/isEqual';
-import pick from 'lodash/pick';
 
 import {Breadcrumbs} from 'sentry/components/breadcrumbs';
 import {openConfirmModal} from 'sentry/components/confirm';
 import {Button} from 'sentry/components/core/button';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import SlideOverPanel from 'sentry/components/slideOverPanel';
-import {URL_PARAM} from 'sentry/constants/pageFilters';
 import {IconClose} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {WidgetBuilderVersion} from 'sentry/utils/analytics/dashboardsAnalyticsEvents';
 import type {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery';
-import {useLocation} from 'sentry/utils/useLocation';
 import useMedia from 'sentry/utils/useMedia';
-import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useValidateWidgetQuery} from 'sentry/views/dashboards/hooks/useValidateWidget';
 import {
@@ -47,6 +43,8 @@ import {useWidgetBuilderContext} from 'sentry/views/dashboards/widgetBuilder/con
 import useDashboardWidgetSource from 'sentry/views/dashboards/widgetBuilder/hooks/useDashboardWidgetSource';
 import useIsEditingWidget from 'sentry/views/dashboards/widgetBuilder/hooks/useIsEditingWidget';
 import {convertBuilderStateToWidget} from 'sentry/views/dashboards/widgetBuilder/utils/convertBuilderStateToWidget';
+import {convertWidgetToBuilderStateParams} from 'sentry/views/dashboards/widgetBuilder/utils/convertWidgetToBuilderStateParams';
+import {getTopNConvertedDefaultWidgets} from 'sentry/views/dashboards/widgetLibrary/data';
 
 type WidgetBuilderSlideoutProps = {
   dashboard: DashboardDetails;
@@ -78,15 +76,13 @@ function WidgetBuilderSlideout({
   thresholdMetaState,
 }: WidgetBuilderSlideoutProps) {
   const organization = useOrganization();
-  const {state} = useWidgetBuilderContext();
+  const {state, dispatch} = useWidgetBuilderContext();
   const [initialState] = useState(state);
   const [customizeFromLibrary, setCustomizeFromLibrary] = useState(false);
   const [error, setError] = useState<Record<string, any>>({});
   const theme = useTheme();
   const isEditing = useIsEditingWidget();
   const source = useDashboardWidgetSource();
-  const navigate = useNavigate();
-  const location = useLocation();
   const validatedWidgetResponse = useValidateWidgetQuery(
     convertBuilderStateToWidget(state)
   );
@@ -144,21 +140,20 @@ function WidgetBuilderSlideout({
     return () => observer.disconnect();
   }, [setIsPreviewDraggable, openWidgetTemplates]);
 
+  const widgetLibraryWidgets = getTopNConvertedDefaultWidgets(organization);
+
   const widgetLibraryElement = (
     <SlideoutBreadcrumb
       onClick={() => {
         setCustomizeFromLibrary(false);
         setOpenWidgetTemplates(true);
         // clears the widget to start fresh on the library page
-        navigate(
-          {
-            pathname: location.pathname,
-            query: {
-              ...pick(location.query, [...Object.values(URL_PARAM)]),
-            },
-          },
-          {preventScrollReset: true}
-        );
+        dispatch({
+          type: 'SET_STATE',
+          payload: convertWidgetToBuilderStateParams(
+            widgetLibraryWidgets[0] ?? ({} as Widget)
+          ),
+        });
       }}
     >
       {t('Widget Library')}

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

@@ -33,7 +33,7 @@ function WidgetTemplatesList({
 }: WidgetTemplatesListProps) {
   const theme = useTheme();
   const organization = useOrganization();
-  const [selectedWidget, setSelectedWidget] = useState<number | null>(null);
+  const [selectedWidget, setSelectedWidget] = useState<number | null>(0);
 
   const {dispatch} = useWidgetBuilderContext();
   const {widgetIndex} = useParams();