diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx index e74a88ed310..3d730b73720 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx @@ -74,6 +74,9 @@ export const OptionsPaneContent: React.FC<{ [data, plugin, panel, onFieldConfigsChange] ); + // When the panel has no query only show the main tab + const showMainTab = activeTab === 'options' || plugin.meta.skipDataQuery; + return (
{plugin && ( @@ -81,6 +84,7 @@ export const OptionsPaneContent: React.FC<{ - {activeTab === 'options' && ( + {showMainTab ? ( + ) : ( + <> + {activeTab === 'defaults' && renderFieldOptions(plugin)} + {activeTab === 'overrides' && renderFieldOverrideOptions(plugin)} + )} - {activeTab === 'defaults' && renderFieldOptions(plugin)} - {activeTab === 'overrides' && renderFieldOverrideOptions(plugin)}
@@ -114,13 +121,14 @@ export const OptionsPaneContent: React.FC<{ export const TabsBarContent: React.FC<{ width: number; + showFields: boolean; isSearching: boolean; activeTab: string; styles: OptionsPaneStyles; onClose: () => void; setSearchMode: (mode: boolean) => void; setActiveTab: (tab: string) => void; -}> = ({ width, isSearching, activeTab, onClose, setSearchMode, setActiveTab, styles }) => { +}> = ({ width, showFields, isSearching, activeTab, onClose, setSearchMode, setActiveTab, styles }) => { if (isSearching) { const defaultStyles = { transition: 'width 50ms ease-in-out', @@ -156,13 +164,21 @@ export const TabsBarContent: React.FC<{ ); } + // Show the appropriate tabs + let tabs = tabSelections; + let active = tabs.find(v => v.value === activeTab); + if (!showFields) { + active = tabSelections[0]; + tabs = [active]; + } + return ( <> {width < 352 ? (