SharedQuery: Fixes shared query editor now showing queries (#29849)

* SharedQuery: Fixes shared query editor now showing queries

* fixed updating state when query change

public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx

@@ -43,17 +43,20 @@ export class DashboardQueryEditor extends PureComponent<Props, State> {
   }
   }
 
 
   async componentDidMount() {
   async componentDidMount() {
-    this.componentDidUpdate(this.props);
+    await this.updateState();
   }
   }
 
 
   async componentDidUpdate(prevProps: Props) {
   async componentDidUpdate(prevProps: Props) {
     const { panelData, queries } = this.props;
     const { panelData, queries } = this.props;
 
 
-    if (queries.length < 0) {
-      return;
+    if (prevProps.panelData !== panelData || prevProps.queries !== queries) {
+      await this.updateState();
+    }
   }
   }
 
 
-    if (!prevProps || prevProps.panelData !== panelData) {
+  async updateState() {
+    const { panelData, queries } = this.props;
+
     const query = queries[0] as DashboardQuery;
     const query = queries[0] as DashboardQuery;
     const defaultDS = await getDatasourceSrv().get();
     const defaultDS = await getDatasourceSrv().get();
     const dashboard = getDashboardSrv().getCurrent();
     const dashboard = getDashboardSrv().getCurrent();
@@ -85,13 +88,16 @@ export class DashboardQueryEditor extends PureComponent<Props, State> {
 
 
     this.setState({ defaultDatasource: defaultDS.name, results: info });
     this.setState({ defaultDatasource: defaultDS.name, results: info });
   }
   }
-  }
 
 
   onPanelChanged = (id: number) => {
   onPanelChanged = (id: number) => {
-    const { onChange } = this.props;
     const query = this.getQuery();
     const query = this.getQuery();
-    query.panelId = id;
-    onChange([query]);
+
+    this.props.onChange([
+      {
+        ...query,
+        panelId: id,
+      } as DashboardQuery,
+    ]);
   };
   };
 
 
   renderQueryData(editURL: string) {
   renderQueryData(editURL: string) {