diff --git a/frontend/cypress.json b/frontend/cypress.json index ba6b740e2d..ea78e63c8d 100644 --- a/frontend/cypress.json +++ b/frontend/cypress.json @@ -2,5 +2,6 @@ "projectId": "tc2qff", "defaultCommandTimeout": 12000, "screenshotOnRunFailure": false, - "video": false + "video": false, + "experimentalSessionAndOrigin": true } diff --git a/frontend/cypress/support/commands.ts b/frontend/cypress/support/commands.ts index 9e95963650..fdbea23436 100644 --- a/frontend/cypress/support/commands.ts +++ b/frontend/cypress/support/commands.ts @@ -27,10 +27,6 @@ const AUTH_USER = Cypress.env('AUTH_USER'); const AUTH_PASSWORD = Cypress.env('AUTH_PASSWORD'); -Cypress.config({ - experimentalSessionSupport: true, -}); - Cypress.Commands.add('login', (user = AUTH_USER, password = AUTH_PASSWORD) => cy.session(user, () => { cy.visit('/'); diff --git a/frontend/package.json b/frontend/package.json index eb1f9eae80..cf79d0ce7d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -42,17 +42,17 @@ "@emotion/react": "11.9.3", "@emotion/styled": "11.9.3", "@mui/icons-material": "5.8.4", - "@mui/lab": "5.0.0-alpha.88", - "@mui/material": "5.8.6", + "@mui/lab": "5.0.0-alpha.93", + "@mui/material": "5.9.3", "@openapitools/openapi-generator-cli": "2.5.1", - "@testing-library/dom": "8.14.0", + "@testing-library/dom": "8.16.0", "@testing-library/jest-dom": "5.16.4", "@testing-library/react": "12.1.5", "@testing-library/react-hooks": "^7.0.2", - "@testing-library/user-event": "14.2.1", + "@testing-library/user-event": "14.3.0", "@types/debounce": "1.2.1", "@types/deep-diff": "1.0.1", - "@types/jest": "27.5.2", + "@types/jest": "28.1.6", "@types/lodash.clonedeep": "4.5.7", "@types/node": "17.0.18", "@types/react": "17.0.48", @@ -67,8 +67,8 @@ "chartjs-adapter-date-fns": "2.0.0", "classnames": "2.3.1", "copy-to-clipboard": "3.3.1", - "cypress": "9.5.3", - "date-fns": "2.28.0", + "cypress": "9.7.0", + "date-fns": "2.29.1", "debounce": "1.2.1", "deep-diff": "1.0.2", "eslint": "8.18.0", @@ -78,20 +78,20 @@ "immer": "9.0.15", "jsdom": "20.0.0", "lodash.clonedeep": "4.5.0", - "msw": "0.42.3", + "msw": "0.44.2", "pkginfo": "^0.4.1", "plausible-tracker": "0.3.8", "prettier": "2.7.1", "prop-types": "15.8.1", "react": "17.0.2", - "react-chartjs-2": "4.2.0", + "react-chartjs-2": "4.3.1", "react-dom": "17.0.2", "react-hooks-global-state": "1.0.2", "react-router-dom": "6.3.0", "react-table": "7.8.0", "react-test-renderer": "17.0.2", "react-timeago": "7.1.0", - "sass": "1.53.0", + "sass": "1.54.0", "semver": "7.3.7", "swr": "1.3.0", "tss-react": "3.7.1", diff --git a/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx b/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx index 0a21250267..60b7ea86bf 100644 --- a/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx +++ b/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx @@ -1,51 +1,45 @@ import { useTheme } from '@mui/material'; +import { CSSProperties } from 'react'; interface IPercentageCircleProps { - styles?: object; percentage: number; - secondaryPieColor?: string; - className?: string; - hideNumber?: boolean; + size?: `${number}rem`; } const PercentageCircle = ({ - styles, percentage, - secondaryPieColor, - hideNumber, - ...rest + size = '4rem', }: IPercentageCircleProps) => { const theme = useTheme(); - let circle = { - height: '65px', - width: '65px', - borderRadius: '50%', - color: '#fff', - backgroundColor: theme.palette.grey[200], - backgroundImage: `conic-gradient(${ - theme.palette.primary.light - } ${percentage}%, ${secondaryPieColor || theme.palette.grey[200]} 1%)`, + const style: CSSProperties = { + display: 'block', + borderRadius: '100%', + transform: 'rotate(-90deg)', + height: size, + width: size, + background: theme.palette.grey[200], }; - if (percentage === 100) { - return ( -
- {hideNumber ? null : '100%'} -
- ); - } + // The percentage circle used to be drawn by CSS with a conic-gradient, + // but the result was either jagged or blurry. SVG seems to look better. + // See https://stackoverflow.com/a/70659532. + const r = 100 / (2 * Math.PI); + const d = 2 * r; - return
; + return ( + + + + ); }; export default PercentageCircle; diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons.tsx index 4ce4395677..89aadafacf 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons.tsx @@ -13,24 +13,17 @@ export const FeatureStrategyIcons = ({ return null; } - const strategyNames = strategies.map(strategy => strategy.name); - const uniqueStrategyNames = uniqueValues(strategyNames); - return ( - {uniqueStrategyNames.map(strategyName => ( - - + {strategies.map(strategy => ( + + ))} ); }; -const uniqueValues = (values: T[]): T[] => { - return [...new Set(values)]; -}; - const StyledList = styled('ul')(() => ({ all: 'unset', display: 'flex', diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/FeatureMetricsChart.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/FeatureMetricsChart.tsx index 45d7e6d59b..db8b7ab320 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/FeatureMetricsChart.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/FeatureMetricsChart.tsx @@ -67,3 +67,6 @@ ChartJS.register( Tooltip, Title ); + +// Use a default export to lazy-load the charting library. +export default FeatureMetricsChart; diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx index cf2ce958d9..2c3ffe64ee 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx @@ -1,10 +1,10 @@ import { FeatureMetricsTable } from '../FeatureMetricsTable/FeatureMetricsTable'; import { IFeatureMetricsRaw } from 'interfaces/featureToggle'; import { FeatureMetricsStatsRaw } from '../FeatureMetricsStats/FeatureMetricsStatsRaw'; -import { FeatureMetricsChart } from '../FeatureMetricsChart/FeatureMetricsChart'; import { Box, Typography } from '@mui/material'; import theme from 'themes/theme'; import { useId } from 'hooks/useId'; +import React, { Suspense } from 'react'; interface IFeatureMetricsContentProps { metrics: IFeatureMetricsRaw[]; @@ -34,14 +34,14 @@ export const FeatureMetricsContent = ({ } return ( - <> + - - + ); }; + +const LazyFeatureMetricsChart = React.lazy( + () => import('../FeatureMetricsChart/FeatureMetricsChart') +); diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx index 18db353802..df92c05ec7 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx @@ -44,29 +44,25 @@ export const StrategyExecution = ({ strategy }: IStrategyExecutionProps) => { switch (key) { case 'rollout': case 'Rollout': + const percentage = parseParameterNumber(parameters[key]); return ( - + + +
{' '} of your base{' '} {constraints.length > 0 diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts index c44e909ede..47e985190a 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts @@ -23,6 +23,7 @@ export const useStyles = makeStyles()(theme => ({ maxWidth: '270px', marginTop: '0.25rem', fontSize: theme.fontSizes.smallBody, + textAlign: 'right', [theme.breakpoints.down(700)]: { display: 'none', }, @@ -33,7 +34,7 @@ export const useStyles = makeStyles()(theme => ({ fontSize: theme.fontSizes.subHeader, }, percentageCircle: { - transform: 'scale(0.85)', + margin: '0 1rem', [theme.breakpoints.down(500)]: { display: 'none', }, diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx index c3ec160435..3e542e350a 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx @@ -73,11 +73,9 @@ const FeatureOverviewEnvironmentMetrics = ({ hour

- +
+ +
); }; diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx index a33c9efaef..e38188b089 100644 --- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx @@ -105,7 +105,6 @@ export const OverrideConfig: VFC = ({ options={legalValues} onChange={updateSelectValues(index)} getOptionLabel={option => option} - defaultValue={filteredValues} value={filteredValues} style={{ width: '100%' }} filterSelectedOptions diff --git a/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx b/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx index 27aa56b41e..51b0529684 100644 --- a/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx +++ b/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx @@ -97,7 +97,13 @@ const StrategyInputList = ({ +
} > diff --git a/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap b/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap index c3dfcc9020..926cdcbf9d 100644 --- a/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap +++ b/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap @@ -131,18 +131,18 @@ exports[`FeedbackCESForm 1`] = ` class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root mui-wb57ya-MuiFormControl-root-MuiTextField-root" >