updates from review

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

@@ -41,6 +41,7 @@ export const availableIconsIndex = {
   asserts: true,
   'expand-arrows': true,
   'expand-arrows-alt': true,
+  'expand-alt': true,
   at: true,
   ai: true,
   'ai-pointer': true,
@@ -87,6 +88,7 @@ export const availableIconsIndex = {
   'comments-alt': true,
   compass: true,
   'compress-arrows': true,
+  'compress-alt': true,
   copy: true,
   'corner-up-left': true,
   'corner-up-right': true,

public/app/core/icons/cached.json

@@ -56,6 +56,7 @@
   "unicons/comment-alt-share",
   "unicons/comments-alt",
   "unicons/compass",
+  "unicons/compress-alt",
   "unicons/copy",
   "unicons/corner-down-right-alt",
   "unicons/corner-up-left",
@@ -74,6 +75,7 @@
   "unicons/exchange-alt",
   "unicons/exclamation-circle",
   "unicons/exclamation-triangle",
+  "unicons/expand-alt",
   "unicons/external-link-alt",
   "unicons/eye",
   "unicons/eye-slash",

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

@@ -102,6 +102,7 @@ export function PanelDataSidebar({
     return selectedQueryTransform;
   }, [transformPickerIndex, selectedQueryTransform, allItems]);
   const selectedItem = useMemo(() => allItems.find((item) => item.id === selectedId), [allItems, selectedId]);
+  const shouldShowAlerting = useMemo(() => tabs.some((tab) => tab.tabId === TabId.Alert), [tabs]);
 
   const updateQuerySelectionOnStateChange = useCallback(
     (index: number) => {
@@ -329,6 +330,7 @@ export function PanelDataSidebar({
         transformItems={transformItems}
         selectedId={selectedId}
         sidebarSize={sidebarState.size}
+        hasAlerting={shouldShowAlerting}
         onResizeSidebar={(size: SidebarSize) => setSidebarState((prevState) => ({ ...prevState, size }))}
         onCollapseSidebar={() => setSidebarState((prevState) => ({ ...prevState, collapsed: true }))}
         onSelect={(id) => {

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

@@ -4,7 +4,7 @@ import { HTMLAttributes, memo, useCallback, useEffect, useMemo, useRef, useState
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { Button, Icon, ScrollContainer, Stack, useStyles2 } from '@grafana/ui';
+import { Button, Icon, IconButton, ScrollContainer, Stack, useStyles2 } from '@grafana/ui';
 import { ExpressionQueryType } from 'app/features/expressions/types';
 
 import { AddDataItemMenu } from './AddDataItemMenu';
@@ -25,6 +25,7 @@ interface QueryTransformListProps {
   sidebarSize: SidebarSize;
   transformItems: TransformItem[];
   selectedId: string | null;
+  hasAlerting?: boolean;
   onSelect: (id: string) => void;
   onAddQuery: (index?: number) => void;
   onAddFromSavedQueries: (index?: number) => void;
@@ -50,6 +51,7 @@ export const QueryTransformList = memo(
     allItems,
     selectedId,
     sidebarSize,
+    hasAlerting,
     onSelect,
     onAddQuery,
     onAddFromSavedQueries,
@@ -357,17 +359,30 @@ export const QueryTransformList = memo(
       <div className={styles.container} onMouseLeave={() => setHovered(null)}>
         <div className={styles.header}>
           <Stack justifyContent="space-between" alignItems="center" gap={2}>
-            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-            <div
-              className={styles.headerTitle}
-              onClick={() => onResizeSidebar(sidebarSize === SidebarSize.Mini ? SidebarSize.Full : SidebarSize.Mini)}
-            >
-              <Stack direction="row" alignItems="center" gap={1}>
-                <Icon name={sidebarSize === SidebarSize.Mini ? 'expand-arrows' : 'compress-arrows'} />
-                <span>{t('dashboard-scene.query-transform-list.header', 'Pipeline flow')}</span>
-              </Stack>
-            </div>
+            <Stack direction="row" alignItems="center" gap={1}>
+              <IconButton
+                tooltip={
+                  sidebarSize === SidebarSize.Mini
+                    ? t('dashboard-scene.query-transform-list.expand-sidebar', 'Expand sidebar')
+                    : t('dashboard-scene.query-transform-list.collapse-sidebar', 'Collapse sidebar')
+                }
+                onClick={() => onResizeSidebar(sidebarSize === SidebarSize.Mini ? SidebarSize.Full : SidebarSize.Mini)}
+                className={styles.rotate90}
+                name={sidebarSize === SidebarSize.Mini ? 'expand-alt' : 'compress-alt'}
+              />
+              <span className={styles.headerTitle}>{t('dashboard-scene.query-transform-list.header', 'Pipeline')}</span>
+            </Stack>
             <Stack direction="row" gap={0.5}>
+              {hasAlerting && (
+                <Button
+                  variant="secondary"
+                  fill="text"
+                  size="sm"
+                  tooltip={t('dashboard-scene.query-transform-list.notifications-tooltip', 'Alerts (coming soon)')}
+                >
+                  <Icon name="bell" size="sm" />
+                </Button>
+              )}
               <Button
                 variant="secondary"
                 fill="text"
@@ -821,7 +836,6 @@ const getStyles = (theme: GrafanaTheme2, colors: ReturnType<typeof usePanelDataP
       fontFamily: theme.typography.fontFamilyMonospace,
       textTransform: 'uppercase',
       color: theme.colors.text.primary,
-      cursor: 'pointer',
     }),
     sectionLabel: css({
       cursor: 'pointer',
@@ -1063,5 +1077,8 @@ const getStyles = (theme: GrafanaTheme2, colors: ReturnType<typeof usePanelDataP
         cursor: 'grabbing',
       },
     }),
+    rotate90: css({
+      transform: 'rotate(90deg)',
+    }),
   };
 };

public/locales/en-US/grafana.json

@@ -6005,6 +6005,7 @@
       "hide-response": "Hide response",
       "input-data": "Input data",
       "output-data": "Output data",
+      "query-inspector": "Query inspector",
       "remove-query": "Remove",
       "remove-transform": "Remove",
       "run-query": "RUN QUERY",
@@ -6325,8 +6326,9 @@
       "debug-mode-enter": "Step through your pipeline",
       "debug-mode-exit": "Exit debug mode",
       "debug-position": "Debug position",
-      "header": "Pipeline flow",
+      "header": "Pipeline",
       "nodes": "nodes",
+      "notifications-tooltip": "Alerts (coming soon)",
       "queries-expressions": "Queries & Expressions",
       "transformations": "Transformations"
     },
@@ -6631,10 +6633,6 @@
       "aria-label-change-visualization": "Change visualization",
       "text": "Change"
     },
-    "viz-and-data-pane": {
-      "aria-label-open-query-pane": "Open query pane",
-      "tooltip-open-query-pane": "Open query pane"
-    },
     "viz-panel-links-renderer": {
       "aria-label-panel-links": "Panel links"
     }