Skip to content

Commit

Permalink
feat: Add MemberSelect to feature success areas (#19462)
Browse files Browse the repository at this point in the history
  • Loading branch information
@benjackwhite
benjackwhite authored Dec 21, 2023
1 parent 7aab026 commit 1a34205
Show file tree
Hide file tree
Showing 10 changed files with 62 additions and 86 deletions.
Binary file modified frontend/__snapshots__/scenes-app-experiments--experiments-list.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/__snapshots__/scenes-app-feature-flags--feature-flags-list.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/__snapshots__/scenes-app-surveys--surveys-list.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion frontend/src/lib/components/MemberSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export function MemberSelect({
</div>
}
>
<LemonButton {...buttonProps}>
<LemonButton status="stealth" {...buttonProps}>
{typeof selectedMember === 'string' ? (
selectedMember
) : selectedMember ? (
Expand Down
15 changes: 14 additions & 1 deletion frontend/src/scenes/experiments/Experiments.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { LemonInput, LemonSelect } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { router } from 'kea-router'
import { ExperimentsHog } from 'lib/components/hedgehogs'
import { MemberSelect } from 'lib/components/MemberSelect'
import { PageHeader } from 'lib/components/PageHeader'
import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction'
import { normalizeColumnTitle } from 'lib/components/Table/utils'
Expand Down Expand Up @@ -39,8 +40,9 @@ export function Experiments(): JSX.Element {
shouldShowEmptyState,
shouldShowProductIntroduction,
searchStatus,
userFilter,
} = useValues(experimentsLogic)
const { setExperimentsTab, deleteExperiment, archiveExperiment, setSearchStatus, setSearchTerm } =
const { setExperimentsTab, deleteExperiment, archiveExperiment, setSearchStatus, setSearchTerm, setUserFilter } =
useActions(experimentsLogic)
const { hasAvailableFeature } = useValues(userLogic)

Expand Down Expand Up @@ -230,6 +232,7 @@ export function Experiments(): JSX.Element {
<b>Status</b>
</span>
<LemonSelect
size="small"
onChange={(status) => {
if (status) {
setSearchStatus(status as ProgressStatus | 'all')
Expand All @@ -247,6 +250,16 @@ export function Experiments(): JSX.Element {
dropdownMatchSelectWidth={false}
dropdownMaxContentWidth
/>
<span className="ml-1">
<b>Created by</b>
</span>
<MemberSelect
size="small"
type="secondary"
defaultLabel="Any user"
value={userFilter ?? null}
onChange={(user) => setUserFilter(user?.uuid ?? null)}
/>
</div>
</div>
<LemonTable
Expand Down
28 changes: 18 additions & 10 deletions frontend/src/scenes/experiments/experimentsLogic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export const experimentsLogic = kea<experimentsLogicType>([
setSearchTerm: (searchTerm: string) => ({ searchTerm }),
setSearchStatus: (status: ProgressStatus | 'all') => ({ status }),
setExperimentsTab: (tabKey: ExperimentsTabs) => ({ tabKey }),
setUserFilter: (userFilter: string | null) => ({ userFilter }),
}),
reducers({
searchTerm: {
Expand All @@ -58,6 +59,12 @@ export const experimentsLogic = kea<experimentsLogicType>([
searchStatus: {
setSearchStatus: (_, { status }) => status,
},
userFilter: [
null as string | null,
{
setUserFilter: (_, { userFilter }) => userFilter,
},
],
tab: [
ExperimentsTabs.All as ExperimentsTabs,
{
Expand Down Expand Up @@ -97,8 +104,8 @@ export const experimentsLogic = kea<experimentsLogicType>([
})),
selectors(({ values }) => ({
filteredExperiments: [
(selectors) => [selectors.experiments, selectors.searchTerm, selectors.searchStatus, selectors.tab],
(experiments, searchTerm, searchStatus, tab) => {
(s) => [s.experiments, s.searchTerm, s.searchStatus, s.userFilter, s.tab],
(experiments, searchTerm, searchStatus, userFilter, tab) => {
let filteredExperiments: Experiment[] = experiments

if (tab === ExperimentsTabs.Archived) {
Expand All @@ -125,6 +132,12 @@ export const experimentsLogic = kea<experimentsLogicType>([
(experiment) => getExperimentStatus(experiment) === searchStatus
)
}

if (userFilter) {
filteredExperiments = filteredExperiments.filter(
(experiment) => experiment.created_by?.uuid === userFilter
)
}
return filteredExperiments
},
],
Expand All @@ -133,14 +146,9 @@ export const experimentsLogic = kea<experimentsLogicType>([
(hasAvailableFeature): boolean => hasAvailableFeature(AvailableFeature.EXPERIMENTATION),
],
shouldShowEmptyState: [
(s) => [s.experimentsLoading, s.filteredExperiments],
(experimentsLoading, filteredExperiments): boolean => {
return (
filteredExperiments.length === 0 &&
!experimentsLoading &&
!values.searchTerm &&
!values.searchStatus
)
(s) => [s.experimentsLoading, s.experiments],
(experimentsLoading, experiments): boolean => {
return experiments.length === 0 && !experimentsLoading && !values.searchTerm && !values.searchStatus
},
],
shouldShowProductIntroduction: [
Expand Down
28 changes: 15 additions & 13 deletions frontend/src/scenes/feature-flags/FeatureFlags.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { router } from 'kea-router'
import { ActivityLog } from 'lib/components/ActivityLog/ActivityLog'
import { ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
import { FeatureFlagHog } from 'lib/components/hedgehogs'
import { MemberSelect } from 'lib/components/MemberSelect'
import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags'
import { PageHeader } from 'lib/components/PageHeader'
import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction'
Expand Down Expand Up @@ -52,7 +53,7 @@ export function OverViewTab({
const { aggregationLabel } = useValues(groupsModel)

const flagLogic = featureFlagsLogic({ flagPrefix })
const { featureFlagsLoading, searchedFeatureFlags, searchTerm, uniqueCreators, filters, shouldShowEmptyState } =
const { featureFlagsLoading, searchedFeatureFlags, searchTerm, filters, shouldShowEmptyState } =
useValues(flagLogic)
const { updateFeatureFlag, loadFeatureFlags, setSearchTerm, setFeatureFlagsFilters } = useActions(flagLogic)
const { user, hasAvailableFeature } = useValues(userLogic)
Expand Down Expand Up @@ -274,6 +275,7 @@ export function OverViewTab({
</span>
<LemonSelect
dropdownMatchSelectWidth={false}
size="small"
onChange={(type) => {
if (type) {
if (type === 'all') {
Expand Down Expand Up @@ -301,6 +303,7 @@ export function OverViewTab({
</span>
<LemonSelect
dropdownMatchSelectWidth={false}
size="small"
onChange={(status) => {
if (status) {
if (status === 'all') {
Expand All @@ -323,22 +326,21 @@ export function OverViewTab({
<span className="ml-1">
<b>Created by</b>
</span>
<LemonSelect
dropdownMatchSelectWidth={false}
<MemberSelect
size="small"
type="secondary"
defaultLabel="Any user"
value={filters.created_by ?? null}
onChange={(user) => {
if (user) {
if (user === 'any') {
if (filters) {
const { created_by, ...restFilters } = filters
setFeatureFlagsFilters(restFilters, true)
}
} else {
setFeatureFlagsFilters({ created_by: user })
if (!user) {
if (filters) {
const { created_by, ...restFilters } = filters
setFeatureFlagsFilters(restFilters, true)
}
} else {
setFeatureFlagsFilters({ created_by: user.id })
}
}}
options={uniqueCreators}
value={filters.created_by ?? 'any'}
/>
</div>
</div>
Expand Down
27 changes: 2 additions & 25 deletions frontend/src/scenes/feature-flags/featureFlagsLogic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { actions, connect, events, kea, listeners, path, props, reducers, select
import { loaders } from 'kea-loaders'
import { actionToUrl, router, urlToAction } from 'kea-router'
import api from 'lib/api'
import { LemonSelectOption } from 'lib/lemon-ui/LemonSelect'
import { Scene } from 'scenes/sceneTypes'
import { urls } from 'scenes/urls'

Expand All @@ -25,14 +24,10 @@ export enum FeatureFlagsTab {

export interface FeatureFlagsFilters {
active: string
created_by: string
created_by: number
type: string
}

interface FeatureFlagCreators {
[id: string]: string
}

export interface FlagLogicProps {
flagPrefix?: string // used to filter flags by prefix e.g. for the user interview flags
}
Expand Down Expand Up @@ -137,7 +132,7 @@ export const featureFlagsLogic = kea<featureFlagsLogicType>([
searchedFlags = searchedFlags.filter((flag) => (active === 'true' ? flag.active : !flag.active))
}
if (created_by) {
searchedFlags = searchedFlags.filter((flag) => flag.created_by?.id === parseInt(created_by))
searchedFlags = searchedFlags.filter((flag) => flag.created_by?.id === created_by)
}
if (type === 'boolean') {
searchedFlags = searchedFlags.filter(
Expand All @@ -164,24 +159,6 @@ export const featureFlagsLogic = kea<featureFlagsLogicType>([
},
],
],
uniqueCreators: [
(selectors) => [selectors.featureFlags],
(featureFlags) => {
const creators: FeatureFlagCreators = {}
for (const flag of featureFlags) {
if (flag.created_by) {
if (!creators[flag.created_by.id]) {
creators[flag.created_by.id] = flag.created_by.first_name
}
}
}
const response: LemonSelectOption<string>[] = [
{ label: 'Any user', value: 'any' },
...Object.entries(creators).map(([id, first_name]) => ({ label: first_name, value: id })),
]
return response
},
],
shouldShowEmptyState: [
(s) => [s.featureFlagsLoading, s.featureFlags],
(featureFlagsLoading, featureFlags): boolean => {
Expand Down
15 changes: 8 additions & 7 deletions frontend/src/scenes/surveys/Surveys.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
} from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { router } from 'kea-router'
import { MemberSelect } from 'lib/components/MemberSelect'
import { PageHeader } from 'lib/components/PageHeader'
import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction'
import { VersionCheckerBanner } from 'lib/components/VersionChecker/VersionCheckerBanner'
Expand Down Expand Up @@ -53,7 +54,6 @@ export function Surveys(): JSX.Element {
surveysResponsesCountLoading,
searchTerm,
filters,
uniqueCreators,
showSurveysDisabledBanner,
} = useValues(surveysLogic)

Expand Down Expand Up @@ -170,6 +170,7 @@ export function Surveys(): JSX.Element {
onChange={(status) => {
setSurveysFilters({ status })
}}
size="small"
options={[
{ label: 'Any', value: 'any' },
{ label: 'Draft', value: 'draft' },
Expand All @@ -181,12 +182,12 @@ export function Surveys(): JSX.Element {
<span className="ml-1">
<b>Created by</b>
</span>
<LemonSelect
onChange={(user) => {
setSurveysFilters({ created_by: user })
}}
options={uniqueCreators}
value={filters.created_by}
<MemberSelect
size="small"
type="secondary"
defaultLabel="Any user"
value={filters.created_by ?? null}
onChange={(user) => setSurveysFilters({ created_by: user?.id })}
/>
</div>
</div>
Expand Down
33 changes: 4 additions & 29 deletions frontend/src/scenes/surveys/surveysLogic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { loaders } from 'kea-loaders'
import { router } from 'kea-router'
import api from 'lib/api'
import { FEATURE_FLAGS } from 'lib/constants'
import { LemonSelectOption } from 'lib/lemon-ui/LemonSelect'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { Scene } from 'scenes/sceneTypes'
import { teamLogic } from 'scenes/teamLogic'
Expand All @@ -27,14 +26,10 @@ export function getSurveyStatus(survey: Survey): ProgressStatus {

export interface SurveysFilters {
status: string
created_by: string
created_by: null | number
archived: boolean
}

interface SurveysCreators {
[id: string]: string
}

export const surveysLogic = kea<surveysLogicType>([
path(['scenes', 'surveys', 'surveysLogic']),
connect(() => ({
Expand Down Expand Up @@ -84,7 +79,7 @@ export const surveysLogic = kea<surveysLogicType>([
{
archived: false,
status: 'any',
created_by: 'any',
created_by: null,
} as Partial<SurveysFilters>,
{
setSurveysFilters: (state, { filters }) => {
Expand Down Expand Up @@ -133,10 +128,8 @@ export const surveysLogic = kea<surveysLogicType>([
if (status !== 'any') {
searchedSurveys = searchedSurveys.filter((survey) => getSurveyStatus(survey) === status)
}
if (created_by !== 'any') {
searchedSurveys = searchedSurveys.filter(
(survey) => survey.created_by?.id === (created_by ? parseInt(created_by) : '')
)
if (created_by) {
searchedSurveys = searchedSurveys.filter((survey) => survey.created_by?.id === created_by)
}

if (archived) {
Expand All @@ -158,24 +151,6 @@ export const surveysLogic = kea<surveysLogicType>([
},
],
],
uniqueCreators: [
(selectors) => [selectors.surveys],
(surveys) => {
const creators: SurveysCreators = {}
for (const survey of surveys) {
if (survey.created_by) {
if (!creators[survey.created_by.id]) {
creators[survey.created_by.id] = survey.created_by.first_name
}
}
}
const response: LemonSelectOption<string>[] = [
{ label: 'Any user', value: 'any' },
...Object.entries(creators).map(([id, first_name]) => ({ label: first_name, value: id })),
]
return response
},
],
payGateFlagOn: [(s) => [s.featureFlags], (featureFlags) => featureFlags[FEATURE_FLAGS.SURVEYS_PAYGATES]],
whitelabelAvailable: [
(s) => [s.hasAvailableFeature],
Expand Down

0 comments on commit 1a34205

Please sign in to comment.