1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00

fix / environment-overview (#630)

* fix: icons

* fix: disabled link
This commit is contained in:
Fredrik Strand Oseberg 2022-01-26 11:59:47 +01:00 committed by GitHub
parent be3a26529a
commit 1d2bd717ee
3 changed files with 59 additions and 54 deletions

View File

@ -23,7 +23,6 @@ export const useStyles = makeStyles(theme => ({
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
paddingTop: '1.5rem',
},
headerTitle: {
@ -133,13 +132,19 @@ export const useStyles = makeStyles(theme => ({
top: '1px',
position: 'relative',
},
stratigiesIconsContainer: {
strategyIconContainer: {
minWidth: '50px',
marginRight: '5px',
display: 'flex',
justifyContent: 'center',
},
strategiesIconsContainer: {
transform: 'scale(0.8)',
display: 'flex',
alignItems: 'center',
transform: 'scale(0.8)',
top: '3px',
left: '-10px',
position: 'relative',
marginLeft: '-0.75rem',
[theme.breakpoints.down(560)]: {
marginLeft: '0px',
top: '5px',
@ -179,9 +184,7 @@ export const useStyles = makeStyles(theme => ({
padding: '0.5rem',
},
},
strategyIconContainer: {
marginRight: '5px',
},
strategyIcon: {
fill: theme.palette.grey[600],
},
@ -208,11 +211,12 @@ export const useStyles = makeStyles(theme => ({
fontWeight: 'normal',
},
'&:disabled': {
margin: '0px 16px',
height: '35px'
},
height: '35px',
background: 'transparent',
color: theme.palette.grey[600],
},
},
separtor: {
separator: {
marginLeft: '-10px',
marginRight: '9px',
[theme.breakpoints.down(560)]: {

View File

@ -116,52 +116,45 @@ const FeatureOverviewEnvironment = ({
>
Add strategy
</PermissionButton>
<span className={styles.separtor}>|</span>
<ConditionallyRender
condition={
featureEnvironment?.strategies.length !== 0
}
show={
<div
className={
styles.stratigiesIconsContainer
}
>
{getStrategyIcons()?.map(
({ name, Icon }) => (
<Tooltip
title={getHumanReadableStrategyName(
name
)}
arrow
key={name}
>
<div
className={
styles.strategyIconContainer
}
<>
<span className={styles.separator}>
|
</span>
<div
className={
styles.strategiesIconsContainer
}
>
{getStrategyIcons()?.map(
({ name, Icon }) => (
<Tooltip
title={getHumanReadableStrategyName(
name
)}
arrow
key={name}
>
<Icon
<div
className={
styles.strategyIcon
styles.strategyIconContainer
}
/>
</div>
</Tooltip>
)
)}
</div>
}
elseShow={
<div
className={
styles.noStratigiesInfoContainer
}
>
<p className={styles.strategiesText}>
No strategies defined on this toggle
</p>
</div>
>
<Icon
className={
styles.strategyIcon
}
/>
</div>
</Tooltip>
)
)}
</div>{' '}
</>
}
/>
</div>
@ -187,9 +180,16 @@ const FeatureOverviewEnvironment = ({
featureEnvironment={featureEnvironment}
getOverviewText={getOverviewText}
/>
<FeatureOverviewEnvironmentFooter
env={env}
environmentMetric={environmentMetric}
<ConditionallyRender
condition={
featureEnvironment?.strategies?.length > 0
}
show={
<FeatureOverviewEnvironmentFooter
env={env}
environmentMetric={environmentMetric}
/>
}
/>
</div>
</AccordionDetails>

View File

@ -95,7 +95,8 @@ const GeneralStrategy = ({
);
} else if (type === 'number') {
const regex = new RegExp('^\\d+$');
const error = value.length > 0 ? !regex.test(value) : false;
const error =
value?.length > 0 ? !regex.test(value) : false;
return (
<div key={name} className={styles.generalSection}>