Alerting: Fixed logic on how to render alert tab (#43339)

* fixed logic on how to render alert tab

* remove console logs move some logic

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`