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,55 +43,61 @@ export class DashboardQueryEditor extends PureComponent<Props, State> {
   }
 
   async componentDidMount() {
-    this.componentDidUpdate(this.props);
+    await this.updateState();
   }
 
   async componentDidUpdate(prevProps: 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) {
-      const query = queries[0] as DashboardQuery;
-      const defaultDS = await getDatasourceSrv().get();
-      const dashboard = getDashboardSrv().getCurrent();
-      const panel = dashboard.getPanelById(query.panelId ?? -124134);
+  async updateState() {
+    const { panelData, queries } = this.props;
 
-      if (!panel) {
-        this.setState({ defaultDatasource: defaultDS.name });
-        return;
-      }
+    const query = queries[0] as DashboardQuery;
+    const defaultDS = await getDatasourceSrv().get();
+    const dashboard = getDashboardSrv().getCurrent();
+    const panel = dashboard.getPanelById(query.panelId ?? -124134);
 
-      const mainDS = await getDatasourceSrv().get(panel.datasource);
-      const info: ResultInfo[] = [];
+    if (!panel) {
+      this.setState({ defaultDatasource: defaultDS.name });
+      return;
+    }
 
-      for (const query of panel.targets) {
-        const ds = query.datasource ? await getDatasourceSrv().get(query.datasource) : mainDS;
-        const fmt = ds.getQueryDisplayText ? ds.getQueryDisplayText : getQueryDisplayText;
+    const mainDS = await getDatasourceSrv().get(panel.datasource);
+    const info: ResultInfo[] = [];
 
-        const qData = filterPanelDataToQuery(panelData, query.refId);
-        const queryData = qData ? qData : panelData;
+    for (const query of panel.targets) {
+      const ds = query.datasource ? await getDatasourceSrv().get(query.datasource) : mainDS;
+      const fmt = ds.getQueryDisplayText ? ds.getQueryDisplayText : getQueryDisplayText;
 
-        info.push({
-          refId: query.refId,
-          query: fmt(query),
-          img: ds.meta.info.logos.small,
-          data: queryData.series,
-          error: queryData.error,
-        });
-      }
+      const qData = filterPanelDataToQuery(panelData, query.refId);
+      const queryData = qData ? qData : panelData;
 
-      this.setState({ defaultDatasource: defaultDS.name, results: info });
+      info.push({
+        refId: query.refId,
+        query: fmt(query),
+        img: ds.meta.info.logos.small,
+        data: queryData.series,
+        error: queryData.error,
+      });
     }
+
+    this.setState({ defaultDatasource: defaultDS.name, results: info });
   }
 
   onPanelChanged = (id: number) => {
-    const { onChange } = this.props;
     const query = this.getQuery();
-    query.panelId = id;
-    onChange([query]);
+
+    this.props.onChange([
+      {
+        ...query,
+        panelId: id,
+      } as DashboardQuery,
+    ]);
   };
 
   renderQueryData(editURL: string) {