= ({
const values = parseParameterStrings(parameters[name]);
return values.length > 0 ? (
-
+
{nameItem}{' '}
-
+
has {values.length}{' '}
{values.length > 1 ? `items` : 'item'}:{' '}
{values.map((item: string) => (
@@ -141,15 +148,14 @@ export const StrategyExecution: VFC = ({
sx={{ mr: 0.5 }}
/>
))}
-
-
+
+
) : null;
case 'percentage':
const percentage = parseParameterNumber(parameters[name]);
return parameters[name] !== '' ? (
-
@@ -168,13 +174,13 @@ export const StrategyExecution: VFC = ({
label={`${percentage}%`}
/>
-
+
) : null;
case 'boolean':
return parameters[name] === 'true' ||
parameters[name] === 'false' ? (
-
+
= ({
size="small"
label={parameters[name]}
/>
-
+
) : null;
case 'string':
const value = parseParameterString(parameters[name]);
return typeof parameters[name] !== 'undefined' ? (
-
+
{nameItem}
+
{' is an empty string'}
-
+
}
elseShow={
<>
@@ -217,13 +223,13 @@ export const StrategyExecution: VFC = ({
}
/>
-
+
) : null;
case 'number':
const number = parseParameterNumber(parameters[name]);
return parameters[name] !== '' && number !== undefined ? (
-
+
{nameItem}
{isSetTo}
= ({
text={String(number)}
maxLength={50}
/>
-
+
) : null;
case 'default':
return null;
@@ -239,7 +245,7 @@ export const StrategyExecution: VFC = ({
return null;
});
- }, [parameters, definition, styles]);
+ }, [parameters, definition]);
if (!parameters) {
return ;
@@ -259,7 +265,7 @@ export const StrategyExecution: VFC = ({
),
strategy.name === 'default' && (
<>
-
+
The standard strategy is{' '}
= ({
label="ON"
/>{' '}
for all users.
-
+
),
...(parametersList ?? []),
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts
deleted file mode 100644
index 06e265773d..0000000000
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
- featureOverviewEnvironment: {
- borderRadius: theme.shape.borderRadiusLarge,
- marginBottom: theme.spacing(2),
- backgroundColor: theme.palette.background.paper,
- },
- accordion: {
- boxShadow: 'none',
- background: 'none',
- },
- accordionHeader: {
- boxShadow: 'none',
- padding: '1rem 2rem',
- [theme.breakpoints.down(400)]: {
- padding: '0.5rem 1rem',
- },
- },
- accordionBodyInnerContainer: {
- [theme.breakpoints.down(400)]: {
- padding: '0.5rem',
- },
- },
- accordionDetails: {
- padding: theme.spacing(3),
- background: theme.palette.secondaryContainer,
- borderBottomLeftRadius: theme.shape.borderRadiusLarge,
- borderBottomRightRadius: theme.shape.borderRadiusLarge,
- borderBottom: `4px solid ${theme.palette.primary.light}`,
-
- [theme.breakpoints.down('md')]: {
- padding: theme.spacing(2, 1),
- },
- },
- accordionDetailsDisabled: {
- borderBottom: `4px solid ${theme.palette.neutral.border}`,
- },
- accordionBody: {
- width: '100%',
- position: 'relative',
- paddingBottom: theme.spacing(2),
- },
- header: {
- display: 'flex',
- justifyContent: 'center',
- flexDirection: 'column',
- },
- headerTitle: {
- display: 'flex',
- alignItems: 'center',
- [theme.breakpoints.down(560)]: {
- flexDirection: 'column',
- textAlign: 'center',
- },
- },
- headerIcon: {
- [theme.breakpoints.down(560)]: {
- marginBottom: '0.5rem',
- },
- },
- iconContainer: {
- backgroundColor: theme.palette.primary.light,
- borderRadius: '50%',
- width: '28px',
- height: '28px',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- marginRight: '0.5rem',
- },
- icon: {
- fill: '#fff',
- width: '17px',
- height: '17px',
- },
- linkContainer: {
- display: 'flex',
- justifyContent: 'flex-end',
- marginBottom: '1rem',
- },
- truncator: {
- fontSize: theme.fontSizes.bodySize,
- fontWeight: theme.typography.fontWeightMedium,
- [theme.breakpoints.down(560)]: {
- textAlign: 'center',
- },
- },
- container: {
- display: 'flex',
- alignItems: 'center',
- marginLeft: '1.8rem',
- [theme.breakpoints.down(560)]: {
- flexDirection: 'column',
- marginLeft: '0',
- },
- },
-}));
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
index 0441e4016f..e6a926fda4 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
@@ -4,9 +4,8 @@ import {
AccordionSummary,
Box,
Chip,
- useTheme,
+ styled,
} from '@mui/material';
-import classNames from 'classnames';
import { ExpandMore } from '@mui/icons-material';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import useFeatureMetrics from 'hooks/api/getters/useFeatureMetrics/useFeatureMetrics';
@@ -15,7 +14,6 @@ import { getFeatureMetrics } from 'utils/getFeatureMetrics';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import EnvironmentIcon from 'component/common/EnvironmentIcon/EnvironmentIcon';
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
-import { useStyles } from './FeatureOverviewEnvironment.styles';
import EnvironmentAccordionBody from './EnvironmentAccordionBody/EnvironmentAccordionBody';
import { EnvironmentFooter } from './EnvironmentFooter/EnvironmentFooter';
import FeatureOverviewEnvironmentMetrics from './FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics';
@@ -23,17 +21,104 @@ import { FeatureStrategyMenu } from 'component/feature/FeatureStrategy/FeatureSt
import { FEATURE_ENVIRONMENT_ACCORDION } from 'utils/testIds';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { FeatureStrategyIcons } from 'component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons';
-// import { Badge } from 'component/common/Badge/Badge';
interface IFeatureOverviewEnvironmentProps {
env: IFeatureEnvironment;
}
+const StyledFeatureOverviewEnvironment = styled('div', {
+ shouldForwardProp: prop => prop !== 'enabled',
+})<{ enabled: boolean }>(({ theme, enabled }) => ({
+ borderRadius: theme.shape.borderRadiusLarge,
+ marginBottom: theme.spacing(2),
+ backgroundColor: theme.palette.background.paper,
+ background: enabled
+ ? theme.palette.background.paper
+ : theme.palette.neutral.light,
+}));
+
+const StyledAccordion = styled(Accordion)({
+ boxShadow: 'none',
+ background: 'none',
+});
+
+const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
+ boxShadow: 'none',
+ padding: theme.spacing(2, 4),
+ [theme.breakpoints.down(400)]: {
+ padding: theme.spacing(1, 2),
+ },
+}));
+
+const StyledAccordionDetails = styled(AccordionDetails, {
+ shouldForwardProp: prop => prop !== 'enabled',
+})<{ enabled: boolean }>(({ theme, enabled }) => ({
+ padding: theme.spacing(3),
+ background: theme.palette.secondaryContainer,
+ borderBottomLeftRadius: theme.shape.borderRadiusLarge,
+ borderBottomRightRadius: theme.shape.borderRadiusLarge,
+ borderBottom: `4px solid ${
+ enabled ? theme.palette.primary.light : theme.palette.neutral.border
+ }`,
+
+ [theme.breakpoints.down('md')]: {
+ padding: theme.spacing(2, 1),
+ },
+}));
+
+const StyledEnvironmentAccordionBody = styled(EnvironmentAccordionBody)(
+ ({ theme }) => ({
+ width: '100%',
+ position: 'relative',
+ paddingBottom: theme.spacing(2),
+ })
+);
+
+const StyledHeader = styled('div', {
+ shouldForwardProp: prop => prop !== 'enabled',
+})<{ enabled: boolean }>(({ theme, enabled }) => ({
+ display: 'flex',
+ justifyContent: 'center',
+ flexDirection: 'column',
+ color: enabled ? theme.palette.text.primary : theme.palette.text.secondary,
+}));
+
+const StyledHeaderTitle = styled('div')(({ theme }) => ({
+ display: 'flex',
+ alignItems: 'center',
+ [theme.breakpoints.down(560)]: {
+ flexDirection: 'column',
+ textAlign: 'center',
+ },
+}));
+
+const StyledEnvironmentIcon = styled(EnvironmentIcon)(({ theme }) => ({
+ [theme.breakpoints.down(560)]: {
+ marginBottom: '0.5rem',
+ },
+}));
+
+const StyledStringTruncator = styled(StringTruncator)(({ theme }) => ({
+ fontSize: theme.fontSizes.bodySize,
+ fontWeight: theme.typography.fontWeightMedium,
+ [theme.breakpoints.down(560)]: {
+ textAlign: 'center',
+ },
+}));
+
+const StyledContainer = styled('div')(({ theme }) => ({
+ display: 'flex',
+ alignItems: 'center',
+ marginLeft: '1.8rem',
+ [theme.breakpoints.down(560)]: {
+ flexDirection: 'column',
+ marginLeft: '0',
+ },
+}));
+
const FeatureOverviewEnvironment = ({
env,
}: IFeatureOverviewEnvironmentProps) => {
- const { classes: styles } = useStyles();
- const theme = useTheme();
const projectId = useRequiredPathParam('projectId');
const featureId = useRequiredPathParam('featureId');
const { metrics } = useFeatureMetrics(projectId, featureId);
@@ -48,40 +133,19 @@ const FeatureOverviewEnvironment = ({
);
return (
-
-
+
- }
>
-
-
-
+
+
+
-
@@ -97,8 +161,8 @@ const FeatureOverviewEnvironment = ({
/>
}
/>
-
-
+
+
-
-
+
+
-
+
-
-
+
}
/>
-
-
-
-
-
+
+
{percentage}%
-
-
+ 0 times and
exposed
0 times in the last hour
-
-
-
-
-
-
{percentage}%
-
+
+
+ {percentage}%
+
The feature has been requested{' '}
times
@@ -79,12 +116,12 @@ const FeatureOverviewEnvironmentMetrics = ({
times
{' '}
in the last hour
-
-
-
-
-
-
- {' '}
-
- {capitalize(type || '')} toggle
-
-
-
-
+
+
+
+ ({
+ marginRight: theme.spacing(2),
+ height: '40px',
+ width: '40px',
+ fill: theme.palette.text.tertiaryContrast,
+ })}
+ />{' '}
+ {capitalize(type || '')} toggle
+
+
+
Project: {project}
-
+
+
Description:
-
+
{description}
{
title: 'Edit description',
}}
>
-
+ ({
+ color: theme.palette.text
+ .tertiaryContrast,
+ })}
+ />
-
+
No description.{' '}
{
title: 'Edit description',
}}
>
-
+ ({
+ color: theme.palette.text
+ .tertiaryContrast,
+ })}
+ />
-
-
+
+
0 &&
!Boolean(uiConfig.flags.variantsPerEnvironment)
}
show={
-
+
-
+
}
/>
-
+
{
@@ -141,7 +163,7 @@ const FeatureOverviewTags: React.FC = ({
elseShow={No tags to display
}
/>
-
+
+
+
setSettings(METADATA)}
selected={settings === METADATA}
@@ -34,7 +51,7 @@ export const FeatureSettings = () => {
setSettings(PROJECT)}
selected={settings === PROJECT}
@@ -43,8 +60,8 @@ export const FeatureSettings = () => {
Project
-
-
+
+
{
condition={settings === PROJECT && uiConfig.flags.P}
show={}
/>
-
-