Merge branch 'master' into dw-use-sync-imports

.eslintrc.js

@@ -126,7 +126,7 @@ module.exports = {
             },
         ],
         'react/forbid-dom-props': [
-            'warn',
+            'error',
             {
                 forbid: [
                     {

bin/unit_metrics.py

@@ -1,7 +1,12 @@
 import http.client
 import json
+import time
+import logging
 from prometheus_client import CollectorRegistry, Gauge, multiprocess, generate_latest
 
+
+logger = logging.getLogger(__name__)
+
 UNIT_CONNECTIONS_ACCEPTED_TOTAL = Gauge(
     "unit_connections_accepted_total",
     "",
@@ -42,32 +47,37 @@
 
 
 def application(environ, start_response):
-    connection = http.client.HTTPConnection("localhost:8181")
-    connection.request("GET", "/status")
-    response = connection.getresponse()
+    retries = 5
+    try:
+        connection = http.client.HTTPConnection("localhost:8181")
+        connection.request("GET", "/status")
+        response = connection.getresponse()
 
-    statj = json.loads(response.read())
-    connection.close()
+        statj = json.loads(response.read())
+    except Exception as e:
+        if retries > 0:
+            retries -= 1
+            time.sleep(1)
+            return application(environ, start_response)
+        else:
+            raise e
+    finally:
+        try:
+            connection.close()
+        except Exception as e:
+            logger.error("Failed to close connection to unit: ", e)
 
     UNIT_CONNECTIONS_ACCEPTED_TOTAL.set(statj["connections"]["accepted"])
     UNIT_CONNECTIONS_ACTIVE.set(statj["connections"]["active"])
     UNIT_CONNECTIONS_IDLE.set(statj["connections"]["idle"])
     UNIT_CONNECTIONS_CLOSED.set(statj["connections"]["closed"])
     UNIT_CONNECTIONS_TOTAL.set(statj["requests"]["total"])
 
-    for application in statj["applications"].keys():
-        UNIT_PROCESSES_RUNNING_GAUGE.labels(application=application).set(
-            statj["applications"][application]["processes"]["running"]
-        )
-        UNIT_PROCESSES_STARTING_GAUGE.labels(application=application).set(
-            statj["applications"][application]["processes"]["starting"]
-        )
-        UNIT_PROCESSES_IDLE_GAUGE.labels(application=application).set(
-            statj["applications"][application]["processes"]["idle"]
-        )
-        UNIT_REQUESTS_ACTIVE_GAUGE.labels(application=application).set(
-            statj["applications"][application]["requests"]["active"]
-        )
+    for app in statj["applications"].keys():
+        UNIT_PROCESSES_RUNNING_GAUGE.labels(application=app).set(statj["applications"][app]["processes"]["running"])
+        UNIT_PROCESSES_STARTING_GAUGE.labels(application=app).set(statj["applications"][app]["processes"]["starting"])
+        UNIT_PROCESSES_IDLE_GAUGE.labels(application=app).set(statj["applications"][app]["processes"]["idle"])
+        UNIT_REQUESTS_ACTIVE_GAUGE.labels(application=app).set(statj["applications"][app]["requests"]["active"])
 
     start_response("200 OK", [("Content-Type", "text/plain")])
     # Create the prometheus multi-process metric registry here

frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx

@@ -32,6 +32,7 @@ type RowProps = {
 }
 
 const Row = ({ className, columns, children }: RowProps): JSX.Element => (
+    // eslint-disable-next-line react/forbid-dom-props
     <div className={clsx('gap-4 grid', className)} style={{ gridTemplateColumns: columns ? columns : '100%' }}>
         {children}
     </div>
@@ -66,6 +67,7 @@ const Image = ({
     width?: number | string
     height?: number | string
     style?: React.CSSProperties
+    // eslint-disable-next-line react/forbid-dom-props
 }): JSX.Element => <img src={src} alt={alt} width={width} height={height} style={style} className="mt-2" />
 
 export const SidePanelWelcome = (): JSX.Element => {
@@ -96,6 +98,7 @@ export const SidePanelWelcome = (): JSX.Element => {
                     <p className="text-sm font-medium mb-3 opacity-75">We're past 0 to 1.</p>
                     <p
                         className="text-sm font-medium mb-4 opacity-75"
+                        // eslint-disable-next-line react/forbid-dom-props
                         style={{ maxWidth: 'min(calc(50% - 1rem), 16rem)' }}
                     >
                         It's time to go from 1 to&nbsp;3000. And&nbsp;this is just the&nbsp;beginning…
@@ -247,7 +250,7 @@ export const SidePanelWelcome = (): JSX.Element => {
                         Share feedback
                     </LemonButton>
                 </div>
-                <div className="-mb-3" style={{ fontSize: 13 }}>
+                <div className="-mb-3" style={{ fontSize: 13 /* eslint-disable-line react/forbid-dom-props */ }}>
                     <IconArrowLeft className="text-base mr-2 inline" />
                     <span className="m-0">
                         <strong>Pro tip:</strong> Access this panel again from the{' '}

frontend/src/lib/components/CopyToClipboard.tsx

@@ -62,6 +62,7 @@ export function CopyToClipboardInline({
                     isValueSensitive && 'ph-no-capture',
                     className
                 )}
+                // eslint-disable-next-line react/forbid-dom-props
                 style={style}
                 onClick={!selectable ? copy : undefined}
                 {...props}

frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx

@@ -1,5 +1,6 @@
 import './DefinitionPopover.scss'
 
+import { ProfilePicture } from '@posthog/lemon-ui'
 import { Divider, DividerProps } from 'antd'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
@@ -11,7 +12,6 @@ import { Link } from 'lib/lemon-ui/Link'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { getKeyMapping } from 'lib/taxonomy'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { Owner } from 'scenes/events/Owner'
 
 import { KeyMapping, UserBasicType } from '~/types'
 
@@ -159,10 +159,7 @@ function TimeMeta({
                 {updatedBy && (
                     <span className="definition-popover-timemeta-user">
                         <span className="definition-popover-timemeta-spacer">by</span>
-                        <Owner
-                            user={updatedBy}
-                            style={{ display: 'inline-flex', fontWeight: 600, paddingLeft: 4, whiteSpace: 'nowrap' }}
-                        />
+                        <Owner user={updatedBy} />
                     </span>
                 )}
             </span>
@@ -174,11 +171,7 @@ function TimeMeta({
                 <span className="definition-popover-timemeta-time">Created {dayjs().to(dayjs.utc(createdAt))} </span>
                 {updatedBy && (
                     <span className="definition-popover-timemeta-user">
-                        <span className="definition-popover-timemeta-spacer">by</span>{' '}
-                        <Owner
-                            user={createdBy}
-                            style={{ display: 'inline-flex', fontWeight: 600, paddingLeft: 4, whiteSpace: 'nowrap' }}
-                        />
+                        <span className="definition-popover-timemeta-spacer">by</span> <Owner user={createdBy} />
                     </span>
                 )}
             </div>
@@ -187,6 +180,21 @@ function TimeMeta({
     return <></>
 }
 
+function Owner({ user }: { user?: UserBasicType | null }): JSX.Element {
+    return (
+        <>
+            {user?.uuid ? (
+                <div className="flex items-center flex-row">
+                    <ProfilePicture name={user.first_name} email={user.email} size="sm" />
+                    <span className="pl-2 inline-flex font-semibold pl-1 whitespace-nowrap">{user.first_name}</span>
+                </div>
+            ) : (
+                <span className="text-muted italic inline-flex font-semibold pl-1 whitespace-nowrap">No owner</span>
+            )}
+        </>
+    )
+}
+
 function HorizontalLine({ children, ...props }: DividerProps): JSX.Element {
     return (
         <Divider className="definition-popover-divider" {...props}>

frontend/src/lib/components/PageHeader.tsx

@@ -12,7 +12,6 @@ interface PageHeaderProps {
     title: string | JSX.Element
     caption?: string | JSX.Element | null | false
     buttons?: JSX.Element | false
-    style?: React.CSSProperties
     tabbedPage?: boolean // Whether the page has tabs for secondary navigation
     delimited?: boolean
     notebookProps?: Pick<DraggableToNotebookProps, 'href' | 'node' | 'properties'>
@@ -22,7 +21,6 @@ export function PageHeader({
     title,
     caption,
     buttons,
-    style,
     tabbedPage,
     delimited,
     notebookProps,
@@ -33,8 +31,7 @@ export function PageHeader({
     return (
         <>
             {!is3000 && (
-                // eslint-disable-next-line react/forbid-dom-props
-                <div className="page-title-row flex justify-between" style={style}>
+                <div className="page-title-row flex justify-between">
                     <div className="min-w-0">
                         {!is3000 &&
                             (notebookProps ? (

frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss

@@ -2,20 +2,36 @@
     display: inline-flex;
     gap: 0.5rem;
     align-items: center;
+    height: 2rem;
+    padding: 0.25rem 1rem;
     overflow: hidden;
-    text-shadow: none;
+    color: var(--default);
+    white-space: nowrap;
+    user-select: none;
     background: var(--border);
-    border-color: transparent;
-    box-shadow: none;
-    transition-duration: 200ms; // Shorten from Ant's 300ms
+    border: 1px solid transparent;
+    border-radius: 2rem;
+    outline: 0;
+    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 
     &:hover,
     &:focus {
-        color: var(--text-default);
-        background: var(--border);
         border-color: var(--border);
     }
 
+    &:not(.PropertyFilterButton--clickable) {
+        border-color: transparent;
+    }
+
+    &.PropertyFilterButton--clickable {
+        touch-action: manipulation; // faster clicks
+        cursor: pointer;
+    }
+
+    &.PropertyFilterButton--closable {
+        padding-right: 0.5rem;
+    }
+
     > :not(.PropertyFilterButton-content) {
         flex-shrink: 0;
     }
@@ -25,4 +41,28 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
+
+    // Close button
+    .LemonButton {
+        margin-left: -0.25rem;
+    }
+
+    .LemonButton__chrome {
+        height: 22px !important;
+        min-height: auto !important;
+        padding: 0 4px !important;
+    }
+}
+
+.posthog-3000 {
+    .PropertyFilterButton {
+        &:hover,
+        &:focus {
+            border-color: var(--border-bold);
+        }
+
+        &:not(.PropertyFilterButton--clickable) {
+            border-color: transparent;
+        }
+    }
 }

frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.stories.tsx

@@ -83,6 +83,10 @@ const meta: Meta<typeof PropertyFilterButton> = {
 }
 export default meta
 
+export function Button(): JSX.Element {
+    return <PropertyFilterButton item={propertyFilters[0]} onClick={() => {}} onClose={() => {}} />
+}
+
 export function FilterTypes(): JSX.Element {
     return (
         <div>
@@ -99,30 +103,37 @@ export function PseudoStates(): JSX.Element {
     return (
         <div className="border rounded p-2">
             <div>
-                <h5>STATE=DEFAULT</h5>
+                <h5>Default</h5>
                 <PropertyFilterButton item={propertyFilters[0]} />
                 <span className="ml-1" />
+                <PropertyFilterButton item={propertyFilters[0]} onClick={() => {}} />
+                <span className="ml-1" />
                 <PropertyFilterButton item={propertyFilters[0]} onClose={() => {}} />
+                <span className="ml-1" />
+                <PropertyFilterButton item={propertyFilters[0]} onClick={() => {}} onClose={() => {}} />
             </div>
             <div id="hover">
-                <h5>STATE=HOVER</h5>
+                <h5>Hover</h5>
                 <PropertyFilterButton item={propertyFilters[0]} />
                 <span className="ml-1" />
+                <PropertyFilterButton item={propertyFilters[0]} onClick={() => {}} />
+                <span className="ml-1" />
                 <PropertyFilterButton item={propertyFilters[0]} onClose={() => {}} />
-            </div>
-            <div id="active">
-                <h5>STATE=HOVER,ACTIVE</h5>
-                <PropertyFilterButton item={propertyFilters[0]} />
                 <span className="ml-1" />
+                <PropertyFilterButton item={propertyFilters[0]} onClick={() => {}} onClose={() => {}} />
+            </div>
+            <div id="hover-close">
+                <h5>Hover over close</h5>
                 <PropertyFilterButton item={propertyFilters[0]} onClose={() => {}} />
+                <span className="ml-1" />
+                <PropertyFilterButton item={propertyFilters[0]} onClick={() => {}} onClose={() => {}} />
             </div>
         </div>
     )
 }
 
 PseudoStates.parameters = {
     pseudo: {
-        hover: ['#hover .PropertyFilterButton', '#active .PropertyFilterButton'],
-        active: ['#active .PropertyFilterButton'],
+        hover: ['#hover .PropertyFilterButton', '#hover-close .PropertyFilterButton', '#hover-close .LemonButton'],
     },
 }