From 46becaf29c58f6d8d2c87474adba792d917edb57 Mon Sep 17 00:00:00 2001 From: David Newell Date: Mon, 13 Nov 2023 16:04:06 +0000 Subject: [PATCH] chore: remove stateful badges (#18521) --- .../PropertyFilters/components/FilterRow.tsx | 10 +- .../PropertyFilters/components/OperandTag.tsx | 9 ++ .../components/TaxonomicPropertyFilter.tsx | 3 +- frontend/src/scenes/actions/ActionEdit.tsx | 81 +++++----- frontend/src/scenes/actions/ActionStep.scss | 7 + frontend/src/scenes/actions/ActionStep.tsx | 147 +++++++++--------- .../ActionFilterRow/ActionFilterRow.tsx | 4 - frontend/src/styles/global.scss | 37 ----- 8 files changed, 139 insertions(+), 159 deletions(-) create mode 100644 frontend/src/lib/components/PropertyFilters/components/OperandTag.tsx create mode 100644 frontend/src/scenes/actions/ActionStep.scss diff --git a/frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx b/frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx index 60f8211960c3f..4b8f10651e8d4 100644 --- a/frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx +++ b/frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx @@ -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 @@ -51,7 +52,10 @@ export const FilterRow = React.memo(function FilterRow({ return ( <>
{disablePopover ? ( @@ -96,9 +100,7 @@ export const FilterRow = React.memo(function FilterRow({ )} )} - {key && showConditionBadge && index + 1 < totalCount && ( - AND - )} + {key && showConditionBadge && index + 1 < totalCount && }
{errorMessage} diff --git a/frontend/src/lib/components/PropertyFilters/components/OperandTag.tsx b/frontend/src/lib/components/PropertyFilters/components/OperandTag.tsx new file mode 100644 index 0000000000000..f3f9c70709d38 --- /dev/null +++ b/frontend/src/lib/components/PropertyFilters/components/OperandTag.tsx @@ -0,0 +1,9 @@ +import { LemonTag } from '@posthog/lemon-ui' + +export const OperandTag = ({ operand }: { operand: 'and' | 'or' }): JSX.Element => { + return ( + + {operand} + + ) +} diff --git a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx index 1ee7d36a6d27d..0c03aa12551b7 100644 --- a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx +++ b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx @@ -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 @@ -148,7 +149,7 @@ export function TaxonomicPropertyFilter({ where ) : ( - AND + )} )} diff --git a/frontend/src/scenes/actions/ActionEdit.tsx b/frontend/src/scenes/actions/ActionEdit.tsx index e5453cb38e93b..e7a3182f8ee7d 100644 --- a/frontend/src/scenes/actions/ActionEdit.tsx +++ b/frontend/src/scenes/actions/ActionEdit.tsx @@ -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' @@ -208,46 +207,44 @@ export function ActionEdit({ action: loadedAction, id, onSave, temporaryToken }: {({ value: stepsValue, onChange }) => ( - - <> - {stepsValue.map((step: ActionStepType, index: number) => { - const identifier = String(JSON.stringify(step)) - return ( - { - 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 - ) ?? [] - ) - }} - /> - ) - })} - +
+ {stepsValue.map((step: ActionStepType, index: number) => { + const identifier = String(JSON.stringify(step)) + return ( + { + 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 + ) ?? [] + ) + }} + /> + ) + })} - +
{ @@ -256,8 +253,8 @@ export function ActionEdit({ action: loadedAction, id, onSave, temporaryToken }: >
- - +
+
)} diff --git a/frontend/src/scenes/actions/ActionStep.scss b/frontend/src/scenes/actions/ActionStep.scss new file mode 100644 index 0000000000000..d15f0a93eda38 --- /dev/null +++ b/frontend/src/scenes/actions/ActionStep.scss @@ -0,0 +1,7 @@ +.ActionStep { + &__or-tag { + position: absolute; + top: 50%; + left: -19px; + } +} diff --git a/frontend/src/scenes/actions/ActionStep.tsx b/frontend/src/scenes/actions/ActionStep.tsx index 2c81e38d66de4..9f41316c52ab1 100644 --- a/frontend/src/scenes/actions/ActionStep.tsx +++ b/frontend/src/scenes/actions/ActionStep.tsx @@ -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' @@ -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 { @@ -30,84 +33,86 @@ export function ActionStep({ step, actionId, isOnlyStep, index, identifier, onDe } return ( - -
- {index > 0 &&
OR
} -
-
- Match Group #{index + 1} - - {!isOnlyStep && ( - } - size="small" - aria-label="delete" - onClick={onDelete} - /> - )} -
- {} - - {step.event === '$autocapture' && ( - - )} - {step.event !== undefined && step.event !== '$autocapture' && step.event !== '$pageview' && ( -
- Event name - - sendStep({ - ...step, - event: value, - }) - } - placeholder="All events" - allEventsOption="explicit" - /> +
+ {index > 0 && !(index % 2 === 0) && ( +
+ +
+ )} +
+
+ Match Group #{index + 1} - - - See documentation - {' '} - on how to send custom events in lots of languages. - -
- )} - {step.event === '$pageview' && ( -
-
+ {!isOnlyStep && ( + } + size="small" + aria-label="delete" + onClick={onDelete} + /> )} +
+ {} -
- Filters - { + {step.event === '$autocapture' && ( + + )} + {step.event !== undefined && step.event !== '$autocapture' && step.event !== '$pageview' && ( +
+ Event name + sendStep({ ...step, - properties: properties as [], + event: value, }) - }} - showConditionBadge + } + placeholder="All events" + allEventsOption="explicit" + /> + + + + See documentation + {' '} + on how to send custom events in lots of languages. + +
+ )} + {step.event === '$pageview' && ( +
+
+ )} + +
+ Filters + { + sendStep({ + ...step, + properties: properties as [], + }) + }} + showConditionBadge + />
- +
) } @@ -179,8 +184,8 @@ function Option({ const AndSeparator = (): JSX.Element => { return ( -
- AND +
+
) } diff --git a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx index 80b792f3e4dd2..26b736f8e28f3 100644 --- a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx +++ b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx @@ -103,7 +103,6 @@ export interface ActionFilterRowProps { propertyFiltersButton, renameRowButton, deleteButton, - orLabel, }: Record) => JSX.Element // build your own row given these components } @@ -205,8 +204,6 @@ export function ActionFilterRow({ value = filter.name || filter.id } - const orLabel =
OR
- const seriesIndicator = seriesIndicatorType === 'numeric' ? ( {index + 1} @@ -338,7 +335,6 @@ export function ActionFilterRow({ propertyFiltersButton: propertyFiltersButton, renameRowButton, deleteButton, - orLabel, }) ) : ( <> diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss index cef1285c6be4a..3f5ee1774cae5 100644 --- a/frontend/src/styles/global.scss +++ b/frontend/src/styles/global.scss @@ -474,43 +474,6 @@ input::-ms-clear { } } -// Stateful badges - -.stateful-badge { - padding: 2px 8px; - border-radius: 2px; - font-weight: bold; - - &.or { - background-color: #d2dbff; - text-align: center; - max-width: 50px; - } - - &.or-light-grey { - font-family: var(--font-sans); - background-color: var(--mid); - text-align: center; - max-width: 50px; - } - - &.width-locked { - width: 40px; - text-align: center; - } - - &.and { - background-color: var(--mark); - color: var(--primary-alt); - } - - &.pos-center-end { - position: absolute; - top: 50%; - left: -30px; - } -} - // Tags .simple-tag {