diff --git a/src/VisualQueryBuilder/components/OperationEditor.tsx b/src/VisualQueryBuilder/components/OperationEditor.tsx index 3964049..7ccaac5 100644 --- a/src/VisualQueryBuilder/components/OperationEditor.tsx +++ b/src/VisualQueryBuilder/components/OperationEditor.tsx @@ -20,6 +20,7 @@ interface Props { 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({ operation, index, onRemove, + onToggle, onChange, onRunQuery, queryModeller, @@ -78,6 +80,7 @@ export function OperationEditor({ definition={def} onChange={onChange} onRemove={onRemove} + onToggle={onToggle} queryModeller={queryModeller} query={query} timeRange={timeRange} diff --git a/src/VisualQueryBuilder/components/OperationEditorBody.tsx b/src/VisualQueryBuilder/components/OperationEditorBody.tsx index 3fabe68..205e033 100644 --- a/src/VisualQueryBuilder/components/OperationEditorBody.tsx +++ b/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 (
@@ -175,6 +182,10 @@ const getStyles = (theme: GrafanaTheme2, isConflicting: boolean) => { transition: 'all 0.5s ease-in 0s', height: isConflicting ? 'auto' : '100%', }), + disabled: css({ + opacity: 0.5, + transition: 'none', + }), cardError: css({ boxShadow: `0px 0px 4px 0px ${theme.colors.warning.main}`, border: `1px solid ${theme.colors.warning.main}`, diff --git a/src/VisualQueryBuilder/components/OperationHeader.tsx b/src/VisualQueryBuilder/components/OperationHeader.tsx index a1288c8..41aa24b 100644 --- a/src/VisualQueryBuilder/components/OperationHeader.tsx +++ b/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>; } export const OperationHeader = React.memo( - ({ operation, definition, index, onChange, onRemove, queryModeller, dragHandleProps }) => { + ({ operation, definition, index, onChange, onRemove, onToggle, queryModeller, dragHandleProps }) => { const styles = useStyles2(getStyles); const [state, setState] = useState({}); @@ -57,6 +59,16 @@ export const OperationHeader = React.memo( title="Click to view alternative operations" /> + {definition.toggleable && ( +