From e3c91c1293520e3b5bb0af3ac39088dc2d1a970e Mon Sep 17 00:00:00 2001 From: Virginia Cepeda Date: Mon, 11 Nov 2024 11:16:54 -0300 Subject: [PATCH] Redesign check type selection screen (#957) * feat: redesign check type selection screen * feat: add new status badge * fix: change check group icon color * fix: lint * feat: add new icons to check types This creates a dependency to @grafana/data 11.3.0 as they've been recently added there. * chore: update grafana version dependency * chore: update yarn lockfile * fix: update files after merge with main * fix: update after merge with main * fix: use old icons until grafana 11.4.0 is published * fix: tests * fix: prevent showing 3 columns of check cards * fix: improve styling and breakpoint transitions * fix: show newStatusBadge on check's form * fix: change tests not to use data-test-id * fix: positioning of Toggletip in check's form - workaround to fix the bug in floating-ui when setting containerType: inline-size - more info here https://github.com/floating-ui/floating-ui/issues/3067 * fix: address review comments * fix: address review comments * fix: add container queries --- .../FormComponents/CheckStatusBadge.tsx | 77 ------ .../FormComponents/CheckStatusInfo.tsx | 60 +++++ .../CheckForm/FormLayout/FormLayout.tsx | 1 + .../CheckForm/FormLayout/FormSection.tsx | 28 ++- .../ChooseCheckGroup/CheckGroupCard.tsx | 77 ++++-- .../ChooseCheckGroup.test.tsx | 20 +- .../ChooseCheckGroup/ChooseCheckGroup.tsx | 84 +++++-- src/components/ChooseCheckGroup/Protocol.tsx | 27 +- src/hooks/useCheckTypeGroupOptions.tsx | 9 +- yarn.lock | 233 +++++++++--------- 10 files changed, 351 insertions(+), 265 deletions(-) delete mode 100644 src/components/CheckEditor/FormComponents/CheckStatusBadge.tsx create mode 100644 src/components/CheckEditor/FormComponents/CheckStatusInfo.tsx diff --git a/src/components/CheckEditor/FormComponents/CheckStatusBadge.tsx b/src/components/CheckEditor/FormComponents/CheckStatusBadge.tsx deleted file mode 100644 index 635bfe5d6..000000000 --- a/src/components/CheckEditor/FormComponents/CheckStatusBadge.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React from 'react'; -import { GrafanaTheme2 } from '@grafana/data'; -import { Badge, BadgeColor, Icon, Stack, TextLink, useStyles2 } from '@grafana/ui'; -import { css } from '@emotion/css'; - -import { CheckStatus } from 'types'; -import { Toggletip } from 'components/Toggletip'; - -export interface CheckStatusBadgeProps { - value: CheckStatus; - description?: string; - docsLink?: string; -} - -const colorMap: Record = { - [CheckStatus.EXPERIMENTAL]: { - color: 'orange', - text: `Experimental`, - }, - [CheckStatus.PRIVATE_PREVIEW]: { - color: 'purple', - text: `Private preview`, - }, - [CheckStatus.PUBLIC_PREVIEW]: { - color: 'green', - text: `Public preview`, - }, -}; - -export const CheckStatusBadge = ({ description, docsLink, value }: CheckStatusBadgeProps) => { - const { text, color } = colorMap[value]; - const styles = useStyles2((theme: GrafanaTheme2) => getStyles(theme, color)); - - return ( - - - {description} - {docsLink && ( - <> - {` `} - - Read more - - - )} - - } - > - - - - ); -}; - -const getStyles = (theme: GrafanaTheme2, color: string) => ({ - badgeLink: css({ - background: `none`, - border: `none`, - padding: 0, - - '&:hover': { - background: theme.colors.emphasize(theme.visualization.getColorByName(color), 0.15), - }, - }), -}); diff --git a/src/components/CheckEditor/FormComponents/CheckStatusInfo.tsx b/src/components/CheckEditor/FormComponents/CheckStatusInfo.tsx new file mode 100644 index 000000000..888584656 --- /dev/null +++ b/src/components/CheckEditor/FormComponents/CheckStatusInfo.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { GrafanaTheme2 } from '@grafana/data'; +import { Badge, Icon, Stack, TextLink, useStyles2 } from '@grafana/ui'; +import { css } from '@emotion/css'; + +import { CheckStatus } from 'types'; +import { Toggletip } from 'components/Toggletip'; + +export interface CheckStatusInfoProps { + description?: string; + docsLink?: string; + value?: CheckStatus; +} + +export const CheckStatusInfo = ({ description, docsLink }: CheckStatusInfoProps) => { + const styles = useStyles2((theme: GrafanaTheme2) => getStyles(theme)); + + return ( + + + {description} + {docsLink && ( + <> + {` `} + + Read more + + + )} + + } + > + + + + ); +}; + +export const NewStatusBadge = ({ status, className }: { status: CheckStatus; className?: string }) => { + if (![CheckStatus.EXPERIMENTAL, CheckStatus.PRIVATE_PREVIEW, CheckStatus.PUBLIC_PREVIEW].includes(status)) { + return null; + } + + return ; +}; + +const getStyles = (theme: GrafanaTheme2) => ({ + infoLink: css({ + background: `none`, + border: `none`, + padding: 0, + }), + infoIcon: css({ + color: theme.colors.info.main, + }), +}); diff --git a/src/components/CheckForm/FormLayout/FormLayout.tsx b/src/components/CheckForm/FormLayout/FormLayout.tsx index 291c44e7f..1a4195e34 100644 --- a/src/components/CheckForm/FormLayout/FormLayout.tsx +++ b/src/components/CheckForm/FormLayout/FormLayout.tsx @@ -172,6 +172,7 @@ const getStyles = (theme: GrafanaTheme2) => { containerName, containerType: `inline-size`, height: '100%', + contain: 'layout', }), container: css({ display: 'grid', diff --git a/src/components/CheckForm/FormLayout/FormSection.tsx b/src/components/CheckForm/FormLayout/FormSection.tsx index 201063f00..8aeb076ce 100644 --- a/src/components/CheckForm/FormLayout/FormSection.tsx +++ b/src/components/CheckForm/FormLayout/FormSection.tsx @@ -5,7 +5,11 @@ import { Box, Stack, Text, useStyles2 } from '@grafana/ui'; import { css } from '@emotion/css'; import { CheckFormValues } from 'types'; -import { CheckStatusBadge, CheckStatusBadgeProps } from 'components/CheckEditor/FormComponents/CheckStatusBadge'; +import { + CheckStatusInfo, + CheckStatusInfoProps, + NewStatusBadge, +} from 'components/CheckEditor/FormComponents/CheckStatusInfo'; import { FORM_MAX_WIDTH } from './FormLayout'; @@ -15,7 +19,7 @@ export type FormSectionProps = { label: string; fields?: Array>; index: number; - status?: CheckStatusBadgeProps; + status?: CheckStatusInfoProps; }; // return doesn't matter as we take over how this behaves internally @@ -32,13 +36,16 @@ export const FormSectionInternal = ({ activeSection, children, label, index, sta } return ( -
+
- +
{`${index + 1}. ${label}`} - {status && } - + + {status?.value && } + {status && } + +
{children}
@@ -48,8 +55,17 @@ export const FormSectionInternal = ({ activeSection, children, label, index, sta const getStyles = (theme: GrafanaTheme2) => { return { + header: css({ + position: 'relative', + display: 'flex', + gap: theme.spacing(2), + }), sectionContent: css({ maxWidth: FORM_MAX_WIDTH, }), + + formContainer: css({ + position: 'relative', + }), }; }; diff --git a/src/components/ChooseCheckGroup/CheckGroupCard.tsx b/src/components/ChooseCheckGroup/CheckGroupCard.tsx index f978271b7..b7aecd8ba 100644 --- a/src/components/ChooseCheckGroup/CheckGroupCard.tsx +++ b/src/components/ChooseCheckGroup/CheckGroupCard.tsx @@ -8,10 +8,10 @@ import { CheckTypeGroup, ROUTES } from 'types'; import { CheckTypeGroupOption } from 'hooks/useCheckTypeGroupOptions'; import { useCheckTypeOptions } from 'hooks/useCheckTypeOptions'; import { useLimits } from 'hooks/useLimits'; +import { CheckStatusInfo, NewStatusBadge } from 'components/CheckEditor/FormComponents/CheckStatusInfo'; import { getRoute } from 'components/Routing.utils'; import { Card } from '../Card'; -import { CheckStatusBadge } from '../CheckEditor/FormComponents/CheckStatusBadge'; import { Protocol } from './Protocol'; export const CheckGroupCard = ({ group }: { group: CheckTypeGroupOption }) => { @@ -26,38 +26,41 @@ export const CheckGroupCard = ({ group }: { group: CheckTypeGroupOption }) => { const disabled = Boolean(tooltip); return ( - + + {shouldShowStatus && checksWithStatus[0].status && ( + + )} - -
{group.label}
+ + +
{group.label}
+ {shouldShowStatus && checksWithStatus[0].status && } + -
{group.description}
-
+
{group.description}
+
- {group.label} check + {group.label}
- Supported protocols: - - {group.protocols.map((protocol) => { - return ; - })} - - {shouldShowStatus && checksWithStatus[0].status && ( - - - - )} +
+ {group.protocols.map((protocol, index) => ( + + + {index < group.protocols.length - 1 && ', '} + + ))} +
@@ -99,10 +102,46 @@ function getTooltip( } const getStyles = (theme: GrafanaTheme2) => ({ + newBadge: css({ + position: 'absolute', + right: 0, + marginRight: theme.spacing(3), + marginTop: theme.spacing(2), + height: '26px', + }), + + cardButton: css({ + marginTop: 'auto', + }), + + cardFooter: css({ + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'center', + gap: '4px', + marginTop: theme.spacing(1), + }), + + checkCard: css({ + minWidth: '0', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'wrap', + + '> div:first-of-type': { + height: '100%', + }, + }), desc: css({ color: theme.colors.text.secondary, }), + groupName: css({ + color: theme.colors.text.primary, + }), protocols: css({ - marginTop: theme.spacing(1), + borderTop: `1px solid ${theme.colors.border.weak}`, + color: theme.colors.text.primary, + display: 'flex', + justifyContent: 'center', }), }); diff --git a/src/components/ChooseCheckGroup/ChooseCheckGroup.test.tsx b/src/components/ChooseCheckGroup/ChooseCheckGroup.test.tsx index 14bbb2bcc..aa3b339c4 100644 --- a/src/components/ChooseCheckGroup/ChooseCheckGroup.test.tsx +++ b/src/components/ChooseCheckGroup/ChooseCheckGroup.test.tsx @@ -34,10 +34,10 @@ async function renderChooseCheckGroup({ checkLimit = 10, scriptedLimit = 10 } = it('shows check type options correctly with feature flags off', async () => { await renderChooseCheckGroup(); - expect(screen.getByText('API Endpoint')).toBeInTheDocument(); - expect(screen.getByText('Multi Step')).toBeInTheDocument(); - expect(screen.queryByText('Scripted')).not.toBeInTheDocument(); - expect(screen.queryByText('Browser')).not.toBeInTheDocument(); + expect(screen.queryByRole('link', { name: `API Endpoint` })).toBeInTheDocument(); + expect(screen.queryByRole('link', { name: `Multi Step` })).toBeInTheDocument(); + expect(screen.queryByRole('link', { name: `Scripted` })).not.toBeInTheDocument(); + expect(screen.queryByRole('link', { name: `Browser` })).not.toBeInTheDocument(); }); it('shows the scripted card with correct feature flag on', async () => { @@ -47,7 +47,7 @@ it('shows the scripted card with correct feature flag on', async () => { }); await renderChooseCheckGroup(); - expect(screen.getByText('Scripted')).toBeInTheDocument(); + expect(screen.getByRole('link', { name: `Scripted` })).toBeInTheDocument(); }); it('shows the browser card with correct feature flag on', async () => { @@ -57,7 +57,7 @@ it('shows the browser card with correct feature flag on', async () => { }); await renderChooseCheckGroup(); - expect(screen.getByText('Browser')).toBeInTheDocument(); + expect(screen.getByRole('link', { name: `Browser` })).toBeInTheDocument(); }); it(`doesn't show gRPC option by default`, async () => { @@ -94,10 +94,10 @@ it(`shows an error alert when user is HG Free user with over 100k execution limi const alert = await screen.findByText(/You have reached your monthly execution limit of/); expect(alert).toBeInTheDocument(); - const apiEndPointButton = screen.getByRole(`link`, { name: `API Endpoint check` }); - const multiStepButton = screen.getByRole(`link`, { name: `Multi Step check` }); - const scriptedButton = screen.getByRole(`link`, { name: `Scripted check` }); - const browserButton = screen.getByRole(`link`, { name: `Browser check` }); + const apiEndPointButton = screen.getByRole('link', { name: `API Endpoint` }); + const multiStepButton = screen.getByRole('link', { name: `Multi Step` }); + const scriptedButton = screen.getByRole('link', { name: `Scripted` }); + const browserButton = screen.getByRole('link', { name: `Browser` }); expect(apiEndPointButton).toHaveAttribute(`aria-disabled`, `true`); expect(multiStepButton).toHaveAttribute(`aria-disabled`, `true`); diff --git a/src/components/ChooseCheckGroup/ChooseCheckGroup.tsx b/src/components/ChooseCheckGroup/ChooseCheckGroup.tsx index b1163d07c..51529d4af 100644 --- a/src/components/ChooseCheckGroup/ChooseCheckGroup.tsx +++ b/src/components/ChooseCheckGroup/ChooseCheckGroup.tsx @@ -6,8 +6,8 @@ import { css } from '@emotion/css'; import { DataTestIds } from 'test/dataTestIds'; import { useCheckTypeGroupOptions } from 'hooks/useCheckTypeGroupOptions'; +import { OverLimitAlert } from 'components/OverLimitAlert'; -import { OverLimitAlert } from '../OverLimitAlert'; import { CheckGroupCard } from './CheckGroupCard'; export const ChooseCheckGroup = () => { @@ -16,28 +16,68 @@ export const ChooseCheckGroup = () => { return ( - -
- Pick between {options.length} different types of checks to monitor your services. Choose the one that best - fits your needs. -
- -
- {options.map((group) => { - return ; - })} -
- +
+ +
+ Pick between {options.length} different types of checks to monitor your services. Choose the one that best + fits your needs. +
+ +
+ {options.map((group) => { + return ; + })} +
+ +
); }; -const getStyles = (theme: GrafanaTheme2) => ({ - container: css({ - width: `100%`, - display: `grid`, - gridTemplateColumns: `repeat(auto-fit, minmax(200px, 400px))`, - gap: theme.spacing(2), - textAlign: `center`, - }), -}); +const getStyles = (theme: GrafanaTheme2) => { + const containerName = `checkGroupContainer`; + const oneColQuery = `(max-width: ${theme.breakpoints.values.sm}px)`; + const twoColsQuery = `(max-width: ${theme.breakpoints.values.xxl}px)`; + + const containerOneColQuery = `@container ${containerName} ${oneColQuery}`; + const containerTwoColsQuery = `@container ${containerName} ${twoColsQuery}`; + const oneColMediaQuery = `@supports not (container-type: inline-size) @media ${oneColQuery}`; + const twoColsMediaQuery = `@supports not (container-type: inline-size) @media ${twoColsQuery}`; + + const containerRules = { + twoCols: `repeat(2, 1fr)`, + oneCol: '1fr', + }; + + return { + wrapper: css({ + containerName, + containerType: `inline-size`, + height: '100%', + contain: 'layout', + }), + + container: css({ + width: `100%`, + display: `grid`, + gridTemplateColumns: 'repeat(4, 1fr)', + gap: theme.spacing(2), + textAlign: `center`, + color: theme.colors.text.secondary, + + [twoColsMediaQuery]: { + gridTemplateColumns: containerRules.twoCols, + }, + [containerTwoColsQuery]: { + gridTemplateColumns: containerRules.twoCols, + }, + + [oneColMediaQuery]: { + gridTemplateColumns: containerRules.oneCol, + }, + [containerOneColQuery]: { + gridTemplateColumns: containerRules.oneCol, + }, + }), + }; +}; diff --git a/src/components/ChooseCheckGroup/Protocol.tsx b/src/components/ChooseCheckGroup/Protocol.tsx index 582590330..1f6f9e715 100644 --- a/src/components/ChooseCheckGroup/Protocol.tsx +++ b/src/components/ChooseCheckGroup/Protocol.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { Badge, Icon, Stack, useStyles2 } from '@grafana/ui'; +import { Icon, Stack, TextLink, useStyles2 } from '@grafana/ui'; import { css } from '@emotion/css'; import { ProtocolOption } from 'hooks/useCheckTypeGroupOptions'; @@ -14,30 +14,25 @@ export const Protocol = ({ href, label, tooltip }: ProtocolOption) => { if (tooltip) { return ( {tooltip}
}> - +
+ + {label} + + +
); } if (href) { return ( - - - + + {label} + ); } - return ; + return {label}; }; const getStyles = (theme: GrafanaTheme2) => ({ diff --git a/src/hooks/useCheckTypeGroupOptions.tsx b/src/hooks/useCheckTypeGroupOptions.tsx index 32844a0de..91ab4d496 100644 --- a/src/hooks/useCheckTypeGroupOptions.tsx +++ b/src/hooks/useCheckTypeGroupOptions.tsx @@ -25,7 +25,7 @@ export interface CheckTypeGroupOption { export const CHECK_TYPE_GROUP_OPTIONS: CheckTypeGroupOption[] = [ { label: 'API Endpoint', - description: 'Monitor the availability and performance of a service, website or API with different request types.', + description: 'Monitor service, website, or API availability and performance with different request types.', value: CheckTypeGroup.ApiTest, icon: `heart-rate`, protocols: CHECK_TYPE_OPTIONS.filter((option) => option.group === CheckTypeGroup.ApiTest).map((option) => ({ @@ -52,7 +52,11 @@ export const CHECK_TYPE_GROUP_OPTIONS: CheckTypeGroupOption[] = [ value: CheckTypeGroup.Scripted, icon: `k6`, protocols: [ - { label: `HTTP`, featureToggle: FeatureName.ScriptedChecks }, + { + label: `HTTP`, + featureToggle: FeatureName.ScriptedChecks, + href: `${getRoute(ROUTES.NewCheck)}/${CheckTypeGroup.Scripted}`, + }, // todo: we don't support these yet // { label: `gRPC` }, { label: `WebSockets`, featureToggle: FeatureName.ScriptedChecks }, @@ -83,6 +87,7 @@ export const CHECK_TYPE_GROUP_OPTIONS: CheckTypeGroupOption[] = [ { label: `HTTP`, featureToggle: FeatureName.BrowserChecks, + href: `${getRoute(ROUTES.NewCheck)}/${CheckTypeGroup.Browser}`, }, ], }, diff --git a/yarn.lock b/yarn.lock index 5844ea377..d65bc6801 100644 --- a/yarn.lock +++ b/yarn.lock @@ -275,13 +275,20 @@ core-js-pure "^3.30.2" regenerator-runtime "^0.14.0" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.0", "@babel/runtime@^7.20.6", "@babel/runtime@^7.20.7", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.0", "@babel/runtime@^7.20.7", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.24.7" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.7.tgz#f4f0d5530e8dbdf59b3451b9b3e594b6ba082e12" integrity sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw== dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.15.4", "@babel/runtime@^7.20.6": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.9.tgz#65884fd6dc255a775402cc1d9811082918f4bf00" + integrity sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.24.7", "@babel/template@^7.3.3": version "7.24.7" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.7.tgz#02efcee317d0609d2c07117cb70ef8fb17ab7315" @@ -662,9 +669,9 @@ "@floating-ui/utils" "^0.2.0" "@floating-ui/react-dom@^2.0.0": - version "2.1.0" - resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.0.tgz#4f0e5e9920137874b2405f7d6c862873baf4beff" - integrity sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA== + version "2.1.2" + resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31" + integrity sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A== dependencies: "@floating-ui/dom" "^1.0.0" @@ -944,32 +951,32 @@ resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c" integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg== -"@internationalized/date@^3.5.4": - version "3.5.4" - resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.5.4.tgz#49ba11634fd4350b7a9308e297032267b4063c44" - integrity sha512-qoVJVro+O0rBaw+8HPjUB1iH8Ihf8oziEnqMnvhJUSuVIrHOuZ6eNLHNvzXJKUvAtaDiqMnRlg8Z2mgh09BlUw== +"@internationalized/date@^3.5.6": + version "3.5.6" + resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.5.6.tgz#0833c2fa75efb3573f4e3bf10e3895f1019e87dd" + integrity sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw== dependencies: "@swc/helpers" "^0.5.0" -"@internationalized/message@^3.1.4": - version "3.1.4" - resolved "https://registry.yarnpkg.com/@internationalized/message/-/message-3.1.4.tgz#4da041155829ffb57c9563fa7c99e2b94c8a5766" - integrity sha512-Dygi9hH1s7V9nha07pggCkvmRfDd3q2lWnMGvrJyrOwYMe1yj4D2T9BoH9I6MGR7xz0biQrtLPsqUkqXzIrBOw== +"@internationalized/message@^3.1.5": + version "3.1.5" + resolved "https://registry.yarnpkg.com/@internationalized/message/-/message-3.1.5.tgz#7391bba7a0489022a099f5bc37eb161889d520c8" + integrity sha512-hjEpLKFlYA3m5apldLqzHqw531qqfOEq0HlTWdfyZmcloWiUbWsYXD6YTiUmQmOtarthzhdjCAwMVrB8a4E7uA== dependencies: "@swc/helpers" "^0.5.0" intl-messageformat "^10.1.0" -"@internationalized/number@^3.5.3": - version "3.5.3" - resolved "https://registry.yarnpkg.com/@internationalized/number/-/number-3.5.3.tgz#9fa060c1c4809f23fb3d38dd3f3d1ae4c87e95a8" - integrity sha512-rd1wA3ebzlp0Mehj5YTuTI50AQEx80gWFyHcQu+u91/5NgdwBecO8BH6ipPfE+lmQ9d63vpB3H9SHoIUiupllw== +"@internationalized/number@^3.5.4": + version "3.5.4" + resolved "https://registry.yarnpkg.com/@internationalized/number/-/number-3.5.4.tgz#db1c648fa191b28062c2f4fd81fac89777ad3e91" + integrity sha512-h9huwWjNqYyE2FXZZewWqmCdkw1HeFds5q4Siuoms3hUQC5iPJK3aBmkFZoDSLN4UD0Bl8G22L/NdHpeOr+/7A== dependencies: "@swc/helpers" "^0.5.0" -"@internationalized/string@^3.2.3": - version "3.2.3" - resolved "https://registry.yarnpkg.com/@internationalized/string/-/string-3.2.3.tgz#b0a8379e779a69e7874979714e27f2ae86761d3c" - integrity sha512-9kpfLoA8HegiWTeCbR2livhdVeKobCnVv8tlJ6M2jF+4tcMqDo94ezwlnrUANBWPgd8U7OXIHCk2Ov2qhk4KXw== +"@internationalized/string@^3.2.4": + version "3.2.4" + resolved "https://registry.yarnpkg.com/@internationalized/string/-/string-3.2.4.tgz#e05ddd93a7b83e936940c83f5b3a8597d8c3a370" + integrity sha512-BcyadXPn89Ae190QGZGDUZPqxLj/xsP4U1Br1oSy8yfIjmpJ8cJtGYleaodqW/EmzFjwELtwDojLkf3FhV6SjA== dependencies: "@swc/helpers" "^0.5.0" @@ -1838,39 +1845,39 @@ "@swc/helpers" "^0.5.0" clsx "^2.0.0" -"@react-aria/focus@^3.16.2", "@react-aria/focus@^3.17.1": - version "3.17.1" - resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.17.1.tgz#c796a188120421e2fedf438cadacdf463c77ad29" - integrity sha512-FLTySoSNqX++u0nWZJPPN5etXY0WBxaIe/YuL/GTEeuqUIuC/2bJSaw5hlsM6T2yjy6Y/VAxBcKSdAFUlU6njQ== +"@react-aria/focus@^3.16.2", "@react-aria/focus@^3.18.4": + version "3.18.4" + resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.18.4.tgz#a6e95896bc8680d1b5bcd855e983fc2c195a1a55" + integrity sha512-91J35077w9UNaMK1cpMUEFRkNNz0uZjnSwiyBCFuRdaVuivO53wNC9XtWSDNDdcO5cGy87vfJRVAiyoCn/mjqA== dependencies: - "@react-aria/interactions" "^3.21.3" - "@react-aria/utils" "^3.24.1" - "@react-types/shared" "^3.23.1" + "@react-aria/interactions" "^3.22.4" + "@react-aria/utils" "^3.25.3" + "@react-types/shared" "^3.25.0" "@swc/helpers" "^0.5.0" clsx "^2.0.0" -"@react-aria/i18n@^3.10.2", "@react-aria/i18n@^3.11.1": - version "3.11.1" - resolved "https://registry.yarnpkg.com/@react-aria/i18n/-/i18n-3.11.1.tgz#2d238d2be30d8c691b5fa3161f5fb48066fc8e4b" - integrity sha512-vuiBHw1kZruNMYeKkTGGnmPyMnM5T+gT8bz97H1FqIq1hQ6OPzmtBZ6W6l6OIMjeHI5oJo4utTwfZl495GALFQ== - dependencies: - "@internationalized/date" "^3.5.4" - "@internationalized/message" "^3.1.4" - "@internationalized/number" "^3.5.3" - "@internationalized/string" "^3.2.3" - "@react-aria/ssr" "^3.9.4" - "@react-aria/utils" "^3.24.1" - "@react-types/shared" "^3.23.1" +"@react-aria/i18n@^3.10.2", "@react-aria/i18n@^3.12.3": + version "3.12.3" + resolved "https://registry.yarnpkg.com/@react-aria/i18n/-/i18n-3.12.3.tgz#ec902787ea840755a1e7b4feb64435b8451baf62" + integrity sha512-0Tp/4JwnCVNKDfuknPF+/xf3/woOc8gUjTU2nCjO3mCVb4FU7KFtjxQ2rrx+6hpIVG6g+N9qfMjRa/ggVH0CJg== + dependencies: + "@internationalized/date" "^3.5.6" + "@internationalized/message" "^3.1.5" + "@internationalized/number" "^3.5.4" + "@internationalized/string" "^3.2.4" + "@react-aria/ssr" "^3.9.6" + "@react-aria/utils" "^3.25.3" + "@react-types/shared" "^3.25.0" "@swc/helpers" "^0.5.0" -"@react-aria/interactions@^3.21.1", "@react-aria/interactions@^3.21.3": - version "3.21.3" - resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.21.3.tgz#a2a3e354a8b894bed7a46e1143453f397f2538d7" - integrity sha512-BWIuf4qCs5FreDJ9AguawLVS0lV9UU+sK4CCnbCNNmYqOWY+1+gRXCsnOM32K+oMESBxilAjdHW5n1hsMqYMpA== +"@react-aria/interactions@^3.21.1", "@react-aria/interactions@^3.22.4": + version "3.22.4" + resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.22.4.tgz#88ed61ab6a485f869bc1f65ae6688d48ca96064b" + integrity sha512-E0vsgtpItmknq/MJELqYJwib+YN18Qag8nroqwjk1qOnBa9ROIkUhWJerLi1qs5diXq9LHKehZDXRlwPvdEFww== dependencies: - "@react-aria/ssr" "^3.9.4" - "@react-aria/utils" "^3.24.1" - "@react-types/shared" "^3.23.1" + "@react-aria/ssr" "^3.9.6" + "@react-aria/utils" "^3.25.3" + "@react-types/shared" "^3.25.0" "@swc/helpers" "^0.5.0" "@react-aria/overlays@3.21.1": @@ -1891,26 +1898,26 @@ "@swc/helpers" "^0.5.0" "@react-aria/overlays@^3.21.1": - version "3.22.1" - resolved "https://registry.yarnpkg.com/@react-aria/overlays/-/overlays-3.22.1.tgz#7a01673317fa6517bb91b0b7504e303facdc9ccb" - integrity sha512-GHiFMWO4EQ6+j6b5QCnNoOYiyx1Gk8ZiwLzzglCI4q1NY5AG2EAmfU4Z1+Gtrf2S5Y0zHbumC7rs9GnPoGLUYg== - dependencies: - "@react-aria/focus" "^3.17.1" - "@react-aria/i18n" "^3.11.1" - "@react-aria/interactions" "^3.21.3" - "@react-aria/ssr" "^3.9.4" - "@react-aria/utils" "^3.24.1" - "@react-aria/visually-hidden" "^3.8.12" - "@react-stately/overlays" "^3.6.7" - "@react-types/button" "^3.9.4" - "@react-types/overlays" "^3.8.7" - "@react-types/shared" "^3.23.1" + version "3.23.4" + resolved "https://registry.yarnpkg.com/@react-aria/overlays/-/overlays-3.23.4.tgz#8fc2f7f5884f514056651490a17b9fd40e519df1" + integrity sha512-MZUW6SUlTWOwKuFTqUTxW5BnvdW3Y9cEwanWuz98NX3ST7JYe/3ZcZhb37/fGW4uoGHnQ9icEwVf0rbMrK2STg== + dependencies: + "@react-aria/focus" "^3.18.4" + "@react-aria/i18n" "^3.12.3" + "@react-aria/interactions" "^3.22.4" + "@react-aria/ssr" "^3.9.6" + "@react-aria/utils" "^3.25.3" + "@react-aria/visually-hidden" "^3.8.17" + "@react-stately/overlays" "^3.6.11" + "@react-types/button" "^3.10.0" + "@react-types/overlays" "^3.8.10" + "@react-types/shared" "^3.25.0" "@swc/helpers" "^0.5.0" -"@react-aria/ssr@^3.9.2", "@react-aria/ssr@^3.9.4": - version "3.9.4" - resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.9.4.tgz#9da8b10342c156e816dbfa4c9e713b21f274d7ab" - integrity sha512-4jmAigVq409qcJvQyuorsmBR4+9r3+JEC60wC+Y0MZV0HCtTmm8D9guYXlJMdx0SSkgj0hHAyFm/HvPNFofCoQ== +"@react-aria/ssr@^3.9.2", "@react-aria/ssr@^3.9.6": + version "3.9.6" + resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.9.6.tgz#a9e8b351acdc8238f2b5215b0ce904636c6ea690" + integrity sha512-iLo82l82ilMiVGy342SELjshuWottlb5+VefO3jOQqQRNYnJBFpUSadswDPbRimSgJUZuFwIEYs6AabkP038fA== dependencies: "@swc/helpers" "^0.5.0" @@ -1925,69 +1932,69 @@ "@swc/helpers" "^0.5.0" clsx "^2.0.0" -"@react-aria/utils@^3.23.2", "@react-aria/utils@^3.24.1": - version "3.24.1" - resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.24.1.tgz#9d16023f07c23c41793c9030a9bd203a9c8cf0a7" - integrity sha512-O3s9qhPMd6n42x9sKeJ3lhu5V1Tlnzhu6Yk8QOvDuXf7UGuUjXf9mzfHJt1dYzID4l9Fwm8toczBzPM9t0jc8Q== +"@react-aria/utils@^3.23.2", "@react-aria/utils@^3.25.3": + version "3.25.3" + resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.25.3.tgz#cad9bffc07b045cdc283df2cb65c18747acbf76d" + integrity sha512-PR5H/2vaD8fSq0H/UB9inNbc8KDcVmW6fYAfSWkkn+OAdhTTMVKqXXrZuZBWyFfSD5Ze7VN6acr4hrOQm2bmrA== dependencies: - "@react-aria/ssr" "^3.9.4" - "@react-stately/utils" "^3.10.1" - "@react-types/shared" "^3.23.1" + "@react-aria/ssr" "^3.9.6" + "@react-stately/utils" "^3.10.4" + "@react-types/shared" "^3.25.0" "@swc/helpers" "^0.5.0" clsx "^2.0.0" -"@react-aria/visually-hidden@^3.8.10", "@react-aria/visually-hidden@^3.8.12": - version "3.8.12" - resolved "https://registry.yarnpkg.com/@react-aria/visually-hidden/-/visually-hidden-3.8.12.tgz#89388b4773b8fbea4b5f9682e807510c14218c93" - integrity sha512-Bawm+2Cmw3Xrlr7ARzl2RLtKh0lNUdJ0eNqzWcyx4c0VHUAWtThmH5l+HRqFUGzzutFZVo89SAy40BAbd0gjVw== +"@react-aria/visually-hidden@^3.8.10", "@react-aria/visually-hidden@^3.8.17": + version "3.8.17" + resolved "https://registry.yarnpkg.com/@react-aria/visually-hidden/-/visually-hidden-3.8.17.tgz#b006aad526d78a9897fcbc793e57ddfe1adbd1af" + integrity sha512-WFgny1q2CbxxU6gu46TGQXf1DjsnuSk+RBDP4M7bm1mUVZzoCp7U7AtjNmsBrWg0NejxUdgD7+7jkHHCQ91qRA== dependencies: - "@react-aria/interactions" "^3.21.3" - "@react-aria/utils" "^3.24.1" - "@react-types/shared" "^3.23.1" + "@react-aria/interactions" "^3.22.4" + "@react-aria/utils" "^3.25.3" + "@react-types/shared" "^3.25.0" "@swc/helpers" "^0.5.0" -"@react-stately/overlays@^3.6.5", "@react-stately/overlays@^3.6.7": - version "3.6.7" - resolved "https://registry.yarnpkg.com/@react-stately/overlays/-/overlays-3.6.7.tgz#d4aa1b709e6e72306c33308bb031466730dd0480" - integrity sha512-6zp8v/iNUm6YQap0loaFx6PlvN8C0DgWHNlrlzMtMmNuvjhjR0wYXVaTfNoUZBWj25tlDM81ukXOjpRXg9rLrw== +"@react-stately/overlays@^3.6.11", "@react-stately/overlays@^3.6.5": + version "3.6.11" + resolved "https://registry.yarnpkg.com/@react-stately/overlays/-/overlays-3.6.11.tgz#67d413853d47d49ed2687c6b74b1749f4b26da6e" + integrity sha512-usuxitwOx4FbmOW7Og4VM8R8ZjerbHZLLbFaxZW7pWLs7Ypway1YhJ3SWcyNTYK7NEk4o602kSoU6MSev1Vgag== dependencies: - "@react-stately/utils" "^3.10.1" - "@react-types/overlays" "^3.8.7" + "@react-stately/utils" "^3.10.4" + "@react-types/overlays" "^3.8.10" "@swc/helpers" "^0.5.0" -"@react-stately/utils@^3.10.1", "@react-stately/utils@^3.9.1": - version "3.10.1" - resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.10.1.tgz#dc8685b4994bef0dc10c37b024074be8afbfba62" - integrity sha512-VS/EHRyicef25zDZcM/ClpzYMC5i2YGN6uegOeQawmgfGjb02yaCX0F0zR69Pod9m2Hr3wunTbtpgVXvYbZItg== +"@react-stately/utils@^3.10.4", "@react-stately/utils@^3.9.1": + version "3.10.4" + resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.10.4.tgz#310663a834b67048d305e1680ed258130092fe51" + integrity sha512-gBEQEIMRh5f60KCm7QKQ2WfvhB2gLUr9b72sqUdIZ2EG+xuPgaIlCBeSicvjmjBvYZwOjoOEnmIkcx2GHp/HWw== dependencies: "@swc/helpers" "^0.5.0" -"@react-types/button@^3.9.2", "@react-types/button@^3.9.4": - version "3.9.4" - resolved "https://registry.yarnpkg.com/@react-types/button/-/button-3.9.4.tgz#ec10452e870660d31db1994f6fe4abfe0c800814" - integrity sha512-raeQBJUxBp0axNF74TXB8/H50GY8Q3eV6cEKMbZFP1+Dzr09Ngv0tJBeW0ewAxAguNH5DRoMUAUGIXtSXskVdA== +"@react-types/button@^3.10.0", "@react-types/button@^3.9.2": + version "3.10.0" + resolved "https://registry.yarnpkg.com/@react-types/button/-/button-3.10.0.tgz#5044648401f9842c47a433c66180a5a520cc29af" + integrity sha512-rAyU+N9VaHLBdZop4zasn8IDwf9I5Q1EzHUKMtzIFf5aUlMUW+K460zI/l8UESWRSWAXK9/WPSXGxfcoCEjvAA== dependencies: - "@react-types/shared" "^3.23.1" + "@react-types/shared" "^3.25.0" "@react-types/dialog@^3.5.8": - version "3.5.10" - resolved "https://registry.yarnpkg.com/@react-types/dialog/-/dialog-3.5.10.tgz#c0fe93c432581eb032c28632733ea80ae242b2c3" - integrity sha512-S9ga+edOLNLZw7/zVOnZdT5T40etpzUYBXEKdFPbxyPYnERvRxJAsC1/ASuBU9fQAXMRgLZzADWV+wJoGS/X9g== + version "3.5.13" + resolved "https://registry.yarnpkg.com/@react-types/dialog/-/dialog-3.5.13.tgz#7100f9d5a25626cea2d2d8a755f4c0aa625faa68" + integrity sha512-9k8daVcAqQsySkzDY6NIVlyGxtpEip4TKuLyzAehthbv78GQardD5fHdjQ6eXPRS4I2qZrmytrFFrlOnwWVGHw== dependencies: - "@react-types/overlays" "^3.8.7" - "@react-types/shared" "^3.23.1" + "@react-types/overlays" "^3.8.10" + "@react-types/shared" "^3.25.0" -"@react-types/overlays@^3.8.5", "@react-types/overlays@^3.8.7": - version "3.8.7" - resolved "https://registry.yarnpkg.com/@react-types/overlays/-/overlays-3.8.7.tgz#a43faf524cb3fce74acceee43898b265e8dfee05" - integrity sha512-zCOYvI4at2DkhVpviIClJ7bRrLXYhSg3Z3v9xymuPH3mkiuuP/dm8mUCtkyY4UhVeUTHmrQh1bzaOP00A+SSQA== +"@react-types/overlays@^3.8.10", "@react-types/overlays@^3.8.5": + version "3.8.10" + resolved "https://registry.yarnpkg.com/@react-types/overlays/-/overlays-3.8.10.tgz#9315b7d376f2877ef531cb42217327833eabcd15" + integrity sha512-IcnB+VYfAJazRjWhBKZTmVMh3KTp/B1rRbcKkPx6t8djP9UQhKcohP7lAALxjJ56Jjz/GFC6rWyUcnYH0NFVRA== dependencies: - "@react-types/shared" "^3.23.1" + "@react-types/shared" "^3.25.0" -"@react-types/shared@^3.22.1", "@react-types/shared@^3.23.1": - version "3.23.1" - resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.23.1.tgz#2f23c81d819d0ef376df3cd4c944be4d6bce84c3" - integrity sha512-5d+3HbFDxGZjhbMBeFHRQhexMFt4pUce3okyRtUVKbbedQFUrtXSBg9VszgF2RTeQDKDkMCIQDtz5ccP/Lk1gw== +"@react-types/shared@^3.22.1", "@react-types/shared@^3.25.0": + version "3.25.0" + resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.25.0.tgz#7223baf72256e918a3c29081bb1ecc6fad4fbf58" + integrity sha512-OZSyhzU6vTdW3eV/mz5i6hQwQUhkRs7xwY2d1aqPvTdMe0+2cY7Fwp45PAiwYLEj73i9ro2FxF9qC4DvHGSCgQ== "@release-it/conventional-changelog@^3.0.0": version "3.3.0" @@ -2543,9 +2550,9 @@ "@types/react" "*" "@types/react-redux@^7.1.20": - version "7.1.33" - resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.33.tgz#53c5564f03f1ded90904e3c90f77e4bd4dc20b15" - integrity sha512-NF8m5AjWCkert+fosDsN3hAlHzpjSiXlVy9EgQEmLoBhaNXbmyeGs/aj5dQzKuF+/q+S7JQagorGDW8pJ28Hmg== + version "7.1.34" + resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.34.tgz#83613e1957c481521e6776beeac4fd506d11bd0e" + integrity sha512-GdFaVjEbYv4Fthm2ZLvj1VSCedV7TqE5y1kNwnjSdBOTXuRSgowux6J8TAct15T3CKBr63UMk+2CO7ilRhyrAQ== dependencies: "@types/hoist-non-react-statics" "^3.3.0" "@types/react" "*" @@ -9176,9 +9183,9 @@ rc-tooltip@6.2.0: classnames "^2.3.1" rc-tree@~5.8.1: - version "5.8.7" - resolved "https://registry.yarnpkg.com/rc-tree/-/rc-tree-5.8.7.tgz#79fe560eca8a998a5cd866cdf374ffc3643754f1" - integrity sha512-cpsIQZ4nNYwpj6cqPRt52e/69URuNdgQF9wZ10InmEf8W3+i0A41OVmZWwHuX9gegQSqj+DPmaDkZFKQZ+ZV1w== + version "5.8.8" + resolved "https://registry.yarnpkg.com/rc-tree/-/rc-tree-5.8.8.tgz#650a13ec825a5a4feec6bbaf6a380465986ee0db" + integrity sha512-S+mCMWo91m5AJqjz3PdzKilGgbFm7fFJRFiTDOcoRbD7UfMOPnerXwMworiga0O2XIo383UoWuEfeHs1WOltag== dependencies: "@babel/runtime" "^7.10.1" classnames "2.x"