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:
parent
d706bfc7bc
commit
f2a85ebf79
@ -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%)`,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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',
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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" />
|
||||||
|
@ -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',
|
||||||
},
|
},
|
||||||
|
@ -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>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
@ -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',
|
||||||
|
@ -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
|
||||||
|
@ -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: {
|
||||||
|
Loading…
Reference in New Issue
Block a user