URL: Used updated query URL if changed outside of component

src/editors/query/query.url.test.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { URL } from "./query.url";
+import { screen, render } from "@testing-library/react";
+import { InfinityQuery } from "types";
+
+describe("URL", () => {
+  it("should show changed URL", () => {
+    const mockQuery1 = {
+      url: "https://example1.com",
+      type: 'json',
+      source: 'url',
+    } as InfinityQuery;
+
+    const props = {
+      query: mockQuery1,
+      onChange: jest.fn(),
+      onRunQuery: jest.fn(),
+      onShowUrlOptions: jest.fn(),
+    }
+
+    const { rerender } = render(<URL {...props}/>);
+    expect(screen.getByDisplayValue('https://example1.com')).toBeInTheDocument()
+
+    const mockQuery2 = {
+      url: "https://example2.com",
+      type: 'json',
+      source: 'url',
+    } as InfinityQuery;
+
+    rerender(<URL {...props} query={mockQuery2}/>);
+    expect(screen.getByDisplayValue('https://example2.com')).toBeInTheDocument()
+  });
+});

src/editors/query/query.url.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { InlineFormLabel, CodeEditor, Select, Input, RadioButtonGroup, Icon } from '@grafana/ui';
 import { EditorRow } from './../../components/extended/EditorRow';
 import { EditorField } from './../../components/extended/EditorField';
@@ -73,6 +73,11 @@ export const URL = ({ query, onChange, onRunQuery, onShowUrlOptions }: { query:
     onChange({ ...query, url });
     onRunQuery();
   };
+
+  useEffect(() => {
+    setURL(query.url ?? '')
+  }, [query.url])
+
   return (
     <EditorField label="URL" horizontal={true}>
       <Input