add support for conditionally rendering extraRenderActions (#41783)

packages/grafana-data/src/types/datasource.ts

@@ -128,6 +128,7 @@ export interface DataSourcePluginMeta<T extends KeyValue = {}> extends PluginMet
   sort?: number;
   streaming?: boolean;
   unlicensed?: boolean;
+  backend?: boolean;
   isBackend?: boolean;
 }
 

public/app/features/datasources/state/actions.ts

@@ -135,7 +135,7 @@ export function loadDataSourceMeta(dataSource: DataSourceSettings): ThunkResult<
     const isBackend = plugin.DataSourceClass.prototype instanceof DataSourceWithBackend;
     const meta = {
       ...pluginInfo,
-      isBackend: isBackend,
+      isBackend: pluginInfo.backend || isBackend,
     };
 
     dispatch(dataSourceMetaLoaded(meta));

public/app/features/query/components/QueryActionComponent.ts

@@ -7,9 +7,10 @@ interface ActionComponentProps {
   onChangeDataSource?: (ds: DataSourceInstanceSettings) => void;
   timeRange?: TimeRange;
   dataSource?: DataSourceInstanceSettings;
+  key: string | number;
 }
 
-type QueryActionComponent = React.ComponentType<ActionComponentProps>;
+type QueryActionComponent = (props: ActionComponentProps) => JSX.Element | null;
 
 class QueryActionComponents {
   extraRenderActions: QueryActionComponent[] = [];

public/app/features/query/components/QueryEditorRow.tsx

@@ -305,16 +305,18 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
 
   renderExtraActions = () => {
     const { query, queries, data, onAddQuery, dataSource } = this.props;
-    return RowActionComponents.getAllExtraRenderAction().map((c, index) => {
-      return React.createElement(c, {
-        query,
-        queries,
-        timeRange: data.timeRange,
-        onAddQuery: onAddQuery as (query: DataQuery) => void,
-        dataSource: dataSource,
-        key: index,
-      });
-    });
+    return RowActionComponents.getAllExtraRenderAction()
+      .map((action, index) =>
+        action({
+          query,
+          queries,
+          timeRange: data.timeRange,
+          onAddQuery: onAddQuery as (query: DataQuery) => void,
+          dataSource,
+          key: index,
+        })
+      )
+      .filter(Boolean);
   };
 
   renderActions = (props: QueryOperationRowRenderProps) => {

public/app/features/query/components/QueryGroup.tsx

@@ -306,13 +306,15 @@ export class QueryGroup extends PureComponent<Props, State> {
   }
 
   renderExtraActions() {
-    return GroupActionComponents.getAllExtraRenderAction().map((c, index) => {
-      return React.createElement(c, {
-        onAddQuery: this.onAddQuery,
-        onChangeDataSource: this.onChangeDataSource,
-        key: index,
-      });
-    });
+    return GroupActionComponents.getAllExtraRenderAction()
+      .map((action, index) =>
+        action({
+          onAddQuery: this.onAddQuery,
+          onChangeDataSource: this.onChangeDataSource,
+          key: index,
+        })
+      )
+      .filter(Boolean);
   }
 
   renderAddQueryRow(dsSettings: DataSourceInstanceSettings, styles: QueriesTabStyles) {