Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

fix: show side bar and disable drag and add strategy based on permissions (#426)

Browse Source 
Co-authored-by: Ivar Conradi Østhus <ivarconr@gmail.com>
This commit is contained in:
Youssef Khedher 2021-10-15 12:20:07 +01:00 committed by GitHub
parent 95221e7b6b
commit a9d46d4ce6
5 changed files with 31 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategies.tsx
View File

@ -3,23 +3,13 @@ import FeatureStrategiesList from './FeatureStrategiesList/FeatureStrategiesList
import { useStyles } from './FeatureStrategies.styles';
import FeatureStrategiesUIProvider from './FeatureStrategiesUIProvider';
import FeatureStrategiesEnvironments from './FeatureStrategiesEnvironments/FeatureStrategiesEnvironments';
import ConditionallyRender from '../../../common/ConditionallyRender';
import { UPDATE_FEATURE } from '../../../AccessProvider/permissions';
import { useContext } from 'react';
import AccessContext from '../../../../contexts/AccessContext';
const FeatureStrategies = () => {
const { hasAccess } = useContext(AccessContext);
const styles = useStyles();
return (
<Paper className={styles.container}>
<FeatureStrategiesUIProvider>
<ConditionallyRender
condition={hasAccess(UPDATE_FEATURE)}
show={<FeatureStrategiesList />}
/>
<FeatureStrategiesList />
<FeatureStrategiesEnvironments />
</FeatureStrategiesUIProvider>
</Paper>

6
frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategiesList.styles.ts
View File

@ -25,11 +25,13 @@ export const useStyles = makeStyles(theme => ({
width: '15%',
},
},
iconButton: {
iconButtonWrapper: {
position: 'absolute',
top: '300px',
right: '-25px',
backgroundColor: theme.palette.grey[300],
},
iconButton: {
backgroundColor: `${theme.palette.grey[300]}!important`,
[theme.breakpoints.down(700)]: {
right: '-10px',
},

23
frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategiesList.tsx
View File

@ -5,15 +5,20 @@ import { useStyles } from './FeatureStrategiesList.styles';
import { useContext } from 'react';
import FeatureStrategiesUIContext from '../../../../../contexts/FeatureStrategiesUIContext';
import classnames from 'classnames';
import { Button, IconButton, useMediaQuery } from '@material-ui/core';
import { Button, IconButton, Tooltip, useMediaQuery } from '@material-ui/core';
import { DoubleArrow } from '@material-ui/icons';
import ConditionallyRender from '../../../../common/ConditionallyRender';
import { UPDATE_FEATURE } from '../../../../AccessProvider/permissions';
import AccessContext from '../../../../../contexts/AccessContext';
const FeatureStrategiesList = () => {
const smallScreen = useMediaQuery('(max-width:700px)');
const { expandedSidebar, setExpandedSidebar } = useContext(
FeatureStrategiesUIContext
);
const { hasAccess } = useContext(AccessContext);
const styles = useStyles();
const { strategies } = useStrategies();
@ -48,7 +53,7 @@ const FeatureStrategiesList = () => {
const iconClasses = classnames(styles.icon, {
[styles.expandedIcon]: expandedSidebar,
});
return (
<section className={classes}>
<ConditionallyRender
@ -60,9 +65,17 @@ const FeatureStrategiesList = () => {
</div>
}
/>
<IconButton className={styles.iconButton} onClick={toggleSidebar}>
<DoubleArrow className={iconClasses} />
</IconButton>
<Tooltip title={hasAccess(UPDATE_FEATURE) ? 'Click to open.' : 'You don\'t have access to perform this operation'} arrow>
<span className={styles.iconButtonWrapper}>
<IconButton
className={styles.iconButton}
onClick={toggleSidebar}
disabled={!hasAccess(UPDATE_FEATURE)}
>
<DoubleArrow className={iconClasses} />
</IconButton>
</span>
</Tooltip>
{renderStrategies()}
</section>
);

2
frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.styles.ts
View File

@ -14,7 +14,7 @@ export const useStyles = makeStyles(theme => ({
'&:active': {
backgroundColor: theme.palette.primary.main,
color: '#fff',
},
},
},
title: {
maxWidth: '150px',

10
frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.tsx
View File

@ -4,6 +4,7 @@ import classNames from 'classnames';
import { useContext } from 'react';
import { useDrag } from 'react-dnd';
import { useParams } from 'react-router-dom';
import AccessContext from '../../../../../../contexts/AccessContext';
import FeatureStrategiesUIContext from '../../../../../../contexts/FeatureStrategiesUIContext';
import useStrategies from '../../../../../../hooks/api/getters/useStrategies/useStrategies';
import { IFeatureViewParams } from '../../../../../../interfaces/params';
@ -13,6 +14,7 @@ import {
getFeatureStrategyIcon,
getHumanReadbleStrategyName,
} from '../../../../../../utils/strategy-names';
import { UPDATE_FEATURE } from '../../../../../AccessProvider/permissions';
import ConditionallyRender from '../../../../../common/ConditionallyRender';
import { useStyles } from './FeatureStrategyCard.styles';
@ -37,6 +39,8 @@ const FeatureStrategyCard = ({
const { setConfigureNewStrategy, setExpandedSidebar } = useContext(
FeatureStrategiesUIContext
);
const { hasAccess } = useContext(AccessContext);
const canUpdateFeature = hasAccess(UPDATE_FEATURE)
const handleClick = () => {
const strategy = getStrategyObject(strategies, name, featureId);
@ -50,6 +54,7 @@ const FeatureStrategyCard = ({
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [_, drag] = useDrag({
type: FEATURE_STRATEGIES_DRAG_TYPE,
canDrag: canUpdateFeature,
item: () => {
return { name };
},
@ -78,9 +83,8 @@ const FeatureStrategyCard = ({
<IconButton
className={styles.addButton}
onClick={handleClick}
data-test={`${ADD_NEW_STRATEGY_CARD_BUTTON_ID}-${
index + 1
}`}
data-test={`${ADD_NEW_STRATEGY_CARD_BUTTON_ID}-${index + 1}`}
disabled={!canUpdateFeature}
>
<Add />
</IconButton>