Indicate filters better in table

PostHog · Jan 22, 2021 · 5139249 · 5139249
1 parent 6cd3ae0
commit 5139249
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 22 deletions.
diff --git 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
@@ -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<Props> = ({ filters }: Props) => {
+const PropertyFiltersDisplay: React.FunctionComponent<Props> = ({ filters, style }: Props) => {
     return (
-        <div className="mb">
+        <div className="mb" style={style}>
             {filters &&
                 filters.map((item) => {
                     return <PropertyFilterButton key={item.key} item={item} />

diff --git 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 (
-                    <div data-attr="rollout-percentage">
-                        {rollout(featureFlag) != null ? `${rollout(featureFlag)}%` : 'N/A'}
-                    </div>
-                )
-            },
-            sorter: (a, b) => rollout(a) - rollout(b),
-        },
         {
             title: 'Filters',
-            render: function RenderFilters(featureFlag) {
-                const properties = featureFlag.filters?.groups?.flatMap((group) => group.properties || []) || []
-                return <PropertyFiltersDisplay filters={properties} />
+            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 (
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+                <span style={{ flexShrink: 0, marginRight: 5 }}>{group.rollout_percentage}% of</span>
+                <PropertyFiltersDisplay filters={group.properties} style={{ margin: 0, width: '100%' }} />
+            </div>
+        )
+    } else if (group.properties && group.properties.length > 0) {
+        return <PropertyFiltersDisplay filters={group.properties} style={{ margin: 0 }} />
+    } else if (group.rollout_percentage) {
+        return `${group.rollout_percentage}% of all users`
+    } else {
+        return 'N/A'
+    }
 }