From 9c3e3004480acd5de3ad48d58bb335b648452aea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Sat, 29 Jan 2022 15:18:11 +0100
Subject: [PATCH] fix: viewers should be allowed to see strategy config (#645)

fixes #644
---
 .../FeatureStrategyAccordionBody.tsx          | 39 ++++++++-----------
 .../FlexibleStrategy/FlexibleStrategy.tsx     |  5 +++
 .../GeneralStrategy/GeneralStrategy.tsx       |  3 ++
 3 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyAccordion/FeatureStrategyAccordionBody/FeatureStrategyAccordionBody.tsx b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyAccordion/FeatureStrategyAccordionBody/FeatureStrategyAccordionBody.tsx
index 2de084bb43..d28e4096a6 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyAccordion/FeatureStrategyAccordionBody/FeatureStrategyAccordionBody.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategyAccordion/FeatureStrategyAccordionBody/FeatureStrategyAccordionBody.tsx
@@ -148,6 +148,17 @@ const FeatureStrategyAccordionBody: React.FC<
     const { parameters } = strategy;
     const ON = uiConfig.flags[C];
 
+    const editable = hasAccess(
+        UPDATE_FEATURE_STRATEGY,
+        projectId,
+        activeEnvironment.name
+    ) ||
+    hasAccess(
+        CREATE_FEATURE_STRATEGY,
+        projectId,
+        activeEnvironment.name
+    );
+
     return (
         <div className={styles.accordionContainer}>
             <ConditionallyRender
@@ -193,28 +204,12 @@ const FeatureStrategyAccordionBody: React.FC<
                 />
             </Dialogue>
 
-            <ConditionallyRender
-                condition={
-                    hasAccess(
-                        UPDATE_FEATURE_STRATEGY,
-                        projectId,
-                        activeEnvironment.name
-                    ) ||
-                    hasAccess(
-                        CREATE_FEATURE_STRATEGY,
-                        projectId,
-                        activeEnvironment.name
-                    )
-                }
-                show={
-                    <Type
-                        parameters={parameters}
-                        updateParameter={updateParameters}
-                        strategyDefinition={definition}
-                        context={context}
-                        editable
-                    />
-                }
+            <Type
+                parameters={parameters}
+                updateParameter={updateParameters}
+                strategyDefinition={definition}
+                context={context}
+                editable={editable}
             />
 
             {children}
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/common/FlexibleStrategy/FlexibleStrategy.tsx b/frontend/src/component/feature/FeatureView2/FeatureStrategies/common/FlexibleStrategy/FlexibleStrategy.tsx
index 25b4221eda..d0ffcea5cd 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/common/FlexibleStrategy/FlexibleStrategy.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/common/FlexibleStrategy/FlexibleStrategy.tsx
@@ -22,12 +22,14 @@ interface IFlexibleStrategyProps {
     parameters: IParameter;
     updateParameter: (field: string, value: any) => void;
     context: any;
+    editable: boolean;
 }
 
 const FlexibleStrategy = ({
     updateParameter,
     parameters,
     context,
+    editable=true
 }: IFlexibleStrategyProps) => {
     const onUpdate =
         (field: string) =>
@@ -66,6 +68,7 @@ const FlexibleStrategy = ({
             <RolloutSlider
                 name="Rollout"
                 value={1 * rollout}
+                disabled={!editable}
                 onChange={updateRollout}
             />
 
@@ -96,6 +99,7 @@ const FlexibleStrategy = ({
                     label="Stickiness"
                     options={stickinessOptions}
                     value={stickiness}
+                    disabled={!editable}
                     data-test={FLEXIBLE_STRATEGY_STICKINESS_ID}
                     onChange={e =>
                         onUpdate('stickiness')(e, e.target.value as number)
@@ -126,6 +130,7 @@ const FlexibleStrategy = ({
                 <Input
                     label="groupId"
                     value={groupId || ''}
+                    disabled={!editable}
                     onChange={e => onUpdate('groupId')(e, e.target.value)}
                     data-test={FLEXIBLE_STRATEGY_GROUP_ID}
                 />
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/common/GeneralStrategy/GeneralStrategy.tsx b/frontend/src/component/feature/FeatureView2/FeatureStrategies/common/GeneralStrategy/GeneralStrategy.tsx
index 9b6d8a9b1f..131bf391d8 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/common/GeneralStrategy/GeneralStrategy.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/common/GeneralStrategy/GeneralStrategy.tsx
@@ -66,6 +66,7 @@ const GeneralStrategy = ({
                             <RolloutSlider
                                 name={name}
                                 onChange={onChangePercentage.bind(this, name)}
+                                disabled={!editable}
                                 value={1 * value}
                                 minLabel="off"
                                 maxLabel="on"
@@ -107,6 +108,7 @@ const GeneralStrategy = ({
                                 size="small"
                                 required={required}
                                 style={{ width: '100%' }}
+                                disabled={!editable}
                                 name={name}
                                 label={name}
                                 onChange={onChangeTextField.bind(this, name)}
@@ -148,6 +150,7 @@ const GeneralStrategy = ({
                                 size="small"
                                 style={{ width: '100%' }}
                                 required={required}
+                                disabled={!editable}
                                 name={name}
                                 label={name}
                                 onChange={onChangeTextField.bind(this, name)}