Scenes: Refactor panel editor tab counts (#81777)

* refactor editor tab counts

* Capitalize tab component property since it's a component

public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataAlertingTab.tsx

@@ -1,25 +1,25 @@
 import React from 'react';
 
-import { IconName } from '@grafana/data';
 import { SceneObjectBase, SceneComponentProps } from '@grafana/scenes';
-import { Alert, LoadingPlaceholder } from '@grafana/ui';
+import { Alert, LoadingPlaceholder, Tab } from '@grafana/ui';
 import { RulesTable } from 'app/features/alerting/unified/components/rules/RulesTable';
 import { usePanelCombinedRules } from 'app/features/alerting/unified/hooks/usePanelCombinedRules';
 
 import { getDashboardSceneFor, getPanelIdForVizPanel } from '../../utils/utils';
 import { VizPanelManager } from '../VizPanelManager';
 
-import { PanelDataPaneTabState, PanelDataPaneTab, TabId } from './types';
+import { PanelDataPaneTabState, PanelDataPaneTab, TabId, PanelDataTabHeaderProps } from './types';
 
 export class PanelDataAlertingTab extends SceneObjectBase<PanelDataPaneTabState> implements PanelDataPaneTab {
   static Component = PanelDataAlertingTabRendered;
+  TabComponent: (props: PanelDataTabHeaderProps) => React.JSX.Element;
+
   tabId = TabId.Alert;
-  icon: IconName = 'bell';
   private _panelManager: VizPanelManager;
 
   constructor(panelManager: VizPanelManager) {
     super({});
-
+    this.TabComponent = (props: PanelDataTabHeaderProps) => AlertingTab({ ...props, model: this });
     this._panelManager = panelManager;
   }
   getTabLabel() {
@@ -78,3 +78,28 @@ function PanelDataAlertingTabRendered(props: SceneComponentProps<PanelDataAlerti
     </div>
   );
 }
+
+interface PanelDataAlertingTabHeaderProps extends PanelDataTabHeaderProps {
+  model: PanelDataAlertingTab;
+}
+
+function AlertingTab(props: PanelDataAlertingTabHeaderProps) {
+  const { model } = props;
+
+  const { rules } = usePanelCombinedRules({
+    dashboardUID: model.getDashboardUID(),
+    panelId: model.getPanelId(),
+    poll: false,
+  });
+
+  return (
+    <Tab
+      key={props.key}
+      label={model.getTabLabel()}
+      icon="bell"
+      counter={rules.length}
+      active={props.active}
+      onChangeTab={props.onChangeTab}
+    />
+  );
+}

public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx

@@ -11,7 +11,7 @@ import {
   SceneObjectUrlValues,
   VizPanel,
 } from '@grafana/scenes';
-import { Container, CustomScrollbar, Tab, TabContent, TabsBar, useStyles2 } from '@grafana/ui';
+import { Container, CustomScrollbar, TabContent, TabsBar, useStyles2 } from '@grafana/ui';
 import { shouldShowAlertingTab } from 'app/features/dashboard/components/PanelEditor/state/selectors';
 
 import { VizPanelManager } from '../VizPanelManager';
@@ -135,7 +135,6 @@ export class PanelDataPane extends SceneObjectBase<PanelDataPaneState> {
 function PanelDataPaneRendered({ model }: SceneComponentProps<PanelDataPane>) {
   const { tab, tabs } = model.useState();
   const styles = useStyles2(getStyles);
-  const { queries } = model.panelManager.queryRunner.useState();
 
   if (!tabs) {
     return;
@@ -143,25 +142,16 @@ function PanelDataPaneRendered({ model }: SceneComponentProps<PanelDataPane>) {
 
   const currentTab = tabs.find((t) => t.tabId === tab);
 
-  const tabCounters = {
-    [TabId.Queries]: queries.length,
-    [TabId.Transformations]: 0, //TODO
-    [TabId.Alert]: 0, //TODO
-  };
-
   return (
     <>
       <TabsBar hideBorder={true} className={styles.tabsBar}>
         {tabs.map((t, index) => {
           return (
-            <Tab
+            <t.TabComponent
               key={`${t.getTabLabel()}-${index}`}
-              label={t.getTabLabel()}
-              icon={t.icon}
-              counter={tabCounters[t.tabId]}
               active={t.tabId === tab}
               onChangeTab={() => model.onChangeTab(t)}
-            />
+            ></t.TabComponent>
           );
         })}
       </TabsBar>

public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataQueriesTab.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import { CoreApp, DataSourceApi, DataSourceInstanceSettings, IconName } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { config } from '@grafana/runtime';
-import { SceneObjectBase, SceneComponentProps, sceneGraph } from '@grafana/scenes';
+import { SceneObjectBase, SceneComponentProps, sceneGraph, SceneQueryRunner } from '@grafana/scenes';
 import { DataQuery } from '@grafana/schema';
-import { Button, HorizontalGroup } from '@grafana/ui';
+import { Button, HorizontalGroup, Tab } from '@grafana/ui';
 import { addQuery } from 'app/core/utils/query';
 import { dataSource as expressionDatasource } from 'app/features/expressions/ExpressionDatasource';
 import { GroupActionComponents } from 'app/features/query/components/QueryActionComponent';
@@ -18,7 +18,7 @@ import { QueryGroupOptions } from 'app/types';
 import { PanelTimeRange } from '../../scene/PanelTimeRange';
 import { VizPanelManager } from '../VizPanelManager';
 
-import { PanelDataPaneTabState, PanelDataPaneTab, TabId } from './types';
+import { PanelDataPaneTabState, PanelDataPaneTab, TabId, PanelDataTabHeaderProps } from './types';
 
 interface PanelDataQueriesTabState extends PanelDataPaneTabState {
   datasource?: DataSourceApi;
@@ -26,6 +26,7 @@ interface PanelDataQueriesTabState extends PanelDataPaneTabState {
 }
 export class PanelDataQueriesTab extends SceneObjectBase<PanelDataQueriesTabState> implements PanelDataPaneTab {
   static Component = PanelDataQueriesTabRendered;
+  TabComponent: (props: PanelDataTabHeaderProps) => React.JSX.Element;
 
   tabId = TabId.Queries;
   icon: IconName = 'database';
@@ -41,6 +42,9 @@ export class PanelDataQueriesTab extends SceneObjectBase<PanelDataQueriesTabStat
 
   constructor(panelManager: VizPanelManager) {
     super({});
+    this.TabComponent = (props: PanelDataTabHeaderProps) => {
+      return QueriesTab({ ...props, model: this });
+    };
 
     this._panelManager = panelManager;
   }
@@ -153,6 +157,10 @@ export class PanelDataQueriesTab extends SceneObjectBase<PanelDataQueriesTabStat
       .filter(Boolean);
   }
 
+  get queryRunner(): SceneQueryRunner {
+    return this._panelManager.queryRunner;
+  }
+
   get panelManager() {
     return this._panelManager;
   }
@@ -215,3 +223,24 @@ function PanelDataQueriesTabRendered({ model }: SceneComponentProps<PanelDataQue
     </>
   );
 }
+
+interface QueriesTabProps extends PanelDataTabHeaderProps {
+  model: PanelDataQueriesTab;
+}
+
+function QueriesTab(props: QueriesTabProps) {
+  const { model } = props;
+
+  const queryRunnerState = model.queryRunner.useState();
+
+  return (
+    <Tab
+      key={props.key}
+      label={model.getTabLabel()}
+      icon="database"
+      counter={queryRunnerState.queries.length}
+      active={props.active}
+      onChangeTab={props.onChangeTab}
+    />
+  );
+}

public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.tsx

@@ -5,14 +5,14 @@ import { DragDropContext, DropResult, Droppable } from 'react-beautiful-dnd';
 import { DataTransformerConfig, GrafanaTheme2, IconName, PanelData } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { SceneObjectBase, SceneComponentProps, SceneDataTransformer, SceneQueryRunner } from '@grafana/scenes';
-import { Button, ButtonGroup, ConfirmModal, useStyles2 } from '@grafana/ui';
+import { Button, ButtonGroup, ConfirmModal, Tab, useStyles2 } from '@grafana/ui';
 import { TransformationOperationRows } from 'app/features/dashboard/components/TransformationsEditor/TransformationOperationRows';
 
 import { VizPanelManager } from '../VizPanelManager';
 
 import { EmptyTransformationsMessage } from './EmptyTransformationsMessage';
 import { TransformationsDrawer } from './TransformationsDrawer';
-import { PanelDataPaneTabState, PanelDataPaneTab, TabId } from './types';
+import { PanelDataPaneTabState, PanelDataPaneTab, TabId, PanelDataTabHeaderProps } from './types';
 
 interface PanelDataTransformationsTabState extends PanelDataPaneTabState {}
 
@@ -21,6 +21,8 @@ export class PanelDataTransformationsTab
   implements PanelDataPaneTab
 {
   static Component = PanelDataTransformationsTabRendered;
+  TabComponent: (props: PanelDataTabHeaderProps) => React.JSX.Element;
+
   tabId = TabId.Transformations;
   icon: IconName = 'process';
   private _panelManager: VizPanelManager;
@@ -31,6 +33,7 @@ export class PanelDataTransformationsTab
 
   constructor(panelManager: VizPanelManager) {
     super({});
+    this.TabComponent = (props: PanelDataTabHeaderProps) => TransformationsTab({ ...props, model: this });
 
     this._panelManager = panelManager;
   }
@@ -46,6 +49,10 @@ export class PanelDataTransformationsTab
   public onChangeTransformations(transformations: DataTransformerConfig[]) {
     this._panelManager.changeTransformations(transformations);
   }
+
+  get panelManager() {
+    return this._panelManager;
+  }
 }
 
 export function PanelDataTransformationsTabRendered({ model }: SceneComponentProps<PanelDataTransformationsTab>) {
@@ -186,3 +193,23 @@ const getStyles = (theme: GrafanaTheme2) => ({
     marginLeft: theme.spacing(2),
   }),
 });
+
+interface TransformationsTabProps extends PanelDataTabHeaderProps {
+  model: PanelDataTransformationsTab;
+}
+
+function TransformationsTab(props: TransformationsTabProps) {
+  const { model } = props;
+
+  const transformerState = model.getDataTransformer().useState();
+  return (
+    <Tab
+      key={props.key}
+      label={model.getTabLabel()}
+      icon="process"
+      counter={transformerState.transformations.length}
+      active={props.active}
+      onChangeTab={props.onChangeTab}
+    />
+  );
+}

public/app/features/dashboard-scene/panel-edit/PanelDataPane/types.ts

@@ -1,4 +1,3 @@
-import { IconName } from '@grafana/data';
 import { SceneObject, SceneObjectState } from '@grafana/scenes';
 
 export interface PanelDataPaneTabState extends SceneObjectState {}
@@ -9,8 +8,14 @@ export enum TabId {
   Alert = 'alert',
 }
 
+export interface PanelDataTabHeaderProps {
+  key: string;
+  active: boolean;
+  onChangeTab?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+
 export interface PanelDataPaneTab extends SceneObject {
+  TabComponent: (props: PanelDataTabHeaderProps) => React.JSX.Element;
   getTabLabel(): string;
   tabId: TabId;
-  icon: IconName;
 }