Skip to content

Commit

Permalink
chore: remove last of the antd Row components (#19489)
Browse files Browse the repository at this point in the history
  • Loading branch information
@daibhin @fuziontech
daibhin authored and fuziontech committed Jan 4, 2024
1 parent 1ba7d85 commit 2f67510
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 74 deletions.
25 changes: 2 additions & 23 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,29 +114,8 @@ module.exports = {
},
{
name: 'antd',
importNames: ['Tooltip'],
message: 'Please use Tooltip from @posthog/lemon-ui instead.',
},
{
name: 'antd',
importNames: ['Alert'],
message: 'Please use LemonBanner from @posthog/lemon-ui instead.',
},
{
name: 'antd',
importNames: ['Row'],
message:
'use flex utility classes instead, e.g. <Row align="middle"> could be <div className="flex items-center">',
},
{
name: 'antd',
importNames: ['Col'],
message: 'use flex utility classes instead - most of the time can simply be a plain <div>',
},
{
name: 'antd',
importNames: ['Card'],
message: 'use utility classes instead',
importNames: ['Card', 'Col', 'Row', 'Alert', 'Tooltip'],
message: 'please use the Lemon equivalent instead',
},
],
},
Expand Down
1 change: 1 addition & 0 deletions frontend/src/lib/lemon-ui/Tooltip/Tooltip.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// eslint-disable-next-line no-restricted-imports
import { Tooltip as AntdTooltip } from 'antd'
import { TooltipProps as AntdTooltipProps } from 'antd/lib/tooltip'
import { useFloatingContainerContext } from 'lib/hooks/useFloatingContainerContext'
Expand Down
1 change: 1 addition & 0 deletions frontend/src/scenes/insights/views/Funnels/FunnelCorrelationTable.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@

.funnel-correlation-header {
display: flex;
flex-wrap: wrap;
place-content: space-between space-between;
align-items: center;
align-self: stretch;
Expand Down
95 changes: 44 additions & 51 deletions frontend/src/scenes/insights/views/Funnels/FunnelPropertyCorrelationTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ import './FunnelCorrelationTable.scss'

import { IconInfo } from '@posthog/icons'
import { LemonButton, LemonCheckbox } from '@posthog/lemon-ui'
// eslint-disable-next-line no-restricted-imports
import { Col, ConfigProvider, Empty, Row, Table } from 'antd'
import { ConfigProvider, Empty, Table } from 'antd'
import Column from 'antd/lib/table/Column'
import { useActions, useValues } from 'kea'
import { PersonPropertySelect } from 'lib/components/PersonPropertySelect/PersonPropertySelect'
Expand Down Expand Up @@ -136,58 +135,52 @@ export function FunnelPropertyCorrelationTable(): JSX.Element | null {
return steps.length > 1 ? (
<VisibilitySensor offset={150} id={`${correlationPropKey}-properties`}>
<div className="funnel-correlation-table">
<Row className="funnel-correlation-header">
<Col className="table-header">
<div className="funnel-correlation-header">
<div className="table-header">
<IconSelectProperties style={{ marginRight: 4, opacity: 0.5, fontSize: 24 }} />
CORRELATED PROPERTIES
</Col>
<Col className="table-options">
<Row style={{ display: 'contents' }}>
<>
<p className="title">PROPERTIES </p>
<Popover
visible={isPropertiesOpen}
onClickOutside={() => setIsPropertiesOpen(false)}
overlay={
<div className="p-4">
<PersonPropertySelect
onChange={setPropertyNames}
selectedProperties={
propertyNames.length === 1 && propertyNames[0] === '$all'
? []
: propertyNames
}
addText="Add properties"
/>
<br />
{propertyNames.length === 1 && propertyNames[0] === '$all' ? (
<>All properties selected</>
) : (
<LemonButton
size="small"
type="primary"
onClick={() => setAllProperties()}
>
Select all properties
</LemonButton>
)}
</div>
}
>
<LemonButton size="small" onClick={() => setIsPropertiesOpen(true)}>
</div>
<div className="table-options">
<div className="flex">
<p className="title">PROPERTIES</p>
<Popover
visible={isPropertiesOpen}
onClickOutside={() => setIsPropertiesOpen(false)}
overlay={
<div className="p-4">
<PersonPropertySelect
onChange={setPropertyNames}
selectedProperties={
propertyNames.length === 1 && propertyNames[0] === '$all'
? []
: propertyNames
}
addText="Add properties"
/>
<br />
{propertyNames.length === 1 && propertyNames[0] === '$all' ? (
<>All properties selected</>
) : (
<>
{propertyNames.length} propert{propertyNames.length === 1 ? 'y' : 'ies'}{' '}
selected
</>
<LemonButton size="small" type="primary" onClick={() => setAllProperties()}>
Select all properties
</LemonButton>
)}
</LemonButton>
</Popover>
</>
</Row>
<Row style={{ display: 'contents' }}>
</div>
}
>
<LemonButton size="small" onClick={() => setIsPropertiesOpen(true)}>
{propertyNames.length === 1 && propertyNames[0] === '$all' ? (
<>All properties selected</>
) : (
<>
{propertyNames.length} propert{propertyNames.length === 1 ? 'y' : 'ies'}{' '}
selected
</>
)}
</LemonButton>
</Popover>
</div>
<div className="flex">
<p className="title ml-2">CORRELATION</p>
<div className="flex">
<LemonCheckbox
Expand All @@ -205,9 +198,9 @@ export function FunnelPropertyCorrelationTable(): JSX.Element | null {
bordered
/>
</div>
</Row>
</Col>
</Row>
</div>
</div>
</div>
<ConfigProvider
renderEmpty={() =>
loadedPropertyCorrelationsTableOnce ? (
Expand Down

0 comments on commit 2f67510

Please sign in to comment.