Updated add panel related flows

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

@@ -1,12 +1,20 @@
+// Libraries
 import React from 'react';
 import _ from 'lodash';
+
+// Utils
 import config from 'app/core/config';
+import store from 'app/core/store';
+
+// Store
+import { store as reduxStore } from 'app/store/store';
+import { updateLocation } from 'app/core/actions';
+
+// Types
 import { PanelModel } from '../../state';
 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';
-import { store as reduxStore } from 'app/store/store';
+import { LocationUpdate } from 'app/types';
 
 export interface Props {
   panel: PanelModel;
@@ -17,17 +25,6 @@ export interface State {
   copiedPanelPlugins: any[];
 }
 
-type Location = {
-  query: {
-    panelId: number;
-    edit: boolean;
-    fullscreen: boolean;
-    tab?: string;
-    isVizPickerOpen?: boolean;
-  };
-  partial: boolean;
-};
-
 export class AddPanelWidget extends React.Component<Props, State> {
   constructor(props) {
     super(props);
@@ -66,10 +63,6 @@ export class AddPanelWidget extends React.Component<Props, State> {
     this.props.dashboard.removePanel(this.props.dashboard.panels[0]);
   }
 
-  moveToEdit(location) {
-    reduxStore.dispatch(updateLocation(location));
-  }
-
   onCreateNewPanel = (tab = 'queries') => {
     const dashboard = this.props.dashboard;
     const { gridPos } = this.props.panel;
@@ -83,7 +76,7 @@ export class AddPanelWidget extends React.Component<Props, State> {
     dashboard.addPanel(newPanel);
     dashboard.removePanel(this.props.panel);
 
-    let location: Location = {
+    const location: LocationUpdate = {
       query: {
         panelId: newPanel.id,
         edit: true,
@@ -93,18 +86,11 @@ export class AddPanelWidget extends React.Component<Props, State> {
     };
 
     if (tab === 'visualization') {
-      location = {
-        ...location,
-        query: {
-          ...location.query,
-          tab: 'visualization',
-          isVizPickerOpen: true,
-        },
-      };
-      this.moveToEdit(location);
-    } else {
-      this.moveToEdit(location);
+      location.query.tab = 'visualization';
+      location.query.openVizPicker  = true;
     }
+
+    reduxStore.dispatch(updateLocation(location));
   };
 
   onPasteCopiedPanel = panelPluginInfo => {
@@ -162,28 +148,27 @@ export class AddPanelWidget extends React.Component<Props, State> {
         <div className="add-panel-widget">
           <div className="add-panel-widget__header grid-drag-handle">
             <i className="gicon gicon-add-panel" />
+            <span className="add-panel-widget__title">New Panel</span>
             <button className="add-panel-widget__close" onClick={this.handleCloseAddPanel}>
               <i className="fa fa-close" />
             </button>
           </div>
           <div className="add-panel-widget__btn-container">
             <div className="add-panel-widget__create">
-              {this.renderOptionLink('queries', 'Add query', this.onCreateNewPanel)}
-              {this.renderOptionLink('visualization', 'Choose Panel type', () =>
+              {this.renderOptionLink('queries', 'Add Query', this.onCreateNewPanel)}
+              {this.renderOptionLink('visualization', 'Choose Visualization', () =>
                 this.onCreateNewPanel('visualization')
               )}
             </div>
             <div className="add-panel-widget__actions">
-              <div className="add-panel-widget__action" onClick={this.onCreateNewRow}>
-                Convert to row
-              </div>
+              <button className="btn btn-inverse add-panel-widget__action" onClick={this.onCreateNewRow}>Convert to row</button>
               {copiedPanelPlugins.length === 1 && (
-                <div
-                  className="add-panel-widget__action"
+                <button
+                  className="btn btn-inverse add-panel-widget__action"
                   onClick={() => this.onPasteCopiedPanel(copiedPanelPlugins[0])}
                 >
                   Paste copied panel
-                </div>
+                </button>
               )}
             </div>
           </div>

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

@@ -14,6 +14,9 @@
   align-items: center;
   width: 100%;
   cursor: move;
+  background: $page-header-bg;
+  box-shadow: $page-header-shadow;
+  border-bottom: 1px solid $page-header-border-color;
 
   .gicon {
     font-size: 30px;
@@ -26,9 +29,15 @@
   }
 }
 
+.add-panel-widget__title {
+  font-size: $font-size-md;
+  font-weight: $font-weight-semi-bold;
+  margin-right: $spacer*2;
+}
+
 .add-panel-widget__link {
   margin: 0 8px;
-  width: 150px;
+  width: 154px;
 }
 
 .add-panel-widget__icon {
@@ -54,6 +63,8 @@
 .add-panel-widget__create {
   display: inherit;
   margin-bottom: 24px;
+  // this is to have the big button appear centered
+  margin-top: 55px;
 }
 
 .add-panel-widget__actions {
@@ -61,7 +72,6 @@
 }
 
 .add-panel-widget__action {
-  cursor: pointer;
   margin: 0 4px;
 }
 

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

@@ -13,6 +13,11 @@ exports[`Render should render component 1`] = `
       <i
         className="gicon gicon-add-panel"
       />
+      <span
+        className="add-panel-widget__title"
+      >
+        New Panel
+      </span>
       <button
         className="add-panel-widget__close"
         onClick={[Function]}
@@ -42,7 +47,7 @@ exports[`Render should render component 1`] = `
               />
             </div>
             <span>
-              Add query
+              Add Query
             </span>
           </a>
         </div>
@@ -60,7 +65,7 @@ exports[`Render should render component 1`] = `
               />
             </div>
             <span>
-              Choose Panel type
+              Choose Visualization
             </span>
           </a>
         </div>
@@ -68,12 +73,12 @@ exports[`Render should render component 1`] = `
       <div
         className="add-panel-widget__actions"
       >
-        <div
-          className="add-panel-widget__action"
+        <button
+          className="btn btn-inverse add-panel-widget__action"
           onClick={[Function]}
         >
           Convert to row
-        </div>
+        </button>
       </div>
     </div>
   </div>