Build: fix failing grafana/ui build (#16913)

* Bump version of @types/react and regenerate yarn.lock
* Fix imports in grafana/ui

package.json

@@ -31,7 +31,7 @@
     "@types/lodash": "4.14.123",
     "@types/node": "11.13.4",
     "@types/papaparse": "4.5.9",
-    "@types/react": "16.8.13",
+    "@types/react": "16.8.16",
     "@types/react-dom": "16.8.4",
     "@types/react-grid-layout": "0.16.7",
     "@types/react-select": "2.0.15",

packages/grafana-ui/package.json

@@ -55,7 +55,7 @@
     "@types/node": "10.14.1",
     "@types/papaparse": "4.5.9",
     "@types/pretty-format": "20.0.1",
-    "@types/react": "16.8.13",
+    "@types/react": "16.8.16",
     "@types/react-custom-scrollbars": "4.0.5",
     "@types/react-test-renderer": "16.8.1",
     "@types/react-transition-group": "2.0.16",

packages/grafana-ui/rollup.config.ts

@@ -41,6 +41,7 @@ const buildCjsPackage = ({ env }) => {
             'sortBy',
             'uniqueId',
             'zip',
+            'omit',
           ],
           '../../node_modules/react-color/lib/components/common': ['Saturation', 'Hue', 'Alpha'],
         },

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

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { select, pie, arc, event } from 'd3';
-import { sum } from 'lodash';
+import sum from 'lodash/sum';
 
 import { GrafanaThemeType, DisplayValue } from '../../types';
 import { Themeable } from '../../index';

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

@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
-
+import { SelectOptionItem } from '../Select/Select';
-import { SelectOptionItem, ButtonSelect, Tooltip } from '@grafana/ui';
+import { Tooltip } from '../Tooltip/Tooltip';
+import { ButtonSelect } from '../Select/ButtonSelect';
 
 export const offOption = { label: 'Off', value: '' };
 export const defaultIntervals = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];

packages/grafana-ui/src/components/SecretFormFied/SecretFormField.tsx

@@ -1,4 +1,4 @@
-import { omit } from 'lodash';
+import omit from 'lodash/omit';
 import React, { InputHTMLAttributes, FunctionComponent } from 'react';
 import { FormField } from '..';
 

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

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import Select, { SelectOptionItem } from './Select';
-import { PopperContent } from '@grafana/ui/src/components/Tooltip/PopperController';
+import { PopperContent } from '../Tooltip/PopperController';
 
 interface ButtonComponentProps {
   label: string | undefined;

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

@@ -17,8 +17,8 @@ import IndicatorsContainer from './IndicatorsContainer';
 import NoOptionsMessage from './NoOptionsMessage';
 import resetSelectStyles from './resetSelectStyles';
 import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
-import { PopperContent } from '@grafana/ui/src/components/Tooltip/PopperController';
+import { PopperContent } from '../Tooltip/PopperController';
-import { Tooltip } from '@grafana/ui';
+import { Tooltip } from '../Tooltip/Tooltip';
 
 export interface SelectOptionItem<T> {
   label?: string;

packages/grafana-ui/src/components/SingleStatShared/FieldDisplayEditor.tsx

@@ -2,13 +2,17 @@
 import React, { PureComponent, ChangeEvent } from 'react';
 
 // Components
-import { FormField, FormLabel, PanelOptionsGroup, StatsPicker, ReducerID } from '@grafana/ui';
+import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
+import { FormLabel } from '../FormLabel/FormLabel';
+import { FormField } from '../FormField/FormField';
+import { StatsPicker } from '../StatsPicker/StatsPicker';
 
 // Types
 import { FieldDisplayOptions, DEFAULT_FIELD_DISPLAY_VALUES_LIMIT } from '../../utils/fieldDisplay';
 import { Field } from '../../types/data';
 import Select, { SelectOptionItem } from '../Select/Select';
 import { toNumberString, toIntegerOrUndefined } from '../../utils';
+import { ReducerID } from '../../utils/fieldReducer';
 
 const showOptions: Array<SelectOptionItem<boolean>> = [
   {

packages/grafana-ui/src/components/SingleStatShared/FieldPropertiesEditor.tsx

@@ -2,11 +2,15 @@
 import React, { PureComponent, ChangeEvent } from 'react';
 
 // Components
-import { FormField, FormLabel, PanelOptionsGroup, UnitPicker, SelectOptionItem } from '@grafana/ui';
+import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
+import { FormField } from '../FormField/FormField';
+import { FormLabel } from '../FormLabel/FormLabel';
+import { UnitPicker } from '../UnitPicker/UnitPicker';
 
 // Types
 import { Field } from '../../types/data';
 import { toNumberString, toIntegerOrUndefined } from '../../utils';
+import { SelectOptionItem } from '../Select/Select';
 
 import { VAR_SERIES_NAME, VAR_FIELD_NAME, VAR_CALC, VAR_CELL_PREFIX } from '../../utils/fieldDisplay';
 

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

@@ -14,7 +14,6 @@ import { Themeable } from '../../types/theme';
 
 import { sortSeriesData } from '../../utils/processSeriesData';
 
-import { SeriesData, InterpolateFunction } from '@grafana/ui';
 import {
   TableCellBuilder,
   ColumnStyle,
@@ -23,6 +22,8 @@ import {
   simpleCellBuilder,
 } from './TableCellBuilder';
 import { stringToJsRegex } from '../../utils/index';
+import { SeriesData } from '../../types/data';
+import { InterpolateFunction } from '../../types/panel';
 
 export interface Props extends Themeable {
   data: SeriesData;

packages/grafana-ui/src/components/Table/TableCellBuilder.tsx

@@ -4,10 +4,10 @@ import React, { ReactElement } from 'react';
 import { GridCellProps } from 'react-virtualized';
 import { Table, Props } from './Table';
 import moment from 'moment';
-import { ValueFormatter } from '../../utils/index';
+import { ValueFormatter, getValueFormat, getColorFromHexRgbOrName } from '../../utils/index';
 import { GrafanaTheme } from '../../types/theme';
-import { getValueFormat, getColorFromHexRgbOrName, Field } from '@grafana/ui';
 import { InterpolateFunction } from '../../types/panel';
+import { Field } from '../../types/data';
 
 export interface TableCellBuilderOptions {
   value: any;

packages/grafana-ui/src/components/Table/examples.ts

@@ -1,7 +1,6 @@
 import { SeriesData } from '../../types/data';
 import { ColumnStyle } from './TableCellBuilder';
-
+import { getColorDefinitionByName } from '../../utils/namedColorsPalette';
-import { getColorDefinitionByName } from '@grafana/ui';
 
 const SemiDarkOrange = getColorDefinitionByName('semi-dark-orange');
 

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

@@ -1,10 +1,11 @@
 import React, { PureComponent, ChangeEvent } from 'react';
 import { Threshold } from '../../types';
-import { ColorPicker } from '..';
-import { Input, PanelOptionsGroup } from '..';
 import { colors } from '../../utils';
 import { ThemeContext } from '../../themes';
 import { getColorFromHexRgbOrName } from '../../utils';
+import { Input } from '../Input/Input';
+import { ColorPicker } from '../ColorPicker/ColorPicker';
+import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
 
 export interface Props {
   thresholds: Threshold[];

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

@@ -1,12 +1,13 @@
 import React, { PureComponent } from 'react';
 import moment from 'moment';
-import { TimeRange, TimeOptions, TimeOption, SelectOptionItem } from '@grafana/ui';
 import { ButtonSelect } from '../Select/ButtonSelect';
 import { mapTimeOptionToTimeRange, mapTimeRangeToRangeString } from './time';
 import { Props as TimePickerPopoverProps } from './TimePickerPopover';
 import { TimePickerOptionGroup } from './TimePickerOptionGroup';
 import { PopperContent } from '../Tooltip/PopperController';
 import { Timezone } from '../../utils/datemath';
+import { TimeRange, TimeOption, TimeOptions } from '../../types/time';
+import { SelectOptionItem } from '../Select/Select';
 
 export interface Props {
   value: TimeRange;

packages/grafana-ui/src/components/TimePicker/TimePickerOptionGroup.tsx

@@ -1,8 +1,8 @@
 import React, { PureComponent, createRef } from 'react';
 import { GroupProps } from 'react-select/lib/components/Group';
-import { Popper } from '@grafana/ui/src/components/Tooltip/Popper';
 import { Props as TimePickerProps, TimePickerPopover } from './TimePickerPopover';
-import { TimeRange } from '@grafana/ui';
+import { TimeRange } from '../../types/time';
+import { Popper } from '../Tooltip/Popper';
 
 export interface DataProps {
   onPopoverOpen: () => void;

packages/grafana-ui/src/components/TimePicker/time.ts

@@ -1,8 +1,7 @@
 import moment, { Moment } from 'moment';
-import { TimeOption, TimeRange, TIME_FORMAT } from '@grafana/ui';
+import { TimeOption, TimeRange, TIME_FORMAT } from '../../types/time';
-
+import { describeTimeRange } from '../../utils/rangeutil';
-import * as dateMath from '@grafana/ui/src/utils/datemath';
+import * as dateMath from '../../utils/datemath';
-import { describeTimeRange } from '@grafana/ui/src/utils/rangeutil';
 
 export const mapTimeOptionToTimeRange = (
   timeOption: TimeOption,

packages/grafana-ui/src/utils/rangeutil.ts

@@ -2,7 +2,7 @@
 import _ from 'lodash';
 import moment from 'moment';
 
-import { RawTimeRange } from '@grafana/ui';
+import { RawTimeRange } from '../types/time';
 
 import * as dateMath from './datemath';
 

packages/grafana-ui/src/utils/string.test.ts

@@ -1,4 +1,4 @@
-import { stringToJsRegex, stringToMs } from '@grafana/ui';
+import { stringToJsRegex, stringToMs } from './string';
 
 describe('stringToJsRegex', () => {
   it('should parse the valid regex value', () => {