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

Co-authored-by: Ivar Conradi Østhus <ivarconr@gmail.com>

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 (
         <Paper className={styles.container}>
             <FeatureStrategiesUIProvider>
-                <ConditionallyRender
+                <FeatureStrategiesList />
-                    condition={hasAccess(UPDATE_FEATURE)}
-                    show={<FeatureStrategiesList />}
-                />
-
                 <FeatureStrategiesEnvironments />
             </FeatureStrategiesUIProvider>
         </Paper>

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',
         },

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();
@@ -60,9 +65,17 @@ const FeatureStrategiesList = () => {
                     </div>
                 }
             />
-            <IconButton className={styles.iconButton} onClick={toggleSidebar}>
+            <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>
     );

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 = ({
                             <IconButton
                                 className={styles.addButton}
                                 onClick={handleClick}
-                                data-test={`${ADD_NEW_STRATEGY_CARD_BUTTON_ID}-${
+                                data-test={`${ADD_NEW_STRATEGY_CARD_BUTTON_ID}-${index + 1}`}
-                                    index + 1
+                                disabled={!canUpdateFeature}
-                                }`}
                             >
                                 <Add />
                             </IconButton>