Alerting: Make QueryEditor not collapsable (#70112)

* Add option to make QueryEditor not collapsable

* Make QueryEditor not collapsable in Alerting

* Change query editor border to weak

The medium border is really only for inputs, everything else should use weak border

* Add tests

public/app/core/components/QueryOperationRow/QueryOperationRow.tsx

@@ -20,6 +20,7 @@ export interface QueryOperationRowProps {
   children: React.ReactNode;
   isOpen?: boolean;
   draggable?: boolean;
+  collapsable?: boolean;
   disabled?: boolean;
 }
 
@@ -41,6 +42,7 @@ export function QueryOperationRow({
   isOpen,
   disabled,
   draggable,
+  collapsable,
   index,
   id,
 }: QueryOperationRowProps) {
@@ -106,6 +108,7 @@ export function QueryOperationRow({
                     actionsElement={actionsElement}
                     disabled={disabled}
                     draggable
+                    collapsable={collapsable}
                     dragHandleProps={provided.dragHandleProps}
                     headerElement={headerElementRendered}
                     isContentVisible={isContentVisible}
@@ -130,6 +133,7 @@ export function QueryOperationRow({
         actionsElement={actionsElement}
         disabled={disabled}
         draggable={false}
+        collapsable={collapsable}
         headerElement={headerElementRendered}
         isContentVisible={isContentVisible}
         onRowToggle={onRowToggle}

public/app/core/components/QueryOperationRow/QueryOperationRowHeader.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { QueryOperationRowHeader, QueryOperationRowHeaderProps } from './QueryOperationRowHeader';
+
+const setup = (propOverrides?: Partial<QueryOperationRowHeaderProps>) => {
+  const props: QueryOperationRowHeaderProps = {
+    title: 'test-title',
+    draggable: true,
+    isContentVisible: true,
+    id: 'test-id',
+    onRowToggle: jest.fn(),
+    reportDragMousePosition: jest.fn(),
+    ...propOverrides,
+  };
+  return render(<QueryOperationRowHeader {...props}></QueryOperationRowHeader>);
+};
+
+describe('QueryOperationRowHeader', () => {
+  test('renders without exploding', () => {
+    expect(() => setup()).not.toThrow();
+  });
+
+  describe('collapsable property', () => {
+    test('should show the button to collapse the query row by default', () => {
+      setup();
+      expect(screen.getByLabelText('toggle collapse and expand query row')).toBeInTheDocument();
+    });
+    test('should hide the button to collapse the query row when collapsable is set as false', () => {
+      setup({ collapsable: false });
+      expect(screen.queryByLabelText('toggle collapse and expand query row')).not.toBeInTheDocument();
+    });
+  });
+});

public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx

@@ -5,10 +5,11 @@ import { DraggableProvided } from 'react-beautiful-dnd';
 import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, IconButton, useStyles2 } from '@grafana/ui';
 
-interface QueryOperationRowHeaderProps {
+export interface QueryOperationRowHeaderProps {
   actionsElement?: React.ReactNode;
   disabled?: boolean;
   draggable: boolean;
+  collapsable?: boolean;
   dragHandleProps?: DraggableProvided['dragHandleProps'];
   headerElement?: React.ReactNode;
   isContentVisible: boolean;
@@ -22,6 +23,7 @@ export const QueryOperationRowHeader = ({
   actionsElement,
   disabled,
   draggable,
+  collapsable = true,
   dragHandleProps,
   headerElement,
   isContentVisible,
@@ -35,15 +37,17 @@ export const QueryOperationRowHeader = ({
   return (
     <div className={styles.header}>
       <div className={styles.column}>
-        <IconButton
-          name={isContentVisible ? 'angle-down' : 'angle-right'}
-          aria-label="toggle collapse and expand query row"
-          tooltip={isContentVisible ? 'Collapse query row' : 'Expand query row'}
-          className={styles.collapseIcon}
-          onClick={onRowToggle}
-          aria-expanded={isContentVisible}
-          aria-controls={id}
-        />
+        {collapsable && (
+          <IconButton
+            name={isContentVisible ? 'angle-down' : 'angle-right'}
+            aria-label="toggle collapse and expand query row"
+            tooltip={isContentVisible ? 'Collapse query row' : 'Expand query row'}
+            className={styles.collapseIcon}
+            onClick={onRowToggle}
+            aria-expanded={isContentVisible}
+            aria-controls={id}
+          />
+        )}
         {title && (
           // disabling the a11y rules here as the IconButton above handles keyboard interactions
           // this is just to provide a better experience for mouse users

public/app/features/alerting/unified/components/expressions/Expression.tsx

@@ -396,8 +396,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   expression: {
     wrapper: css`
       display: flex;
-      border: solid 1px ${theme.colors.border.medium};
-
+      border: solid 1px ${theme.colors.border.weak};
       border-radius: ${theme.shape.borderRadius()};
       max-width: 640px;
     `,
@@ -475,13 +474,13 @@ const getStyles = (theme: GrafanaTheme2) => ({
     wrapper: css`
       background: ${theme.colors.background.secondary};
       padding: ${theme.spacing(0.5)} ${theme.spacing(1)};
-      border-bottom: solid 1px ${theme.colors.border.medium};
+      border-bottom: solid 1px ${theme.colors.border.weak};
     `,
   },
   footer: css`
     background: ${theme.colors.background.secondary};
     padding: ${theme.spacing(1)};
-    border-top: solid 1px ${theme.colors.border.medium};
+    border-top: solid 1px ${theme.colors.border.weak};
   `,
   draggableIcon: css`
     cursor: grab;

public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx

@@ -260,7 +260,7 @@ const DatasourceNotFound = ({ index, onUpdateDatasource, onRemoveQuery, model }:
 
   return (
     <EmptyQueryWrapper>
-      <QueryOperationRow title={refId} draggable index={index} id={refId} isOpen>
+      <QueryOperationRow title={refId} draggable index={index} id={refId} isOpen collapsable={false}>
         <Card>
           <Card.Heading>This datasource has been removed</Card.Heading>
           <Card.Description>

public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx

@@ -151,6 +151,7 @@ export const QueryWrapper = ({
       <div className={styles.wrapper}>
         <QueryEditorRow<DataQuery>
           alerting
+          collapsable={false}
           dataSource={dsSettings}
           onDataSourceLoaded={setDsInstance}
           onChangeDataSource={(settings) => onChangeDataSource(settings, index)}
@@ -237,7 +238,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css`
     label: AlertingQueryWrapper;
     margin-bottom: ${theme.spacing(1)};
-    border: 1px solid ${theme.colors.border.medium};
+    border: 1px solid ${theme.colors.border.weak};
     border-radius: ${theme.shape.borderRadius(1)};
   `,
   queryOptions: css`

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

@@ -64,6 +64,7 @@ interface Props<TQuery extends DataQuery> {
   onQueryCopied?: () => void;
   onQueryRemoved?: () => void;
   onQueryToggled?: (queryStatus?: boolean | undefined) => void;
+  collapsable?: boolean;
 }
 
 interface State<TQuery extends DataQuery> {
@@ -491,7 +492,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
   };
 
   render() {
-    const { query, index, visualization } = this.props;
+    const { query, index, visualization, collapsable } = this.props;
     const { datasource, showingHelp, data } = this.state;
     const isDisabled = query.hide;
 
@@ -512,6 +513,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
         <QueryOperationRow
           id={this.id}
           draggable={true}
+          collapsable={collapsable}
           index={index}
           headerElement={this.renderHeader}
           actions={this.renderActions}