fix(deep-link): feature value renders as [object Object]

frontend/common/types/responses.ts

@@ -578,7 +578,7 @@ export type MultivariateFeatureStateValue = {
 export type FeatureStateValue = {
   boolean_value: boolean | null
   float_value?: number | null
-  integer_value?: boolean | null
+  integer_value?: number | null
   string_value: string
   type: 'int' | 'unicode' | 'bool' | 'float'
 }

frontend/web/components/pages/features/hooks/__tests__/deepLinkedFeature.test.ts

@@ -59,21 +59,44 @@ describe('shouldDeepFetchFeature', () => {
 })
 
 describe('pickEnvironmentFlag', () => {
-  const make = (id: number, feature: number) =>
-    ({ feature, id } as FeatureState)
+  const make = (id: number, feature: number, feature_state_value?: unknown) =>
+    ({ feature, feature_state_value, id } as unknown as FeatureState)
 
   it('returns the state matching the feature id', () => {
     const results = [make(10, 1), make(11, 99), make(12, 2)]
-    expect(pickEnvironmentFlag(results, 99)).toBe(results[1])
+    expect(pickEnvironmentFlag(results, 99)).toMatchObject({
+      feature: 99,
+      id: 11,
+    })
   })
 
   it('falls back to the first result when there is no exact match', () => {
     const results = [make(10, 1), make(12, 2)]
-    expect(pickEnvironmentFlag(results, 99)).toBe(results[0])
+    expect(pickEnvironmentFlag(results, 99)).toMatchObject({
+      feature: 1,
+      id: 10,
+    })
   })
 
   it('returns undefined when there are no results', () => {
     expect(pickEnvironmentFlag([], 99)).toBeUndefined()
     expect(pickEnvironmentFlag(undefined, 99)).toBeUndefined()
   })
+
+  it.each([
+    ['unicode', { string_value: '{"a":1}', type: 'unicode' }, '{"a":1}'],
+    ['bool', { boolean_value: true, type: 'bool' }, true],
+    ['float', { float_value: 1.5, type: 'float' }, 1.5],
+    ['int', { integer_value: 7, type: 'int' }, 7],
+    ['int missing', { type: 'int' }, null],
+    ['no value', undefined, null],
+  ])(
+    'flattens a nested feature_state_value (%s) to the typed value',
+    (_label, nested, expected) => {
+      const results = [make(11, 99, nested)]
+      expect(pickEnvironmentFlag(results, 99)?.feature_state_value).toBe(
+        expected,
+      )
+    },
+  )
 })

frontend/web/components/pages/features/hooks/deepLinkedFeature.ts

@@ -1,4 +1,33 @@
-import type { FeatureState } from 'common/types/responses'
+import type {
+  FeatureState,
+  FeatureStateValue,
+  FlagsmithValue,
+} from 'common/types/responses'
+
+type FlattenableFeatureStateValue = FlagsmithValue | FeatureStateValue
+
+// The featurestates endpoint returns a nested value; the list path is flat.
+// Mirrors Utils.featureStateToValue, inlined to keep the Flux stores out.
+function flattenFeatureStateValue(
+  value: FlattenableFeatureStateValue | undefined,
+): FlagsmithValue {
+  if (value === null || value === undefined) {
+    return null
+  }
+  if (typeof value !== 'object') {
+    return value
+  }
+  switch (value.type) {
+    case 'bool':
+      return value.boolean_value
+    case 'float':
+      return value.float_value ?? null
+    case 'int':
+      return value.integer_value ?? null
+    default:
+      return value.string_value
+  }
+}
 
 /**
  * Decides whether the `?feature=` deep link targets a feature that is NOT on the
@@ -31,8 +60,14 @@ export function pickEnvironmentFlag(
   results: FeatureState[] | undefined,
   featureId: number,
 ): FeatureState | undefined {
-  return (
+  const match =
     results?.find((featureState) => featureState.feature === featureId) ??
     results?.[0]
-  )
+  if (!match) {
+    return undefined
+  }
+  return {
+    ...match,
+    feature_state_value: flattenFeatureStateValue(match.feature_state_value),
+  }
 }