PanelEdit: Do not show override option for panel with no field config options (#33699)

* Do not show overrides button if there are no field config options

* not show radiobuttons for non data panels

* remove unused style

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -171,7 +171,7 @@ export const Components = {
   },
   QueryField: { container: 'Query field' },
   ValuePicker: {
-    button: 'Value picker add button',
+    button: (name: string) => `Value picker button ${name}`,
     select: (name: string) => `Value picker select ${name}`,
   },
   Search: {

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

@@ -44,7 +44,7 @@ export function ValuePicker<T>({
       icon={icon || 'plus'}
       onClick={() => setIsPicking(true)}
       variant={variant}
-      aria-label={selectors.components.ValuePicker.button}
+      aria-label={selectors.components.ValuePicker.button(label)}
     >
       {label}
     </Button>

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

@@ -32,6 +32,7 @@ class OptionsPaneOptionsTestScenario {
     state: LoadingState.Done,
     timeRange: {} as any,
   };
+
   plugin = getPanelPlugin({
     id: 'TestPanel',
   }).useFieldConfig({
@@ -56,6 +57,7 @@ class OptionsPaneOptionsTestScenario {
         });
     },
   });
+
   panel = new PanelModel({
     title: 'Test title',
     type: this.plugin.meta.id,
@@ -196,4 +198,17 @@ describe('OptionsPaneOptions', () => {
     expect(screen.queryByLabelText(OptionsPaneSelector.fieldLabel('Panel options Title'))).not.toBeInTheDocument();
     expect(screen.getByLabelText(OptionsPaneSelector.fieldLabel('Axis TextPropWithCategory'))).toBeInTheDocument();
   });
+
+  it('should not render field override options non data panel', async () => {
+    const scenario = new OptionsPaneOptionsTestScenario();
+    scenario.plugin = getPanelPlugin({
+      id: 'TestPanel',
+    });
+
+    scenario.render();
+
+    expect(
+      screen.queryByLabelText(selectors.components.ValuePicker.button('Add field override'))
+    ).not.toBeInTheDocument();
+  });
 });

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

@@ -66,6 +66,7 @@ export const OptionsPaneOptions: React.FC<Props> = (props) => {
         for (const item of vizOptions) {
           mainBoxElements.push(item.render());
         }
+
         for (const item of justOverrides) {
           mainBoxElements.push(item.render());
         }
@@ -85,13 +86,16 @@ export const OptionsPaneOptions: React.FC<Props> = (props) => {
     }
   }
 
+  // only show radio buttons if we are searching or if the plugin has field config
+  const showSearchRadioButtons = !isSearching && !plugin.fieldConfigRegistry.isEmpty();
+
   return (
     <div className={styles.wrapper}>
       <div className={styles.formBox}>
         <div className={styles.formRow}>
           <FilterInput width={0} value={searchQuery} onChange={setSearchQuery} placeholder={'Search options'} />
         </div>
-        {!isSearching && (
+        {showSearchRadioButtons && (
           <div className={styles.formRow}>
             <RadioButtonGroup options={optionRadioFilters} value={listMode} fullWidth onChange={setListMode} />
           </div>
@@ -109,7 +113,6 @@ export const OptionsPaneOptions: React.FC<Props> = (props) => {
 function getOptionRadioFilters(): Array<SelectableValue<OptionFilter>> {
   return [
     { label: OptionFilter.All, value: OptionFilter.All },
-    { label: OptionFilter.Recent, value: OptionFilter.Recent },
     { label: OptionFilter.Overrides, value: OptionFilter.Overrides },
   ];
 }

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

@@ -22,6 +22,10 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
   const registry = props.plugin.fieldConfigRegistry;
   const data = props.data?.series ?? [];
 
+  if (registry.isEmpty()) {
+    return [];
+  }
+
   const onOverrideChange = (index: number, override: any) => {
     let overrides = cloneDeep(currentFieldConfig.overrides);
     overrides[index] = override;
@@ -207,7 +211,7 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
           <Container padding="md" key="Add override">
             <ValuePicker
               icon="plus"
-              label="Add a field override"
+              label="Add field override"
               variant="secondary"
               menuPlacement="auto"
               isFullWidth={true}