NewPanelEdit: Added visualization tab / selection view (#22117)

* NewPanelEdit: Added visualization tab

* Minor fix

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

@@ -280,7 +280,8 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
 }
 
 const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (state, props) => {
-  const plugin = state.plugins.panels[props.sourcePanel.type];
+  const panel = state.panelEditorNew.getPanel();
+  const plugin = state.plugins.panels[panel.type];
 
   return {
     location: state.location,

public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx

@@ -8,6 +8,7 @@ import { DashboardModel } from '../../state';
 import { QueriesTab } from '../../panel_editor/QueriesTab';
 import { PanelModel } from '../../state/PanelModel';
 import { AlertTab } from 'app/features/alerting/AlertTab';
+import { VisualizationTab } from './VisualizationTab';
 
 interface PanelEditorTabsProps {
   panel: PanelModel;
@@ -39,6 +40,7 @@ export const PanelEditorTabs: React.FC<PanelEditorTabsProps> = ({ panel, dashboa
       <TabContent className={styles.tabContent}>
         {activeTab.id === PanelEditorTabId.Queries && <QueriesTab panel={panel} dashboard={dashboard} />}
         {activeTab.id === PanelEditorTabId.Alert && <AlertTab panel={panel} dashboard={dashboard} />}
+        {activeTab.id === PanelEditorTabId.Visualization && <VisualizationTab panel={panel} />}
         {activeTab.id === PanelEditorTabId.Transform && data.state !== LoadingState.NotStarted && (
           <TransformationsEditor
             transformations={panel.transformations || []}

public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx

@@ -0,0 +1,60 @@
+import React, { FC } from 'react';
+import { css } from 'emotion';
+import { GrafanaTheme, PanelPlugin, PanelPluginMeta } from '@grafana/data';
+import { useTheme, stylesFactory } from '@grafana/ui';
+import { changePanelPlugin } from '../../state/actions';
+import { StoreState } from 'app/types';
+import { PanelModel } from '../../state/PanelModel';
+import { connect, MapStateToProps, MapDispatchToProps } from 'react-redux';
+import { VizTypePicker } from '../../panel_editor/VizTypePicker';
+
+interface OwnProps {
+  panel: PanelModel;
+}
+
+interface ConnectedProps {
+  plugin?: PanelPlugin;
+}
+
+interface DispatchProps {
+  changePanelPlugin: typeof changePanelPlugin;
+}
+
+type Props = OwnProps & ConnectedProps & DispatchProps;
+
+export const VisualizationTabUnconnected: FC<Props> = ({ panel, plugin, changePanelPlugin }) => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  if (!plugin) {
+    return null;
+  }
+
+  const onPluginTypeChange = (meta: PanelPluginMeta) => {
+    changePanelPlugin(panel, meta.id);
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      <VizTypePicker current={plugin.meta} onTypeChange={onPluginTypeChange} searchQuery={''} onClose={() => {}} />
+    </div>
+  );
+};
+
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
+  return {
+    wrapper: css`
+      padding: ${theme.spacing.md};
+    `,
+  };
+});
+
+const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (state, props) => {
+  return {
+    plugin: state.plugins.panels[props.panel.type],
+  };
+};
+
+const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = { changePanelPlugin };
+
+export const VisualizationTab = connect(mapStateToProps, mapDispatchToProps)(VisualizationTabUnconnected);