diff --git a/frontend/__snapshots__/lemon-ui-forms-and-fields--fields-with-kea-form--dark.png b/frontend/__snapshots__/lemon-ui-lemon-field--fields-with-kea-form--dark.png similarity index 100% rename from frontend/__snapshots__/lemon-ui-forms-and-fields--fields-with-kea-form--dark.png rename to frontend/__snapshots__/lemon-ui-lemon-field--fields-with-kea-form--dark.png diff --git a/frontend/__snapshots__/lemon-ui-forms-and-fields--fields-with-kea-form--light.png b/frontend/__snapshots__/lemon-ui-lemon-field--fields-with-kea-form--light.png similarity index 100% rename from frontend/__snapshots__/lemon-ui-forms-and-fields--fields-with-kea-form--light.png rename to frontend/__snapshots__/lemon-ui-lemon-field--fields-with-kea-form--light.png diff --git a/frontend/__snapshots__/lemon-ui-forms-and-fields--pure-fields--dark.png b/frontend/__snapshots__/lemon-ui-lemon-field--pure-fields--dark.png similarity index 100% rename from frontend/__snapshots__/lemon-ui-forms-and-fields--pure-fields--dark.png rename to frontend/__snapshots__/lemon-ui-lemon-field--pure-fields--dark.png diff --git a/frontend/__snapshots__/lemon-ui-forms-and-fields--pure-fields--light.png b/frontend/__snapshots__/lemon-ui-lemon-field--pure-fields--light.png similarity index 100% rename from frontend/__snapshots__/lemon-ui-forms-and-fields--pure-fields--light.png rename to frontend/__snapshots__/lemon-ui-lemon-field--pure-fields--light.png diff --git a/frontend/src/lib/components/AuthorizedUrlList/AuthorizedUrlList.tsx b/frontend/src/lib/components/AuthorizedUrlList/AuthorizedUrlList.tsx index d6c50cc8edea6..1ebe6bb27a29e 100644 --- a/frontend/src/lib/components/AuthorizedUrlList/AuthorizedUrlList.tsx +++ b/frontend/src/lib/components/AuthorizedUrlList/AuthorizedUrlList.tsx @@ -1,10 +1,10 @@ import clsx from 'clsx' import { useActions, useValues } from 'kea' import { Form } from 'kea-forms' -import { Field } from 'lib/forms/Field' import { IconDelete, IconEdit, IconOpenInApp, IconPlus } from 'lib/lemon-ui/icons' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { LemonDialog } from 'lib/lemon-ui/LemonDialog' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput' import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag' import { Spinner } from 'lib/lemon-ui/Spinner/Spinner' @@ -56,13 +56,13 @@ function AuthorizedUrlForm({ actionId, type }: AuthorizedUrlListProps): JSX.Elem enableFormOnSubmit className="w-full space-y-2" > - + - +
Cancel diff --git a/frontend/src/lib/components/Sharing/SharingModal.tsx b/frontend/src/lib/components/Sharing/SharingModal.tsx index 248b983ac0812..961a8c5adba11 100644 --- a/frontend/src/lib/components/Sharing/SharingModal.tsx +++ b/frontend/src/lib/components/Sharing/SharingModal.tsx @@ -6,9 +6,9 @@ import { useActions, useValues } from 'kea' import { Form } from 'kea-forms' import { CodeSnippet, Language } from 'lib/components/CodeSnippet' import { TitleWithIcon } from 'lib/components/TitleWithIcon' -import { Field } from 'lib/forms/Field' import { IconGlobeLock, IconInfo, IconLink, IconLock, IconUnfoldLess, IconUnfoldMore } from 'lib/lemon-ui/icons' import { LemonDialog } from 'lib/lemon-ui/LemonDialog' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonModal } from 'lib/lemon-ui/LemonModal' import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton' import { Spinner } from 'lib/lemon-ui/Spinner/Spinner' @@ -138,7 +138,7 @@ export function SharingModalContent({
- + {({ value, onChange }) => ( )} - + {insight && ( - + {({ value, onChange }) => ( )} - + )} {showLegendCheckbox && ( - + {({ value, onChange }) => ( )} - + )} {recordingId && ( - + {({ value, onChange }) => ( )} - + )} {previewIframe && ( diff --git a/frontend/src/lib/components/SignupReferralSource.tsx b/frontend/src/lib/components/SignupReferralSource.tsx index c56ff9931b7ff..053bbaeec04f1 100644 --- a/frontend/src/lib/components/SignupReferralSource.tsx +++ b/frontend/src/lib/components/SignupReferralSource.tsx @@ -1,15 +1,15 @@ import { LemonInput } from '@posthog/lemon-ui' -import { Field } from 'lib/forms/Field' +import { LemonField } from 'lib/lemon-ui/LemonField' export default function SignupReferralSource({ disabled }: { disabled: boolean }): JSX.Element { return ( - + - + ) } diff --git a/frontend/src/lib/components/SignupRoleSelect.tsx b/frontend/src/lib/components/SignupRoleSelect.tsx index 4cf324f001d00..555c74181d9db 100644 --- a/frontend/src/lib/components/SignupRoleSelect.tsx +++ b/frontend/src/lib/components/SignupRoleSelect.tsx @@ -1,9 +1,9 @@ -import { Field } from 'lib/forms/Field' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonSelect } from 'lib/lemon-ui/LemonSelect' export default function SignupRoleSelect({ className }: { className?: string }): JSX.Element { return ( - + - + ) } diff --git a/frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx b/frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx index 9da0f337a58d9..2002aa16d6318 100644 --- a/frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx +++ b/frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx @@ -4,10 +4,10 @@ import { Form } from 'kea-forms' import { UserActivityIndicator } from 'lib/components/UserActivityIndicator/UserActivityIndicator' import { usersLemonSelectOptions } from 'lib/components/UserSelectItem' import { dayjs } from 'lib/dayjs' -import { Field } from 'lib/forms/Field' import { IconChevronLeft } from 'lib/lemon-ui/icons' import { LemonBanner } from 'lib/lemon-ui/LemonBanner' import { LemonButton } from 'lib/lemon-ui/LemonButton' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel' import { LemonModal } from 'lib/lemon-ui/LemonModal' import { LemonSelect } from 'lib/lemon-ui/LemonSelect' @@ -166,13 +166,13 @@ export function EditSubscription({ )} - + - + - + - + {subscription.target_type === 'email' ? ( <> @@ -193,7 +193,7 @@ export function EditSubscription({ )} - )} - + - + - + ) : null} @@ -262,7 +262,7 @@ export function EditSubscription({ ) : ( <> - )} - + {showSlackMembershipWarning ? ( - +
@@ -315,7 +315,7 @@ export function EditSubscription({
- + ) : null} )} @@ -324,9 +324,9 @@ export function EditSubscription({ {subscription.target_type === 'webhook' ? ( <> - + - +
Webhooks will be called with a HTTP POST request. The webhook endpoint should respond with a healthy HTTP code (2xx). @@ -338,10 +338,10 @@ export function EditSubscription({ Recurrence
Send every - + - - + + - + {subscription.frequency === 'weekly' && ( <> on - + {({ value, onChange }) => ( onChange([val])} /> )} - + )} {subscription.frequency === 'monthly' && ( <> on the - + {({ value, onChange }) => ( )} - - + + {({ value, onChange }) => ( )} - + )} by - + {({ value, onChange }) => ( )} - +
diff --git a/frontend/src/lib/components/Support/SupportForm.tsx b/frontend/src/lib/components/Support/SupportForm.tsx index b33bab9974cf0..32cceed80fdd3 100644 --- a/frontend/src/lib/components/Support/SupportForm.tsx +++ b/frontend/src/lib/components/Support/SupportForm.tsx @@ -1,9 +1,9 @@ import { LemonInput, LemonSegmentedButton, LemonSegmentedButtonOption, lemonToast, Link } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { Form } from 'kea-forms' -import { Field } from 'lib/forms/Field' import { useUploadFiles } from 'lib/hooks/useUploadFiles' import { IconBugReport, IconFeedback, IconHelpOutline } from 'lib/lemon-ui/icons' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonFileInput } from 'lib/lemon-ui/LemonFileInput/LemonFileInput' import { LemonSelect } from 'lib/lemon-ui/LemonSelect/LemonSelect' import { LemonTextArea } from 'lib/lemon-ui/LemonTextArea/LemonTextArea' @@ -73,18 +73,18 @@ export function SupportForm(): JSX.Element | null { > {!user && ( <> - + - - + + - + )} - + - - + + ({ @@ -92,8 +92,8 @@ export function SupportForm(): JSX.Element | null { value: key, }))} /> - - + + ({ @@ -101,7 +101,7 @@ export function SupportForm(): JSX.Element | null { value: key, }))} /> - + Check out the{' '} @@ -109,7 +109,7 @@ export function SupportForm(): JSX.Element | null { . - @@ -132,7 +132,7 @@ export function SupportForm(): JSX.Element | null { )} )} - +
) } diff --git a/frontend/src/lib/components/UnitPicker/CustomUnitModal.tsx b/frontend/src/lib/components/UnitPicker/CustomUnitModal.tsx index e3e4226744377..c8a5f2f5ac094 100644 --- a/frontend/src/lib/components/UnitPicker/CustomUnitModal.tsx +++ b/frontend/src/lib/components/UnitPicker/CustomUnitModal.tsx @@ -1,6 +1,6 @@ import { HandleUnitChange } from 'lib/components/UnitPicker/UnitPicker' -import { PureField } from 'lib/forms/Field' import { LemonButton } from 'lib/lemon-ui/LemonButton' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput' import { LemonModal } from 'lib/lemon-ui/LemonModal' import { capitalizeFirstLetter } from 'lib/utils' @@ -72,7 +72,7 @@ export function CustomUnitModal({ } > - @@ -87,7 +87,7 @@ export function CustomUnitModal({ } > - + ) } diff --git a/frontend/src/lib/forms/Errors.tsx b/frontend/src/lib/forms/Errors.tsx deleted file mode 100644 index 5dcbb4c786e4a..0000000000000 --- a/frontend/src/lib/forms/Errors.tsx +++ /dev/null @@ -1,17 +0,0 @@ -export interface FormErrorsProps { - errors: Record -} -export function FormErrors({ errors }: FormErrorsProps): JSX.Element { - return ( - <> - {Object.entries(errors) - .filter(([, error]) => !!error) - .map(([key, error]) => ( -
- {key}: - {typeof error === 'object' ? : String(error)} -
- ))} - - ) -} diff --git a/frontend/src/lib/forms/Field.stories.tsx b/frontend/src/lib/lemon-ui/LemonField/LemonField.stories.tsx similarity index 84% rename from frontend/src/lib/forms/Field.stories.tsx rename to frontend/src/lib/lemon-ui/LemonField/LemonField.stories.tsx index 4f13055dccb13..34a25ffa50243 100644 --- a/frontend/src/lib/forms/Field.stories.tsx +++ b/frontend/src/lib/lemon-ui/LemonField/LemonField.stories.tsx @@ -3,12 +3,12 @@ import { Meta } from '@storybook/react' import { kea, path, useAllValues } from 'kea' import { Form, forms } from 'kea-forms' -import { Field, PureField } from './Field' -import type { formLogicType } from './Field.storiesType' +import { LemonField } from './LemonField' +import type { formLogicType } from './LemonField.storiesType' -const meta: Meta = { - title: 'Lemon UI/Forms and Fields', - component: PureField, +const meta: Meta = { + title: 'Lemon UI/Lemon Field', + component: LemonField, parameters: { docs: { description: { @@ -30,7 +30,7 @@ export default meta export const _PureFields = (): JSX.Element => { return (
- { } > - + - With info!}> + With info!}> - + - + - - + + - +
Cancel @@ -112,7 +112,7 @@ export const _FieldsWithKeaForm = (): JSX.Element => { return (
- @@ -127,18 +127,18 @@ export const _FieldsWithKeaForm = (): JSX.Element => { } > - + - With info!}> + With info!}> - + - + - - + + - +
Cancel diff --git a/frontend/src/lib/forms/Field.tsx b/frontend/src/lib/lemon-ui/LemonField/LemonField.tsx similarity index 83% rename from frontend/src/lib/forms/Field.tsx rename to frontend/src/lib/lemon-ui/LemonField/LemonField.tsx index b0924ae43ae5b..dcde1c3e4e95a 100644 --- a/frontend/src/lib/forms/Field.tsx +++ b/frontend/src/lib/lemon-ui/LemonField/LemonField.tsx @@ -3,7 +3,7 @@ import { Field as KeaField, FieldProps as KeaFieldProps } from 'kea-forms/lib/co import { IconErrorOutline } from 'lib/lemon-ui/icons' import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel' -export type PureFieldProps = { +export type LemonPureFieldProps = { /** The label name to be displayed */ label?: React.ReactNode /** Will show a muted (optional) next to the label */ @@ -25,8 +25,7 @@ export type PureFieldProps = { htmlFor?: string } -/** A "Pure" field - used when you want the Field styles without the Kea form functionality */ -export const PureField = ({ +const LemonPureField = ({ label, info, error, @@ -38,7 +37,7 @@ export const PureField = ({ children, inline, onClick, -}: PureFieldProps): JSX.Element => { +}: LemonPureFieldProps): JSX.Element => { return (
& Pick +export type LemonFieldProps = Omit & Pick -export const Field = ({ +/** A field for use within a Kea form. Outside a form use `LemonField.Pure`. */ +export const LemonField = ({ name, help, className, @@ -78,11 +78,10 @@ export const Field = ({ inline, info, ...keaFieldProps -}: FieldProps): JSX.Element => { - /** Drop-in replacement antd template for kea forms */ +}: LemonFieldProps): JSX.Element => { const template: KeaFieldProps['template'] = ({ label, kids, error }) => { return ( - {kids} - + ) } return } + +/** A field without Kea form functionality. Within a form use `LemonField`. */ +LemonField.Pure = LemonPureField diff --git a/frontend/src/lib/lemon-ui/LemonField/index.ts b/frontend/src/lib/lemon-ui/LemonField/index.ts new file mode 100644 index 0000000000000..2776e83c43e46 --- /dev/null +++ b/frontend/src/lib/lemon-ui/LemonField/index.ts @@ -0,0 +1 @@ +export { LemonField, type LemonFieldProps, type LemonPureFieldProps } from './LemonField' diff --git a/frontend/src/queries/nodes/InsightViz/EditorFilterGroup.tsx b/frontend/src/queries/nodes/InsightViz/EditorFilterGroup.tsx index b7b3ec8bf4e2c..df2c131fdc499 100644 --- a/frontend/src/queries/nodes/InsightViz/EditorFilterGroup.tsx +++ b/frontend/src/queries/nodes/InsightViz/EditorFilterGroup.tsx @@ -1,9 +1,9 @@ import './EditorFilterGroup.scss' -import { PureField } from 'lib/forms/Field' import { IconUnfoldLess, IconUnfoldMore } from 'lib/lemon-ui/icons' import { LemonBadge } from 'lib/lemon-ui/LemonBadge/LemonBadge' import { LemonButton } from 'lib/lemon-ui/LemonButton' +import { LemonField } from 'lib/lemon-ui/LemonField' import { slugify } from 'lib/utils' import { Fragment, useState } from 'react' @@ -49,13 +49,13 @@ export function EditorFilterGroup({ insightProps, editorFilterGroup }: EditorFil } return ( - : Label} info={tooltip} showOptional={showOptional} > {Component ? : null} - + ) })} diff --git a/frontend/src/scenes/actions/ActionEdit.tsx b/frontend/src/scenes/actions/ActionEdit.tsx index 8da08b54dcca1..c1cbcc4145db4 100644 --- a/frontend/src/scenes/actions/ActionEdit.tsx +++ b/frontend/src/scenes/actions/ActionEdit.tsx @@ -5,10 +5,10 @@ import { combineUrl, router } from 'kea-router' import { EditableField } from 'lib/components/EditableField/EditableField' import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags' import { PageHeader } from 'lib/components/PageHeader' -import { Field } from 'lib/forms/Field' import { IconInfo, IconPlayCircle, IconPlus, IconWarning } from 'lib/lemon-ui/icons' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel' import { Link } from 'lib/lemon-ui/Link' import { Spinner } from 'lib/lemon-ui/Spinner/Spinner' @@ -69,7 +69,7 @@ export function ActionEdit({ action: loadedAction, id }: ActionEditLogicProps): - + {({ value, onChange }) => ( )} - - + + {({ value, onChange }) => ( !action.tags?.includes(tag))} /> )} - + } buttons={ @@ -175,7 +175,7 @@ export function ActionEdit({ action: loadedAction, id }: ActionEditLogicProps):
- + {({ onChange }) => (
)} - - + + {({ value: stepsValue, onChange }) => (
{stepsValue.map((step: ActionStepType, index: number) => { @@ -239,10 +239,10 @@ export function ActionEdit({ action: loadedAction, id }: ActionEditLogicProps):
)} - +
- + {({ value, onChange }) => (
)} - + {!action.bytecode_error && action.post_to_slack && ( <> - + {({ value, onChange }) => ( <> Message format @@ -294,7 +294,7 @@ export function ActionEdit({ action: loadedAction, id }: ActionEditLogicProps): )} - + )}
diff --git a/frontend/src/scenes/annotations/AnnotationModal.tsx b/frontend/src/scenes/annotations/AnnotationModal.tsx index ad4edf2b00b23..4492b82231dc7 100644 --- a/frontend/src/scenes/annotations/AnnotationModal.tsx +++ b/frontend/src/scenes/annotations/AnnotationModal.tsx @@ -2,8 +2,8 @@ import { LemonButton, LemonModal, LemonModalProps, LemonSelect, LemonTextArea, L import { useActions, useValues } from 'kea' import { Form } from 'kea-forms' import { DatePicker } from 'lib/components/DatePicker' -import { Field } from 'lib/forms/Field' import { IconWarning } from 'lib/lemon-ui/icons' +import { LemonField } from 'lib/lemon-ui/LemonField' import { shortTimeZone } from 'lib/utils' import { urls } from 'scenes/urls' @@ -81,7 +81,7 @@ export function AnnotationModal({ className="space-y-4" >
- @@ -101,8 +101,8 @@ export function AnnotationModal({ showSecond={false} format={ANNOTATION_DAYJS_FORMAT} /> - - + + - +
- + - +
) diff --git a/frontend/src/scenes/authentication/InviteSignup.tsx b/frontend/src/scenes/authentication/InviteSignup.tsx index 0fce0f5aaeda7..d36fb9df47efa 100644 --- a/frontend/src/scenes/authentication/InviteSignup.tsx +++ b/frontend/src/scenes/authentication/InviteSignup.tsx @@ -6,8 +6,8 @@ import { BridgePage } from 'lib/components/BridgePage/BridgePage' import PasswordStrength from 'lib/components/PasswordStrength' import SignupRoleSelect from 'lib/components/SignupRoleSelect' import { SocialLoginButtons } from 'lib/components/SocialLoginButton/SocialLoginButton' -import { Field, PureField } from 'lib/forms/Field' import { IconChevronLeft, IconChevronRight } from 'lib/lemon-ui/icons' +import { LemonField } from 'lib/lemon-ui/LemonField' import { Link } from 'lib/lemon-ui/Link' import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture' import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner' @@ -218,10 +218,10 @@ function UnauthenticatedAcceptInvite({ invite }: { invite: PrevalidatedInvite }) >

Create your PostHog account

- + - - + @@ -241,9 +241,9 @@ function UnauthenticatedAcceptInvite({ invite }: { invite: PrevalidatedInvite }) autoFocus={window.screen.width >= 768} // do not autofocus on small-width screens disabled={isSignupSubmitting} /> - + - - + - + {({ value, onChange }) => { return ( ) }} - + - + - +
- @@ -138,7 +138,7 @@ export function Login(): JSX.Element { placeholder="••••••••••" autoComplete="current-password" /> - +
{precheckResponse.status === 'pending' || !precheckResponse.sso_enforcement ? ( {generalError && {generalError.detail}} - + - + Enter your email address. If an account exists, you’ll receive an email with a password reset link soon.
- + - + )} - @@ -72,9 +72,9 @@ function NewPasswordForm(): JSX.Element { placeholder="••••••••••" data-attr="password" /> - + - + - + { } return ( <> - setRegionModalOpen(true)}> + setRegionModalOpen(true)}> { if (!region) { @@ -98,7 +98,7 @@ const RegionSelect = (): JSX.Element | null => { ]} fullWidth /> - + diff --git a/frontend/src/scenes/authentication/Setup2FA.tsx b/frontend/src/scenes/authentication/Setup2FA.tsx index d8ec16c187a8f..c1f84f3f1e03a 100644 --- a/frontend/src/scenes/authentication/Setup2FA.tsx +++ b/frontend/src/scenes/authentication/Setup2FA.tsx @@ -3,8 +3,8 @@ import './Setup2FA.scss' import { LemonButton, LemonInput } from '@posthog/lemon-ui' import { useValues } from 'kea' import { Form } from 'kea-forms' -import { Field } from 'lib/forms/Field' import { LemonBanner } from 'lib/lemon-ui/LemonBanner' +import { LemonField } from 'lib/lemon-ui/LemonField' import { setup2FALogic } from './setup2FALogic' @@ -21,7 +21,7 @@ export function Setup2FA({ onSuccess }: { onSuccess: () => void }): JSX.Element
{generalError && {generalError.detail}} - + void }): JSX.Element inputMode="numeric" autoComplete="one-time-code" /> - + Login diff --git a/frontend/src/scenes/authentication/signup/signupForm/panels/SignupPanel1.tsx b/frontend/src/scenes/authentication/signup/signupForm/panels/SignupPanel1.tsx index 5687d7490c8bb..237ab96e27df5 100644 --- a/frontend/src/scenes/authentication/signup/signupForm/panels/SignupPanel1.tsx +++ b/frontend/src/scenes/authentication/signup/signupForm/panels/SignupPanel1.tsx @@ -3,7 +3,7 @@ import { useValues } from 'kea' import { Form } from 'kea-forms' import PasswordStrength from 'lib/components/PasswordStrength' import { SocialLoginButtons } from 'lib/components/SocialLoginButton/SocialLoginButton' -import { Field } from 'lib/forms/Field' +import { LemonField } from 'lib/lemon-ui/LemonField' import { Link } from 'lib/lemon-ui/Link' import { useEffect, useRef } from 'react' import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic' @@ -31,7 +31,7 @@ export function SignupPanel1(): JSX.Element | null { )} - + - + {!preflight?.demo && ( - @@ -62,7 +62,7 @@ export function SignupPanel1(): JSX.Element | null { placeholder="••••••••••" disabled={isSignupPanel1Submitting} /> - + )} - + - - + + - +
diff --git a/frontend/src/scenes/batch_exports/BatchExportBackfillModal.tsx b/frontend/src/scenes/batch_exports/BatchExportBackfillModal.tsx index 1c5ae84c4f2cb..5a2cc5c9263a1 100644 --- a/frontend/src/scenes/batch_exports/BatchExportBackfillModal.tsx +++ b/frontend/src/scenes/batch_exports/BatchExportBackfillModal.tsx @@ -1,8 +1,8 @@ import { useActions, useValues } from 'kea' import { Form } from 'kea-forms' -import { Field } from 'lib/forms/Field' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { LemonCalendarSelectInput } from 'lib/lemon-ui/LemonCalendar/LemonCalendarSelect' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonModal } from 'lib/lemon-ui/LemonModal' import { userLogic } from 'scenes/userLogic' @@ -59,13 +59,13 @@ export function BatchExportBackfillModal(): JSX.Element { enableFormOnSubmit className="space-y-2" > - + {({ value, onChange }) => ( )} - + - + {({ value, onChange }) => ( )} - + ) diff --git a/frontend/src/scenes/batch_exports/BatchExportEditForm.tsx b/frontend/src/scenes/batch_exports/BatchExportEditForm.tsx index 2ec791c86aebb..601dbc2475182 100644 --- a/frontend/src/scenes/batch_exports/BatchExportEditForm.tsx +++ b/frontend/src/scenes/batch_exports/BatchExportEditForm.tsx @@ -2,10 +2,10 @@ import { LemonButton, LemonCheckbox, LemonDivider, LemonInput, LemonSelect } fro import { useActions, useValues } from 'kea' import { Form } from 'kea-forms' import { FEATURE_FLAGS } from 'lib/constants' -import { Field } from 'lib/forms/Field' import { IconInfo } from 'lib/lemon-ui/icons' import { LemonBanner } from 'lib/lemon-ui/LemonBanner' import { LemonCalendarSelectInput } from 'lib/lemon-ui/LemonCalendar/LemonCalendarSelect' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonFileInput } from 'lib/lemon-ui/LemonFileInput/LemonFileInput' import { LemonSelectMultiple } from 'lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple' import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton' @@ -81,13 +81,13 @@ export function BatchExportsEditFields({ <>
{!isPipeline && ( - + - + )}
- - + {(!isPipeline || batchExportConfigForm.end_at) && ( // Not present in the new UI unless grandfathered in - )} - + )}
@@ -140,7 +140,7 @@ export function BatchExportsEditFields({ {isNew && !isPipeline ? ( - + } /> - + ) : null}
- + - + {!batchExportConfigForm.destination ? (

Select a destination to continue configuring

) : batchExportConfigForm.destination === 'S3' ? ( <>
- + - - + + - +
- + - +
- + - + - + - +
- + - + - + - + {batchExportConfigForm.encryption == 'aws:kms' && ( - + - + )}
- + - - + + - + ) : batchExportConfigForm.destination === 'Snowflake' ? ( <> - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - - + + - + ) : batchExportConfigForm.destination === 'Postgres' ? ( <> - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + } /> - + - + - - + + - + ) : batchExportConfigForm.destination === 'Redshift' ? ( <> - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - - + + - + ) : batchExportConfigForm.destination === 'BigQuery' ? ( <> - + - + - + - + - + - + {isNew ? ( - + } /> - + ) : null} - + - - + + - + ) : null}
diff --git a/frontend/src/scenes/cohorts/CohortEdit.tsx b/frontend/src/scenes/cohorts/CohortEdit.tsx index 48a8b59483ba1..6ea3dfb674628 100644 --- a/frontend/src/scenes/cohorts/CohortEdit.tsx +++ b/frontend/src/scenes/cohorts/CohortEdit.tsx @@ -5,10 +5,10 @@ import { router } from 'kea-router' import { NotFound } from 'lib/components/NotFound' import { PageHeader } from 'lib/components/PageHeader' import { CohortTypeEnum } from 'lib/constants' -import { Field } from 'lib/forms/Field' import { IconUploadFile } from 'lib/lemon-ui/icons' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { More } from 'lib/lemon-ui/LemonButton/More' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput' import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel' import { LemonSelect } from 'lib/lemon-ui/LemonSelect' @@ -124,12 +124,12 @@ export function CohortEdit({ id }: CohortLogicProps): JSX.Element {
- + - +
- + {({ value, onChange }) => ( )} - +
{hasAvailableFeature(AvailableFeature.DASHBOARD_COLLABORATION) && (
- + - +
)}
{cohort.is_static ? (
- + {({ onChange }) => ( <> @@ -199,7 +203,7 @@ export function CohortEdit({ id }: CohortLogicProps): JSX.Element { /> )} - +
) : ( <> diff --git a/frontend/src/scenes/dashboard/DeleteDashboardModal.tsx b/frontend/src/scenes/dashboard/DeleteDashboardModal.tsx index 5929b58873108..4909ab0391453 100644 --- a/frontend/src/scenes/dashboard/DeleteDashboardModal.tsx +++ b/frontend/src/scenes/dashboard/DeleteDashboardModal.tsx @@ -1,8 +1,8 @@ import { useActions, useValues } from 'kea' import { Form } from 'kea-forms' -import { Field } from 'lib/forms/Field' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonModal } from 'lib/lemon-ui/LemonModal' import { deleteDashboardLogic } from 'scenes/dashboard/deleteDashboardLogic' @@ -47,7 +47,7 @@ export function DeleteDashboardModal(): JSX.Element { enableFormOnSubmit className="space-y-2" > - @@ -59,7 +59,7 @@ export function DeleteDashboardModal(): JSX.Element { onChange={onChange} /> )} - + ) diff --git a/frontend/src/scenes/dashboard/DuplicateDashboardModal.tsx b/frontend/src/scenes/dashboard/DuplicateDashboardModal.tsx index 46beee57edbee..a03841992a717 100644 --- a/frontend/src/scenes/dashboard/DuplicateDashboardModal.tsx +++ b/frontend/src/scenes/dashboard/DuplicateDashboardModal.tsx @@ -1,8 +1,8 @@ import { useActions, useValues } from 'kea' import { Form } from 'kea-forms' -import { Field } from 'lib/forms/Field' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonModal } from 'lib/lemon-ui/LemonModal' import { duplicateDashboardLogic } from 'scenes/dashboard/duplicateDashboardLogic' @@ -55,14 +55,14 @@ export function DuplicateDashboardModal(): JSX.Element { enableFormOnSubmit className="space-y-2" > - {({ value, onChange }) => ( )} - + ) diff --git a/frontend/src/scenes/data-management/definition/DefinitionEdit.tsx b/frontend/src/scenes/data-management/definition/DefinitionEdit.tsx index 350724df79410..50dd73bddb3bd 100644 --- a/frontend/src/scenes/data-management/definition/DefinitionEdit.tsx +++ b/frontend/src/scenes/data-management/definition/DefinitionEdit.tsx @@ -4,9 +4,9 @@ import { VerifiedDefinitionCheckbox } from 'lib/components/DefinitionPopover/Def import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags' import { PageHeader } from 'lib/components/PageHeader' import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types' -import { Field } from 'lib/forms/Field' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { LemonDivider } from 'lib/lemon-ui/LemonDivider' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonSelect } from 'lib/lemon-ui/LemonSelect' import { LemonTextArea } from 'lib/lemon-ui/LemonTextArea/LemonTextArea' import { getFilterLabel, isCoreFilter } from 'lib/taxonomy' @@ -64,14 +64,14 @@ export function DefinitionEdit(props: DefinitionEditLogicProps): JSX.Element {
{hasTaxonomyFeatures && (
- + - +
)} {showVerifiedCheckbox && (
- + {({ value, onChange }) => ( )} - +
)} {hasTaxonomyFeatures && 'tags' in definition && (
- + {({ value, onChange }) => ( )} - +
)} {isProperty && (
- + {({ value, onChange }) => ( onChange(val)} @@ -115,7 +115,7 @@ export function DefinitionEdit(props: DefinitionEditLogicProps): JSX.Element { ]} /> )} - +
)} diff --git a/frontend/src/scenes/data-warehouse/external/forms/SourceForm.tsx b/frontend/src/scenes/data-warehouse/external/forms/SourceForm.tsx index df83d79972b5d..a7a858b9d0858 100644 --- a/frontend/src/scenes/data-warehouse/external/forms/SourceForm.tsx +++ b/frontend/src/scenes/data-warehouse/external/forms/SourceForm.tsx @@ -1,6 +1,6 @@ import { LemonInput } from '@posthog/lemon-ui' import { Form } from 'kea-forms' -import { Field } from 'lib/forms/Field' +import { LemonField } from 'lib/lemon-ui/LemonField' import { ExternalDataSourceType } from '~/types' @@ -21,13 +21,13 @@ export default function SourceForm({ sourceType }: SourceFormProps): JSX.Element enableFormOnSubmit > {SOURCE_DETAILS[sourceType].fields.map((field) => ( - + - + ))} - + - + ) } diff --git a/frontend/src/scenes/data-warehouse/new_table/DataWarehouseTableForm.tsx b/frontend/src/scenes/data-warehouse/new_table/DataWarehouseTableForm.tsx index bd00fa492c5ae..a6a3a2a40bcfc 100644 --- a/frontend/src/scenes/data-warehouse/new_table/DataWarehouseTableForm.tsx +++ b/frontend/src/scenes/data-warehouse/new_table/DataWarehouseTableForm.tsx @@ -1,6 +1,6 @@ import { LemonInput, LemonSelect } from '@posthog/lemon-ui' import { Form } from 'kea-forms' -import { Field } from 'lib/forms/Field' +import { LemonField } from 'lib/lemon-ui/LemonField' import { dataWarehouseTableLogic } from './dataWarehouseTableLogic' @@ -8,7 +8,7 @@ export function DatawarehouseTableForm(): JSX.Element { return (
- + - +
This will be the table name used when writing queries
- + - +
You can use * to select multiple files.
- + - - + + - - + + - +
) diff --git a/frontend/src/scenes/data-warehouse/redirect/DataWarehouseRedirectScene.tsx b/frontend/src/scenes/data-warehouse/redirect/DataWarehouseRedirectScene.tsx index 89b23c525c094..0d7b433cbc7cb 100644 --- a/frontend/src/scenes/data-warehouse/redirect/DataWarehouseRedirectScene.tsx +++ b/frontend/src/scenes/data-warehouse/redirect/DataWarehouseRedirectScene.tsx @@ -1,6 +1,6 @@ import { LemonButton, LemonInput } from '@posthog/lemon-ui' import { Form } from 'kea-forms' -import { Field } from 'lib/forms/Field' +import { LemonField } from 'lib/lemon-ui/LemonField' import { sourceFormLogic } from 'scenes/data-warehouse/external/forms/sourceFormLogic' import { SceneExport } from 'scenes/sceneTypes' @@ -20,9 +20,9 @@ export function DataWarehouseRedirectScene(): JSX.Element { className="space-y-4 max-w-100" enableFormOnSubmit > - + - + Submit diff --git a/frontend/src/scenes/early-access-features/EarlyAccessFeature.tsx b/frontend/src/scenes/early-access-features/EarlyAccessFeature.tsx index def6034aceb44..65b34a32ad3fa 100644 --- a/frontend/src/scenes/early-access-features/EarlyAccessFeature.tsx +++ b/frontend/src/scenes/early-access-features/EarlyAccessFeature.tsx @@ -8,9 +8,9 @@ import { NotFound } from 'lib/components/NotFound' import { PageHeader } from 'lib/components/PageHeader' import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters' import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types' -import { Field, PureField } from 'lib/forms/Field' import { IconClose, IconFlag, IconHelpOutline } from 'lib/lemon-ui/icons' import { LemonDialog } from 'lib/lemon-ui/LemonDialog' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonTabs } from 'lib/lemon-ui/LemonTabs' import { featureFlagLogic } from 'scenes/feature-flags/featureFlagLogic' import { personsLogic, PersonsLogicProps } from 'scenes/persons/personsLogic' @@ -187,12 +187,12 @@ export function EarlyAccessFeature({ id }: { id?: string } = {}): JSX.Element { >
{isNewEarlyAccessFeature && ( - + - + )} {'feature_flag' in earlyAccessFeature ? ( - +
- + ) : ( - A feature flag will be generated from feature name if not provided} @@ -226,7 +226,7 @@ export function EarlyAccessFeature({ id }: { id?: string } = {}): JSX.Element { )}
)} - + )} {isEditingFeature || isNewEarlyAccessFeature ? ( <> @@ -250,12 +250,12 @@ export function EarlyAccessFeature({ id }: { id?: string } = {}): JSX.Element { )} {isEditingFeature || isNewEarlyAccessFeature ? ( - + - + ) : (
Description @@ -269,9 +269,9 @@ export function EarlyAccessFeature({ id }: { id?: string } = {}): JSX.Element {
)} {isEditingFeature || isNewEarlyAccessFeature ? ( - + - + ) : (
Documentation URL diff --git a/frontend/src/scenes/experiments/Experiment.tsx b/frontend/src/scenes/experiments/Experiment.tsx index 7625d2d9484ee..13cb2139e75a2 100644 --- a/frontend/src/scenes/experiments/Experiment.tsx +++ b/frontend/src/scenes/experiments/Experiment.tsx @@ -20,12 +20,12 @@ import { EditableField } from 'lib/components/EditableField/EditableField' import { NotFound } from 'lib/components/NotFound' import { PageHeader } from 'lib/components/PageHeader' import { dayjs } from 'lib/dayjs' -import { Field } from 'lib/forms/Field' import { IconDelete, IconPlusMini, IconWarning } from 'lib/lemon-ui/icons' import { LemonBanner } from 'lib/lemon-ui/LemonBanner' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { More } from 'lib/lemon-ui/LemonButton/More' import { LemonCollapse } from 'lib/lemon-ui/LemonCollapse' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonProgress } from 'lib/lemon-ui/LemonProgress' import { Link } from 'lib/lemon-ui/Link' import { capitalizeFirstLetter, humanFriendlyNumber } from 'lib/utils' @@ -212,16 +212,16 @@ export function Experiment(): JSX.Element { <>
- + - - + + - - + @@ -234,7 +234,7 @@ export function Experiment(): JSX.Element { className="ph-ignore-input" placeholder="Adding a helpful description can ensure others know what this experiment is about." /> - + {experiment.parameters.feature_flag_variants && (
- + - +
{experimentId === 'new' && @@ -460,7 +460,7 @@ export function Experiment(): JSX.Element {
- + {({ value, onChange }) => (
@@ -483,7 +483,7 @@ export function Experiment(): JSX.Element {
)} - +
- + - - + + - + {experimentId == 'new' || editingExistingExperiment ? ( diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.tsx b/frontend/src/scenes/feature-flags/FeatureFlag.tsx index 14dc419296a87..7aeee10e75204 100644 --- a/frontend/src/scenes/feature-flags/FeatureFlag.tsx +++ b/frontend/src/scenes/feature-flags/FeatureFlag.tsx @@ -12,13 +12,13 @@ import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags' import { PageHeader } from 'lib/components/PageHeader' import { PayGateMini } from 'lib/components/PayGateMini/PayGateMini' import { FEATURE_FLAGS } from 'lib/constants' -import { Field } from 'lib/forms/Field' import { IconDelete, IconLock, IconPlus, IconUnfoldLess, IconUnfoldMore } from 'lib/lemon-ui/icons' import { LemonBanner } from 'lib/lemon-ui/LemonBanner' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { More } from 'lib/lemon-ui/LemonButton/More' import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox' import { LemonDivider } from 'lib/lemon-ui/LemonDivider' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput' import { LemonTab, LemonTabs } from 'lib/lemon-ui/LemonTabs' import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag' @@ -287,7 +287,7 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element { )}
- Feature flag keys must be unique )} - + - + - + {hasAvailableFeature(AvailableFeature.TAGGING) && ( - + {({ value, onChange }) => { return ( ) }} - + )} - + {({ value, onChange }) => (
)} - - + + {({ value, onChange }) => (
)} - +
@@ -876,12 +876,12 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
- + - +
)} @@ -916,7 +916,7 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
- + - +
- + - +
- + {({ value, onChange }) => { return ( ) }} - +
- + {({ value, onChange }) => (
)} - +
{variants.length > 1 && ( diff --git a/frontend/src/scenes/feature-flags/FeatureFlagAutoRollout.tsx b/frontend/src/scenes/feature-flags/FeatureFlagAutoRollout.tsx index 07016ce4b4e7a..1954103fcff96 100644 --- a/frontend/src/scenes/feature-flags/FeatureFlagAutoRollout.tsx +++ b/frontend/src/scenes/feature-flags/FeatureFlagAutoRollout.tsx @@ -2,8 +2,8 @@ import { LemonButton, LemonDivider, LemonInput, LemonSelect, LemonTag, Link } fr import { useActions, useValues } from 'kea' import { Group } from 'kea-forms' import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types' -import { Field } from 'lib/forms/Field' import { IconDelete } from 'lib/lemon-ui/icons' +import { LemonField } from 'lib/lemon-ui/LemonField' import { Spinner } from 'lib/lemon-ui/Spinner/Spinner' import { capitalizeFirstLetter, genericOperatorMap, humanFriendlyNumber } from 'lib/utils' import { ActionFilter } from 'scenes/insights/filters/ActionFilter/ActionFilter' @@ -87,7 +87,7 @@ export function FeatureFlagAutoRollback({ readOnly }: FeatureFlagAutoRollbackPro
Rollback Condition Type
- + {({ value, onChange }) => ( )} - +
} @@ -111,7 +111,7 @@ export function FeatureFlagAutoRollback({ readOnly }: FeatureFlagAutoRollbackPro {featureFlag.rollback_conditions[index].threshold_type == 'insight' ? (
- + {({ value, onChange }) => ( )} - + trailing 7 day average is  {insightRollingAverages[index] !== undefined ? ( @@ -147,7 +147,7 @@ export function FeatureFlagAutoRollback({ readOnly }: FeatureFlagAutoRollbackPro )} . Trigger when trailing average is - + {({ value, onChange }) => ( )} - - + + - +
) : sentryIntegrationEnabled ? (
@@ -175,7 +175,7 @@ export function FeatureFlagAutoRollback({ readOnly }: FeatureFlagAutoRollbackPro )}  Trigger when there is a - + {({ value, onChange }) => ( )} - - + + {({ value, onChange }) => ( )} - + to{' '} {sentryErrorCount ? ( diff --git a/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx b/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx index 0df3f02935852..ea12260ab2583 100644 --- a/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx +++ b/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx @@ -8,13 +8,13 @@ import { allOperatorsToHumanName } from 'lib/components/DefinitionPopover/utils' import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters' import { isPropertyFilterWithOperator } from 'lib/components/PropertyFilters/utils' import { FEATURE_FLAGS, INSTANTLY_AVAILABLE_PROPERTIES } from 'lib/constants' -import { Field } from 'lib/forms/Field' import { groupsAccessLogic, GroupsAccessStatus } from 'lib/introductions/groupsAccessLogic' import { GroupsIntroductionOption } from 'lib/introductions/GroupsIntroductionOption' import { IconCopy, IconDelete, IconErrorOutline, IconOpenInNew, IconPlus, IconSubArrowRight } from 'lib/lemon-ui/icons' import { LemonBanner } from 'lib/lemon-ui/LemonBanner' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { LemonDivider } from 'lib/lemon-ui/LemonDivider' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonSlider } from 'lib/lemon-ui/LemonSlider' import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag' import { Spinner } from 'lib/lemon-ui/Spinner/Spinner' @@ -279,7 +279,7 @@ export function FeatureFlagReleaseConditions({ className="ml-1.5 w-20" /> - + %} /> - + {' '} of {aggregationTargetName} in this set.{' '}
diff --git a/frontend/src/scenes/insights/EditorFilters/FunnelsAdvanced.tsx b/frontend/src/scenes/insights/EditorFilters/FunnelsAdvanced.tsx index 4eb2ebd8c4c99..6d34791efaf1c 100644 --- a/frontend/src/scenes/insights/EditorFilters/FunnelsAdvanced.tsx +++ b/frontend/src/scenes/insights/EditorFilters/FunnelsAdvanced.tsx @@ -1,6 +1,6 @@ import { useActions, useValues } from 'kea' -import { PureField } from 'lib/forms/Field' import { LemonButton } from 'lib/lemon-ui/LemonButton' +import { LemonField } from 'lib/lemon-ui/LemonField' import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic' import { Noun } from '~/models/groupsModel' @@ -16,14 +16,14 @@ export function FunnelsAdvanced({ insightProps }: EditorFilterProps): JSX.Elemen return (
- }> + }> - - + + - + - - + {!!advancedOptionsUsedCount && (
diff --git a/frontend/src/scenes/organization/ConfirmOrganization/ConfirmOrganization.tsx b/frontend/src/scenes/organization/ConfirmOrganization/ConfirmOrganization.tsx index 24c1ab43ec1a1..300d5825846d6 100644 --- a/frontend/src/scenes/organization/ConfirmOrganization/ConfirmOrganization.tsx +++ b/frontend/src/scenes/organization/ConfirmOrganization/ConfirmOrganization.tsx @@ -5,9 +5,9 @@ import { AnimatedCollapsible } from 'lib/components/AnimatedCollapsible' import { BridgePage } from 'lib/components/BridgePage/BridgePage' import SignupReferralSource from 'lib/components/SignupReferralSource' import SignupRoleSelect from 'lib/components/SignupRoleSelect' -import { Field } from 'lib/forms/Field' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { LemonDivider } from 'lib/lemon-ui/LemonDivider' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput' import { organizationLogic } from 'scenes/organizationLogic' import { SceneExport } from 'scenes/sceneTypes' @@ -62,21 +62,21 @@ export function ConfirmOrganization(): JSX.Element { enableFormOnSubmit className="space-y-4" > - + - + - + - + - - + diff --git a/frontend/src/scenes/organization/CreateOrganizationModal.tsx b/frontend/src/scenes/organization/CreateOrganizationModal.tsx index 68375eda4308b..f0aa3482f534f 100644 --- a/frontend/src/scenes/organization/CreateOrganizationModal.tsx +++ b/frontend/src/scenes/organization/CreateOrganizationModal.tsx @@ -1,6 +1,6 @@ import { LemonButton, LemonInput, LemonModal, Link } from '@posthog/lemon-ui' import { useActions } from 'kea' -import { PureField } from 'lib/forms/Field' +import { LemonField } from 'lib/lemon-ui/LemonField' import { useState } from 'react' import { organizationLogic } from 'scenes/organizationLogic' @@ -63,7 +63,7 @@ export function CreateOrganizationModal({ isOpen={isVisible} inline={inline} > - + - + ) } diff --git a/frontend/src/scenes/pipeline/PipelineNodeConfiguration.tsx b/frontend/src/scenes/pipeline/PipelineNodeConfiguration.tsx index 67563831846d2..e844df81a3213 100644 --- a/frontend/src/scenes/pipeline/PipelineNodeConfiguration.tsx +++ b/frontend/src/scenes/pipeline/PipelineNodeConfiguration.tsx @@ -1,8 +1,8 @@ import { LemonButton, LemonSkeleton, Tooltip } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { Form } from 'kea-forms' -import { Field } from 'lib/forms/Field' import { IconLock } from 'lib/lemon-ui/icons' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown' import React from 'react' import { BatchExportsEditFields } from 'scenes/batch_exports/BatchExportEditForm' @@ -79,7 +79,7 @@ function PluginConfigurationFields({ fieldConfig.type && isValidField(fieldConfig) && !hiddenFields.includes(fieldConfig.key) ? ( - @@ -99,7 +99,7 @@ function PluginConfigurationFields({ showOptional={!requiredFields.includes(fieldConfig.key)} > - + ) : ( <> {fieldConfig.type ? ( diff --git a/frontend/src/scenes/plugins/edit/interface-jobs/PluginJobConfiguration.tsx b/frontend/src/scenes/plugins/edit/interface-jobs/PluginJobConfiguration.tsx index cb09686bd9b19..b19681a7c9493 100644 --- a/frontend/src/scenes/plugins/edit/interface-jobs/PluginJobConfiguration.tsx +++ b/frontend/src/scenes/plugins/edit/interface-jobs/PluginJobConfiguration.tsx @@ -5,10 +5,10 @@ import { ChildFunctionProps, Form } from 'kea-forms' import { CodeEditor } from 'lib/components/CodeEditors' import { DatePicker } from 'lib/components/DatePicker' import { dayjs } from 'lib/dayjs' -import { Field } from 'lib/forms/Field' import { IconClose, IconPlayCircle, IconSettings } from 'lib/lemon-ui/icons' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { LemonCalendarRangeInline } from 'lib/lemon-ui/LemonCalendarRange/LemonCalendarRangeInline' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput' import { LemonModal } from 'lib/lemon-ui/LemonModal' import { formatDate, formatDateRange } from 'lib/utils' @@ -88,9 +88,9 @@ export function PluginJobModal(props: InterfaceJobsProps): JSX.Element { {shownFields.length > 0 ? (
{shownFields.map(([key, options]) => ( - + {(props) => } - + ))}
) : null} diff --git a/frontend/src/scenes/plugins/source/PluginSource.tsx b/frontend/src/scenes/plugins/source/PluginSource.tsx index 9a5f7e1b876be..7b531e7cbfdda 100644 --- a/frontend/src/scenes/plugins/source/PluginSource.tsx +++ b/frontend/src/scenes/plugins/source/PluginSource.tsx @@ -7,8 +7,8 @@ import { useActions, useValues } from 'kea' import { Form } from 'kea-forms' import { CodeEditor } from 'lib/components/CodeEditors' import { Drawer } from 'lib/components/Drawer' -import { Field } from 'lib/forms/Field' import { LemonButton } from 'lib/lemon-ui/LemonButton' +import { LemonField } from 'lib/lemon-ui/LemonField' import { useEffect } from 'react' import { createDefaultPluginSource } from 'scenes/plugins/source/createDefaultPluginSource' import { pluginSourceLogic } from 'scenes/plugins/source/pluginSourceLogic' @@ -112,7 +112,7 @@ export function PluginSource({ ) : ( <> - + {({ value, onChange }) => ( <> )} - + )} diff --git a/frontend/src/scenes/plugins/source/pluginSourceLogic.tsx b/frontend/src/scenes/plugins/source/pluginSourceLogic.tsx index cd332a54143f3..a2ebd3a5a8e2b 100644 --- a/frontend/src/scenes/plugins/source/pluginSourceLogic.tsx +++ b/frontend/src/scenes/plugins/source/pluginSourceLogic.tsx @@ -3,7 +3,6 @@ import { forms } from 'kea-forms' import { loaders } from 'kea-loaders' import { beforeUnload } from 'kea-router' import api from 'lib/api' -import { FormErrors } from 'lib/forms/Errors' import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast' import { validateJson } from 'lib/utils' import { frontendAppsLogic } from 'scenes/apps/frontendAppsLogic' @@ -153,7 +152,6 @@ export const pluginSourceLogic = kea([ <>
Please fix the following errors:
{String(error?.message || error)}
- , { position: 'top-right' } ) diff --git a/frontend/src/scenes/project/CreateProjectModal.tsx b/frontend/src/scenes/project/CreateProjectModal.tsx index 6739952f31b04..b1212bf53aeea 100644 --- a/frontend/src/scenes/project/CreateProjectModal.tsx +++ b/frontend/src/scenes/project/CreateProjectModal.tsx @@ -1,6 +1,6 @@ import { LemonButton, LemonInput, LemonModal, Link } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' -import { PureField } from 'lib/forms/Field' +import { LemonField } from 'lib/lemon-ui/LemonField' import { eventUsageLogic } from 'lib/utils/eventUsageLogic' import { useEffect, useState } from 'react' import { teamLogic } from 'scenes/teamLogic' @@ -90,7 +90,7 @@ export function CreateProjectModal({ inline={inline} closable={!currentTeamLoading} > - + - + ) } diff --git a/frontend/src/scenes/session-recordings/player/playlist-popover/PlaylistPopover.tsx b/frontend/src/scenes/session-recordings/player/playlist-popover/PlaylistPopover.tsx index 1d19209eabcfc..fef33b2967cae 100644 --- a/frontend/src/scenes/session-recordings/player/playlist-popover/PlaylistPopover.tsx +++ b/frontend/src/scenes/session-recordings/player/playlist-popover/PlaylistPopover.tsx @@ -1,9 +1,9 @@ import { LemonCheckbox, LemonDivider } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { Form } from 'kea-forms' -import { Field } from 'lib/forms/Field' import { IconOpenInNew, IconPlus, IconWithCount } from 'lib/lemon-ui/icons' import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput' import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton' import { Popover } from 'lib/lemon-ui/Popover' @@ -46,9 +46,9 @@ export function PlaylistPopoverButton(props: LemonButtonProps): JSX.Element { enableFormOnSubmit className="space-y-1" > - + - +
- + - - + + - +
diff --git a/frontend/src/scenes/settings/organization/VerifiedDomains/ConfigureSAMLModal.tsx b/frontend/src/scenes/settings/organization/VerifiedDomains/ConfigureSAMLModal.tsx index 770b125d6f861..651e1a3aa2585 100644 --- a/frontend/src/scenes/settings/organization/VerifiedDomains/ConfigureSAMLModal.tsx +++ b/frontend/src/scenes/settings/organization/VerifiedDomains/ConfigureSAMLModal.tsx @@ -2,9 +2,9 @@ import { Link } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { Form } from 'kea-forms' import { CopyToClipboardInline } from 'lib/components/CopyToClipboard' -import { Field } from 'lib/forms/Field' import { LemonBanner } from 'lib/lemon-ui/LemonBanner' import { LemonButton } from 'lib/lemon-ui/LemonButton' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput' import { LemonModal } from 'lib/lemon-ui/LemonModal' import { LemonTextArea } from 'lib/lemon-ui/LemonTextArea/LemonTextArea' @@ -37,28 +37,28 @@ export function ConfigureSAMLModal(): JSX.Element { Read the docs

- + {`${siteUrl}/complete/saml/`} - - + + {configureSAMLModalId || 'unknown'} - - + + {siteUrl} - - + + - - + + - - + + - + {!samlReady && ( SAML will not be enabled unless you enter all attributes above. However you can still diff --git a/frontend/src/scenes/settings/organization/VerifiedDomains/VerifyDomainModal.tsx b/frontend/src/scenes/settings/organization/VerifiedDomains/VerifyDomainModal.tsx index bf38e5d9133ad..6b502f4c402bc 100644 --- a/frontend/src/scenes/settings/organization/VerifiedDomains/VerifyDomainModal.tsx +++ b/frontend/src/scenes/settings/organization/VerifiedDomains/VerifyDomainModal.tsx @@ -1,7 +1,7 @@ import { useActions, useValues } from 'kea' import { CopyToClipboardInline } from 'lib/components/CopyToClipboard' -import { PureField } from 'lib/forms/Field' import { LemonButton } from 'lib/lemon-ui/LemonButton' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonModal } from 'lib/lemon-ui/LemonModal' import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag' @@ -40,14 +40,14 @@ export function VerifyDomainModal(): JSX.Element {
  • Add the following TXT record.
    - +
    {challengeName}
    -     + - +
    {domainBeingVerified?.verification_challenge} @@ -59,13 +59,13 @@ export function VerifyDomainModal(): JSX.Element { /> )}
    - - + +
    Default or 3600
    -     +
  • Press verify below.
    • diff --git a/frontend/src/scenes/settings/project/AddMembersModal.tsx b/frontend/src/scenes/settings/project/AddMembersModal.tsx index 51febcc209c0f..b94bae43d7b9b 100644 --- a/frontend/src/scenes/settings/project/AddMembersModal.tsx +++ b/frontend/src/scenes/settings/project/AddMembersModal.tsx @@ -4,8 +4,8 @@ import { Form } from 'kea-forms' import { RestrictedComponentProps } from 'lib/components/RestrictedArea' import { usersLemonSelectOptions } from 'lib/components/UserSelectItem' import { TeamMembershipLevel } from 'lib/constants' -import { Field } from 'lib/forms/Field' import { IconPlus } from 'lib/lemon-ui/icons' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonSelectMultiple } from 'lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple' import { membershipLevelToName, teamMembershipLevelIntegers } from 'lib/utils/permissioning' import { useState } from 'react' @@ -42,7 +42,7 @@ export function AddMembersModalWithButton({ isRestricted }: RestrictedComponentP

    {`Adding members${currentTeam?.name ? ` to project ${currentTeam.name}` : ''}`}

    - + - - + + ) )} /> - + diff --git a/frontend/src/scenes/settings/user/ChangePassword.tsx b/frontend/src/scenes/settings/user/ChangePassword.tsx index 1e284f1696316..42549b954407c 100644 --- a/frontend/src/scenes/settings/user/ChangePassword.tsx +++ b/frontend/src/scenes/settings/user/ChangePassword.tsx @@ -2,7 +2,7 @@ import { LemonButton, LemonInput } from '@posthog/lemon-ui' import { useValues } from 'kea' import { Form } from 'kea-forms' import PasswordStrength from 'lib/components/PasswordStrength' -import { Field } from 'lib/forms/Field' +import { LemonField } from 'lib/lemon-ui/LemonField' import { changePasswordLogic } from './changePasswordLogic' @@ -11,16 +11,16 @@ export function ChangePassword(): JSX.Element { return (
    - + - + - @@ -37,7 +37,7 @@ export function ChangePassword(): JSX.Element { className="ph-ignore-input" placeholder="••••••••••" /> - + Change password diff --git a/frontend/src/scenes/settings/user/UserDetails.tsx b/frontend/src/scenes/settings/user/UserDetails.tsx index 0ad4587948d61..587b54161b91d 100644 --- a/frontend/src/scenes/settings/user/UserDetails.tsx +++ b/frontend/src/scenes/settings/user/UserDetails.tsx @@ -1,8 +1,8 @@ import { LemonTag } from '@posthog/lemon-ui' import { useValues } from 'kea' import { Form } from 'kea-forms' -import { Field } from 'lib/forms/Field' import { LemonButton } from 'lib/lemon-ui/LemonButton' +import { LemonField } from 'lib/lemon-ui/LemonField' import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput' import { userLogic } from 'scenes/userLogic' @@ -19,23 +19,23 @@ export function UserDetails(): JSX.Element { maxWidth: '28rem', }} > - + - + - + - + {user?.pending_email && Pending verification for {user.pending_email}}
    - + - - + + - + { @@ -82,7 +82,7 @@ export default function SurveyEdit(): JSX.Element { key: SurveyEditSection.Presentation, header: 'Presentation', content: ( - + {({ onChange, value }) => { return (
    @@ -146,7 +146,7 @@ export default function SurveyEdit(): JSX.Element {
    ) }} -     + ), }, { @@ -227,7 +227,7 @@ export default function SurveyEdit(): JSX.Element { ), content: ( <> - + - - + @@ -266,8 +266,8 @@ export default function SurveyEdit(): JSX.Element { } textPlaceholder="ex: We really appreciate it." /> - - + + - + ), }, @@ -348,7 +348,7 @@ export default function SurveyEdit(): JSX.Element { key: SurveyEditSection.Customization, header: 'Customization', content: ( - + {({ value, onChange }) => ( <> {survey.type === SurveyType.Widget && ( @@ -375,7 +375,7 @@ export default function SurveyEdit(): JSX.Element { /> )} - + ), }, ] @@ -384,7 +384,7 @@ export default function SurveyEdit(): JSX.Element { key: SurveyEditSection.Targeting, header: 'Targeting', content: ( - + { if (value) { @@ -408,7 +408,7 @@ export default function SurveyEdit(): JSX.Element { ) : ( <> - )} - - + + {({ value, onChange }) => ( <> -
    - - + + @@ -480,8 +480,8 @@ export default function SurveyEdit(): JSX.Element { } placeholder="ex: .className or #id" /> - - + +
    {' '} days.
    -     + )} - - + + )} - + )} - + ), }, ]} diff --git a/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx b/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx index d3420e1a81749..bb6482e18598b 100644 --- a/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx +++ b/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx @@ -6,8 +6,8 @@ import { CSS } from '@dnd-kit/utilities' import { LemonButton, LemonCheckbox, LemonInput, LemonSelect } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { Group } from 'kea-forms' -import { Field } from 'lib/forms/Field' import { IconDelete, IconPlusMini, SortableDragIcon } from 'lib/lemon-ui/icons' +import { LemonField } from 'lib/lemon-ui/LemonField' import { Survey, SurveyQuestionType } from '~/types' @@ -88,7 +88,7 @@ export function SurveyEditQuestionGroup({ index, question }: { index: number; qu return (
    - + { @@ -216,11 +216,11 @@ export function SurveyEditQuestionGroup({ index, question }: { index: number; qu ], ]} /> - - + + - - + + {({ value, onChange }) => ( )} - + {survey.questions.length > 1 && ( - + - + )} {question.type === SurveyQuestionType.Link && ( - + - + )} {question.type === SurveyQuestionType.Rating && (
    - + - - + + - +
    - + - - + + - +
    )} {(question.type === SurveyQuestionType.SingleChoice || question.type === SurveyQuestionType.MultipleChoice) && (
    - + {({ value: hasOpenChoice, onChange: toggleHasOpenChoice }) => ( - + {({ value, onChange }) => (
    {(value || []).map((choice: string, index: number) => { @@ -366,18 +366,18 @@ export function SurveyEditQuestionGroup({ index, question }: { index: number; qu
    )} - + )} - +
    )} - + - +
    )