From 6ee2f1fe3e6311c88215c28d5923f2c4ea839697 Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Mon, 14 Jun 2021 15:12:56 +0100
Subject: [PATCH] Add Panel: fixes No gap between rows in safari (#35570)

* 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
---
 .../src/selectors/pages.ts                    |  2 +
 .../AddPanelWidget/AddPanelWidget.test.tsx    | 23 ++++---
 .../AddPanelWidget/AddPanelWidget.tsx         | 20 ++++--
 .../AddPanelWidget.test.tsx.snap              | 68 -------------------
 4 files changed, 30 insertions(+), 83 deletions(-)
 delete mode 100644 public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap

diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts
index 93ced013539..cf42d5b3bca 100644
--- a/packages/grafana-e2e-selectors/src/selectors/pages.ts
+++ b/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}`,
diff --git a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.test.tsx b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.test.tsx
index 2d567f5f4da..623c103bd7b 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.test.tsx
+++ b/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 shallow(<AddPanelWidget {...props} />);
+  return render(<AddPanelWidget {...props} />);
 };
 
-describe('Render', () => {
-  it('should render component', () => {
-    const wrapper = setup();
+describe('AddPanelWidget', () => {
+  it('should render component without error', () => {
+    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();
   });
 });
diff --git a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
index ff95990c30e..fd7b1b614d5 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
+++ b/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%;
     `,
diff --git a/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap b/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
deleted file mode 100644
index 57ca4096985..00000000000
--- a/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
+++ /dev/null
@@ -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>
-`;