Refactor to fix type issues

package.json

@@ -67,6 +67,7 @@
     "mathjs": "11.7.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-use": "^17.5.0",
     "tslib": "2.5.3",
     "uql": "0.0.22",
     "xml2js": "^0.6.2"

src/app/utils.ts

@@ -1,5 +1,15 @@
 import { ArrayVector, MutableDataFrame, FieldType, DataFrame, Field, Labels, TableData } from '@grafana/data';
-import type { InfinityCSVQuery, InfinityGraphQLQuery, InfinityHTMLQuery, InfinityJSONQuery, InfinityQuery, InfinityQueryWithDataSource, InfinityXMLQuery } from './../types';
+import type {
+  InfinityCSVQuery,
+  InfinityGraphQLQuery,
+  InfinityHTMLQuery,
+  InfinityJSONQuery,
+  InfinityQuery,
+  InfinityQueryWithDataSource,
+  InfinityQueryWithURLSource,
+  InfinityXMLQuery,
+  InfinityQueryType,
+} from './../types';
 
 export const isTableData = (res: any): res is TableData => res && res.columns;
 export const isDataFrame = (res: any): res is DataFrame => res && res.fields;
@@ -33,6 +43,24 @@ export const isDataQuery = (query: InfinityQuery): query is InfinityQueryWithDat
       return false;
   }
 };
+
+// We have to have query: unknown here as InfinityQuery and InfinityQueryWithURLSource<InfinityQueryType> are not compatible according to TypeScript
+export const isInfinityQueryWithUrlSource = (query: unknown): query is InfinityQueryWithURLSource<InfinityQueryType> => {
+  // We do a basic check to ensure that query is an object and has a type property
+  if (!query || typeof query !== 'object' || !('type' in query)) {
+    return false;
+  }
+
+  // we check if the query is a data query or has suitable type
+  if (isDataQuery(query as InfinityQuery) || query.type === 'uql' || query.type === 'groq') {
+    // It needs to have a source property and it should be 'url'
+    if ('source' in query) {
+      return query.source === 'url';
+    }
+  }
+
+  return false;
+};
 export const toTimeSeriesLong = (data: DataFrame[]): DataFrame[] => {
   if (!Array.isArray(data) || data.length === 0) {
     return data;

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

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

src/editors/query/query.url.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
+import { usePrevious } from 'react-use';
 import { InlineFormLabel, CodeEditor, Select, Input, RadioButtonGroup, Icon } from '@grafana/ui';
 import { EditorRow } from './../../components/extended/EditorRow';
 import { EditorField } from './../../components/extended/EditorField';
 import { Stack } from './../../components/extended/Stack';
-import { isDataQuery } from './../../app/utils';
+import { isDataQuery, isInfinityQueryWithUrlSource } from './../../app/utils';
 import { KeyValueEditor } from './../../components/KeyValuePairEditor';
 import type { InfinityQuery, InfinityURLOptions, QueryBodyContentType, QueryBodyType } from './../../types';
 import type { SelectableValue } from '@grafana/data';
@@ -62,24 +63,27 @@ export const Method = ({ query, onChange, onRunQuery }: { query: InfinityQuery;
 };
 
 export const URL = ({ query, onChange, onRunQuery, onShowUrlOptions }: { query: InfinityQuery; onChange: (value: InfinityQuery) => void; onRunQuery: () => void; onShowUrlOptions: () => void }) => {
-  const [url, setURL] = useState((isDataQuery(query) || query.type === 'uql' || query.type === 'groq') && query.source === 'url' ? query.url || '' : '');
-  if (!(isDataQuery(query) || query.type === 'uql' || query.type === 'groq')) {
-    return <></>;
-  }
-  if (query.source !== 'url') {
+  const [url, setURL] = useState(isInfinityQueryWithUrlSource(query) ? query.url || '' : '');
+  const previousQuery = usePrevious(query);
+
+  useEffect(() => {
+    if (isInfinityQueryWithUrlSource(query) && isInfinityQueryWithUrlSource(previousQuery)) {
+      // We want to check if the URL has changed outside of component and update the state accordingly
+      if (query.url !== previousQuery.url) {
+        setURL(query.url);
+      }
+    }
+  }, [query, previousQuery]);
+
+  if (!isInfinityQueryWithUrlSource(query)) {
     return <></>;
   }
+
   const onURLChange = () => {
     onChange({ ...query, url });
     onRunQuery();
   };
 
-  useEffect(() => {
-    if(query.url !== url) {
-      setURL(query.url ?? '')
-    }
-  }, [query.url])
-
   return (
     <EditorField label="URL" horizontal={true}>
       <Input

yarn.lock

@@ -7318,7 +7318,7 @@ ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-nano-css@^5.3.1:
+nano-css@^5.3.1, nano-css@^5.6.1:
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/nano-css/-/nano-css-5.6.1.tgz#964120cb1af6cccaa6d0717a473ccd876b34c197"
   integrity sha512-T2Mhc//CepkTa3X4pUhKgbEheJHYAxD0VptuqFhDbGMUWVV2m+lkNiW/Ieuj35wrfC8Zm0l7HvssQh7zcEttSw==
@@ -8368,6 +8368,26 @@ [email protected]:
     ts-easing "^0.2.0"
     tslib "^2.1.0"
 
+react-use@^17.5.0:
+  version "17.5.0"
+  resolved "https://registry.yarnpkg.com/react-use/-/react-use-17.5.0.tgz#1fae45638828a338291efa0f0c61862db7ee6442"
+  integrity sha512-PbfwSPMwp/hoL847rLnm/qkjg3sTRCvn6YhUZiHaUa3FA6/aNoFX79ul5Xt70O1rK+9GxSVqkY0eTwMdsR/bWg==
+  dependencies:
+    "@types/js-cookie" "^2.2.6"
+    "@xobotyi/scrollbar-width" "^1.9.5"
+    copy-to-clipboard "^3.3.1"
+    fast-deep-equal "^3.1.3"
+    fast-shallow-equal "^1.0.0"
+    js-cookie "^2.2.1"
+    nano-css "^5.6.1"
+    react-universal-interface "^0.6.2"
+    resize-observer-polyfill "^1.5.1"
+    screenfull "^5.1.0"
+    set-harmonic-interval "^1.0.1"
+    throttle-debounce "^3.0.1"
+    ts-easing "^0.2.0"
+    tslib "^2.1.0"
+
 [email protected]:
   version "1.8.9"
   resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.9.tgz#24bc346be73d0468cdf91998aac94e32bc7fa6a8"
@@ -9141,16 +9161,7 @@ string-template@~0.2.1:
   resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
   integrity sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9226,14 +9237,7 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -10116,7 +10120,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -10134,15 +10138,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"