mirrors/posthog
0
0
Fork 0
mirror of https://github.com/PostHog/posthog.git synced 2024-12-01 12:21:02 +01:00
Code Issues Releases Activity

Add a syntax example for HTML attribute based actions (#5362)

Browse Source 
Co-authored-by: Paolo D'Amico <paolodamico@users.noreply.github.com>
This commit is contained in:
Kunal 2021-07-30 10:40:27 -07:00 committed by GitHub
parent 0470359f1c
commit 92642421aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/scenes/actions/ActionStep.js
View File

@ -4,8 +4,11 @@ import { AppEditorLink } from 'lib/components/AppEditorLink/AppEditorLink'
import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
import PropTypes from 'prop-types'
import { URL_MATCHING_HINTS } from 'scenes/actions/hints'
import { Card, Col, Input, Radio } from 'antd'
import { ExportOutlined } from '@ant-design/icons'
import { Card, Col, Input, Radio, Typography, Space, Tooltip } from 'antd'
const { Text } = Typography
import { ExportOutlined, InfoCircleOutlined } from '@ant-design/icons'
const learnMoreLink = 'https://posthog.com/docs/user-guides/actions?utm_medium=in-product&utm_campaign=action-page'
export class ActionStep extends Component {
constructor(props) {
@ -30,13 +33,19 @@ export class ActionStep extends Component {
</label>
{props.caption && <div className="action-step-caption">{props.caption}</div>}
{props.item === 'selector' ? (
<Input.TextArea allowClear onChange={onChange} value={this.props.step[props.item] || ''} />
<Input.TextArea
allowClear
onChange={onChange}
value={this.props.step[props.item] || ''}
placeholder={props.placeholder}
/>
) : (
<Input
data-attr="edit-action-url-input"
allowClear
onChange={onChange}
value={this.props.step[props.item] || ''}
placeholder={props.placeholder}
/>
)}
</div>
@ -92,9 +101,9 @@ export class ActionStep extends Component {
Select element on site <ExportOutlined />
</AppEditorLink>
<a
href="https://posthog.com/docs/features/actions"
href={`${learnMoreLink}#autocapture-based-actions`}
target="_blank"
rel="noopener noreferrer"
rel="noopener"
style={{ marginLeft: 8 }}
>
See documentation.
@ -115,9 +124,26 @@ export class ActionStep extends Component {
<AndC />
<this.Option
item="selector"
label="HTML selector matches"
label={
<>
HTML selector matches
<Tooltip title="Click here to learn more about supported selectors">
<a href={`${learnMoreLink}#matching-selectors`} target="_blank" rel="noopener">
<InfoCircleOutlined style={{ marginLeft: 4 }} />
</a>
</Tooltip>
</>
}
selector={step.selector}
caption="CSS selector that ideally uniquely identifies your element"
placeholder='button[data-attr="my-id"]'
caption={
<Space direction="vertical">
<Text style={{ color: 'var(--muted)' }}>
CSS selector or an HTML attribute that ideally uniquely identifies your element.
Example: <Text code>[data-attr="signup"]</Text>
</Text>
</Space>
}
/>
<div style={{ marginBottom: 18 }}>
<AndC />