NewPanelEditor: UI update of add panel widget (#23715)

* Small update proposal to add panel widget

* Fix smoketest

* Minor tweaks

* update snaps god damn it

e2e/suite1/specs/smoketests.spec.ts

@@ -13,7 +13,7 @@ e2e.scenario({
       e2e.flows.openDashboard(lastAddedDashboardUid);
       e2e.flows.openDashboard(lastAddedDashboardUid);
     });
     });
     e2e.pages.Dashboard.Toolbar.toolbarItems('Add panel').click();
     e2e.pages.Dashboard.Toolbar.toolbarItems('Add panel').click();
-    e2e.pages.AddDashboard.ctaButtons('Add Query').click();
+    e2e.pages.AddDashboard.addNewPanel().click();
 
 
     e2e.components.DataSource.TestData.QueryTab.scenarioSelect().select('CSV Metric Values');
     e2e.components.DataSource.TestData.QueryTab.scenarioSelect().select('CSV Metric Values');
 
 

packages/grafana-e2e/src/flows/addPanel.ts

@@ -19,7 +19,7 @@ export const addPanel = (config?: Partial<AddPanelConfig>) => {
   getScenarioContext().then(({ lastAddedDashboardUid }) => {
   getScenarioContext().then(({ lastAddedDashboardUid }) => {
     e2e.flows.openDashboard(lastAddedDashboardUid);
     e2e.flows.openDashboard(lastAddedDashboardUid);
     e2e.pages.Dashboard.Toolbar.toolbarItems('Add panel').click();
     e2e.pages.Dashboard.Toolbar.toolbarItems('Add panel').click();
-    e2e.pages.AddDashboard.ctaButtons('Add Query').click();
+    e2e.pages.AddDashboard.addNewPanel().click();
     e2e()
     e2e()
       .get('.ds-picker')
       .get('.ds-picker')
       .click()
       .click()

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

@@ -3,6 +3,6 @@ import { pageFactory } from '../support';
 export const AddDashboard = pageFactory({
 export const AddDashboard = pageFactory({
   url: '/dashboard/new',
   url: '/dashboard/new',
   selectors: {
   selectors: {
-    ctaButtons: (text: string) => `Add Panel Widget CTA Button ${text}`,
+    addNewPanel: 'Add new panel',
   },
   },
 });
 });

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

@@ -8,6 +8,7 @@ const setup = (propOverrides?: object) => {
     dashboard: {} as DashboardModel,
     dashboard: {} as DashboardModel,
     panel: {} as PanelModel,
     panel: {} as PanelModel,
     addPanel: jest.fn() as any,
     addPanel: jest.fn() as any,
+    updateLocation: jest.fn() as any,
   };
   };
 
 
   Object.assign(props, propOverrides);
   Object.assign(props, propOverrides);

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

@@ -2,97 +2,30 @@
 
 
 exports[`Render should render component 1`] = `
 exports[`Render should render component 1`] = `
 <div
 <div
-  className="panel-container add-panel-widget-container"
+  className="panel-container css-1sl7nld"
 >
 >
+  <AddPanelWidgetHandle
+    onCancel={[Function]}
+  />
   <div
   <div
-    className="add-panel-widget"
+    className="css-1wtsk46"
   >
   >
-    <div
-      className="add-panel-widget__header grid-drag-handle"
-    >
-      <Icon
-        name="panel-add"
-        size="xl"
-        style={
-          Object {
-            "margin": "4px",
-            "marginRight": "8px",
-          }
-        }
-        type="mono"
-      />
-      <span
-        className="add-panel-widget__title"
+    <AddPanelWidgetCreate
+      onCreate={[Function]}
+      onPasteCopiedPanel={[Function]}
+    />
+    <div>
+      <Component
+        justify="center"
       >
       >
-        New Panel
-      </span>
-      <div
-        className="flex-grow-1"
-      />
-      <IconButton
-        className="add-panel-widget__close"
-        name="times"
-        onClick={[Function]}
-        surface="header"
-      />
-    </div>
-    <div
-      className="add-panel-widget__btn-container"
-    >
-      <div
-        className="add-panel-widget__create"
-      >
-        <div>
-          <a
-            aria-label="Add Panel Widget CTA Button Add Query"
-            className="add-panel-widget__link btn btn-inverse"
-            href="#"
-            onClick={[Function]}
-          >
-            <div
-              className="add-panel-widget__icon"
-            >
-              <Icon
-                name="database"
-                size="xl"
-              />
-            </div>
-            <span>
-              Add Query
-            </span>
-          </a>
-        </div>
-        <div>
-          <a
-            aria-label="Add Panel Widget CTA Button Choose Visualization"
-            className="add-panel-widget__link btn btn-inverse"
-            href="#"
-            onClick={[Function]}
-          >
-            <div
-              className="add-panel-widget__icon"
-            >
-              <Icon
-                name="chart-line"
-                size="xl"
-              />
-            </div>
-            <span>
-              Choose Visualization
-            </span>
-          </a>
-        </div>
-      </div>
-      <div
-        className="add-panel-widget__actions"
-      >
-        <button
-          className="btn btn-inverse add-panel-widget__action"
+        <Button
           onClick={[Function]}
           onClick={[Function]}
+          size="sm"
+          variant="secondary"
         >
         >
           Convert to row
           Convert to row
-        </button>
-      </div>
+        </Button>
+      </Component>
     </div>
     </div>
   </div>
   </div>
 </div>
 </div>