diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategies.tsx b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategies.tsx
index c3fafdafe0..d932cad823 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategies.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategies.tsx
@@ -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 (
- }
- />
-
+
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategiesList.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategiesList.styles.ts
index d7ce11ef79..40eaba06d7 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategiesList.styles.ts
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategiesList.styles.ts
@@ -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',
},
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategiesList.tsx b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategiesList.tsx
index 39dfa4f4bb..64ef118a50 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategiesList.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategiesList.tsx
@@ -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 (
{
}
/>
-
-
-
+
+
+
+
+
+
+
{renderStrategies()}
);
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.styles.ts
index 4871f88cd8..363dc03605 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.styles.ts
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.styles.ts
@@ -14,7 +14,7 @@ export const useStyles = makeStyles(theme => ({
'&:active': {
backgroundColor: theme.palette.primary.main,
color: '#fff',
- },
+ },
},
title: {
maxWidth: '150px',
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.tsx b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.tsx
index aea069b6a7..b339565a21 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.tsx
@@ -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 = ({