1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00

fix/strategy tab (#519)

* fix: add the toggle switch inside the strategies list

* fix: styling strategy execution tab

* fix: remove visual execution from strategy tab

* fix: test fail on yarn build

* fix: add style for the strategy container

* fix: remove overlapping of switch

* fix: remove border from select strategy

* fix: remove borders and adjust icon rollout

* fix: use theme grey

Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>
This commit is contained in:
Youssef Khedher 2021-11-26 13:36:04 +01:00 committed by GitHub
parent d706bfc7bc
commit f2a85ebf79
9 changed files with 41 additions and 46 deletions

View File

@ -21,7 +21,7 @@ const PercentageCircle = ({
color: '#fff', color: '#fff',
backgroundColor: theme.palette.grey[200], backgroundColor: theme.palette.grey[200],
backgroundImage: `conic-gradient(${ backgroundImage: `conic-gradient(${
theme.palette.primary.main theme.palette.primary.light
} ${percentage}%, ${secondaryPieColor || theme.palette.grey[200]} 1%)`, } ${percentage}%, ${secondaryPieColor || theme.palette.grey[200]} 1%)`,
}; };

View File

@ -4,17 +4,21 @@ export const useStyles = makeStyles(theme => ({
container: { container: {
border: `1px solid ${theme.palette.grey[300]}`, border: `1px solid ${theme.palette.grey[300]}`,
borderRadius: '5px', borderRadius: '5px',
width: '500px', width: '50%',
marginLeft: '1rem', marginLeft: '1rem',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
}, },
headerContainer: {
width: '100%',
backgroundColor: '#efefef',
},
header: { header: {
color: theme.palette.primary.main, color: '#000',
textAlign: 'center', textAlign: 'left',
margin: '0.5rem 0', margin: '1rem 1.2rem',
fontSize: theme.fontSizes.mainHeader, fontSize: theme.fontSizes.bodySize,
marginTop: '1rem', fontWeight: 'normal',
}, },
})); }));

View File

@ -36,9 +36,12 @@ const FeatureEnvironmentStrategyExecution = ({
return ( return (
<div className={styles.container}> <div className={styles.container}>
<h3 className={styles.header}> <div className={styles.headerContainer}>
Visual overview of your strategy configuration <h6 className={styles.header}>
</h3> Visual overview of your strategy configuration
</h6>
</div>
{renderStrategies()} {renderStrategies()}
</div> </div>
); );

View File

@ -5,7 +5,6 @@ const FeatureEnvironmentStrategyExecutionSeparator = () => {
const styles = useStyles(); const styles = useStyles();
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.separatorBorder} />
<div className={styles.textContainer}> <div className={styles.textContainer}>
<div className={styles.textPositioning}> <div className={styles.textPositioning}>
<FeatureStrategiesSeparator text="OR" /> <FeatureStrategiesSeparator text="OR" />

View File

@ -44,7 +44,6 @@ export const useStyles = makeStyles(theme => ({
top: '-65px', top: '-65px',
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
width: '100%',
[theme.breakpoints.down(700)]: { [theme.breakpoints.down(700)]: {
top: '-94px', top: '-94px',
}, },

View File

@ -149,16 +149,18 @@ const FeatureStrategiesEnvironmentList = ({
condition={!expandedSidebar} condition={!expandedSidebar}
show={ show={
<div className={styles.headerContainer}> <div className={styles.headerContainer}>
<FeatureOverviewEnvSwitch <div className={styles.headerInnerContainer}>
text={ <FeatureOverviewEnvSwitch
activeEnvironment.enabled text={
? 'Toggle is enabled and the following strategies are executing' activeEnvironment.enabled
: 'Toggle is disabled and no strategies are executing' ? 'Toggle is enabled and the following strategies are executing'
} : 'Toggle is disabled and no strategies are executing'
env={activeEnvironment} }
setToastData={setToastData} env={activeEnvironment}
callback={updateFeatureEnvironmentCache} setToastData={setToastData}
/> callback={updateFeatureEnvironmentCache}
/>
</div>
</div> </div>
} }
/> />

View File

@ -24,8 +24,8 @@ export const useStyles = makeStyles(theme => ({
}, },
}, },
outerTabContentContainer: { outerTabContentContainer: {
marginTop: '1rem', margin: '1rem 2rem',
padding: '0rem 2rem 2rem 2rem', paddingBottom: '2rem',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
[theme.breakpoints.down(700)]: { [theme.breakpoints.down(700)]: {
@ -73,7 +73,10 @@ export const useStyles = makeStyles(theme => ({
configureStrategy: { configureStrategy: {
display: 'none', display: 'none',
}, },
addStrategyButton: { marginLeft: 'auto' }, addStrategyButton: {
marginLeft: 'auto',
marginTop: '10px',
},
tabNavigation: { tabNavigation: {
backgroundColor: 'transparent', backgroundColor: 'transparent',
textTransform: 'none', textTransform: 'none',

View File

@ -20,7 +20,6 @@ import FeatureStrategiesUIContext from '../../../../../contexts/FeatureStrategie
import ConditionallyRender from '../../../../common/ConditionallyRender'; import ConditionallyRender from '../../../../common/ConditionallyRender';
import FeatureStrategiesConfigure from './FeatureStrategiesConfigure/FeatureStrategiesConfigure'; import FeatureStrategiesConfigure from './FeatureStrategiesConfigure/FeatureStrategiesConfigure';
import FeatureStrategiesRefresh from './FeatureStrategiesRefresh/FeatureStrategiesRefresh'; import FeatureStrategiesRefresh from './FeatureStrategiesRefresh/FeatureStrategiesRefresh';
import FeatureEnvironmentStrategyExecution from './FeatureEnvironmentStrategyExecution/FeatureEnvironmentStrategyExecution';
import ResponsiveButton from '../../../../common/ResponsiveButton/ResponsiveButton'; import ResponsiveButton from '../../../../common/ResponsiveButton/ResponsiveButton';
import AccessContext from '../../../../../contexts/AccessContext'; import AccessContext from '../../../../../contexts/AccessContext';
@ -291,26 +290,11 @@ const FeatureStrategiesEnvironments = () => {
env.strategies.length > 0 || expandedSidebar env.strategies.length > 0 || expandedSidebar
} }
show={ show={
<> <div className={listContainerClasses}>
<div className={listContainerClasses}> <FeatureStrategiesEnvironmentList
<FeatureStrategiesEnvironmentList strategies={env.strategies}
strategies={env.strategies}
/>
</div>
<ConditionallyRender
condition={
!expandedSidebar &&
!configureNewStrategy &&
!smallScreen
}
show={
<FeatureEnvironmentStrategyExecution
strategies={env.strategies}
env={env}
/>
}
/> />
</> </div>
} }
elseShow={ elseShow={
<ConditionallyRender <ConditionallyRender

View File

@ -40,7 +40,8 @@ export const useStyles = makeStyles(theme => ({
marginLeft: 'auto', marginLeft: 'auto',
}, },
icon: { icon: {
fill: theme.palette.primary.main, marginRight: '0.5rem',
fill: theme.palette.grey[600],
minWidth: '50px', minWidth: '50px',
}, },
rollout: { rollout: {