QueryBuilder: Add support to disable operations

src/VisualQueryBuilder/components/OperationEditor.tsx

@@ -20,6 +20,7 @@ interface Props<T extends VisualQuery> {
   queryModeller: VisualQueryModeller;
   onChange: (index: number, update: QueryBuilderOperation) => void;
   onRemove: (index: number) => void;
+  onToggle: (index: number) => void;
   onRunQuery: () => void;
   flash?: boolean;
   highlight?: boolean;
@@ -31,6 +32,7 @@ export function OperationEditor<T extends VisualQuery>({
   operation,
   index,
   onRemove,
+  onToggle,
   onChange,
   onRunQuery,
   queryModeller,
@@ -78,6 +80,7 @@ export function OperationEditor<T extends VisualQuery>({
             definition={def}
             onChange={onChange}
             onRemove={onRemove}
+            onToggle={onToggle}
             queryModeller={queryModeller}
             query={query}
             timeRange={timeRange}

src/VisualQueryBuilder/components/OperationEditorBody.tsx

@@ -26,6 +26,7 @@ type Props = {
   query: VisualQuery;
   onChange: (index: number, update: QueryBuilderOperation) => void;
   onRemove: (index: number) => void;
+  onToggle: (index: number) => void;
   onRunQuery: () => void;
   datasource: DataSourceApi;
   flash?: boolean;
@@ -42,6 +43,7 @@ export function OperationEditorBody({
   queryModeller,
   onChange,
   onRemove,
+  onToggle,
   operation,
   definition,
   query,
@@ -84,7 +86,11 @@ export function OperationEditorBody({
 
   return (
     <div
-      className={cx(styles.card, (shouldFlash || highlight) && styles.cardHighlight, isConflicting && styles.cardError)}
+      className={cx(styles.card, {
+        [styles.cardHighlight]: shouldFlash || highlight,
+        [styles.cardError]: isConflicting,
+        [styles.disabled]: operation.disabled,
+      })}
       ref={provided.innerRef}
       {...provided.draggableProps}
       data-testid={`operations.${index}.wrapper`}
@@ -96,6 +102,7 @@ export function OperationEditorBody({
         index={index}
         onChange={onChange}
         onRemove={onRemove}
+        onToggle={onToggle}
         queryModeller={queryModeller}
       />
       <div className={styles.body}>
@@ -175,6 +182,9 @@ const getStyles = (theme: GrafanaTheme2, isConflicting: boolean) => {
       transition: 'all 0.5s ease-in 0s',
       height: isConflicting ? 'auto' : '100%',
     }),
+    disabled: css({
+      opacity: 0.5,
+    }),
     cardError: css({
       boxShadow: `0px 0px 4px 0px ${theme.colors.warning.main}`,
       border: `1px solid ${theme.colors.warning.main}`,

src/VisualQueryBuilder/components/OperationHeader.tsx

@@ -18,15 +18,17 @@ interface Props {
   dragHandleProps?: DraggableProvided['dragHandleProps'];
   onChange: (index: number, update: QueryBuilderOperation) => void;
   onRemove: (index: number) => void;
+  onToggle: (index: number) => void;
 }
 
 interface State {
   isOpen?: boolean;
+  disabled?: boolean;
   alternatives?: Array<SelectableValue<QueryBuilderOperationDefinition>>;
 }
 
 export const OperationHeader = React.memo<Props>(
-  ({ operation, definition, index, onChange, onRemove, queryModeller, dragHandleProps }) => {
+  ({ operation, definition, index, onChange, onRemove, onToggle, queryModeller, dragHandleProps }) => {
     const styles = useStyles2(getStyles);
     const [state, setState] = useState<State>({});
 
@@ -57,6 +59,16 @@ export const OperationHeader = React.memo<Props>(
                 title="Click to view alternative operations"
               />
               <OperationInfoButton definition={definition} operation={operation} innerQueryPlaceholder={queryModeller.innerQueryPlaceholder} />
+              {definition.toggleable && (
+                <Button
+                  icon={operation.disabled ? "eye-slash" : "eye"}
+                  size="sm"
+                  onClick={() => onToggle(index)}
+                  fill="text"
+                  variant="secondary"
+                  title="Disable operation"
+                />
+              )}
               <Button
                 icon="times"
                 size="sm"

src/VisualQueryBuilder/components/OperationList.tsx

@@ -51,6 +51,10 @@ export function OperationList<T extends VisualQuery>({
     onChange({ ...query, operations: updatedList });
   };
 
+  const onToggle = (index: number) => {
+    onOperationChange(index, { ...operations[index], disabled: !operations[index].disabled, });
+  };
+
   const addOptions: CascaderOption[] = queryModeller.getCategories().map((category) => {
     return {
       value: category,
@@ -107,6 +111,7 @@ export function OperationList<T extends VisualQuery>({
                         datasource={datasource}
                         onChange={onOperationChange}
                         onRemove={onRemove}
+                        onToggle={onToggle}
                         onRunQuery={onRunQuery}
                         flash={opsToHighlight[index]}
                         highlight={highlightedOp === op}

src/VisualQueryBuilder/types.ts

@@ -11,6 +11,7 @@ export interface QueryBuilderLabelFilter {
 export interface QueryBuilderOperation {
   id: string;
   params: QueryBuilderOperationParamValue[];
+  disabled?: boolean;
 }
 
 export interface QueryBuilderOperationDefinition<T = any> extends RegistryItem {
@@ -27,6 +28,7 @@ export interface QueryBuilderOperationDefinition<T = any> extends RegistryItem {
   paramChangedHandler?: QueryBuilderOnParamChangedHandler;
   explainHandler?: QueryBuilderExplainOperationHandler;
   changeTypeHandler?: (op: QueryBuilderOperation, newDef: QueryBuilderOperationDefinition<T>) => QueryBuilderOperation;
+  toggleable?: boolean;
 }
 
 type QueryBuilderAddOperationHandler<T> = (