NewEditor: don't show field tabs for non data panels (#23487)

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

@@ -74,6 +74,9 @@ export const OptionsPaneContent: React.FC<{
     [data, plugin, panel, onFieldConfigsChange]
     [data, plugin, panel, onFieldConfigsChange]
   );
   );
 
 
+  // When the panel has no query only show the main tab
+  const showMainTab = activeTab === 'options' || plugin.meta.skipDataQuery;
+
   return (
   return (
     <div className={styles.panelOptionsPane}>
     <div className={styles.panelOptionsPane}>
       {plugin && (
       {plugin && (
@@ -81,6 +84,7 @@ export const OptionsPaneContent: React.FC<{
           <TabsBar className={styles.tabsBar}>
           <TabsBar className={styles.tabsBar}>
             <TabsBarContent
             <TabsBarContent
               width={width}
               width={width}
+              showFields={!plugin.meta.skipDataQuery}
               isSearching={isSearching}
               isSearching={isSearching}
               styles={styles}
               styles={styles}
               activeTab={activeTab}
               activeTab={activeTab}
@@ -91,7 +95,7 @@ export const OptionsPaneContent: React.FC<{
           </TabsBar>
           </TabsBar>
           <TabContent className={styles.tabContent}>
           <TabContent className={styles.tabContent}>
             <CustomScrollbar>
             <CustomScrollbar>
-              {activeTab === 'options' && (
+              {showMainTab ? (
                 <PanelOptionsTab
                 <PanelOptionsTab
                   panel={panel}
                   panel={panel}
                   plugin={plugin}
                   plugin={plugin}
@@ -101,9 +105,12 @@ export const OptionsPaneContent: React.FC<{
                   onFieldConfigsChange={onFieldConfigsChange}
                   onFieldConfigsChange={onFieldConfigsChange}
                   onPanelOptionsChanged={onPanelOptionsChanged}
                   onPanelOptionsChanged={onPanelOptionsChanged}
                 />
                 />
-              )}
+              ) : (
+                <>
                   {activeTab === 'defaults' && renderFieldOptions(plugin)}
                   {activeTab === 'defaults' && renderFieldOptions(plugin)}
                   {activeTab === 'overrides' && renderFieldOverrideOptions(plugin)}
                   {activeTab === 'overrides' && renderFieldOverrideOptions(plugin)}
+                </>
+              )}
             </CustomScrollbar>
             </CustomScrollbar>
           </TabContent>
           </TabContent>
         </div>
         </div>
@@ -114,13 +121,14 @@ export const OptionsPaneContent: React.FC<{
 
 
 export const TabsBarContent: React.FC<{
 export const TabsBarContent: React.FC<{
   width: number;
   width: number;
+  showFields: boolean;
   isSearching: boolean;
   isSearching: boolean;
   activeTab: string;
   activeTab: string;
   styles: OptionsPaneStyles;
   styles: OptionsPaneStyles;
   onClose: () => void;
   onClose: () => void;
   setSearchMode: (mode: boolean) => void;
   setSearchMode: (mode: boolean) => void;
   setActiveTab: (tab: string) => void;
   setActiveTab: (tab: string) => void;
-}> = ({ width, isSearching, activeTab, onClose, setSearchMode, setActiveTab, styles }) => {
+}> = ({ width, showFields, isSearching, activeTab, onClose, setSearchMode, setActiveTab, styles }) => {
   if (isSearching) {
   if (isSearching) {
     const defaultStyles = {
     const defaultStyles = {
       transition: 'width 50ms ease-in-out',
       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 (
   return (
     <>
     <>
       {width < 352 ? (
       {width < 352 ? (
         <div className="flex-grow-1">
         <div className="flex-grow-1">
           <Select
           <Select
-            options={tabSelections}
-            value={tabSelections.find(v => v.value === activeTab)}
+            options={tabs}
+            value={active}
             onChange={v => {
             onChange={v => {
               setActiveTab(v.value);
               setActiveTab(v.value);
             }}
             }}
@@ -170,11 +186,11 @@ export const TabsBarContent: React.FC<{
         </div>
         </div>
       ) : (
       ) : (
         <>
         <>
-          {tabSelections.map(item => (
+          {tabs.map(item => (
             <Tab
             <Tab
               key={item.value}
               key={item.value}
               label={item.label}
               label={item.label}
-              active={activeTab === item.value}
+              active={active.value === item.value}
               onChangeTab={() => setActiveTab(item.value)}
               onChangeTab={() => setActiveTab(item.value)}
             />
             />
           ))}
           ))}
@@ -182,6 +198,7 @@ export const TabsBarContent: React.FC<{
         </>
         </>
       )}
       )}
 
 
+      {/* 
       <div className={styles.tabsButton}>
       <div className={styles.tabsButton}>
         <DashNavButton
         <DashNavButton
           icon="search"
           icon="search"
@@ -190,7 +207,7 @@ export const TabsBarContent: React.FC<{
           classSuffix="search-options"
           classSuffix="search-options"
           onClick={() => setSearchMode(true)}
           onClick={() => setSearchMode(true)}
         />
         />
-      </div>
+      </div> */}
       <div className={styles.tabsButton}>
       <div className={styles.tabsButton}>
         <DashNavButton
         <DashNavButton
           icon="angle-right"
           icon="angle-right"