Collapse: add a controlled collapse (#22046)

packages/grafana-ui/src/components/Collapse/Collapse.tsx

@@ -1,15 +1,15 @@
-import React, { FunctionComponent, useContext } from 'react';
+import React, { FunctionComponent, useContext, useState } from 'react';
 import { css, cx } from 'emotion';
 
 import { GrafanaTheme } from '@grafana/data';
-import { selectThemeVariant } from '../../themes/selectThemeVariant';
 import { ThemeContext } from '../../themes/ThemeContext';
 import { stylesFactory } from '../../themes/stylesFactory';
+import { Icon } from '../Icon/Icon';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => ({
   collapse: css`
     label: collapse;
-    margin-top: ${theme.spacing.sm};
+    margin-bottom: ${theme.spacing.sm};
   `,
   collapseBody: css`
     label: collapse__body;
@@ -51,7 +51,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
   `,
   header: css`
     label: collapse__header;
-    padding: ${theme.spacing.sm} ${theme.spacing.md} 0 ${theme.spacing.md};
+    padding: ${theme.spacing.sm} ${theme.spacing.md};
     display: flex;
     cursor: inherit;
     transition: all 0.1s linear;
@@ -60,7 +60,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
   headerCollapsed: css`
     label: collapse__header--collapsed;
     cursor: pointer;
-    padding: ${theme.spacing.sm} ${theme.spacing.md} 0 ${theme.spacing.md};
+    padding: ${theme.spacing.sm} ${theme.spacing.md};
   `,
   headerButtons: css`
     label: collapse__header-buttons;
@@ -78,7 +78,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
     font-weight: ${theme.typography.weight.semibold};
     margin-right: ${theme.spacing.sm};
     font-size: ${theme.typography.heading.h6};
-    box-shadow: ${selectThemeVariant({ light: 'none', dark: '1px 1px 4px rgb(45, 45, 45)' }, theme.type)};
   `,
 }));
 
@@ -90,6 +89,22 @@ interface Props {
   onToggle?: (isOpen: boolean) => void;
 }
 
+export const ControlledCollapse: FunctionComponent<Props> = ({ isOpen, onToggle, ...otherProps }) => {
+  const [open, setOpen] = useState(isOpen);
+  return (
+    <Collapse
+      isOpen={open}
+      {...otherProps}
+      onToggle={() => {
+        setOpen(!open);
+        if (onToggle) {
+          onToggle(!open);
+        }
+      }}
+    />
+  );
+};
+
 export const Collapse: FunctionComponent<Props> = ({ isOpen, label, loading, collapsible, onToggle, children }) => {
   const theme = useContext(ThemeContext);
   const style = getStyles(theme);
@@ -100,7 +115,6 @@ export const Collapse: FunctionComponent<Props> = ({ isOpen, label, loading, col
   };
 
   const panelClass = cx([style.collapse, 'panel-container']);
-  const iconClass = isOpen ? 'fa fa-caret-up' : 'fa fa-caret-down';
   const loaderClass = loading ? cx([style.loader, style.loaderActive]) : cx([style.loader]);
   const headerClass = collapsible ? cx([style.header]) : cx([style.headerCollapsed]);
   const headerButtonsClass = collapsible ? cx([style.headerButtons]) : cx([style.headerButtonsCollapsed]);
@@ -109,7 +123,7 @@ export const Collapse: FunctionComponent<Props> = ({ isOpen, label, loading, col
     <div className={panelClass}>
       <div className={headerClass} onClick={onClickToggle}>
         <div className={headerButtonsClass}>
-          <span className={iconClass} />
+          <Icon name={isOpen ? 'caret-up' : 'caret-down'} />
         </div>
         <div className={cx([style.headerLabel])}>{label}</div>
       </div>

packages/grafana-ui/src/components/FieldConfigs/FieldConfigEditor.tsx

@@ -10,6 +10,7 @@ import {
 import { standardFieldConfigEditorRegistry } from './standardFieldConfigEditorRegistry';
 import Forms from '../Forms';
 import { fieldMatchersUI } from '../MatchersUI/fieldMatchersUI';
+import { ControlledCollapse } from '../Collapse/Collapse';
 
 interface Props {
   config: FieldConfigSource;
@@ -214,10 +215,17 @@ export class FieldConfigEditor extends React.PureComponent<Props> {
   render() {
     return (
       <div>
-        {this.renderStandardConfigs()}
-        {this.renderCustomConfigs()}
-        {this.renderAddOverride()}
-        {this.renderOverrides()}
+        <ControlledCollapse label="Standard Field Configuration" collapsible>
+          {this.renderStandardConfigs()}
+        </ControlledCollapse>
+        {this.props.custom && (
+          <ControlledCollapse label="Standard Field Configuration">{this.renderCustomConfigs()}</ControlledCollapse>
+        )}
+
+        <ControlledCollapse label="Field Overrides" collapsible>
+          {this.renderAddOverride()}
+          {this.renderOverrides()}
+        </ControlledCollapse>
       </div>
     );
   }

packages/grafana-ui/src/components/index.ts

@@ -84,7 +84,7 @@ export {
 
 export { Alert, AlertVariant } from './Alert/Alert';
 export { GraphSeriesToggler, GraphSeriesTogglerAPI } from './Graph/GraphSeriesToggler';
-export { Collapse } from './Collapse/Collapse';
+export { Collapse, ControlledCollapse } from './Collapse/Collapse';
 export { LogLabels } from './Logs/LogLabels';
 export { LogRows } from './Logs/LogRows';
 export { getLogRowStyles } from './Logs/getLogRowStyles';