test(acceptance): Revert disabling CSS transforms for grid layout (#31754)

Reverting the change to get back stable acceptance test runs

Author: narsaynorath

static/app/views/dashboardsV2/addWidget.tsx

@@ -56,8 +56,9 @@ function AddWidget({onAddWidget, onOpenWidgetBuilder, orgFeatures}: Props) {
         duration: 0.25,
       }}
     >
-      <InnerWrapper onClick={onClick} data-test-id="widget-add">
+      <InnerWrapper onClick={onClick}>
         <AddButton
+          data-test-id="widget-add"
           icon={<IconAdd size="lg" isCircled color="inactive" />}
           aria-label={t('Add widget')}
         />

static/app/views/dashboardsV2/dashboard.tsx

@@ -548,7 +548,6 @@ class Dashboard extends Component<Props, State> {
             <IconResize />
           </ResizeHandle>
         }
-        useCSSTransforms={false}
         isBounded
       >
         {widgetsWithLayout.map((widget, index) => this.renderWidget(widget, index))}
@@ -645,9 +644,14 @@ const GridItem = styled('div')`
   }
 `;
 
+// HACK: to stack chart tooltips above other grid items
 const GridLayout = styled(WidthProvider(Responsive))`
   margin: -${space(2)};
 
+  .react-grid-item:hover {
+    z-index: 10;
+  }
+
   .react-resizable-handle {
     background-image: none;
   }

tests/acceptance/page_objects/dashboard_detail.py

@@ -39,9 +39,7 @@ def enter_edit_state(self):
         self.wait_until_loaded()
 
     def click_dashboard_add_widget_button(self):
-        # TODO(nar): This clickable check is causing flake when CSS Transforms are
-        # disabled for the grid library
-        # self.browser.wait_until_clickable('[data-test-id="widget-add"]')
+        self.browser.wait_until_clickable('[data-test-id="widget-add"]')
         button = self.browser.element('[data-test-id="widget-add"]')
         button.click()
         self.wait_until_loaded()

tests/js/spec/views/dashboardsV2/detail.spec.jsx

@@ -495,7 +495,7 @@ describe('Dashboards > Detail', function () {
       // Enter edit mode.
       wrapper.find('Controls Button[data-test-id="dashboard-edit"]').simulate('click');
       wrapper.update();
-      wrapper.find('InnerWrapper[data-test-id="widget-add"]').simulate('click');
+      wrapper.find('AddButton[data-test-id="widget-add"]').simulate('click');
       expect(openEditModal).toHaveBeenCalledTimes(1);
     });
 
@@ -528,7 +528,7 @@ describe('Dashboards > Detail', function () {
       // Enter edit mode.
       wrapper.find('Controls Button[data-test-id="dashboard-edit"]').simulate('click');
       wrapper.update();
-      wrapper.find('InnerWrapper[data-test-id="widget-add"]').simulate('click');
+      wrapper.find('AddButton[data-test-id="widget-add"]').simulate('click');
       expect(openEditModal).toHaveBeenCalledTimes(1);
       expect(openEditModal).toHaveBeenCalledWith(
         expect.objectContaining({

tests/js/spec/views/dashboardsV2/gridLayout/detail.spec.jsx

@@ -376,7 +376,7 @@ describe('Dashboards > Detail', function () {
       // Enter edit mode.
       wrapper.find('Controls Button[data-test-id="dashboard-edit"]').simulate('click');
       wrapper.update();
-      wrapper.find('InnerWrapper[data-test-id="widget-add"]').simulate('click');
+      wrapper.find('AddButton[data-test-id="widget-add"]').simulate('click');
       expect(openEditModal).toHaveBeenCalledTimes(1);
     });
 
@@ -409,7 +409,7 @@ describe('Dashboards > Detail', function () {
       // Enter edit mode.
       wrapper.find('Controls Button[data-test-id="dashboard-edit"]').simulate('click');
       wrapper.update();
-      wrapper.find('InnerWrapper[data-test-id="widget-add"]').simulate('click');
+      wrapper.find('AddButton[data-test-id="widget-add"]').simulate('click');
       expect(openEditModal).toHaveBeenCalledTimes(1);
       expect(openEditModal).toHaveBeenCalledWith(
         expect.objectContaining({