minor layout change, simple render test

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { AddPanelWidget, Props } from './AddPanelWidget';
+import { DashboardModel, PanelModel } from '../../state';
+
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    dashboard: {} as DashboardModel,
+    panel: {} as PanelModel,
+  };
+
+  Object.assign(props, propOverrides);
+
+  return shallow(<AddPanelWidget {...props} />);
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const wrapper = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import _ from 'lodash';
 import config from 'app/core/config';
-import { PanelModel } from '../../state/PanelModel';
+import { PanelModel } from '../../state';
-import { DashboardModel } from '../../state/DashboardModel';
+import { DashboardModel } from '../../state';
 import store from 'app/core/store';
 import { LS_PANEL_COPY_KEY } from 'app/core/constants';
 import { updateLocation } from 'app/core/actions';
@@ -57,6 +57,7 @@ export class AddPanelWidget extends React.Component<Props, State> {
         copiedPanels.push(pluginCopy);
       }
     }
+
     return _.sortBy(copiedPanels, 'sort');
   }
 
@@ -65,14 +66,6 @@ export class AddPanelWidget extends React.Component<Props, State> {
     this.props.dashboard.removePanel(this.props.dashboard.panels[0]);
   }
 
-  copyButton(panel) {
-    return (
-      <button className="btn-inverse btn" onClick={() => this.onPasteCopiedPanel(panel)} title={panel.name}>
-        Paste copied Panel
-      </button>
-    );
-  }
-
   moveToEdit(location) {
     reduxStore.dispatch(updateLocation(location));
   }
@@ -151,7 +144,7 @@ export class AddPanelWidget extends React.Component<Props, State> {
   renderOptionLink = (icon, text, onClick) => {
     return (
       <div>
-        <a href="#" onClick={onClick} className="add-panel-widget__link btn-inverse">
+        <a href="#" onClick={onClick} className="add-panel-widget__link btn btn-inverse">
           <div className="add-panel-widget__icon">
             <i className={`gicon gicon-${icon}`} />
           </div>
@@ -162,6 +155,8 @@ export class AddPanelWidget extends React.Component<Props, State> {
   };
 
   render() {
+    const { copiedPanelPlugins } = this.state;
+
     return (
       <div className="panel-container add-panel-widget-container">
         <div className="add-panel-widget">
@@ -172,9 +167,25 @@ export class AddPanelWidget extends React.Component<Props, State> {
             </button>
           </div>
           <div className="add-panel-widget__btn-container">
-            {this.renderOptionLink('queries', 'Add query', this.onCreateNewPanel)}
+            <div className="add-panel-widget__create">
-            {this.renderOptionLink('visualization', 'Choose Panel type', () => this.onCreateNewPanel('visualization'))}
+              {this.renderOptionLink('queries', 'Add query', this.onCreateNewPanel)}
-            {this.renderOptionLink('queries', 'Convert to row', this.onCreateNewRow)}
+              {this.renderOptionLink('visualization', 'Choose Panel type', () =>
+                this.onCreateNewPanel('visualization')
+              )}
+            </div>
+            <div className="add-panel-widget__actions">
+              <div className="add-panel-widget__action" onClick={this.onCreateNewRow}>
+                Convert to row
+              </div>
+              {copiedPanelPlugins.length === 1 && (
+                <div
+                  className="add-panel-widget__action"
+                  onClick={() => this.onPasteCopiedPanel(copiedPanelPlugins[0])}
+                >
+                  Paste copied panel
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </div>

public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss

@@ -27,11 +27,8 @@
 }
 
 .add-panel-widget__link {
-  display: block;
   margin: 0 8px;
-  width: 130px;
+  width: 150px;
-  text-align: center;
-  padding: 8px 0;
 }
 
 .add-panel-widget__icon {
@@ -54,14 +51,24 @@
   margin-right: -10px;
 }
 
+.add-panel-widget__create {
+  display: inherit;
+  margin-bottom: 24px;
+}
+
+.add-panel-widget__actions {
+  display: inherit;
+}
+
+.add-panel-widget__action {
+  cursor: pointer;
+  margin: 0 4px;
+}
+
 .add-panel-widget__btn-container {
+  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
+  flex-direction: column;
-  flex-direction: row;
-
-  .btn {
-    margin-bottom: 10px;
-  }
 }

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

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<div
+  className="panel-container add-panel-widget-container"
+>
+  <div
+    className="add-panel-widget"
+  >
+    <div
+      className="add-panel-widget__header grid-drag-handle"
+    >
+      <i
+        className="gicon gicon-add-panel"
+      />
+      <button
+        className="add-panel-widget__close"
+        onClick={[Function]}
+      >
+        <i
+          className="fa fa-close"
+        />
+      </button>
+    </div>
+    <div
+      className="add-panel-widget__btn-container"
+    >
+      <div
+        className="add-panel-widget__create"
+      >
+        <div>
+          <a
+            className="add-panel-widget__link btn btn-inverse"
+            href="#"
+            onClick={[Function]}
+          >
+            <div
+              className="add-panel-widget__icon"
+            >
+              <i
+                className="gicon gicon-queries"
+              />
+            </div>
+            <span>
+              Add query
+            </span>
+          </a>
+        </div>
+        <div>
+          <a
+            className="add-panel-widget__link btn btn-inverse"
+            href="#"
+            onClick={[Function]}
+          >
+            <div
+              className="add-panel-widget__icon"
+            >
+              <i
+                className="gicon gicon-visualization"
+              />
+            </div>
+            <span>
+              Choose Panel type
+            </span>
+          </a>
+        </div>
+      </div>
+      <div
+        className="add-panel-widget__actions"
+      >
+        <div
+          className="add-panel-widget__action"
+          onClick={[Function]}
+        >
+          Convert to row
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;