Read only segment override mv value (Flagsmith#1942)

* Read only segment override mv value * disabled styles / disable control value * disabled styles * Adjust Segment control value label * Allow editable segment control value * Adjust tab unread notification styles
interactio · Mar 6, 2023 · cf67ce9 · cf67ce9
1 parent 6bd4685
commit cf67ce9
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 12 deletions.
diff --git a/frontend/web/components/Highlight.js b/frontend/web/components/Highlight.js
@@ -15,6 +15,7 @@ function escapeHtml(unsafe) {
     };
 }
 const defaultValue = { __html: 'Enter a value...' };
+const defaultDisabledValue = { __html: ' ' };
 const collapsedHeight = 110;
 class Highlight extends React.Component {
   state = {
@@ -111,7 +112,7 @@ class Highlight extends React.Component {
     }
 
     render() {
-        const { children, className, element: Element, innerHTML } = this.props;
+        const { children, className, element: Element, innerHTML, disabled } = this.props;
         const props = { ref: this.setEl, className };
 
         if (innerHTML) {
@@ -126,8 +127,8 @@ class Highlight extends React.Component {
             return <Element {...props}>{children}</Element>;
         }
 
-        const html = this.props.preventEscape ? this.state.focus ? this.state.value : this.props.children ? { ...this.state.value } : defaultValue
-            : escapeHtml(this.state.focus ? this.state.value : this.props.children ? { ...this.state.value } : defaultValue);
+        const html = this.props.preventEscape ? this.state.focus ? this.state.value : this.props.children ? { ...this.state.value } : disabled? defaultDisabledValue : defaultValue
+            : escapeHtml(this.state.focus ? this.state.value : this.props.children ? { ...this.state.value } : disabled? defaultDisabledValue : defaultValue);
         return (
             <div className={this.state.expandable ? 'expandable' : ''}>
                 <pre style={{ ...(this.props.style || {}), opacity: typeof this.state.expandable === 'boolean' || this.props.forceExpanded ? 1 : 0, height: (this.state.expanded || !this.state.expandable) ? 'auto' : collapsedHeight }} ref={this.setEl}>

diff --git a/frontend/web/components/SegmentOverrides.js b/frontend/web/components/SegmentOverrides.js
@@ -156,17 +156,17 @@ const SegmentOverrideInner = class Override extends React.Component {
                     ) : (
                             <>
                                 <label>
-                                    Control Value - {controlPercent}%
+                                    Segment Control Value - {controlPercent}%
                                 </label>
                                 <ValueEditor
                                   value={v.value}
                                   data-test={`segment-override-value-${index}`}
+                                  placeholder="Value e.g. 'big' "
                                   disabled={readOnly}
                                   onChange={readOnly ? null : (e) => {
                                       this.setState({ changed: true });
                                       setValue(Utils.getTypedValue(Utils.safeParseEventValue(e)));
                                   }}
-                                  placeholder="Value e.g. 'big' "
                                 />
                             </>
                     )}
@@ -191,6 +191,7 @@ const SegmentOverrideInner = class Override extends React.Component {
                             <FormGroup className="mb-4">
                                 <VariationOptions
                                   preventRemove
+                                  readOnlyValue
                                   disabled={readOnly}
                                   controlValue={controlValue}
                                   variationOverrides={mvOptions}

diff --git a/frontend/web/components/ValueEditor.js b/frontend/web/components/ValueEditor.js
@@ -113,7 +113,7 @@ class ValueEditor extends Component {
     render() {
         const { ...rest } = this.props;
         return (
-            <div className={cx('value-editor', { light: this.state.language === 'txt' })}>
+            <div className={cx('value-editor', { disabled: this.props.disabled, light: this.state.language === 'txt' })}>
                 <Row className="select-language">
                     <span
                       onMouseDown={(e) => {
@@ -183,7 +183,7 @@ class ValueEditor extends Component {
                       {...rest}
                     />
                 ) : (
-                    <Highlight data-test={rest['data-test']} onChange={rest.disabled ? null : rest.onChange} className={this.state.language}>
+                    <Highlight data-test={rest['data-test']} disabled={rest.disabled} onChange={rest.disabled ? null : rest.onChange} className={this.state.language}>
                         {(typeof rest.value !== 'undefined' && rest.value != null) ? `${rest.value}` : ''}
                     </Highlight>
                 )}

diff --git a/frontend/web/components/mv/VariationOptions.js b/frontend/web/components/mv/VariationOptions.js
@@ -4,7 +4,20 @@ import VariationValue from './VariationValue';
 import ValueEditor from '../ValueEditor';
 import InfoMessage from '../InfoMessage';
 
-export default function VariationOptions({ multivariateOptions, disabled, select, controlValue, weightTitle, variationOverrides, removeVariation, updateVariation, setVariations, setValue, preventRemove }) {
+export default function VariationOptions({
+    controlValue,
+    disabled,
+    multivariateOptions,
+    preventRemove,
+    readOnlyValue,
+    removeVariation,
+    select,
+    setValue,
+    setVariations,
+    updateVariation,
+    variationOverrides,
+    weightTitle,
+}) {
     const invalid = multivariateOptions.length && controlValue < 0;
     if (!multivariateOptions || !multivariateOptions.length) {
         return null;
@@ -30,7 +43,7 @@ export default function VariationOptions({ multivariateOptions, disabled, select
                     <div className="panel-content">
                         <Row>
                             <Flex>
-                                <ValueEditor disabled={disabled} value={Utils.getTypedValue(controlValue)}/>
+                                <ValueEditor disabled value={Utils.getTypedValue(controlValue)}/>
                             </Flex>
                             <div
                               onMouseDown={(e) => {
@@ -54,7 +67,7 @@ export default function VariationOptions({ multivariateOptions, disabled, select
                             <div className="panel-content">
                                 <Row>
                                     <Flex>
-                                        <ValueEditor value={Utils.getTypedValue(Utils.featureStateToValue(theValue))}/>
+                                        <ValueEditor disabled={true} value={Utils.getTypedValue(Utils.featureStateToValue(theValue))}/>
                                     </Flex>
                                     <div
                                       data-test={`select-variation-${Utils.featureStateToValue(theValue)}`}
@@ -77,6 +90,7 @@ export default function VariationOptions({ multivariateOptions, disabled, select
                         <VariationValue
                           key={i}
                           index={i}
+                          readOnlyValue={readOnlyValue}
                           preventRemove={preventRemove || disabled}
                           value={theValue}
                           onChange={(e) => {

diff --git a/frontend/web/components/mv/VariationValue.js b/frontend/web/components/mv/VariationValue.js
@@ -7,6 +7,7 @@ const VariationValue = ({
     onChange,
     weightTitle,
     onRemove,
+    readOnlyValue,
     index,
     disabled,
 }) => (
@@ -20,7 +21,7 @@ const VariationValue = ({
                             data-test={`featureVariationValue${index}`}
                             name="featureValue" className="full-width"
                             value={Utils.getTypedValue(Utils.featureStateToValue(value))}
-                            disabled={disabled}
+                            disabled={disabled||readOnlyValue}
                             onChange={(e) => {
                                 onChange({
                                     ...value,

diff --git a/frontend/web/styles/components/_tabs.scss b/frontend/web/styles/components/_tabs.scss
@@ -160,3 +160,16 @@
 		font-size: 1.4em;
 		display: block;
 	}
+
+	.btn-tab {
+		position: relative;
+		.unread {
+			position: absolute;
+			right:0;
+			top:13px;
+			padding-left: 0 !important;
+			padding-right: 0 !important;
+			width: 16px;
+			height: 16px;
+		}
+	}
diff --git a/frontend/web/styles/styles.scss b/frontend/web/styles/styles.scss
@@ -36,8 +36,28 @@ bold, strong {
 }
 
 .value-editor {
-
+  &.disabled {
+    code {
+      background: $input-placeholder-color !important;
+    }
+    .select-language {
+      display: none;
+    }
+  }
 }
+.dark {
+  .value-editor {
+    &.disabled {
+      code {
+        cursor: not-allowed;
+        color: $dark-color;
+        background: $dark-bg-20 !important;
+      }
+    }
+  }
+}
+
+
 
 .faint-lg {
   color: $text-muted;