UI: Update vulnerable dependencies

pkg/ui/react-app/globals.d.ts

@@ -0,0 +1,9 @@
+import { Moment } from 'moment';
+
+declare global {
+  interface Window {
+    jQuery: JQueryStatic;
+    moment: Moment;
+    THANOS_QUERY_URL: string;
+  }
+}

pkg/ui/react-app/package.json

@@ -90,15 +90,15 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.4.3",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^6.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-react-app": "^7.0.0",
     "eslint-plugin-prettier": "^4.0.0",
     "jest-fetch-mock": "^3.0.3",
     "mutationobserver-shim": "^0.3.7",
     "prettier": "^2.3.2",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.0",
     "sinon": "^9.2.4",
-    "typescript": "^4.4.3"
+    "typescript": "^4.6.2"
   },
   "proxy": "http://localhost:10902",
   "jest": {

pkg/ui/react-app/src/components/CustomInfiniteScroll.tsx

@@ -12,8 +12,7 @@ interface CustomInfiniteScrollProps<T> {
   child: ComponentType<InfiniteScrollItemsProps<T>>;
 }
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const CustomInfiniteScroll = <T extends unknown>({ allItems, child }: CustomInfiniteScrollProps<T>) => {
+const CustomInfiniteScroll = <T,>({ allItems, child }: CustomInfiniteScrollProps<T>) => {
   const [items, setItems] = useState<T[]>(allItems.slice(0, 50));
   const [index, setIndex] = useState<number>(initialNumberOfItemsDisplayed);
   const [hasMore, setHasMore] = useState<boolean>(allItems.length > initialNumberOfItemsDisplayed);

pkg/ui/react-app/src/components/withStatusIndicator.tsx

@@ -11,7 +11,7 @@ interface StatusIndicatorProps {
 }
 
 export const withStatusIndicator =
-  <T extends any>(Component: ComponentType<T>): FC<StatusIndicatorProps & T> =>
+  <T,>(Component: ComponentType<T>): FC<StatusIndicatorProps & T> =>
   ({ error, isLoading, customErrorMsg, componentTitle, ...rest }: StatusIndicatorProps) => {
     if (error) {
       return (

pkg/ui/react-app/src/globals.ts

@@ -1,6 +1,5 @@
 import jquery from 'jquery';
 
-(window as any).jQuery = jquery;
-(window as any).moment = require('moment');
-
-(window as any).THANOS_QUERY_URL = '';
+window.jQuery = jquery;
+window.moment = require('moment');
+window.THANOS_QUERY_URL = '';

pkg/ui/react-app/src/hooks/useFetch.ts

@@ -8,7 +8,7 @@ export interface FetchState<T> {
   isLoading: boolean;
 }
 
-export const useFetch = <T extends any>(url: string, options?: RequestInit): FetchState<T> => {
+export const useFetch = <T>(url: string, options?: RequestInit): FetchState<T> => {
   const [response, setResponse] = useState<APIResponse<T>>({ status: 'start fetching' } as any);
   const [error, setError] = useState<Error>();
   const [isLoading, setIsLoading] = useState<boolean>(true);

pkg/ui/react-app/src/pages/graph/ExpressionInput.tsx

@@ -15,7 +15,7 @@ import { autocompletion, completionKeymap, CompletionContext, CompletionResult }
 import { baseTheme, lightTheme, darkTheme, promqlHighlighter } from './CMTheme';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch, faSpinner } from '@fortawesome/free-solid-svg-icons';
-import { newCompleteStrategy } from 'codemirror-promql/dist/cjs/complete';
+import { newCompleteStrategy } from 'codemirror-promql/dist/esm/complete';
 import PathPrefixProps from '../../types/PathPrefixProps';
 import { useTheme } from '../../contexts/ThemeContext';
 

pkg/ui/react-app/src/pages/graph/GraphHelpers.test.ts

@@ -1,4 +1,4 @@
-import { formatValue, getColors, parseValue, getOptions } from './GraphHelpers';
+import { formatValue, parseValue, getOptions } from './GraphHelpers';
 import moment from 'moment-timezone';
 require('../../vendor/flot/jquery.flot'); // need for $.colors
 
@@ -68,7 +68,7 @@ describe('GraphHelpers', () => {
       try {
         formatValue(undefined as any);
       } catch (error) {
-        expect(error.message).toEqual("couldn't format a value, this is a bug");
+        expect((error as Error).message).toEqual("couldn't format a value, this is a bug");
       }
     });
   });

pkg/ui/react-app/src/pages/graph/Panel.test.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { mount, shallow } from 'enzyme';
-import Panel, { PanelOptions, PanelType } from './Panel';
-import ExpressionInput from './ExpressionInput';
+import Panel, { PanelOptions, PanelProps, PanelType } from './Panel';
 import GraphControls from './GraphControls';
 import { NavLink, TabPane } from 'reactstrap';
 import TimeInput from './TimeInput';
 import DataTable from './DataTable';
 import { GraphTabContent } from './GraphTabContent';
 
-const defaultProps = {
+const defaultProps: PanelProps = {
   id: 'abc123',
   useLocalTime: false,
   options: {
@@ -22,7 +21,6 @@ const defaultProps = {
     useDeduplication: true,
     usePartialResponse: false,
     storeMatches: [],
-    defaultStep: '1s',
   },
   onOptionsChanged: (): void => {
     // Do nothing.
@@ -41,6 +39,9 @@ const defaultProps = {
   },
   stores: [],
   enableAutocomplete: true,
+  defaultStep: '1s',
+  enableHighlighting: true,
+  enableLinter: true,
 };
 
 describe('Panel', () => {

pkg/ui/react-app/src/pages/graph/Panel.tsx

@@ -17,7 +17,7 @@ import PathPrefixProps from '../../types/PathPrefixProps';
 import { QueryParams } from '../../types/types';
 import { parseDuration } from '../../utils';
 
-interface PanelProps {
+export interface PanelProps {
   id: string;
   options: PanelOptions;
   onOptionsChanged: (opts: PanelOptions) => void;

pkg/ui/react-app/src/pages/targets/target.test.ts

@@ -4,7 +4,7 @@ import { sampleApiResponse } from './__testdata__/testdata';
 import { groupTargets, Target, ScrapePools, getColor } from './target';
 
 describe('groupTargets', () => {
-  const targets: Target[] = sampleApiResponse.data.activeTargets as Target[];
+  const targets: Target[] = sampleApiResponse.data.activeTargets as unknown as Target[];
   const targetGroups: ScrapePools = groupTargets(targets);
 
   it('groups a list of targets by scrape job', () => {

pkg/ui/react-app/src/thanos/pages/blocks/helpers.test.tsx

@@ -574,7 +574,7 @@ const filteredBlocks = [
   },
 ];
 
-const sorted = sortBlocks(overlapCaseData.blocks, overlapCaseData.label);
+const sorted = sortBlocks(overlapCaseData.blocks, overlapCaseData.label, true);
 const filteredBlockPools = getFilteredBlockPools(blockPools, filteredBlocks);
 const source = 'prometheus_one';
 

pkg/ui/react-app/src/utils/index.ts

@@ -111,7 +111,7 @@ export const formatDuration = (d: number): string => {
   return r;
 };
 
-const MAX_TIME = 9223372036854775807;
+const MAX_TIME = BigInt('9223372036854775807');
 const MIN_TIME = 0;
 
 export function parseTime(timeText: string): number {

pkg/ui/react-app/tsconfig.json

@@ -23,6 +23,7 @@
   "include": [
     "src",
     "test",
-    "react-app-env.d.ts"
+    "react-app-env.d.ts",
+    "globals.d.ts"
   ]
 }