From 92bdf2959fbd27903f2a23fbe931a6fccbd4c030 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Tue, 4 Jan 2022 10:53:17 +0100
Subject: [PATCH] Alerting: Fixed logic on how to render alert tab (#43339)
 (#43364)

* fixed logic on how to render alert tab

* remove console logs move some logic

(cherry picked from commit dda84dbf1a7c637333e7b739d3dc0353d4828e1b)

Co-authored-by: Peter Holmberg <peterholmberg@users.noreply.github.com>
---
 .../PanelEditor/PanelEditorTabs.tsx           | 50 ++++++++++++++-----
 1 file changed, 38 insertions(+), 12 deletions(-)

diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
index bc6a30ac454..1c04cfc2473 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
@@ -40,18 +40,8 @@ export const PanelEditorTabs: FC<PanelEditorTabsProps> = React.memo(({ panel, da
     <div className={styles.wrapper}>
       <TabsBar className={styles.tabBar} hideBorder>
         {tabs.map((tab) => {
-          if (config.unifiedAlertingEnabled && tab.id === PanelEditorTabId.Alert) {
-            return (
-              <PanelAlertTab
-                key={tab.id}
-                label={tab.text}
-                active={tab.active}
-                onChangeTab={() => onChangeTab(tab)}
-                icon={tab.icon as IconName}
-                panel={panel}
-                dashboard={dashboard}
-              />
-            );
+          if (tab.id === PanelEditorTabId.Alert) {
+            renderAlertTab(tab, panel, dashboard, onChangeTab);
           }
           return (
             <Tab
@@ -90,6 +80,42 @@ function getCounter(panel: PanelModel, tab: PanelEditorTab) {
   return null;
 }
 
+function renderAlertTab(
+  tab: PanelEditorTab,
+  panel: PanelModel,
+  dashboard: DashboardModel,
+  onChangeTab: (tab: PanelEditorTab) => void
+) {
+  if (!config.alertingEnabled || !config.unifiedAlertingEnabled) {
+    return null;
+  } else if (config.unifiedAlertingEnabled) {
+    return (
+      <PanelAlertTab
+        key={tab.id}
+        label={tab.text}
+        active={tab.active}
+        onChangeTab={() => onChangeTab(tab)}
+        icon={tab.icon as IconName}
+        panel={panel}
+        dashboard={dashboard}
+      />
+    );
+  } else if (config.alertingEnabled) {
+    return (
+      <Tab
+        key={tab.id}
+        label={tab.text}
+        active={tab.active}
+        onChangeTab={() => onChangeTab(tab)}
+        icon={tab.icon as IconName}
+        counter={getCounter(panel, tab)}
+      />
+    );
+  }
+
+  return null;
+}
+
 const getStyles = (theme: GrafanaTheme2) => {
   return {
     wrapper: css`