feat: compare empty string display (#7498)

Author: Zaimwa9

frontend/web/components/CompareIdentities.tsx

@@ -339,7 +339,6 @@ const CompareIdentities: FC<CompareIdentitiesType> = ({
                   >
                     {featureStateLeft && (
                       <FeatureValue
-                        includeEmpty={false}
                         value={featureStateLeft?.feature_state_value}
                       />
                     )}
@@ -358,7 +357,6 @@ const CompareIdentities: FC<CompareIdentitiesType> = ({
                   >
                     {featureStateRight && (
                       <FeatureValue
-                        includeEmpty={false}
                         value={featureStateRight?.feature_state_value}
                       />
                     )}

frontend/web/components/IdentityTraits.tsx

@@ -170,7 +170,6 @@ const IdentityTraits: FC<IdentityTraitsType> = ({
             </Flex>
             <Flex className='table-column'>
               <FeatureValue
-                includeEmpty
                 data-test={`user-trait-value-${i}`}
                 value={trait_value}
               />

frontend/web/components/diff/DiffString.tsx

@@ -14,6 +14,9 @@ const sanitiseDiffString = (value: FlagsmithValue) => {
   if (value === undefined || value === null) {
     return ''
   }
+  if (value === '') {
+    return '""'
+  }
   return `${value}`
 }
 const DiffString: FC<DiffType> = ({

frontend/web/components/feature-override/MultivariateOverrideDescription.tsx

@@ -12,11 +12,7 @@ const Multivariate: FC<MultivariateType> = ({ controlValue }) => {
       <span className='flex-row'>
         This feature is being overridden by a % variation in the environment,
         the control value of this feature is{' '}
-        <FeatureValue
-          className='ml-1 chip--xs'
-          includeEmpty
-          value={controlValue}
-        />
+        <FeatureValue className='ml-1 chip--xs' value={controlValue} />
       </span>
     </div>
   )

frontend/web/components/feature-override/SegmentOverrideDescription.tsx

@@ -56,11 +56,7 @@ const SegmentOverrideDescription: FC<SegmentOverrideDescriptionType> = ({
           {`This feature is being overridden by ${
             level === 'segment' ? 'this segment' : 'a segment'
           } and would normally be`}
-          <FeatureValue
-            className='ml-1 chip--xs'
-            includeEmpty
-            value={`${controlValue}`}
-          />
+          <FeatureValue className='ml-1 chip--xs' value={`${controlValue}`} />
           {level === 'identity' ? ' for this user' : ''}
         </span>
       )}

frontend/web/components/feature-summary/FeatureValue.tsx

@@ -7,7 +7,6 @@ import classNames from 'classnames'
 
 type FeatureValueType = {
   value: FlagsmithValue
-  includeEmpty?: boolean // whether to show empty values
   className?: string
   onClick?: () => void
   'data-test'?: string
@@ -18,9 +17,6 @@ const FeatureValue: FC<FeatureValueType> = (props) => {
     return null
   }
   const type = typeof props.value
-  if (type === 'string' && props.value === '' && !props.includeEmpty) {
-    return null
-  }
   const isCompact = getViewMode() === 'compact'
   return (
     <div
@@ -31,7 +27,7 @@ const FeatureValue: FC<FeatureValueType> = (props) => {
       data-test={props['data-test']}
       style={{ maxWidth: 'fit-content' }}
     >
-      {type == 'string' && <span className='quot'>"</span>}
+      {type === 'string' && <span className='quot'>"</span>}
       <span
         className='feature-value'
         style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
@@ -41,7 +37,7 @@ const FeatureValue: FC<FeatureValueType> = (props) => {
           isCompact ? 24 : 20,
         )}
       </span>
-      {type == 'string' && <span className='quot'>"</span>}
+      {type === 'string' && <span className='quot'>"</span>}
     </div>
   )
 }