Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: replace sortable-hoc on column configuration #17590

Merged
merged 4 commits into from
Oct 2, 2023
Merged

chore: replace sortable-hoc on column configuration #17590

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
78f3f3a
chore: replace sortable-hoc on column configuration
daibhin Sep 22, 2023
15ff492
Update UI snapshots for `chromium` (1)
github-actions[bot] Sep 25, 2023
3f57a8f
remove 2px transformation
daibhin Oct 2, 2023
25d1f96
Merge branch 'master' into dn/reordering-column-configuration
daibhin Oct 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 2 additions & 31 deletions frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,24 +24,11 @@
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0.5rem;
padding: 0 0.5rem;
overflow: hidden;
border-radius: var(--radius);
margin: calc(var(--radius) / 2) 0;

&:hover {
background-color: var(--mid);
}

&.disabled {
cursor: not-allowed;
color: var(--muted);
background-color: var(--mid);
}

&.selected {
background-color: var(--primary-bg-hover);
}
background-color: var(--primary-bg-hover);
}

.selected-column-col {
Expand All @@ -60,19 +47,3 @@
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This does not need the 2px above to be centered, in fact the 2px makes things wonky

}
}

.column-configurator-modal-sortable-container {
z-index: 9999;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0.5rem;
background-color: var(--primary-bg-hover);

.drag-handle {
color: var(--default);
font-size: 1.2em;
padding-right: 0.25rem;
transform: rotate(90deg) translateX(2px);
}
}
189 changes: 90 additions & 99 deletions frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,7 @@ import { BindLogic, useActions, useValues } from 'kea'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { dataTableLogic } from '~/queries/nodes/DataTable/dataTableLogic'
import { IconClose, IconEdit, IconTuning, SortableDragIcon } from 'lib/lemon-ui/icons'
import clsx from 'clsx'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import {
SortableContainer as sortableContainer,
SortableElement as sortableElement,
SortableHandle as sortableHandle,
} from 'react-sortable-hoc'
import VirtualizedList, { ListRowProps } from 'react-virtualized/dist/es/List'
import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer'
import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
import { useState } from 'react'
Expand All @@ -26,6 +19,10 @@ import { PropertyFilterType } from '~/types'
import { TeamMembershipLevel } from 'lib/constants'
import { RestrictedArea, RestrictedComponentProps, RestrictionScope } from 'lib/components/RestrictedArea'
import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox'
import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers'
import { DndContext } from '@dnd-kit/core'
import { CSS } from '@dnd-kit/utilities'

let uniqueNode = 0

Expand Down Expand Up @@ -85,98 +82,17 @@ export function ColumnConfigurator({ query, setQuery }: ColumnConfiguratorProps)
}

function ColumnConfiguratorModal({ query }: ColumnConfiguratorProps): JSX.Element {
// the virtualised list doesn't support gaps between items in the list
// setting the container to be larger than we need
// and adding a container with a smaller height to each row item
// allows the new row item to set a margin around itself
const rowContainerHeight = 36
const rowItemHeight = 32

const { modalVisible, columns, saveAsDefault } = useValues(columnConfiguratorLogic)
const { hideModal, moveColumn, setColumns, selectColumn, unselectColumn, save, toggleSaveAsDefault } =
useActions(columnConfiguratorLogic)

const DragHandle = sortableHandle(() => (
<span className="drag-handle">
<SortableDragIcon />
</span>
))
const SelectedColumn = ({ column, dataIndex }: { column: string; dataIndex: number }): JSX.Element => {
let columnType: PropertyFilterType | null = null
let columnKey = column
if (column.startsWith('person.properties.')) {
columnType = PropertyFilterType.Person
columnKey = column.substring(18)
}
if (column.startsWith('properties.')) {
columnType = PropertyFilterType.Event
columnKey = column.substring(11)
const onEditColumn = (column: string, index: number): void => {
const newColumn = window.prompt('Edit column', column)
if (newColumn) {
setColumns(columns.map((c, i) => (i === index ? newColumn : c)))
}

columnKey = trimQuotes(extractExpressionComment(columnKey))

return (
<div className={clsx(['SelectedColumn', 'selected'])} style={{ height: rowItemHeight }}>
<DragHandle />
{columnType && <PropertyFilterIcon type={columnType} />}
<PropertyKeyInfo className="ml-1" value={columnKey} />
<div className="flex-1" />
<Tooltip title="Edit">
<LemonButton
onClick={() => {
const newColumn = window.prompt('Edit column', column)
if (newColumn) {
setColumns(columns.map((c, i) => (i === dataIndex ? newColumn : c)))
}
}}
status="primary"
size="small"
>
<IconEdit data-attr="column-display-item-edit-icon" />
</LemonButton>
</Tooltip>
<Tooltip title="Remove">
<LemonButton onClick={() => unselectColumn(column)} status="danger" size="small">
<IconClose data-attr="column-display-item-remove-icon" />
</LemonButton>
</Tooltip>
</div>
)
}

const SortableSelectedColumn = sortableElement(SelectedColumn)

const SortableSelectedColumnRenderer = ({ index, style, key }: ListRowProps): JSX.Element => {
return (
<div style={style} key={key}>
<SortableSelectedColumn
column={columns[index]}
dataIndex={index}
index={index}
collection="selected-columns"
/>
</div>
)
}

const SortableColumnList = sortableContainer(() => (
<div style={{ height: 360 }} className="selected-columns-col">
<AutoSizer>
{({ height, width }: { height: number; width: number }) => {
return (
<VirtualizedList
height={height}
rowCount={columns.length}
rowRenderer={SortableSelectedColumnRenderer}
rowHeight={rowContainerHeight}
width={width}
/>
)
}}
</AutoSizer>
</div>
))

return (
<LemonModal
isOpen={modalVisible}
Expand Down Expand Up @@ -207,16 +123,33 @@ function ColumnConfiguratorModal({ query }: ColumnConfiguratorProps): JSX.Elemen
<h4 className="secondary uppercase text-muted">
Visible columns ({columns.length}) - Drag to reorder
</h4>
<SortableColumnList
helperClass="column-configurator-modal-sortable-container"
onSortEnd={({ oldIndex, newIndex }) => moveColumn(oldIndex, newIndex)}
distance={5}
useDragHandle
lockAxis="y"
/>
<DndContext
onDragEnd={({ active, over }) => {
if (over && active.id !== over.id) {
moveColumn(
columns.indexOf(active.id.toString()),
columns.indexOf(over.id.toString())
)
}
}}
modifiers={[restrictToVerticalAxis, restrictToParentElement]}
>
<SortableContext items={columns} strategy={verticalListSortingStrategy}>
{columns.map((column, index) => (
<SelectedColumn
key={column}
column={column}
dataIndex={index}
onEdit={onEditColumn}
onRemove={unselectColumn}
/>
))}
</SortableContext>
</DndContext>
</div>
<div className="HalfColumn">
<h4 className="secondary uppercase text-muted">Available columns</h4>
{/* eslint-disable-next-line react/forbid-dom-props */}
<div style={{ height: 360 }}>
<AutoSizer>
{({ height, width }: { height: number; width: number }) => (
Expand Down Expand Up @@ -271,3 +204,61 @@ function ColumnConfiguratorModal({ query }: ColumnConfiguratorProps): JSX.Elemen
</LemonModal>
)
}

const SelectedColumn = ({
column,
dataIndex,
onEdit,
onRemove,
}: {
column: string
dataIndex: number
onEdit: (column: string, index: number) => void
onRemove: (column: string) => void
}): JSX.Element => {
const { setNodeRef, attributes, transform, transition, listeners } = useSortable({ id: column })

let columnType: PropertyFilterType | null = null
let columnKey = column
if (column.startsWith('person.properties.')) {
columnType = PropertyFilterType.Person
columnKey = column.substring(18)
}
if (column.startsWith('properties.')) {
columnType = PropertyFilterType.Event
columnKey = column.substring(11)
}

columnKey = trimQuotes(extractExpressionComment(columnKey))

return (
<div
ref={setNodeRef}
// eslint-disable-next-line react/forbid-dom-props
style={{
transform: CSS.Transform.toString(transform),
transition,
}}
{...attributes}
>
<div className="SelectedColumn">
<span {...listeners} className="drag-handle">
<SortableDragIcon />
</span>
{columnType && <PropertyFilterIcon type={columnType} />}
<PropertyKeyInfo className="ml-1" value={columnKey} />
<div className="flex-1" />
<Tooltip title="Edit">
<LemonButton onClick={() => onEdit(column, dataIndex)} status="primary" size="small">
<IconEdit data-attr="column-display-item-edit-icon" />
</LemonButton>
</Tooltip>
<Tooltip title="Remove">
<LemonButton onClick={() => onRemove(column)} status="danger" size="small">
<IconClose data-attr="column-display-item-remove-icon" />
</LemonButton>
</Tooltip>
</div>
</div>
)
}
Loading