Collapse: add a controlled collapse (#22046)

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

@@ -8,7 +8,14 @@ import {
   PanelEvents,
   SelectableValue,
 } from '@grafana/data';
-import { stylesFactory, Forms, FieldConfigEditor, CustomScrollbar, selectThemeVariant } from '@grafana/ui';
+import {
+  stylesFactory,
+  Forms,
+  FieldConfigEditor,
+  CustomScrollbar,
+  selectThemeVariant,
+  ControlledCollapse,
+} from '@grafana/ui';
 import { css, cx } from 'emotion';
 import config from 'app/core/config';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -211,14 +218,12 @@ export class PanelEditor extends PureComponent<Props, State> {
     }
 
     return (
-      <div>
-        <FieldConfigEditor
-          config={fieldOptions}
-          custom={plugin.customFieldConfigs}
-          onChange={this.onFieldConfigsChange}
-          data={data.series}
-        />
-      </div>
+      <FieldConfigEditor
+        config={fieldOptions}
+        custom={plugin.customFieldConfigs}
+        onChange={this.onFieldConfigsChange}
+        data={data.series}
+      />
     );
   }
 
@@ -239,7 +244,7 @@ export class PanelEditor extends PureComponent<Props, State> {
 
     if (plugin.editor && panel) {
       return (
-        <div style={{ marginTop: '40px' }}>
+        <div style={{ marginTop: '10px' }}>
           <plugin.editor data={data} options={panel.getOptions()} onOptionsChange={this.onPanelOptionsChanged} />
         </div>
       );
@@ -359,7 +364,9 @@ export class PanelEditor extends PureComponent<Props, State> {
                 <CustomScrollbar>
                   <div style={{ padding: '10px' }}>
                     {this.renderFieldOptions()}
-                    {this.renderVisSettings()}
+                    <ControlledCollapse label="Visualization Settings" collapsible>
+                      {this.renderVisSettings()}
+                    </ControlledCollapse>
                   </div>
                 </CustomScrollbar>
               </div>

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

@@ -7,6 +7,7 @@ import { EditorTab, allTabs } from './types';
 import { DashboardModel } from '../../state';
 import { QueriesTab } from '../../panel_editor/QueriesTab';
 import { PanelModel } from '../../state/PanelModel';
+import { AlertTab } from 'app/features/alerting/AlertTab';
 
 interface PanelEditorTabsProps {
   panel: PanelModel;
@@ -57,7 +58,7 @@ export const PanelEditorTabs: React.FC<PanelEditorTabsProps> = ({ panel, dashboa
               return (
                 <div style={{ width, height }}>
                   {activeTab === EditorTab.Query && <QueriesTab panel={panel} dashboard={dashboard} />}
-                  {activeTab === EditorTab.Alerts && <div>TODO: Show Alerts</div>}
+                  {activeTab === EditorTab.Alerts && <AlertTab panel={panel} dashboard={dashboard} />}
                   {activeTab === EditorTab.Transform && <div>TODO: Show Transform</div>}
                 </div>
               );