CleanUp: Removed old panel options group component (#30157)

* Removed unused component

* Remove scss import

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

-// Libraries
-import React, { FunctionComponent } from 'react';
-import { Icon } from '../Icon/Icon';
-
-interface Props {
-  title?: string | JSX.Element;
-  onClose?: () => void;
-  children: JSX.Element | JSX.Element[] | boolean;
-  onAdd?: () => void;
-}
-
-export const PanelOptionsGroup: FunctionComponent<Props> = props => {
-  return (
-    <div className="panel-options-group">
-      {props.onAdd ? (
-        <div className="panel-options-group__header">
-          <button className="panel-options-group__add-btn" onClick={props.onAdd}>
-            <div className="panel-options-group__add-circle">
-              <Icon name="plus" />
-            </div>
-            <span className="panel-options-group__title">{props.title}</span>
-          </button>
-        </div>
-      ) : (
-        props.title && (
-          <div className="panel-options-group__header">
-            <span className="panel-options-group__title">{props.title}</span>
-            {props.onClose && (
-              <button className="btn btn-link" onClick={props.onClose}>
-                <Icon name="times" />
-              </button>
-            )}
-          </div>
-        )
-      )}
-      {props.children && <div className="panel-options-group__body">{props.children}</div>}
-    </div>
-  );
-};

packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss

-.panel-options-group {
-  border-bottom: $panel-border;
-}
-
-.panel-options-group__header {
-  padding: 8px 16px 8px 8px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  font-weight: 500;
-  color: $text-color-semi-weak;
-
-  &:hover {
-    color: $text-color;
-
-    .panel-options-group__icon {
-      color: $text-color;
-    }
-  }
-}
-
-.panel-options-group__icon {
-  color: $text-color-weak;
-  margin-right: 8px;
-}
-
-.panel-options-group__title {
-  position: relative;
-}
-
-.panel-options-group__body {
-  padding: 8px 16px 16px 32px;
-}

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

@@ -5,7 +5,6 @@
 @import 'EmptySearchResult/EmptySearchResult';
 @import 'FormField/FormField';
 @import 'PanelOptionsGrid/PanelOptionsGrid';
-@import 'PanelOptionsGroup/PanelOptionsGroup';
 @import 'RefreshPicker/RefreshPicker';
 @import 'Forms/Legacy/Select/Select';
 @import 'TableInputCSV/TableInputCSV';

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

@@ -16,7 +16,6 @@ export { ButtonCascader } from './ButtonCascader/ButtonCascader';
 export { LoadingPlaceholder, LoadingPlaceholderProps } from './LoadingPlaceholder/LoadingPlaceholder';
 export { ColorPicker, SeriesColorPicker } from './ColorPicker/ColorPicker';
 export { SeriesColorPickerPopover, SeriesColorPickerPopoverWithTheme } from './ColorPicker/SeriesColorPickerPopover';
-export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup';
 export { PanelOptionsGrid } from './PanelOptionsGrid/PanelOptionsGrid';
 export { EmptySearchResult } from './EmptySearchResult/EmptySearchResult';
 export { PieChart, PieChartType } from './PieChart/PieChart';

public/app/plugins/panel/piechart/PieChartOptionsBox.tsx

@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 
 // Components
-import { LegacyForms, InlineFormLabel, PanelOptionsGroup } from '@grafana/ui';
+import { LegacyForms, InlineFormLabel } from '@grafana/ui';
 const { Select, FormField } = LegacyForms;
 
 // Types
@@ -27,7 +27,7 @@ export class PieChartOptionsBox extends PureComponent<PanelEditorProps<PieChartO
     const { pieType, strokeWidth } = options;
 
     return (
-      <PanelOptionsGroup title="PieChart">
+      <>
         <div className="gf-form">
           <InlineFormLabel width={labelWidth}>Type</InlineFormLabel>
           <Select
@@ -45,7 +45,7 @@ export class PieChartOptionsBox extends PureComponent<PanelEditorProps<PieChartO
             value={strokeWidth}
           />
         </div>
-      </PanelOptionsGroup>
+      </>
     );
   }
 }