PanelInspector: hides unsupported data display options for Panel type (#24918)

public/app/features/dashboard/components/Inspector/InspectDataTab.tsx

@@ -110,8 +110,53 @@ export class InspectDataTab extends PureComponent<Props, State> {
     });
   }
 
+  renderDataOptions = () => {
+    const { options, onOptionsChange, panel } = this.props;
+    const { transformId } = this.state;
+    const styles = getPanelInspectorStyles();
+
+    const panelTransformations = panel.getTransformations();
+    const showPanelTransformationsOption =
+      panelTransformations && panelTransformations.length > 0 && (transformId as any) !== 'join by time';
+    const showFieldConfigsOption = !panel.plugin?.fieldConfigRegistry.isEmpty();
+    const showDataOptions = showPanelTransformationsOption || showFieldConfigsOption;
+
+    if (!showDataOptions) {
+      return null;
+    }
+
+    return (
+      <div className={cx(styles.options, styles.dataDisplayOptions)}>
+        <QueryOperationRow title={'Data display options'} isOpen={false}>
+          {showPanelTransformationsOption && (
+            <div className="gf-form-inline">
+              <Switch
+                tooltip="Data shown in the table will be transformed using transformations defined in the panel"
+                label="Apply panel transformations"
+                labelClass="width-12"
+                checked={!!options.withTransforms}
+                onChange={() => onOptionsChange({ ...options, withTransforms: !options.withTransforms })}
+              />
+            </div>
+          )}
+          {showFieldConfigsOption && (
+            <div className="gf-form-inline">
+              <Switch
+                tooltip="Data shown in the table will have panel field configuration applied, for example units or display name"
+                label="Apply field configuration"
+                labelClass="width-12"
+                checked={!!options.withFieldConfig}
+                onChange={() => onOptionsChange({ ...options, withFieldConfig: !options.withFieldConfig })}
+              />
+            </div>
+          )}
+        </QueryOperationRow>
+      </div>
+    );
+  };
+
   render() {
-    const { isLoading, data, options, onOptionsChange } = this.props;
+    const { isLoading, data } = this.props;
     const { dataFrameIndex, transformId, transformationOptions } = this.state;
     const styles = getPanelInspectorStyles();
 
@@ -136,8 +181,6 @@ export class InspectDataTab extends PureComponent<Props, State> {
       };
     });
 
-    const panelTransformations = this.props.panel.getTransformations();
-
     return (
       <div className={styles.dataTabContent} aria-label={selectors.components.PanelInspector.Data.content}>
         <div className={styles.actionsWrapper}>
@@ -169,31 +212,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
                 </Field>
               )}
             </div>
-
+            {this.renderDataOptions()}
-            <div className={cx(styles.options, styles.dataDisplayOptions)}>
-              <QueryOperationRow title={'Data display options'} isOpen={false}>
-                {panelTransformations && panelTransformations.length > 0 && (transformId as any) !== 'join by time' && (
-                  <div className="gf-form-inline">
-                    <Switch
-                      tooltip="Data shown in the table will be transformed using transformations defined in the panel"
-                      label="Apply panel transformations"
-                      labelClass="width-12"
-                      checked={!!options.withTransforms}
-                      onChange={() => onOptionsChange({ ...options, withTransforms: !options.withTransforms })}
-                    />
-                  </div>
-                )}
-                <div className="gf-form-inline">
-                  <Switch
-                    tooltip="Data shown in the table will have panel field configuration applied, for example units or display name"
-                    label="Apply field configuration"
-                    labelClass="width-12"
-                    checked={!!options.withFieldConfig}
-                    onChange={() => onOptionsChange({ ...options, withFieldConfig: !options.withFieldConfig })}
-                  />
-                </div>
-              </QueryOperationRow>
-            </div>
           </div>
 
           <div className={styles.options}>