1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-31 13:47:02 +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', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
flexDirection: 'column', flexDirection: 'column',
paddingTop: '1.5rem', paddingTop: '1.5rem',
}, },
headerTitle: { headerTitle: {
@ -133,13 +132,19 @@ export const useStyles = makeStyles(theme => ({
top: '1px', top: '1px',
position: 'relative', position: 'relative',
}, },
stratigiesIconsContainer: { strategyIconContainer: {
minWidth: '50px',
marginRight: '5px',
display: 'flex',
justifyContent: 'center',
},
strategiesIconsContainer: {
transform: 'scale(0.8)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
transform: 'scale(0.8)',
top: '3px',
left: '-10px',
position: 'relative', position: 'relative',
marginLeft: '-0.75rem',
[theme.breakpoints.down(560)]: { [theme.breakpoints.down(560)]: {
marginLeft: '0px', marginLeft: '0px',
top: '5px', top: '5px',
@ -179,9 +184,7 @@ export const useStyles = makeStyles(theme => ({
padding: '0.5rem', padding: '0.5rem',
}, },
}, },
strategyIconContainer: {
marginRight: '5px',
},
strategyIcon: { strategyIcon: {
fill: theme.palette.grey[600], fill: theme.palette.grey[600],
}, },
@ -208,11 +211,12 @@ export const useStyles = makeStyles(theme => ({
fontWeight: 'normal', fontWeight: 'normal',
}, },
'&:disabled': { '&:disabled': {
margin: '0px 16px', height: '35px',
height: '35px' background: 'transparent',
}, color: theme.palette.grey[600],
},
}, },
separtor: { separator: {
marginLeft: '-10px', marginLeft: '-10px',
marginRight: '9px', marginRight: '9px',
[theme.breakpoints.down(560)]: { [theme.breakpoints.down(560)]: {

View File

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

View File

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