Skip to content

Commit

Permalink
chore: remove stateful badges (#18521)
Browse files Browse the repository at this point in the history
  • Loading branch information
@daibhin
daibhin authored Nov 13, 2023
1 parent 1e095bf commit 46becaf
Show file tree
Hide file tree
Showing 8 changed files with 139 additions and 159 deletions.
10 changes: 6 additions & 4 deletions frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import './FilterRow.scss'
import clsx from 'clsx'
import { IconClose, IconDelete, IconPlus } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { OperandTag } from './OperandTag'

interface FilterRowProps {
item: Record<string, any>
Expand Down Expand Up @@ -51,7 +52,10 @@ export const FilterRow = React.memo(function FilterRow({
return (
<>
<div
className={clsx('property-filter-row flex items-center flex-nowrap', !disablePopover && 'wrap-filters')}
className={clsx(
'property-filter-row flex items-center flex-nowrap space-x-2',
!disablePopover && 'wrap-filters'
)}
data-attr={'property-filter-' + index}
>
{disablePopover ? (
Expand Down Expand Up @@ -96,9 +100,7 @@ export const FilterRow = React.memo(function FilterRow({
)}
</Popover>
)}
{key && showConditionBadge && index + 1 < totalCount && (
<span className="stateful-badge and ml-2">AND</span>
)}
{key && showConditionBadge && index + 1 < totalCount && <OperandTag operand="and" />}
</div>
{errorMessage}
</>
Expand Down
9 changes: 9 additions & 0 deletions frontend/src/lib/components/PropertyFilters/components/OperandTag.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { LemonTag } from '@posthog/lemon-ui'

export const OperandTag = ({ operand }: { operand: 'and' | 'or' }): JSX.Element => {
return (
<LemonTag type={operand === 'and' ? 'highlight' : 'completion'}>
<span className="uppercase">{operand}</span>
</LemonTag>
)
}
3 changes: 2 additions & 1 deletion frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { AnyPropertyFilter, FilterLogicalOperator, PropertyDefinitionType, Prope
import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
import { LemonButtonWithDropdown } from '@posthog/lemon-ui'
import { IconPlusMini } from 'lib/lemon-ui/icons'
import { OperandTag } from './OperandTag'

let uniqueMemoizedIndex = 0

Expand Down Expand Up @@ -148,7 +149,7 @@ export function TaxonomicPropertyFilter({
<span>where</span>
</>
) : (
<span className="stateful-badge and text-xs">AND</span>
<OperandTag operand="and" />
)}
</div>
)}
Expand Down
81 changes: 39 additions & 42 deletions frontend/src/scenes/actions/ActionEdit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { Link } from 'lib/lemon-ui/Link'
import { useActions, useValues } from 'kea'
import { actionEditLogic, ActionEditLogicProps } from './actionEditLogic'
import { ActionStep } from './ActionStep'
import { Col, Row } from 'antd'
import { combineUrl, router } from 'kea-router'
import { PageHeader } from 'lib/components/PageHeader'
import { teamLogic } from 'scenes/teamLogic'
Expand Down Expand Up @@ -208,46 +207,44 @@ export function ActionEdit({ action: loadedAction, id, onSave, temporaryToken }:
</Field>
<Field name="steps">
{({ value: stepsValue, onChange }) => (
<Row gutter={[24, 24]}>
<>
{stepsValue.map((step: ActionStepType, index: number) => {
const identifier = String(JSON.stringify(step))
return (
<ActionStep
key={index}
identifier={identifier}
index={index}
step={step}
actionId={action.id || 0}
isOnlyStep={!!stepsValue && stepsValue.length === 1}
onDelete={() => {
const identifier = step.id ? 'id' : 'isNew'
onChange(
stepsValue?.filter(
(s: ActionStepType) => s[identifier] !== step[identifier]
) ?? []
)
}}
onChange={(newStep) => {
onChange(
stepsValue?.map((s: ActionStepType) =>
(step.id && s.id == step.id) ||
(step.isNew && s.isNew === step.isNew)
? {
id: step.id,
isNew: step.isNew,
...newStep,
}
: s
) ?? []
)
}}
/>
)
})}
</>
<div className="grid grid-cols-2 gap-3">
{stepsValue.map((step: ActionStepType, index: number) => {
const identifier = String(JSON.stringify(step))
return (
<ActionStep
key={index}
identifier={identifier}
index={index}
step={step}
actionId={action.id || 0}
isOnlyStep={!!stepsValue && stepsValue.length === 1}
onDelete={() => {
const identifier = step.id ? 'id' : 'isNew'
onChange(
stepsValue?.filter(
(s: ActionStepType) => s[identifier] !== step[identifier]
) ?? []
)
}}
onChange={(newStep) => {
onChange(
stepsValue?.map((s: ActionStepType) =>
(step.id && s.id == step.id) ||
(step.isNew && s.isNew === step.isNew)
? {
id: step.id,
isNew: step.isNew,
...newStep,
}
: s
) ?? []
)
}}
/>
)
})}

<Col span={24} md={12}>
<div>
<div
className="match-group-add-skeleton"
onClick={() => {
Expand All @@ -256,8 +253,8 @@ export function ActionEdit({ action: loadedAction, id, onSave, temporaryToken }:
>
<IconPlus style={{ fontSize: 28, color: '#666666' }} />
</div>
</Col>
</Row>
</div>
</div>
)}
</Field>
</div>
Expand Down
7 changes: 7 additions & 0 deletions frontend/src/scenes/actions/ActionStep.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.ActionStep {
&__or-tag {
position: absolute;
top: 50%;
left: -19px;
}
}
147 changes: 76 additions & 71 deletions frontend/src/scenes/actions/ActionStep.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { LemonEventName } from './EventName'
import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
import { URL_MATCHING_HINTS } from 'scenes/actions/hints'
import { Col, Radio, RadioChangeEvent } from 'antd'
import { Radio, RadioChangeEvent } from 'antd'
import { ActionStepType, StringMatching } from '~/types'
import { LemonButton, LemonInput, Link } from '@posthog/lemon-ui'
import { IconClose, IconOpenInApp } from 'lib/lemon-ui/icons'
Expand All @@ -12,6 +12,9 @@ import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
import { useState } from 'react'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'

import './ActionStep.scss'
import { OperandTag } from 'lib/components/PropertyFilters/components/OperandTag'

const learnMoreLink = 'https://posthog.com/docs/user-guides/actions?utm_medium=in-product&utm_campaign=action-page'

interface Props {
Expand All @@ -30,84 +33,86 @@ export function ActionStep({ step, actionId, isOnlyStep, index, identifier, onDe
}

return (
<Col span={24} md={12}>
<div className="rounded border p-4 relative h-full">
{index > 0 && <div className="stateful-badge pos-center-end or">OR</div>}
<div className="space-y-4">
<div className="flex items-center justify-between">
<b>Match Group #{index + 1}</b>

{!isOnlyStep && (
<LemonButton
status="primary-alt"
icon={<IconClose />}
size="small"
aria-label="delete"
onClick={onDelete}
/>
)}
</div>
{<TypeSwitcher step={step} sendStep={sendStep} />}

{step.event === '$autocapture' && (
<AutocaptureFields step={step} sendStep={sendStep} actionId={actionId} />
)}
{step.event !== undefined && step.event !== '$autocapture' && step.event !== '$pageview' && (
<div className="space-y-1">
<LemonLabel>Event name</LemonLabel>
<LemonEventName
value={step.event}
onChange={(value) =>
sendStep({
...step,
event: value,
})
}
placeholder="All events"
allEventsOption="explicit"
/>
<div className="ActionStep rounded border p-4 relative h-full">
{index > 0 && !(index % 2 === 0) && (
<div className="ActionStep__or-tag">
<OperandTag operand="or" />
</div>
)}
<div className="space-y-4">
<div className="flex items-center justify-between">
<b>Match Group #{index + 1}</b>

<small>
<Link to="https://posthog.com/docs/libraries" target="_blank">
See documentation
</Link>{' '}
on how to send custom events in lots of languages.
</small>
</div>
)}
{step.event === '$pageview' && (
<div>
<Option
step={step}
sendStep={sendStep}
item="url"
extra_options={<StringMatchingSelection field="url" step={step} sendStep={sendStep} />}
label="URL"
/>
{step.url_matching && step.url_matching in URL_MATCHING_HINTS && (
<small>{URL_MATCHING_HINTS[step.url_matching]}</small>
)}
</div>
{!isOnlyStep && (
<LemonButton
status="primary-alt"
icon={<IconClose />}
size="small"
aria-label="delete"
onClick={onDelete}
/>
)}
</div>
{<TypeSwitcher step={step} sendStep={sendStep} />}

<div className="mt-4 space-y-2">
<LemonLabel>Filters</LemonLabel>
<PropertyFilters
propertyFilters={step.properties}
pageKey={identifier}
eventNames={step.event ? [step.event] : []}
onChange={(properties) => {
{step.event === '$autocapture' && (
<AutocaptureFields step={step} sendStep={sendStep} actionId={actionId} />
)}
{step.event !== undefined && step.event !== '$autocapture' && step.event !== '$pageview' && (
<div className="space-y-1">
<LemonLabel>Event name</LemonLabel>
<LemonEventName
value={step.event}
onChange={(value) =>
sendStep({
...step,
properties: properties as [],
event: value,
})
}}
showConditionBadge
}
placeholder="All events"
allEventsOption="explicit"
/>

<small>
<Link to="https://posthog.com/docs/libraries" target="_blank">
See documentation
</Link>{' '}
on how to send custom events in lots of languages.
</small>
</div>
)}
{step.event === '$pageview' && (
<div>
<Option
step={step}
sendStep={sendStep}
item="url"
extra_options={<StringMatchingSelection field="url" step={step} sendStep={sendStep} />}
label="URL"
/>
{step.url_matching && step.url_matching in URL_MATCHING_HINTS && (
<small>{URL_MATCHING_HINTS[step.url_matching]}</small>
)}
</div>
)}

<div className="mt-4 space-y-2">
<LemonLabel>Filters</LemonLabel>
<PropertyFilters
propertyFilters={step.properties}
pageKey={identifier}
eventNames={step.event ? [step.event] : []}
onChange={(properties) => {
sendStep({
...step,
properties: properties as [],
})
}}
showConditionBadge
/>
</div>
</div>
</Col>
</div>
)
}

Expand Down Expand Up @@ -179,8 +184,8 @@ function Option({

const AndSeparator = (): JSX.Element => {
return (
<div className="text-center my-2">
<span className="stateful-badge and">AND</span>
<div className="flex w-full justify-center">
<OperandTag operand="and" />
</div>
)
}
Expand Down
4 changes: 0 additions & 4 deletions frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,6 @@ export interface ActionFilterRowProps {
propertyFiltersButton,
renameRowButton,
deleteButton,
orLabel,
}: Record<string, JSX.Element | string | undefined>) => JSX.Element // build your own row given these components
}

Expand Down Expand Up @@ -205,8 +204,6 @@ export function ActionFilterRow({
value = filter.name || filter.id
}

const orLabel = <div className="stateful-badge or width-locked">OR</div>

const seriesIndicator =
seriesIndicatorType === 'numeric' ? (
<SeriesGlyph style={{ borderColor: 'var(--border)' }}>{index + 1}</SeriesGlyph>
Expand Down Expand Up @@ -338,7 +335,6 @@ export function ActionFilterRow({
propertyFiltersButton: propertyFiltersButton,
renameRowButton,
deleteButton,
orLabel,
})
) : (
<>
Expand Down
Loading

0 comments on commit 46becaf

Please sign in to comment.