feat(widget-builder): Clean up feature flag (#90851)

Since this feature is GA'd, I'm removing all frontend references to
clean up the feature flag.

There were also some `onAddWidget` functions that I had to rename since
I was passing both the old one and new one. I made these two functions
separate because at the time they were long functions that I thought
would be harder to parse if I added feature flag logic in the same one.

Also fixed the tooltip on the add widget button so it only shows the
tooltip in one place and prioritizes the message for permission checks
over the max widget limit message.

I had to update a number of tests. I dropped any references to
`widgetAsQueryParams` because that's not used by the new widget builder
and I'll delete all of the old widget builder code soon. And aggregates
don't show up in `fields` anymore. Only columns do to fill the group
bys.

Author: narsaynorath

static/app/components/modals/widgetBuilder/addToDashboardModal.spec.tsx

@@ -315,7 +315,7 @@ describe('add to dashboard modal', () => {
 
     await userEvent.click(screen.getByText('Open in Widget Builder'));
     expect(initialData.router.push).toHaveBeenCalledWith({
-      pathname: '/organizations/org-slug/dashboard/1/widget/new/',
+      pathname: '/organizations/org-slug/dashboard/1/widget-builder/widget/new/',
       query: mockWidgetAsQueryParams,
     });
   });
@@ -344,7 +344,7 @@ describe('add to dashboard modal', () => {
 
     await userEvent.click(screen.getByText('Open in Widget Builder'));
     expect(initialData.router.push).toHaveBeenCalledWith({
-      pathname: '/organizations/org-slug/dashboard/1/widget/new/',
+      pathname: '/organizations/org-slug/dashboard/1/widget-builder/widget/new/',
       query: expect.objectContaining({
         defaultTableColumns: ['field1', 'field2'],
         defaultTitle: 'Default title',

static/app/components/modals/widgetBuilder/addToDashboardModal.tsx

@@ -151,11 +151,7 @@ function AddToDashboardModal({
         ? `/organizations/${organization.slug}/dashboards/new/`
         : `/organizations/${organization.slug}/dashboard/${selectedDashboardId}/`;
 
-    const builderSuffix = organization.features.includes(
-      'dashboards-widget-builder-redesign'
-    )
-      ? 'widget-builder/widget/new/'
-      : 'widget/new/';
+    const builderSuffix = 'widget-builder/widget/new/';
 
     const pathname =
       page === 'builder' ? `${dashboardsPath}${builderSuffix}` : dashboardsPath;

static/app/views/dashboards/addWidget.tsx

@@ -2,7 +2,6 @@ import {useSortable} from '@dnd-kit/sortable';
 import styled from '@emotion/styled';
 
 import Feature from 'sentry/components/acl/feature';
-import {Button} from 'sentry/components/core/button';
 import type {MenuItemProps} from 'sentry/components/dropdownMenu';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import {IconAdd} from 'sentry/icons';
@@ -23,14 +22,10 @@ const initialStyles = {
 };
 
 type Props = {
-  onAddWidget: (dataset: DataSet) => void;
-  onAddWidgetFromNewWidgetBuilder?: (
-    dataset: DataSet,
-    openWidgetTemplates?: boolean
-  ) => void;
+  onAddWidget?: (dataset: DataSet, openWidgetTemplates?: boolean) => void;
 };
 
-function AddWidget({onAddWidget, onAddWidgetFromNewWidgetBuilder}: Props) {
+function AddWidget({onAddWidget}: Props) {
   const {setNodeRef, transform} = useSortable({
     disabled: true,
     id: ADD_WIDGET_BUTTON_DRAG_ID,
@@ -49,12 +44,12 @@ function AddWidget({onAddWidget, onAddWidgetFromNewWidgetBuilder}: Props) {
     {
       key: 'create-custom-widget',
       label: t('Create Custom Widget'),
-      onAction: () => onAddWidgetFromNewWidgetBuilder?.(defaultDataset, false),
+      onAction: () => onAddWidget?.(defaultDataset, false),
     },
     {
       key: 'from-widget-library',
       label: t('From Widget Library'),
-      onAction: () => onAddWidgetFromNewWidgetBuilder?.(defaultDataset, true),
+      onAction: () => onAddWidget?.(defaultDataset, true),
     },
   ];
 
@@ -80,45 +75,24 @@ function AddWidget({onAddWidget, onAddWidgetFromNewWidgetBuilder}: Props) {
           duration: 0.25,
         }}
       >
-        {organization.features.includes('dashboards-widget-builder-redesign') ? (
-          <InnerWrapper onClick={() => onAddWidgetFromNewWidgetBuilder?.(defaultDataset)}>
-            <DropdownMenu
-              items={addWidgetDropdownItems}
-              data-test-id="widget-add"
-              triggerProps={{
-                'aria-label': t('Add Widget'),
-                size: 'md',
-                showChevron: false,
-                icon: <IconAdd isCircled size="lg" color="subText" />,
-                borderless: true,
-              }}
-            />
-          </InnerWrapper>
-        ) : (
-          <InnerWrapper onClick={() => onAddWidget(defaultDataset)}>
-            <AddButton
-              data-test-id="widget-add"
-              icon={<IconAdd size="lg" isCircled color="subText" />}
-              aria-label={t('Add widget')}
-            />
-          </InnerWrapper>
-        )}
+        <InnerWrapper onClick={() => onAddWidget?.(defaultDataset)}>
+          <DropdownMenu
+            items={addWidgetDropdownItems}
+            data-test-id="widget-add"
+            triggerProps={{
+              'aria-label': t('Add Widget'),
+              size: 'md',
+              showChevron: false,
+              icon: <IconAdd isCircled size="lg" color="subText" />,
+              borderless: true,
+            }}
+          />
+        </InnerWrapper>
       </WidgetWrapper>
     </Feature>
   );
 }
 
-const AddButton = styled(Button)`
-  border: none;
-  &,
-  &:focus,
-  &:active,
-  &:hover {
-    background: transparent;
-    box-shadow: none;
-  }
-`;
-
 export default AddWidget;
 
 const InnerWrapper = styled('div')<{onClick?: () => void}>`

static/app/views/dashboards/controls.tsx

@@ -33,11 +33,7 @@ type Props = {
   dashboard: DashboardDetails;
   dashboardState: DashboardState;
   dashboards: DashboardListItem[];
-  onAddWidget: (dataset: DataSet) => void;
-  onAddWidgetFromNewWidgetBuilder: (
-    dataset: DataSet,
-    openWidgetTemplates: boolean
-  ) => void;
+  onAddWidget: (dataset: DataSet, openWidgetTemplates: boolean) => void;
   onCancel: () => void;
   onCommit: () => void;
   onDelete: () => void;
@@ -60,7 +56,6 @@ function Controls({
   onDelete,
   onCancel,
   onAddWidget,
-  onAddWidgetFromNewWidgetBuilder,
 }: Props) {
   const [isFavorited, setIsFavorited] = useState(dashboard.isFavorited);
   const queryClient = useQueryClient();
@@ -168,15 +163,22 @@ function Controls({
     {
       key: 'create-custom-widget',
       label: t('Create Custom Widget'),
-      onAction: () => onAddWidgetFromNewWidgetBuilder(defaultDataset, false),
+      onAction: () => onAddWidget(defaultDataset, false),
     },
     {
       key: 'from-widget-library',
       label: t('From Widget Library'),
-      onAction: () => onAddWidgetFromNewWidgetBuilder(defaultDataset, true),
+      onAction: () => onAddWidget(defaultDataset, true),
     },
   ];
 
+  const tooltipMessage = hasEditAccess
+    ? widgetLimitReached
+      ? tct('Max widgets ([maxWidgets]) per dashboard reached.', {
+          maxWidgets: MAX_WIDGETS,
+        })
+      : null
+    : t('You do not have permission to edit this dashboard');
   return (
     <StyledButtonBar gap={1} key="controls">
       <FeedbackWidgetButton />
@@ -259,49 +261,22 @@ function Controls({
             </Button>
             {hasFeature ? (
               <Tooltip
-                title={tct('Max widgets ([maxWidgets]) per dashboard reached.', {
-                  maxWidgets: MAX_WIDGETS,
-                })}
-                disabled={!widgetLimitReached}
+                title={tooltipMessage}
+                disabled={!widgetLimitReached && hasEditAccess}
               >
-                {organization.features.includes('dashboards-widget-builder-redesign') ? (
-                  <DropdownMenu
-                    items={addWidgetDropdownItems}
-                    isDisabled={widgetLimitReached || !hasEditAccess}
-                    triggerLabel={t('Add Widget')}
-                    triggerProps={{
-                      'aria-label': t('Add Widget'),
-                      size: 'sm',
-                      showChevron: true,
-                      icon: <IconAdd isCircled size="sm" />,
-                      priority: 'primary',
-                      title:
-                        !hasEditAccess &&
-                        t('You do not have permission to edit this dashboard'),
-                    }}
-                    position="bottom-end"
-                  />
-                ) : (
-                  <Button
-                    data-test-id="add-widget-library"
-                    priority="primary"
-                    size="sm"
-                    disabled={widgetLimitReached || !hasEditAccess}
-                    icon={<IconAdd isCircled />}
-                    onClick={() => {
-                      trackAnalytics('dashboards_views.widget_library.opened', {
-                        organization,
-                      });
-                      onAddWidget(defaultDataset);
-                    }}
-                    title={
-                      !hasEditAccess &&
-                      t('You do not have permission to edit this dashboard')
-                    }
-                  >
-                    {t('Add Widget')}
-                  </Button>
-                )}
+                <DropdownMenu
+                  items={addWidgetDropdownItems}
+                  isDisabled={widgetLimitReached || !hasEditAccess}
+                  triggerLabel={t('Add Widget')}
+                  triggerProps={{
+                    'aria-label': t('Add Widget'),
+                    size: 'sm',
+                    showChevron: true,
+                    icon: <IconAdd isCircled size="sm" />,
+                    priority: 'primary',
+                  }}
+                  position="bottom-end"
+                />
               </Tooltip>
             ) : null}
           </Fragment>

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

@@ -436,6 +436,7 @@ describe('Dashboards > Dashboard', () => {
       router = initialData.router,
       location = initialData.router.location,
       isPreview = false,
+      onEditWidget = jest.fn(),
     }: any) => {
       const getDashboardComponent = () => (
         <OrganizationContext value={initialData.organization}>
@@ -455,6 +456,7 @@ describe('Dashboards > Dashboard', () => {
               location={location}
               widgetLimitReached={false}
               isPreview={isPreview}
+              onEditWidget={onEditWidget}
               widgetLegendState={widgetLegendState}
             />
           </MEPSettingProvider>
@@ -487,7 +489,7 @@ describe('Dashboards > Dashboard', () => {
       });
     });
 
-    it('opens the widget builder when editing with the modal access flag', async function () {
+    it('triggers the edit widget callback', async function () {
       const testData = initializeOrg({
         organization: {
           features: ['dashboards-basic', 'dashboards-edit'],
@@ -497,21 +499,21 @@ describe('Dashboards > Dashboard', () => {
         ...mockDashboard,
         widgets: [newWidget],
       };
+      const mockOnEditWidget = jest.fn();
 
       mount({
         dashboard: dashboardWithOneWidget,
         org: testData.organization,
         router: testData.router,
         location: testData.router.location,
+        onEditWidget: mockOnEditWidget,
       });
 
       await userEvent.click(await screen.findByLabelText('Edit Widget'));
 
-      expect(testData.router.push).toHaveBeenCalledWith(
-        expect.objectContaining({
-          pathname: '/organizations/org-slug/dashboard/1/widget/0/edit/',
-        })
-      );
+      await waitFor(() => {
+        expect(mockOnEditWidget).toHaveBeenCalled();
+      });
     });
 
     it('does not show the add widget button if dashboard is in preview mode', async function () {