Add Panel: fixes No gap between rows in safari (#35570) (#35661)

* Add Panel: fixes No gap between rows in safari

* removes extra margin from bottom and far right

* fixes frontend test

* make add panel actions accessible and rewrite test using RTL

(cherry picked from commit 6ee2f1fe3e)

Co-authored-by: Uchechukwu Obasi <obasiuche62@gmail.com>

packages/grafana-e2e-selectors/src/selectors/pages.ts

@@ -32,6 +32,8 @@ export const Pages = {
   AddDashboard: {
     url: '/dashboard/new',
     addNewPanel: 'Add new panel',
+    addNewRow: 'Add new row',
+    addNewPanelLibrary: 'Add new panel from panel library',
   },
   Dashboard: {
     url: (uid: string) => `/d/${uid}`,

public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.test.tsx

@@ -1,24 +1,29 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { AddPanelWidgetUnconnected as AddPanelWidget, Props } from './AddPanelWidget';
 import { DashboardModel, PanelModel } from '../../state';
 
-const setup = (propOverrides?: object) => {
+const getTestContext = (propOverrides?: object) => {
   const props: Props = {
     dashboard: {} as DashboardModel,
     panel: {} as PanelModel,
     addPanel: jest.fn() as any,
   };
-
   Object.assign(props, propOverrides);
-
+  return render(<AddPanelWidget {...props} />);
-  return shallow(<AddPanelWidget {...props} />);
 };
 
-describe('Render', () => {
+describe('AddPanelWidget', () => {
-  it('should render component', () => {
+  it('should render component without error', () => {
-    const wrapper = setup();
+    expect(() => {
+      getTestContext();
+    });
+  });
 
-    expect(wrapper).toMatchSnapshot();
+  it('should render the add panel actions', () => {
+    getTestContext();
+    expect(screen.getByText(/Add an empty panel/i)).toBeInTheDocument();
+    expect(screen.getByText(/Add a new row/i)).toBeInTheDocument();
+    expect(screen.getByText(/Add a panel from the panel library/i)).toBeInTheDocument();
   });
 });

public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx

@@ -145,23 +145,27 @@ export const AddPanelWidgetUnconnected: React.FC<Props> = ({ panel, dashboard })
           <LibraryPanelsSearch onClick={onAddLibraryPanel} variant={LibraryPanelsSearchVariant.Tight} showPanelFilter />
         ) : (
           <div className={styles.actionsWrapper}>
-            <div className={styles.actionsRow}>
+            <div className={cx(styles.actionsRow, styles.columnGap)}>
               <div onClick={() => onCreateNewPanel()} aria-label={selectors.pages.AddDashboard.addNewPanel}>
                 <Icon name="file-blank" size="xl" />
                 Add an empty panel
               </div>
-              <div onClick={onCreateNewRow}>
+              <div
+                className={styles.rowGap}
+                onClick={onCreateNewRow}
+                aria-label={selectors.pages.AddDashboard.addNewRow}
+              >
                 <Icon name="wrap-text" size="xl" />
                 Add a new row
               </div>
             </div>
             <div className={styles.actionsRow}>
-              <div onClick={() => setAddPanelView(true)}>
+              <div onClick={() => setAddPanelView(true)} aria-label={selectors.pages.AddDashboard.addNewPanelLibrary}>
                 <Icon name="book-open" size="xl" />
                 Add a panel from the panel library
               </div>
               {copiedPanelPlugins.length === 1 && (
-                <div onClick={() => onPasteCopiedPanel(copiedPanelPlugins[0])}>
+                <div className={styles.rowGap} onClick={() => onPasteCopiedPanel(copiedPanelPlugins[0])}>
                   <Icon name="clipboard-alt" size="xl" />
                   Paste panel from clipboard
                 </div>
@@ -227,10 +231,15 @@ const getStyles = (theme: GrafanaTheme) => {
       box-shadow: 0 0 0 2px black, 0 0 0px 4px #1f60c4;
       animation: ${pulsate} 2s ease infinite;
     `,
+    rowGap: css`
+      margin-left: ${theme.spacing.sm};
+    `,
+    columnGap: css`
+      margin-bottom: ${theme.spacing.sm};
+    `,
     actionsRow: css`
       display: flex;
       flex-direction: row;
-      column-gap: ${theme.spacing.sm};
       height: 100%;
 
       > div {
@@ -258,7 +267,6 @@ const getStyles = (theme: GrafanaTheme) => {
     actionsWrapper: css`
       display: flex;
       flex-direction: column;
-      row-gap: ${theme.spacing.sm};
       padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
       height: 100%;
     `,

public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap

@@ -1,68 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<div
-  className="css-1q8dxo2"
->
-  <div
-    className="panel-container css-e4b3m6"
-  >
-    <AddPanelWidgetHandle
-      onCancel={[Function]}
-      styles={
-        Object {
-          "actionsRow": "css-1j3dhm4",
-          "actionsWrapper": "css-gxxmom",
-          "backButton": "css-1cdxa9p",
-          "callToAction": "css-e4b3m6",
-          "headerRow": "css-3sdqvi",
-          "noMargin": "css-u023fv",
-          "wrapper": "css-1q8dxo2",
-        }
-      }
-    >
-      Add panel
-    </AddPanelWidgetHandle>
-    <div
-      className="css-gxxmom"
-    >
-      <div
-        className="css-1j3dhm4"
-      >
-        <div
-          aria-label="Add new panel"
-          onClick={[Function]}
-        >
-          <Icon
-            name="file-blank"
-            size="xl"
-          />
-          Add an empty panel
-        </div>
-        <div
-          onClick={[Function]}
-        >
-          <Icon
-            name="wrap-text"
-            size="xl"
-          />
-          Add a new row
-        </div>
-      </div>
-      <div
-        className="css-1j3dhm4"
-      >
-        <div
-          onClick={[Function]}
-        >
-          <Icon
-            name="book-open"
-            size="xl"
-          />
-          Add a panel from the panel library
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;