From 16efc4c1b95f27bce5e16634fd17f6bd8a5d7235 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 2 Apr 2021 11:11:46 +0200 Subject: [PATCH] ReactSelect: Upgrades react-select from v3 to v4 and switches from fork to main npm package (#32618) * ReactSelect: Upgrades react-select from v3 to v4 and switches from fork to main npm package * Updated snapshot * Removed hidden time in timepicker --- package.json | 4 +- packages/grafana-ui/package.json | 4 +- .../Legacy/Select/IndicatorsContainer.tsx | 5 +- .../Forms/Legacy/Select/NoOptionsMessage.tsx | 9 +--- .../components/Forms/Legacy/Select/Select.tsx | 18 +++---- .../Forms/Legacy/Select/SelectOption.tsx | 8 +-- .../__snapshots__/SelectOption.test.tsx.snap | 2 +- .../src/components/Select/SelectBase.tsx | 20 ++++--- .../components/Select/SelectOptionGroup.tsx | 2 +- .../src/components/Select/SingleValue.tsx | 13 ++--- .../TimeZonePicker/TimeZoneOffset.tsx | 13 ----- .../core/components/TagFilter/TagFilter.tsx | 3 +- .../core/components/TagFilter/TagOption.tsx | 2 +- yarn.lock | 54 +++++++++---------- 14 files changed, 59 insertions(+), 98 deletions(-) diff --git a/package.json b/package.json index 45786e074e2..a869f1cab3f 100644 --- a/package.json +++ b/package.json @@ -114,7 +114,7 @@ "@types/react-grid-layout": "1.1.1", "@types/react-redux": "7.1.7", "@types/react-router-dom": "^5.1.7", - "@types/react-select": "3.0.8", + "@types/react-select": "4.0.13", "@types/react-test-renderer": "16.9.2", "@types/react-transition-group": "4.4.0", "@types/react-window": "1.8.1", @@ -218,7 +218,7 @@ "@sentry/browser": "5.25.0", "@sentry/types": "5.24.2", "@sentry/utils": "5.24.2", - "@torkelo/react-select": "3.0.8", + "react-select": "4.3.0", "@types/antlr4": "^4.7.1", "@types/braintree__sanitize-url": "4.0.0", "@types/common-tags": "^1.8.0", diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index aa2743a1d13..c5ad57101ba 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -36,11 +36,11 @@ "@popperjs/core": "2.5.4", "@sentry/browser": "5.25.0", "@testing-library/jest-dom": "5.11.9", - "@torkelo/react-select": "3.0.8", + "react-select": "4.3.0", "@types/hoist-non-react-statics": "3.3.1", "@types/react-beautiful-dnd": "12.1.2", "@types/react-color": "3.0.1", - "@types/react-select": "3.0.8", + "@types/react-select": "4.0.13", "@types/react-table": "7.0.12", "@types/slate": "0.47.1", "@types/slate-react": "0.22.5", diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/IndicatorsContainer.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/IndicatorsContainer.tsx index e27e6d0cafa..d586997b37b 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/IndicatorsContainer.tsx +++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/IndicatorsContainer.tsx @@ -1,9 +1,6 @@ import React from 'react'; import { Icon } from '../../../Icon/Icon'; - -// Ignoring because I couldn't get @types/react-select work with Torkel's fork -// @ts-ignore -import { components } from '@torkelo/react-select'; +import { components } from 'react-select'; export const IndicatorsContainer = (props: any) => { const isOpen = props.selectProps.menuIsOpen; diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/NoOptionsMessage.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/NoOptionsMessage.tsx index ac1bad99aa1..609757a49a6 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/NoOptionsMessage.tsx +++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/NoOptionsMessage.tsx @@ -1,16 +1,11 @@ import React from 'react'; - -// Ignoring because I couldn't get @types/react-select work with Torkel's fork -// @ts-ignore -import { components } from '@torkelo/react-select'; -// @ts-ignore -import { OptionProps } from '@torkelo/react-select/lib/components/Option'; +import { components, OptionProps } from 'react-select'; export interface Props { children: Element; } -export const NoOptionsMessage = (props: OptionProps) => { +export const NoOptionsMessage = (props: OptionProps) => { const { children } = props; return ( diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx index dfdf035ecdc..35bc7f3be08 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx +++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx @@ -1,16 +1,9 @@ // Libraries import classNames from 'classnames'; import React, { PureComponent } from 'react'; - -// Ignoring because I couldn't get @types/react-select work with Torkel's fork -// @ts-ignore -import { default as ReactSelect, components } from '@torkelo/react-select'; -// @ts-ignore -import Creatable from '@torkelo/react-select/creatable'; -// @ts-ignore -import { CreatableProps } from 'react-select'; -// @ts-ignore -import { default as ReactAsyncSelect } from '@torkelo/react-select/async'; +import { default as ReactSelect, components } from 'react-select'; +import Creatable from 'react-select/creatable'; +import { default as ReactAsyncSelect } from 'react-select/async'; // Components import { SelectOption } from './SelectOption'; @@ -115,11 +108,11 @@ export class Select extends PureComponent> { widthClass = 'width-' + width; } - let SelectComponent: ReactSelect | Creatable = ReactSelect; + let SelectComponent = ReactSelect; const creatableOptions: any = {}; if (allowCustomValue) { - SelectComponent = Creatable; + SelectComponent = Creatable as any; creatableOptions.formatCreateLabel = formatCreateLabel ?? ((input: string) => input); } @@ -223,6 +216,7 @@ export class AsyncSelect extends PureComponent> { {(onOpenMenuInternal, onCloseMenuInternal) => { return ( + //@ts-expect-error { +export interface ExtendedOptionProps extends OptionProps { data: { description?: string; imgUrl?: string; diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/__snapshots__/SelectOption.test.tsx.snap b/packages/grafana-ui/src/components/Forms/Legacy/Select/__snapshots__/SelectOption.test.tsx.snap index 7c754739653..393d101afd2 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/__snapshots__/SelectOption.test.tsx.snap +++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/__snapshots__/SelectOption.test.tsx.snap @@ -2,7 +2,7 @@ exports[`SelectOption renders correctly 1`] = `
({ }, [isMulti, onChange] ); - let ReactSelectComponent: ReactSelect | Creatable = ReactSelect; + + let ReactSelectComponent = ReactSelect; + const creatableProps: any = {}; let asyncSelectProps: any = {}; let selectedValue; @@ -217,14 +215,14 @@ export function SelectBase({ }; if (allowCustomValue) { - ReactSelectComponent = Creatable; + ReactSelectComponent = Creatable as any; creatableProps.formatCreateLabel = formatCreateLabel ?? ((input: string) => `Create: ${input}`); creatableProps.onCreateOption = onCreateOption; } // Instead of having AsyncSelect, as a separate component we render ReactAsyncSelect if (loadOptions) { - ReactSelectComponent = allowCustomValue ? AsyncCreatable : ReactAsyncSelect; + ReactSelectComponent = (allowCustomValue ? AsyncCreatable : ReactAsyncSelect) as any; asyncSelectProps = { loadOptions, cacheOptions, diff --git a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx index 2dcf773a6eb..01697dd9a56 100644 --- a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx +++ b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx @@ -6,7 +6,7 @@ import { stylesFactory, withTheme } from '../../themes'; import { Themeable } from '../../types'; import { Icon } from '../Icon/Icon'; -interface ExtendedGroupProps extends GroupProps, Themeable { +interface ExtendedGroupProps extends Omit, 'theme'>, Themeable { data: { label: string; expanded: boolean; diff --git a/packages/grafana-ui/src/components/Select/SingleValue.tsx b/packages/grafana-ui/src/components/Select/SingleValue.tsx index 6fd12fd0245..1a6580e52ce 100644 --- a/packages/grafana-ui/src/components/Select/SingleValue.tsx +++ b/packages/grafana-ui/src/components/Select/SingleValue.tsx @@ -1,9 +1,6 @@ import React from 'react'; import { css, cx } from '@emotion/css'; - -// Ignoring because I couldn't get @types/react-select work with Torkel's fork -// @ts-ignore -import { components } from '@torkelo/react-select'; +import { components, SingleValueProps } from 'react-select'; import { useDelayedSwitch } from '../../utils/useDelayedSwitch'; import { stylesFactory, useTheme } from '../../themes'; import { SlideOutTransition } from '../transitions/SlideOutTransition'; @@ -41,14 +38,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { return { singleValue, container, item }; }); -type Props = { - children: React.ReactNode; - data: { +interface Props + extends SingleValueProps<{ imgUrl?: string; loading?: boolean; hideText?: boolean; - }; -}; + }> {} export const SingleValue = (props: Props) => { const { children, data } = props; diff --git a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneOffset.tsx b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneOffset.tsx index 6450e0ce905..ce7814a0a41 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneOffset.tsx +++ b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneOffset.tsx @@ -21,7 +21,6 @@ export const TimeZoneOffset: React.FC> = (props) => { return ( <> - {formatLocalTime(timestamp, timeZone)} {formatUtcOffset(timestamp, timeZone)} ); @@ -39,13 +38,6 @@ export const formatUtcOffset = (timestamp: number, timeZone: TimeZone): string = return `UTC${offset}`; }; -const formatLocalTime = (timestamp: number, timeZone: TimeZone): string => { - return dateTimeFormat(timestamp, { - timeZone, - format: 'HH:mm', - }); -}; - const getStyles = stylesFactory((theme: GrafanaTheme) => { const textBase = css` font-weight: normal; @@ -55,11 +47,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { `; return { - localTime: css` - display: none; - ${textBase}; - color: ${theme.colors.text}; - `, offset: css` ${textBase}; color: ${theme.colors.text}; diff --git a/public/app/core/components/TagFilter/TagFilter.tsx b/public/app/core/components/TagFilter/TagFilter.tsx index 69dbfa24037..0eb3dc40e70 100644 --- a/public/app/core/components/TagFilter/TagFilter.tsx +++ b/public/app/core/components/TagFilter/TagFilter.tsx @@ -1,8 +1,7 @@ // Libraries import React, { FC } from 'react'; import { css } from '@emotion/css'; -// @ts-ignore -import { components } from '@torkelo/react-select'; +import { components } from 'react-select'; import { AsyncSelect, stylesFactory, useTheme, resetSelectStyles, Icon } from '@grafana/ui'; import { escapeStringForRegex, GrafanaTheme } from '@grafana/data'; // Components diff --git a/public/app/core/components/TagFilter/TagOption.tsx b/public/app/core/components/TagFilter/TagOption.tsx index 29ddacde851..7352fd2d498 100644 --- a/public/app/core/components/TagFilter/TagOption.tsx +++ b/public/app/core/components/TagFilter/TagOption.tsx @@ -7,7 +7,7 @@ import { OptionProps } from 'react-select/src/components/Option'; import { TagBadge } from './TagBadge'; // https://github.com/JedWatson/react-select/issues/3038 -interface ExtendedOptionProps extends OptionProps { +interface ExtendedOptionProps extends OptionProps { data: any; } diff --git a/yarn.lock b/yarn.lock index 74b46132dd4..0feacdac9db 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2672,6 +2672,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.12.0": + version "7.13.10" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d" + integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/runtime@^7.5.4": version "7.7.6" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.6.tgz#d18c511121aff1b4f2cd1d452f1bac9601dd830f" @@ -2997,7 +3004,7 @@ "@emotion/utils" "0.11.3" "@emotion/weak-memoize" "0.2.5" -"@emotion/cache@^11.1.3": +"@emotion/cache@^11.0.0", "@emotion/cache@^11.1.3": version "11.1.3" resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.1.3.tgz#c7683a9484bcd38d5562f2b9947873cf66829afd" integrity sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA== @@ -3103,7 +3110,7 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50" integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ== -"@emotion/react@11.1.5": +"@emotion/react@11.1.5", "@emotion/react@^11.1.1": version "11.1.5" resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.1.5.tgz#15e78f9822894cdc296e6f4e0688bac8120dfe66" integrity sha512-xfnZ9NJEv9SU9K2sxXM06lzjK245xSeHRpUh67eARBm3PBHjjKIZlfWZ7UQvD0Obvw6ZKjlC79uHrlzFYpOB/Q== @@ -5570,20 +5577,6 @@ dependencies: "@babel/runtime" "^7.10.2" -"@torkelo/react-select@3.0.8": - version "3.0.8" - resolved "https://registry.yarnpkg.com/@torkelo/react-select/-/react-select-3.0.8.tgz#04bfc877118af425f97eac2b471b66705484ee4a" - integrity sha512-becmEGnaOQpUcZS7kjQLaxjY0WKJcFFvAOTWIiU1XfwBV1sdCSgYFGWT+QhkCdRlP2Ux5U4cKhTUsWSeI9FsIA== - dependencies: - "@babel/runtime" "^7.4.4" - "@emotion/cache" "^10.0.9" - "@emotion/core" "^10.0.9" - "@emotion/css" "^10.0.9" - memoize-one "^5.0.0" - prop-types "^15.6.0" - react-input-autosize "^2.2.2" - react-transition-group "^4.3.0" - "@types/angular-route@1.7.0": version "1.7.0" resolved "https://registry.yarnpkg.com/@types/angular-route/-/angular-route-1.7.0.tgz#ba12d09df1aac3c88e3684500001daedfc97fb69" @@ -6614,11 +6607,12 @@ "@types/history" "*" "@types/react" "*" -"@types/react-select@3.0.8": - version "3.0.8" - resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-3.0.8.tgz#b824a12d438dd493c30ffff49a805f797602a837" - integrity sha512-0763TXYZc8bTiHM+DUnWoy9Rg5mk6PxYWBrEe6Fkjgc0Kv0r1RqjZk9/BrK4wdM0RNjYjixlFPnUhOJb76sMGg== +"@types/react-select@4.0.13": + version "4.0.13" + resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-4.0.13.tgz#8d2c41a0df7fbf67ab0b995797b0e9b4e6b38cde" + integrity sha512-rXYEc565IzzjgQzs9C0YCFxV/QajMZnCHG5QwRQ5BZMfH0Lj90VI/xohawemRkD46IvpaLRbO6xzSquJlgBGUA== dependencies: + "@emotion/serialize" "^1.0.0" "@types/react" "*" "@types/react-dom" "*" "@types/react-transition-group" "*" @@ -21708,13 +21702,6 @@ react-immutable-proptypes@^2.1.0: resolved "https://registry.yarnpkg.com/react-immutable-proptypes/-/react-immutable-proptypes-2.1.0.tgz#023d6f39bb15c97c071e9e60d00d136eac5fa0b4" integrity sha1-Aj1vObsVyXwHHp5g0A0TbqxfoLQ= -react-input-autosize@^2.2.2: - version "2.2.2" - resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2" - integrity sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw== - dependencies: - prop-types "^15.5.8" - react-input-autosize@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85" @@ -21854,6 +21841,19 @@ react-select-event@^5.1.0: dependencies: "@testing-library/dom" ">=7" +react-select@4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.3.0.tgz#6bde634ae7a378b49f3833c85c126f533483fa2e" + integrity sha512-SBPD1a3TJqE9zoI/jfOLCAoLr/neluaeokjOixr3zZ1vHezkom8K0A9J4QG9IWDqIDE9K/Mv+0y1GjidC2PDtQ== + dependencies: + "@babel/runtime" "^7.12.0" + "@emotion/cache" "^11.0.0" + "@emotion/react" "^11.1.1" + memoize-one "^5.0.0" + prop-types "^15.6.0" + react-input-autosize "^3.0.0" + react-transition-group "^4.3.0" + react-select@^3.0.8: version "3.2.0" resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.2.0.tgz#de9284700196f5f9b5277c5d850a9ce85f5c72fe"