AddPanelWidget: Add padding to prevent top being cut off (#34806)

* fix(dashboardpage): add padding so add panel chrome isnt cut off

* fix(addpanelwidget): introduce wrapping element to cater for pulsate animation offset

* refactor(addpanelwidget): use spacing.xs rather than spacing.sm

* test(addpanelwidget): update snapshot

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

@@ -136,38 +136,40 @@ export const AddPanelWidgetUnconnected: React.FC<Props> = ({ panel, dashboard })
   const copiedPanelPlugins = useMemo(() => getCopiedPanelPlugins(), []);
 
   return (
-    <div className={cx('panel-container', styles.wrapper)}>
-      <AddPanelWidgetHandle onCancel={onCancelAddPanel} onBack={addPanelView ? onBack : undefined} styles={styles}>
-        {addPanelView ? 'Add panel from panel library' : 'Add panel'}
-      </AddPanelWidgetHandle>
-      {addPanelView ? (
-        <LibraryPanelsSearch onClick={onAddLibraryPanel} variant={LibraryPanelsSearchVariant.Tight} showPanelFilter />
-      ) : (
-        <div className={styles.actionsWrapper}>
-          <div className={styles.actionsRow}>
-            <div onClick={() => onCreateNewPanel()} aria-label={selectors.pages.AddDashboard.addNewPanel}>
-              <Icon name="file-blank" size="xl" />
-              Add an empty panel
-            </div>
-            <div onClick={onCreateNewRow}>
-              <Icon name="wrap-text" size="xl" />
-              Add a new row
-            </div>
-          </div>
-          <div className={styles.actionsRow}>
-            <div onClick={() => setAddPanelView(true)}>
-              <Icon name="book-open" size="xl" />
-              Add a panel from the panel library
+    <div className={styles.wrapper}>
+      <div className={cx('panel-container', styles.callToAction)}>
+        <AddPanelWidgetHandle onCancel={onCancelAddPanel} onBack={addPanelView ? onBack : undefined} styles={styles}>
+          {addPanelView ? 'Add panel from panel library' : 'Add panel'}
+        </AddPanelWidgetHandle>
+        {addPanelView ? (
+          <LibraryPanelsSearch onClick={onAddLibraryPanel} variant={LibraryPanelsSearchVariant.Tight} showPanelFilter />
+        ) : (
+          <div className={styles.actionsWrapper}>
+            <div className={styles.actionsRow}>
+              <div onClick={() => onCreateNewPanel()} aria-label={selectors.pages.AddDashboard.addNewPanel}>
+                <Icon name="file-blank" size="xl" />
+                Add an empty panel
+              </div>
+              <div onClick={onCreateNewRow}>
+                <Icon name="wrap-text" size="xl" />
+                Add a new row
+              </div>
             </div>
-            {copiedPanelPlugins.length === 1 && (
-              <div onClick={() => onPasteCopiedPanel(copiedPanelPlugins[0])}>
-                <Icon name="clipboard-alt" size="xl" />
-                Paste panel from clipboard
+            <div className={styles.actionsRow}>
+              <div onClick={() => setAddPanelView(true)}>
+                <Icon name="book-open" size="xl" />
+                Add a panel from the panel library
               </div>
-            )}
+              {copiedPanelPlugins.length === 1 && (
+                <div onClick={() => onPasteCopiedPanel(copiedPanelPlugins[0])}>
+                  <Icon name="clipboard-alt" size="xl" />
+                  Paste panel from clipboard
+                </div>
+              )}
+            </div>
           </div>
-        </div>
-      )}
+        )}
+      </div>
     </div>
   );
 };
@@ -213,7 +215,12 @@ const getStyles = (theme: GrafanaTheme) => {
   `;
 
   return {
+    // wrapper is used to make sure box-shadow animation isn't cut off in dashboard page
     wrapper: css`
+      height: 100%;
+      padding-top: ${theme.spacing.xs};
+    `,
+    callToAction: css`
       overflow: hidden;
       outline: 2px dotted transparent;
       outline-offset: 2px;

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

@@ -2,60 +2,65 @@
 
 exports[`Render should render component 1`] = `
 <div
-  className="panel-container css-e4b3m6"
+  className="css-1q8dxo2"
 >
-  <AddPanelWidgetHandle
-    onCancel={[Function]}
-    styles={
-      Object {
-        "actionsRow": "css-l02n0m",
-        "actionsWrapper": "css-gxxmom",
-        "backButton": "css-1cdxa9p",
-        "headerRow": "css-3sdqvi",
-        "noMargin": "css-u023fv",
-        "wrapper": "css-e4b3m6",
-      }
-    }
-  >
-    Add panel
-  </AddPanelWidgetHandle>
   <div
-    className="css-gxxmom"
+    className="panel-container css-e4b3m6"
   >
+    <AddPanelWidgetHandle
+      onCancel={[Function]}
+      styles={
+        Object {
+          "actionsRow": "css-l02n0m",
+          "actionsWrapper": "css-gxxmom",
+          "backButton": "css-1cdxa9p",
+          "callToAction": "css-e4b3m6",
+          "headerRow": "css-3sdqvi",
+          "noMargin": "css-u023fv",
+          "wrapper": "css-1q8dxo2",
+        }
+      }
+    >
+      Add panel
+    </AddPanelWidgetHandle>
     <div
-      className="css-l02n0m"
+      className="css-gxxmom"
     >
       <div
-        aria-label="Add new panel"
-        onClick={[Function]}
-      >
-        <Icon
-          name="file-blank"
-          size="xl"
-        />
-        Add an empty panel
-      </div>
-      <div
-        onClick={[Function]}
+        className="css-l02n0m"
       >
-        <Icon
-          name="wrap-text"
-          size="xl"
-        />
-        Add a new row
+        <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>
-    <div
-      className="css-l02n0m"
-    >
       <div
-        onClick={[Function]}
+        className="css-l02n0m"
       >
-        <Icon
-          name="book-open"
-          size="xl"
-        />
-        Add a panel from the panel library
+        <div
+          onClick={[Function]}
+        >
+          <Icon
+            name="book-open"
+            size="xl"
+          />
+          Add a panel from the panel library
+        </div>
       </div>
     </div>
   </div>