feat: add display name suggestions (#17571)

PostHog · Sep 21, 2023 · 408d54a · 408d54a
1 parent 1b36e1f
commit 408d54a
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 35 deletions.
diff --git a/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx b/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx
@@ -7,10 +7,10 @@ import { LemonSnack } from 'lib/lemon-ui/LemonSnack/LemonSnack'
 import clsx from 'clsx'
 import { useState } from 'react'
 
-import { DndContext, closestCenter } from '@dnd-kit/core'
+import { DndContext, PointerSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core'
 import { useSortable, SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import { restrictToHorizontalAxis } from '@dnd-kit/modifiers'
+import { restrictToHorizontalAxis, restrictToParentElement } from '@dnd-kit/modifiers'
 
 export interface PersonPropertySelectProps {
     addText: string
@@ -53,6 +53,7 @@ export const PersonPropertySelect = ({
     sortable = false,
 }: PersonPropertySelectProps): JSX.Element => {
     const [open, setOpen] = useState<boolean>(false)
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 1 } }))
 
     const handleChange = (name: string): void => {
         onChange(Array.from(new Set(selectedProperties.concat([name]))))
@@ -71,35 +72,38 @@ export const PersonPropertySelect = ({
 
     return (
         <div className="flex items-center flex-wrap gap-2">
-            <DndContext
-                onDragEnd={({ active, over }) => {
-                    if (over && active.id !== over.id) {
-                        handleSort({
-                            oldIndex: selectedProperties.indexOf(active.id.toString()),
-                            newIndex: selectedProperties.indexOf(over.id.toString()),
-                        })
-                    }
-                }}
-                collisionDetection={closestCenter}
-                modifiers={[restrictToHorizontalAxis]}
-            >
-                <SortableContext
-                    disabled={!sortable}
-                    items={selectedProperties}
-                    strategy={horizontalListSortingStrategy}
+            {selectedProperties.length > 0 && (
+                <DndContext
+                    onDragEnd={({ active, over }) => {
+                        if (over && active.id !== over.id) {
+                            handleSort({
+                                oldIndex: selectedProperties.indexOf(active.id.toString()),
+                                newIndex: selectedProperties.indexOf(over.id.toString()),
+                            })
+                        }
+                    }}
+                    sensors={sensors}
+                    collisionDetection={closestCenter}
+                    modifiers={[restrictToHorizontalAxis, restrictToParentElement]}
                 >
-                    <div className="flex items-center gap-2">
-                        {selectedProperties.map((value) => (
-                            <SortableProperty
-                                key={`item-${value}`}
-                                name={value}
-                                onRemove={handleRemove}
-                                sortable={sortable}
-                            />
-                        ))}
-                    </div>
-                </SortableContext>
-            </DndContext>
+                    <SortableContext
+                        disabled={!sortable}
+                        items={selectedProperties}
+                        strategy={horizontalListSortingStrategy}
+                    >
+                        <div className="flex items-center gap-2">
+                            {selectedProperties.map((value) => (
+                                <SortableProperty
+                                    key={`item-${value}`}
+                                    name={value}
+                                    onRemove={handleRemove}
+                                    sortable={sortable}
+                                />
+                            ))}
+                        </div>
+                    </SortableContext>
+                </DndContext>
+            )}
 
             <Popover
                 visible={open}

diff --git a/frontend/src/scenes/project/Settings/PersonDisplayNameProperties.tsx b/frontend/src/scenes/project/Settings/PersonDisplayNameProperties.tsx
@@ -1,4 +1,4 @@
-import { LemonButton } from '@posthog/lemon-ui'
+import { LemonButton, LemonSnack } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { PersonPropertySelect } from 'lib/components/PersonPropertySelect/PersonPropertySelect'
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
@@ -10,16 +10,19 @@ export function PersonDisplayNameProperties(): JSX.Element {
     const { currentTeam } = useValues(teamLogic)
     const { updateCurrentTeam } = useActions(teamLogic)
     const [value, setValue] = useState([] as string[])
+    const [suggestions, setSuggestions] = useState([] as string[])
 
-    useEffect(
-        () => setValue(currentTeam?.person_display_name_properties || PERSON_DEFAULT_DISPLAY_NAME_PROPERTIES),
-        [currentTeam]
-    )
+    useEffect(() => {
+        setValue(currentTeam?.person_display_name_properties || [])
+        setSuggestions(PERSON_DEFAULT_DISPLAY_NAME_PROPERTIES)
+    }, [currentTeam])
 
     if (!currentTeam) {
         return <LemonSkeleton className="w-1/2" />
     }
 
+    const activeSuggestions = suggestions.filter((s) => !value.includes(s))
+
     return (
         <>
             <p>
@@ -33,6 +36,16 @@ export function PersonDisplayNameProperties(): JSX.Element {
                     addText="Add"
                     sortable
                 />
+                <div>
+                    <h4>Suggestions</h4>
+                    <div className="space-x-1">
+                        {activeSuggestions.map((suggestion) => (
+                            <LemonSnack key={suggestion} onClick={() => setValue([...value, suggestion])}>
+                                {suggestion}
+                            </LemonSnack>
+                        ))}
+                    </div>
+                </div>
                 <LemonButton
                     type="primary"
                     onClick={() =>