Add version string comparison support to the conditions UI

[tinahollygb]

Features and Changes

Adds some UI to support doing version string comparison targeting conditions.

• Closes https://linear.app/growthbook/issue/GB-262/[fe]-version-string-comparison-ui

Dependencies

Testing

• Add a new string attribute version
• Create a new feature flag of any type. In the screenshots below I created greeting of type string
• Create a new forced rule and choose one of the "version is X" options (see screenshots below)
• This should populate your features JSON properly after publishing

You can see an example of this implemented here.

Screenshots

UI for "greater than" and other comparison looks the same but under the hood uses the version string comparison operators.

[linear]

GB-262 [FE] Version string comparison UI

Add support for version string comparison in the existing UI

Acceptance Criteria

• user should be able to use text and select inputs to configure a version string comparison

[github-actions]

Your preview environment pr-1321-bttf has been deployed.

Preview environment endpoints are available at:

• https://growthbook-3000-pr-1321-bttf.growthbook.okteto.dev
• https://growthbook-3100-pr-1321-bttf.growthbook.okteto.dev

[jdorn]

Instead of adding these new operators to every string attribute, we only want to do it for attributes that are version strings. So that requires modifying the SDKAttribute and AttributeData types to add a new format field:

export type AttributeFormat = "none" | "version";

// In back-end/types/organization
export type SDKAttribute = {
  ...
  format?: AttributeFormat;
};

// In front-end/services/features
export interface AttributeData {
  ...
  format?: AttributeFormat;
}

In the future, I can see us adding more formats like datetime or email. Depending on the format, we can change which operators are shown in the form and tweak the text inputs for a better UX (for example, if format is email and they selected the $eq operator, we can set the input type = email).

No need to add support for email or datetime formats now, but adding a format field like this will allow adding that easily in the future.

[tinahollygb]

@jdorn I updated the PR based on this feedback. See updated screenshots in the PR description.

[jdorn]

I realized it wouldn't be that hard to redesign the attribute page so you only create/edit a single attribute at a time. I think this greatly improves the UX and gives us more space to explain the different settings.

Attribute list with More menu expanded:

Create/Edit form:

If you select "version" format:

If you change the name of an existing attribute:

If you try to add an attribute with a duplicate name:

[tinahollygb]

I created an issue for us to address a redesign of that page separately: #1330