From a9d46d4ce6cdba85db294b36fcd73cc7fd8634f9 Mon Sep 17 00:00:00 2001
From: Youssef Khedher <khedher.youssef@hotmail.fr>
Date: Fri, 15 Oct 2021 12:20:07 +0100
Subject: [PATCH] fix: show side bar and disable drag and add strategy based on
 permissions (#426)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Ivar Conradi Østhus <ivarconr@gmail.com>
---
 .../FeatureStrategies/FeatureStrategies.tsx   | 12 +---------
 .../FeatureStrategiesList.styles.ts           |  6 +++--
 .../FeatureStrategiesList.tsx                 | 23 +++++++++++++++----
 .../FeatureStrategyCard.styles.ts             |  2 +-
 .../FeatureStrategyCard.tsx                   | 10 +++++---
 5 files changed, 31 insertions(+), 22 deletions(-)

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