typing error fix and modifications (#101)

* typing error fix and modifications

* react-use module installed

* Fix type error and adhoc filter alignment

* Fix one more type error

---------

Co-authored-by: Spikatrix <[email protected]>

Author: gurinder39

package.json

@@ -147,8 +147,9 @@
     "@types/papaparse": "5.3.7",
     "@types/pluralize": "^0.0.29",
     "@types/prismjs": "1.26.0",
-    "@types/react": "18.2.15",
+    "@types/react": "18.2.28",
     "@types/react-beautiful-dnd": "13.1.3",
+    "@types/react-datepicker": "^4.19.0",
     "@types/react-dom": "18.2.7",
     "@types/react-grid-layout": "1.3.2",
     "@types/react-highlight-words": "0.16.4",
@@ -275,7 +276,7 @@
     "@grafana/ui": "workspace:*",
     "@kusto/monaco-kusto": "^7.4.0",
     "@leeoniya/ufuzzy": "1.0.8",
-    "@lezer/common": "1.0.2",
+    "@lezer/common": "^1.1.0",
     "@lezer/highlight": "1.1.3",
     "@lezer/lr": "1.3.3",
     "@locker/near-membrane-dom": "^0.12.15",
@@ -287,7 +288,7 @@
     "@opentelemetry/exporter-collector": "0.25.0",
     "@opentelemetry/semantic-conventions": "1.15.0",
     "@popperjs/core": "2.11.6",
-    "@prometheus-io/lezer-promql": "^0.37.0-rc.1",
+    "@prometheus-io/lezer-promql": "0.37.0-rc.1",
     "@pyroscope/flamegraph": "^0.35.5",
     "@react-aria/button": "3.8.0",
     "@react-aria/dialog": "3.5.3",
@@ -410,7 +411,7 @@
     "react-split-pane": "0.1.92",
     "react-table": "7.8.0",
     "react-transition-group": "4.4.5",
-    "react-use": "17.4.0",
+    "react-use": "^17.4.0",
     "react-virtual": "2.10.4",
     "react-virtualized-auto-sizer": "1.0.7",
     "react-window": "1.8.8",

packages/grafana-data/src/dataframe/ArrayDataFrame.ts

@@ -0,0 +1,69 @@
+import { QueryResultMeta } from '../types';
+import { Field, FieldType, DataFrame, TIME_SERIES_VALUE_FIELD_NAME } from '../types/dataFrame';
+
+import { guessFieldTypeForField } from './processDataFrame';
+
+/**
+ * The ArrayDataFrame takes an array of objects and presents it as a DataFrame
+ *
+ * @deprecated use arrayToDataFrame
+ */
+export class ArrayDataFrame<T = any> implements DataFrame {
+  fields: Field[] = [];
+  length = 0;
+  name?: string;
+  refId?: string;
+  meta?: QueryResultMeta;
+
+  constructor(source: T[], names?: string[]) {
+    return arrayToDataFrame(source, names) as ArrayDataFrame<T>; // returns a standard DataFrame
+  }
+}
+
+/**
+ * arrayToDataFrame will convert any array into a DataFrame
+ *
+ * @public
+ */
+export function arrayToDataFrame(source: any[], names?: string[]): DataFrame {
+  const df: DataFrame = {
+    fields: [],
+    length: source.length,
+  };
+  if (!source?.length) {
+    return df;
+  }
+
+  if (names) {
+    for (const name of names) {
+      df.fields.push(
+        makeFieldFromValues(
+          name,
+          source.map((v) => v[name])
+        )
+      );
+    }
+    return df;
+  }
+
+  const first = source.find((v) => v != null); // first not null|undefined
+  if (first != null) {
+    if (typeof first === 'object') {
+      df.fields = Object.keys(first).map((name) => {
+        return makeFieldFromValues(
+          name,
+          source.map((v) => v[name])
+        );
+      });
+    } else {
+      df.fields.push(makeFieldFromValues(TIME_SERIES_VALUE_FIELD_NAME, source));
+    }
+  }
+  return df;
+}
+
+function makeFieldFromValues(name: string, values: unknown[]): Field {
+  const f = { name, config: {}, values, type: FieldType.other };
+  f.type = guessFieldTypeForField(f) ?? FieldType.other;
+  return f;
+}

packages/grafana-data/src/themes/fnCreateColors.ts

@@ -75,6 +75,7 @@ class FnDarkColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
     disabledText: this.text.disabled,
     disabledBackground: `rgba(${this.whiteBase}, 0.04)`,
     disabledOpacity: 0.38,
+    selectedBorder: palette.orangeDarkMain,
   };
 
   gradients = {
@@ -155,6 +156,7 @@ class FnLightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
     disabledBackground: `rgba(${this.blackBase}, 0.04)`,
     disabledText: this.text.disabled,
     disabledOpacity: 0.38,
+    selectedBorder: palette.orangeLightMain,
   };
 
   gradients = {

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -57,6 +57,7 @@ export interface FeatureToggles {
   accessTokenExpirationCheck?: boolean;
   emptyDashboardPage?: boolean;
   disablePrometheusExemplarSampling?: boolean;
+  datasourceOnboarding?: boolean;
   alertingBacktesting?: boolean;
   editPanelCSVDragAndDrop?: boolean;
   alertingNoNormalState?: boolean;
@@ -72,6 +73,7 @@ export interface FeatureToggles {
   clientTokenRotation?: boolean;
   prometheusDataplane?: boolean;
   lokiMetricDataplane?: boolean;
+  newTraceView?: boolean;
   lokiLogsDataplane?: boolean;
   dataplaneFrontendFallback?: boolean;
   disableSSEDataplane?: boolean;

packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx

@@ -14,7 +14,6 @@ import CustomScrollbar from '../../CustomScrollbar/CustomScrollbar';
 import { Field } from '../../Forms/Field';
 import { Icon } from '../../Icon/Icon';
 import { getInputStyles, Input } from '../../Input/Input';
-import { Portal } from '../../Portal/Portal';
 import { Tooltip } from '../../Tooltip/Tooltip';
 import { TimePickerTitle } from '../TimeRangePicker/TimePickerTitle';
 import { TimeRangeList } from '../TimeRangePicker/TimeRangeList';

packages/grafana-ui/src/components/Dropdown/Dropdown.tsx

@@ -51,6 +51,7 @@ export const Dropdown = React.memo(({ children, overlay, placement, offset, onVi
 
   return (
     <>
+      {/* @ts-ignore */}
       {React.cloneElement(typeof children === 'function' ? children(visible) : children, {
         ref: setTriggerRef,
       })}
@@ -71,6 +72,7 @@ export const Dropdown = React.memo(({ children, overlay, placement, offset, onVi
                 timeout={{ appear: animationDuration, exit: 0, enter: 0 }}
                 classNames={animationStyles}
               >
+                {/* @ts-ignore */}
                 <div ref={transitionRef}>{ReactUtils.renderOrCallToRender(overlay, {})}</div>
               </CSSTransition>
             </div>

packages/grafana-ui/src/components/Icon/Icon.tsx

@@ -37,11 +37,12 @@ const getIconStyles = (theme: GrafanaTheme2) => {
 };
 
 export const Icon = React.forwardRef<HTMLDivElement, IconProps>(
-  ({ size = 'md', type = 'default', name, className, style, title = '', ...divElementProps }, ref) => {
+  ({ size = 'md', type = 'default', name, className, style, title = '', ...divElementProps }, ref): JSX.Element => {
     const styles = useStyles2(getIconStyles);
 
     /* Temporary solution to display also font awesome icons */
     if (name?.startsWith('fa fa-')) {
+      /* @ts-ignore */
       return <i className={getFontAwesomeIconStyles(name, className)} {...divElementProps} style={style} />;
     }
 
@@ -65,6 +66,7 @@ export const Icon = React.forwardRef<HTMLDivElement, IconProps>(
 
     return (
       <div className={styles.container} {...divElementProps} ref={ref}>
+        {/* @ts-ignore */}
         <SVG
           src={svgPath}
           width={svgWid}

packages/grafana-ui/src/components/Menu/MenuItem.tsx

@@ -160,25 +160,30 @@ export const MenuItem = React.memo(
         {...disabledProps}
       >
         <>
+          {/* @ts-ignore */}
           {icon && <Icon name={icon} className={styles.icon} aria-hidden />}
           {label}
 
           <div className={cx(styles.rightWrapper, { [styles.withShortcut]: hasShortcut })}>
             {hasShortcut && (
               <div className={styles.shortcut}>
+                {/* @ts-ignore */}
                 <Icon name="keyboard" aria-hidden />
                 {shortcut}
               </div>
             )}
             {hasSubMenu && (
-              <SubMenu
-                items={childItems}
-                isOpen={isSubMenuOpen}
-                openedWithArrow={openedWithArrow}
-                setOpenedWithArrow={setOpenedWithArrow}
-                close={closeSubMenu}
-                customStyle={customSubMenuContainerStyles}
-              />
+              <>
+                {/* @ts-ignore */}
+                <SubMenu
+                  items={childItems}
+                  isOpen={isSubMenuOpen}
+                  openedWithArrow={openedWithArrow}
+                  setOpenedWithArrow={setOpenedWithArrow}
+                  close={closeSubMenu}
+                  customStyle={customSubMenuContainerStyles}
+                />
+              </>
             )}
           </div>
         </>

packages/grafana-ui/src/components/Menu/SubMenu.tsx

@@ -50,6 +50,7 @@ export const SubMenu = React.memo(
     return (
       <>
         <div className={styles.iconWrapper} aria-label={selectors.components.Menu.SubMenu.icon}>
+          {/* @ts-ignore */}
           <Icon name="angle-right" className={styles.icon} aria-hidden />
         </div>
         {isOpen && (
@@ -60,6 +61,7 @@ export const SubMenu = React.memo(
             style={customStyle}
           >
             <div tabIndex={-1} className={styles.itemsWrapper} role="menu" onKeyDown={handleKeys}>
+              {/* @ts-ignore */}
               {items}
             </div>
           </div>

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -125,7 +125,7 @@ export function SelectBase<T, Rest = {}>({
   menuPlacement = 'auto',
   menuPosition,
   menuShouldPortal = true,
-  noOptionsMessage = t('grafana-ui.select.no-options-label', 'No options found'),
+  noOptionsMessage = t('grafana-ui.select.no-options-label', 'No options found') as string,
   onBlur,
   onChange,
   onCloseMenu,
@@ -138,7 +138,7 @@ export function SelectBase<T, Rest = {}>({
   onFocus,
   openMenuOnFocus = false,
   options = [],
-  placeholder = t('grafana-ui.select.placeholder', 'Choose'),
+  placeholder = t('grafana-ui.select.placeholder', 'Choose') as string,
   prefix,
   renderControl,
   showAllSelectedWhenOpen = true,

packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx

@@ -1,5 +1,4 @@
 import { cx, css } from '@emotion/css';
-import { isString } from 'lodash';
 import React, { forwardRef, ButtonHTMLAttributes, ReactNode } from 'react';
 
 import { GrafanaTheme2, IconName, isIconName } from '@grafana/data';

packages/grafana-ui/src/themes/ThemeContext.tsx

@@ -40,6 +40,7 @@ export const withTheme = <P extends Themeable, S extends {} = {}>(Component: Rea
   };
 
   WithTheme.displayName = `WithTheme(${Component.displayName})`;
+  // @ts-ignore
   hoistNonReactStatics(WithTheme, Component);
   type Hoisted = typeof WithTheme & S;
   return WithTheme as Hoisted;
@@ -60,6 +61,7 @@ export const withTheme2 = <P extends Themeable2, S extends {} = {}>(Component: R
   };
 
   WithTheme.displayName = `WithTheme(${Component.displayName})`;
+  // @ts-ignore
   hoistNonReactStatics(WithTheme, Component);
   type Hoisted = typeof WithTheme & S;
   return WithTheme as Hoisted;

packages/grafana-ui/src/themes/mixins.ts

@@ -40,16 +40,16 @@ export function mediaUp(breakpoint: string) {
   return `only screen and (min-width: ${breakpoint})`;
 }
 
-const isGrafanaTheme2 = (theme: GrafanaTheme | GrafanaTheme2): theme is GrafanaTheme2 => theme.hasOwnProperty('v1');
+// const isGrafanaTheme2 = (theme: GrafanaTheme | GrafanaTheme2): theme is GrafanaTheme2 => theme.hasOwnProperty('v1');
 export const focusCss = (theme: GrafanaTheme | GrafanaTheme2) => {
-  const isTheme2 = isGrafanaTheme2(theme);
+  /* const isTheme2 = isGrafanaTheme2(theme);
   const firstColor = isTheme2 ? theme.colors.background.canvas : theme.colors.bodyBg;
   const secondColor = isTheme2 ? theme.colors.primary.main : theme.colors.formFocusOutline;
+  box-shadow: 0 0 0 2px ${firstColor}, 0 0 0px 4px ${secondColor}; */
 
   return `
   outline: 2px dotted transparent;
   outline-offset: 2px;
-  box-shadow: 0 0 0 2px ${firstColor}, 0 0 0px 4px ${secondColor};
   transition-property: outline, outline-offset, box-shadow;
   transition-duration: 0.2s;
   transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);`;

public/app/core/components/Page/SectionNavItem.test.tsx

@@ -82,7 +82,7 @@ export function TraceToMetricsSettings({ options, onOptionsChange }: Props) {
       <InlineFieldRow>
         <IntervalInput
           label={getTimeShiftLabel('start')}
-          tooltip={getTimeShiftTooltip('start')}
+          tooltip={getTimeShiftTooltip('start', '')}
           value={options.jsonData.tracesToMetrics?.spanStartTimeShift || ''}
           onChange={(val) => {
             updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', {
@@ -97,7 +97,7 @@ export function TraceToMetricsSettings({ options, onOptionsChange }: Props) {
       <InlineFieldRow>
         <IntervalInput
           label={getTimeShiftLabel('end')}
-          tooltip={getTimeShiftTooltip('end')}
+          tooltip={getTimeShiftTooltip('end', '')}
           value={options.jsonData.tracesToMetrics?.spanEndTimeShift || ''}
           onChange={(val) => {
             updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', {

public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx

@@ -12,7 +12,6 @@ import { GrafanaRoute, Props } from './GrafanaRoute';
 import { GrafanaRouteComponentProps } from './types';
 
 function setup(overrides: Partial<Props>) {
-  const store = configureStore();
   const props: Props = {
     location: { search: '?query=hello&test=asd' } as Location,
     history: {} as History,

public/app/core/navigation/GrafanaRoute.test.tsx

@@ -36,6 +36,6 @@ export const ThemeProvider = ({ children, value }: { children: React.ReactNode;
 
 export const provideTheme = (component: React.ComponentType<any>, theme: GrafanaTheme2) => {
   return function ThemeProviderWrapper(props: any) {
-    return <ThemeProvider value={theme} children={React.createElement(component, { ...props })} />;
+    return <ThemeProvider value={theme}>{React.createElement(component, { ...props })}</ThemeProvider>;
   };
 };

public/app/core/utils/ConfigProvider.tsx

@@ -1,7 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { Provider } from 'react-redux';
 import { openMenu } from 'react-select-event';
 import { mockToolkitActionCreator } from 'test/core/redux/mocks';
 import { TestProvider } from 'test/helpers/TestProvider';
@@ -10,7 +9,6 @@ import { locationService } from '@grafana/runtime';
 import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps';
 
 import appEvents from '../../core/app_events';
-import { configureStore } from '../../store/configureStore';
 import { ShowModalReactEvent } from '../../types/events';
 
 import { AlertHowToModal } from './AlertHowToModal';
@@ -32,7 +30,6 @@ const defaultProps: Props = {
 };
 
 const setup = (propOverrides?: object) => {
-  const store = configureStore();
   const props: Props = {
     ...defaultProps,
     ...propOverrides,

public/app/features/alerting/AlertRuleList.test.tsx

@@ -156,7 +156,6 @@ function FolderGroupAndEvaluationInterval({
 function ForInput({ evaluateEvery }: { evaluateEvery: string }) {
   const styles = useStyles2(getStyles);
   const {
-    watch,
     register,
     formState: { errors },
   } = useFormContext<RuleFormValues>();