Deep nested diff of value

[brentdur]

Features and Changes

This changes the diff viewer to show value as nested JSON if the value is JSON instead of showing it as a string.

• Closes [Feature] Improve diff changes view to highlight only changes in nested keys #1368

Testing

• Make a change to an environment rule that uses the JSON type

Screenshots

Before:

After:

[jdorn]

I don't know if using a replacer here is the right approach. Replacers are applied recursively, so if the feature value is a JSON string that itself has a key called value, it will try to recursively expand it. There are only 2 places where values are specified in a rule, so explicitly JSON parsing those might be safer.

Something like this:

function jsonParseSafe(value: string): unknown {
  try {
    return JSON.parse(value);
  } catch (e) {
    // If parse error, return the original value
    return value;
  }
}

function expandValues(rules: FeatureRule[]) {
  return rules.map((rule) => {
    // Multiple values (A/B test rules)
    if (rule.type === "experiment") {
      return {
        ...rule,
        values: rule.values.map((variation) => ({
          ...variation,
          value: jsonParseSafe(variation.value),
        })),
      };
    }
    // Single value (Force and Rollout rules)
    else {
      return {
        ...rule,
        value: jsonParseSafe(rule.value),
      };
    }
  });
}

// When doing the diff
a: JSON.stringify(
  expandValues(feature.environmentSettings?.[env.id]?.rules || []),
  null,
  2
)