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"
>