QueryEditorRow: Fix broken drag-and-drop reordering (#56515)

This commit is contained in:
kay delaney
2022-10-10 09:40:54 +01:00
committed by GitHub
parent 1bcce79d4e
commit d79f60d73f

View File

@@ -75,6 +75,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
element: HTMLElement | null = null;
angularScope: AngularQueryComponentScope<TQuery> | null = null;
angularQueryEditor: AngularComponent | null = null;
id = '';
state: State<TQuery> = {
datasource: null,
@@ -85,8 +86,9 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
};
componentDidMount() {
const { data, query } = this.props;
const { data, query, id } = this.props;
const dataFilteredByRefId = filterPanelDataToQuery(data, query.refId);
this.id = uniqueId(id + '_');
this.setState({ data: dataFilteredByRefId });
this.loadDatasource();
@@ -159,6 +161,10 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
const { datasource, loadedDataSourceIdentifier } = this.state;
const { data, query } = this.props;
if (prevProps.id !== this.props.id) {
this.id = uniqueId(this.props.id + '_');
}
if (data !== prevProps.data) {
const dataFilteredByRefId = filterPanelDataToQuery(data, query.refId);
@@ -449,10 +455,9 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
};
render() {
const { query, id, index, visualization } = this.props;
const { query, index, visualization } = this.props;
const { datasource, showingHelp, data } = this.state;
const isDisabled = query.hide;
const generatedUniqueId = uniqueId(id + '_');
const rowClasses = classNames('query-editor-row', {
'query-editor-row--disabled': isDisabled,
@@ -469,14 +474,14 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
return (
<div aria-label={selectors.components.QueryEditorRows.rows}>
<QueryOperationRow
id={generatedUniqueId}
id={this.id}
draggable={true}
index={index}
headerElement={this.renderHeader}
actions={this.renderActions}
onOpen={this.onOpen}
>
<div className={rowClasses} id={generatedUniqueId}>
<div className={rowClasses} id={this.id}>
<ErrorBoundaryAlert>
{showingHelp && DatasourceCheatsheet && (
<OperationRowHelp>