diff --git a/cypress/integration/featureFlags.js b/cypress/integration/featureFlags.js index 3fe096c8e1088..d60857c479b36 100644 --- a/cypress/integration/featureFlags.js +++ b/cypress/integration/featureFlags.js @@ -23,7 +23,7 @@ describe('Feature Flags', () => { cy.get('[data-attr=feature-flag-switch').click() cy.get('[data-attr=feature-flag-submit').click() cy.get('[data-attr=feature-flag-table').should('contain', 'beta feature') - cy.get('[data-attr=rollout-percentage').should('contain', '30%') + cy.get('[data-attr=feature-flag-table').should('contain', '30%') cy.get('[data-attr=feature-flag-table').should('contain', 'is_demo') cy.get('[data-attr=feature-flag-table] tr:first-child td:first-child').click() diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFiltersDisplay.tsx b/frontend/src/lib/components/PropertyFilters/PropertyFiltersDisplay.tsx index e2be2aa78003b..f26e71a3f76d0 100644 --- a/frontend/src/lib/components/PropertyFilters/PropertyFiltersDisplay.tsx +++ b/frontend/src/lib/components/PropertyFilters/PropertyFiltersDisplay.tsx @@ -1,14 +1,15 @@ -import React from 'react' +import React, { CSSProperties } from 'react' import { PropertyFilter } from '~/types' import PropertyFilterButton from './PropertyFilterButton' type Props = { filters: PropertyFilter[] + style?: CSSProperties } -const PropertyFiltersDisplay: React.FunctionComponent = ({ filters }: Props) => { +const PropertyFiltersDisplay: React.FunctionComponent = ({ filters, style }: Props) => { return ( -
+
{filters && filters.map((item) => { return diff --git a/frontend/src/scenes/experimentation/FeatureFlags.js b/frontend/src/scenes/experimentation/FeatureFlags.js index 4d2b046bdc75d..90fd26fb64037 100644 --- a/frontend/src/scenes/experimentation/FeatureFlags.js +++ b/frontend/src/scenes/experimentation/FeatureFlags.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { Fragment, useState } from 'react' import { hot } from 'react-hot-loader/root' import { useValues, useActions } from 'kea' import { featureFlagLogic } from './featureFlagLogic' @@ -32,22 +32,16 @@ function _FeatureFlags() { }, createdAtColumn(), createdByColumn(featureFlags), - { - title: 'Rollout Percentage', - render: function RenderRolloutPercentage(_, featureFlag) { - return ( -
- {rollout(featureFlag) != null ? `${rollout(featureFlag)}%` : 'N/A'} -
- ) - }, - sorter: (a, b) => rollout(a) - rollout(b), - }, { title: 'Filters', - render: function RenderFilters(featureFlag) { - const properties = featureFlag.filters?.groups?.flatMap((group) => group.properties || []) || [] - return + render: function RenderGroups(featureFlag) { + if (!featureFlag.filters?.groups) { + return 'N/A' + } + if (featureFlag.filters.groups.length > 1) { + return 'Multiple groups' + } + return GroupFilters({ group: featureFlag.filters.groups[0] }) }, }, { @@ -152,7 +146,19 @@ function _FeatureFlags() { ) } -function rollout(featureFlag) { - const groups = featureFlag.filters?.groups || [] - return groups.length === 1 ? groups[0].rollout_percentage : null +function GroupFilters({ group }) { + if (group.properties && group.properties.length > 0 && group.rollout_percentage != null) { + return ( +
+ {group.rollout_percentage}% of + +
+ ) + } else if (group.properties && group.properties.length > 0) { + return + } else if (group.rollout_percentage) { + return `${group.rollout_percentage}% of all users` + } else { + return 'N/A' + } }