PanelEdit: Options pane design tweaks (#103331)

* PanelEdit: Options pane design tweaks

* Added translations

* Fixed

* Update

public/app/features/dashboard-scene/edit-pane/DashboardEditPane.tsx

@@ -311,6 +311,7 @@ function getStyles(theme: GrafanaTheme2) {
       borderLeft: `1px solid ${theme.colors.border.weak}`,
       borderTop: `1px solid ${theme.colors.border.weak}`,
       background: theme.colors.background.primary,
+      borderTopLeftRadius: theme.shape.radius.default,
     }),
     overlayWrapper: css({
       right: 0,

public/app/features/dashboard-scene/panel-edit/PanelEditorRenderer.tsx

@@ -207,6 +207,9 @@ function getStyles(theme: GrafanaTheme2) {
       flexDirection: 'column',
       borderLeft: `1px solid ${theme.colors.border.weak}`,
       background: theme.colors.background.primary,
+      marginTop: theme.spacing(2),
+      borderTop: `1px solid ${theme.colors.border.weak}`,
+      borderTopLeftRadius: theme.shape.radius.default,
     }),
     expandOptionsWrapper: css({
       display: 'flex',

public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/css';
 import { useMemo } from 'react';
+import { useToggle } from 'react-use';
 
 import {
   FieldConfigSource,
@@ -22,16 +23,7 @@ import {
   VizPanel,
   sceneGraph,
 } from '@grafana/scenes';
-import {
-  Button,
-  Card,
-  FilterInput,
-  RadioButtonGroup,
-  ScrollContainer,
-  Stack,
-  ToolbarButton,
-  useStyles2,
-} from '@grafana/ui';
+import { Button, Card, FilterInput, ScrollContainer, Stack, ToolbarButton, useStyles2, Field } from '@grafana/ui';
 import { Trans, t } from 'app/core/internationalization';
 import { OptionFilter } from 'app/features/dashboard/components/PanelEditor/OptionsPaneOptions';
 import { getPanelPluginNotFound } from 'app/features/panel/components/PanelPluginError';
@@ -139,25 +131,52 @@ export class PanelOptionsPane extends SceneObjectBase<PanelOptionsPaneState> {
     const styles = useStyles2(getStyles);
     const isAngularPanel = isUsingAngularPanelPlugin(panel);
     const isSearching = searchQuery.length > 0;
-    const showSearchRadioButtons = !isSearching && !panel.getPlugin()?.fieldConfigRegistry.isEmpty();
+    const hasFieldConfig = !isSearching && !panel.getPlugin()?.fieldConfigRegistry.isEmpty();
+    const [isSearchingOptions, setIsSearchingOptions] = useToggle(false);
+    const onlyOverrides = listMode === OptionFilter.Overrides;
+
     return (
       <>
         {!isVizPickerOpen && (
           <>
             <div className={styles.top}>
-              <VisualizationButton pluginId={pluginId} onOpen={model.onToggleVizPicker} />
-              <FilterInput
-                className={styles.searchOptions}
-                value={searchQuery}
-                placeholder={t('dashboard-scene.panel-options-pane.placeholder-search-options', 'Search options')}
-                onChange={model.onSetSearchQuery}
-              />
-              {showSearchRadioButtons && (
-                <RadioButtonGroup
-                  options={model.getOptionRadioFilters()}
-                  value={listMode}
-                  fullWidth
-                  onChange={model.onSetListMode}
+              <Field
+                label={t('dashboard.panel-edit.visualization-button-label', 'Visualization')}
+                className={styles.vizField}
+              >
+                <Stack gap={1}>
+                  <VisualizationButton pluginId={pluginId} onOpen={model.onToggleVizPicker} />
+                  <Button
+                    icon="search"
+                    variant="secondary"
+                    onClick={setIsSearchingOptions}
+                    tooltip={'Search options'}
+                  />
+                  {hasFieldConfig && (
+                    <ToolbarButton
+                      icon="filter"
+                      tooltip={t('dashboard.panel-edit.only-overrides-button-tooltip', 'Show only overrides')}
+                      variant={onlyOverrides ? 'active' : 'canvas'}
+                      onClick={() => {
+                        model.onSetListMode(onlyOverrides ? OptionFilter.All : OptionFilter.Overrides);
+                      }}
+                    />
+                  )}
+                </Stack>
+              </Field>
+
+              {isSearchingOptions && (
+                <FilterInput
+                  className={styles.searchOptions}
+                  value={searchQuery}
+                  placeholder={t('dashboard.panel-edit.placeholder-search-options', 'Search options')}
+                  onChange={model.onSetSearchQuery}
+                  autoFocus={true}
+                  onBlur={() => {
+                    if (searchQuery.length === 0) {
+                      setIsSearchingOptions(false);
+                    }
+                  }}
                 />
               )}
             </div>
@@ -217,7 +236,7 @@ function getStyles(theme: GrafanaTheme2) {
     top: css({
       display: 'flex',
       flexDirection: 'column',
-      padding: theme.spacing(2, 1),
+      padding: theme.spacing(1, 2, 2, 2),
       gap: theme.spacing(2),
     }),
     searchOptions: css({
@@ -227,7 +246,7 @@ function getStyles(theme: GrafanaTheme2) {
       padding: theme.spacing(2, 2, 2, 0),
     }),
     vizField: css({
-      marginBottom: theme.spacing(1),
+      marginBottom: theme.spacing(0),
     }),
     rotateIcon: css({
       rotate: '180deg',
@@ -260,24 +279,22 @@ export function VisualizationButton({ pluginId, onOpen }: VisualizationButtonPro
   }
 
   return (
-    <Stack gap={1}>
-      <ToolbarButton
-        className={styles.vizButton}
-        tooltip={t(
-          'dashboard-scene.visualization-button.tooltip-click-to-change-visualization',
-          'Click to change visualization'
-        )}
-        imgSrc={pluginMeta.info.logos.small}
-        onClick={onOpen}
-        data-testid={selectors.components.PanelEditor.toggleVizPicker}
-        aria-label={t('dashboard-scene.visualization-button.aria-label-change-visualization', 'Change visualization')}
-        variant="canvas"
-        isOpen={false}
-        fullWidth
-      >
-        {pluginMeta.name}
-      </ToolbarButton>
-    </Stack>
+    <ToolbarButton
+      className={styles.vizButton}
+      tooltip={t(
+        'dashboard-scene.visualization-button.tooltip-click-to-change-visualization',
+        'Click to change visualization'
+      )}
+      imgSrc={pluginMeta.info.logos.small}
+      onClick={onOpen}
+      data-testid={selectors.components.PanelEditor.toggleVizPicker}
+      aria-label={t('dashboard-scene.visualization-button.aria-label-change-visualization', 'Change visualization')}
+      variant="canvas"
+      isOpen={false}
+      fullWidth
+    >
+      {pluginMeta.name}
+    </ToolbarButton>
   );
 }
 

public/locales/en-US/grafana.json

@@ -1807,7 +1807,10 @@
       "alerting-tab": {
         "dashboard-not-saved": "Dashboard must be saved before alerts can be added.",
         "no-rules": "There are no alert rules linked to this panel."
-      }
+      },
+      "only-overrides-button-tooltip": "Show only overrides",
+      "placeholder-search-options": "Search options",
+      "visualization-button-label": "Visualization"
     },
     "panel-editor-table-view": {
       "title-raw-data": "Raw data"
@@ -2340,9 +2343,6 @@
     "panel-inspect-renderer": {
       "title-panel-plugin-not-loaded": "Panel plugin not loaded"
     },
-    "panel-options-pane": {
-      "placeholder-search-options": "Search options"
-    },
     "panel-viz-type-picker": {
       "placeholder-search-for": "Search for...",
       "title-close": "Close"