More fixes.

This commit is contained in:
Mike Cao
2026-03-25 13:57:32 -07:00
parent b881ac5f34
commit 9e76bd4cf8
@@ -49,7 +49,7 @@ function PropertySelect({
onPropertyChange?: (value: string) => void; onPropertyChange?: (value: string) => void;
}) { }) {
const { get, useQuery } = useApi(); const { get, useQuery } = useApi();
const { formatMessage, messages } = useMessages(); const { t, messages } = useMessages();
const [search, setSearch] = useState(value ?? ''); const [search, setSearch] = useState(value ?? '');
const searchValue = useDebounce(search, 300); const searchValue = useDebounce(search, 300);
const { startAt, endAt } = getEventDataDateRange(); const { startAt, endAt } = getEventDataDateRange();
@@ -87,7 +87,7 @@ function PropertySelect({
isLoading ? ( isLoading ? (
<Loading placement="center" icon="dots" /> <Loading placement="center" icon="dots" />
) : ( ) : (
<Empty message={formatMessage(messages.noResultsFound)} /> <Empty message={t(messages.noResultsFound)} />
) )
} }
> >
@@ -114,7 +114,7 @@ function ValueSelect({
onChange?: (value: string) => void; onChange?: (value: string) => void;
}) { }) {
const { get, useQuery } = useApi(); const { get, useQuery } = useApi();
const { formatMessage, messages } = useMessages(); const { t, messages } = useMessages();
const { startAt, endAt } = getEventDataDateRange(); const { startAt, endAt } = getEventDataDateRange();
const { data, isLoading } = useQuery<Array<{ value: string; total: number }>>({ const { data, isLoading } = useQuery<Array<{ value: string; total: number }>>({
@@ -146,7 +146,7 @@ function ValueSelect({
isLoading ? ( isLoading ? (
<Loading placement="center" icon="dots" /> <Loading placement="center" icon="dots" />
) : ( ) : (
<Empty message={formatMessage(messages.noResultsFound)} /> <Empty message={t(messages.noResultsFound)} />
) )
} }
> >
@@ -166,13 +166,13 @@ function OperatorSelect({
value?: string; value?: string;
onChange?: (value: string) => void; onChange?: (value: string) => void;
}) { }) {
const { formatMessage, labels } = useMessages(); const { t, labels } = useMessages();
return ( return (
<Select value={value} onChange={onChange}> <Select value={value} onChange={onChange}>
<ListItem id="eq">{formatMessage(labels.is)}</ListItem> <ListItem id="eq">{t(labels.is)}</ListItem>
<ListItem id="neq">{formatMessage(labels.isNot)}</ListItem> <ListItem id="neq">{t(labels.isNot)}</ListItem>
<ListItem id="c">{formatMessage(labels.contains)}</ListItem> <ListItem id="c">{t(labels.contains)}</ListItem>
<ListItem id="dnc">{formatMessage(labels.doesNotContain)}</ListItem> <ListItem id="dnc">{t(labels.doesNotContain)}</ListItem>
</Select> </Select>
); );
} }
@@ -188,25 +188,19 @@ function StepRow({
initialEventName?: string; initialEventName?: string;
onRemove: () => void; onRemove: () => void;
}) { }) {
const { formatMessage, labels } = useMessages(); const { t, labels } = useMessages();
const [eventName, setEventName] = useState(initialEventName ?? ''); const [eventName, setEventName] = useState(initialEventName ?? '');
return ( return (
<Column gap> <Column gap>
<Grid columns="260px 1fr auto" gap> <Grid columns="260px 1fr auto" gap>
<Column> <Column>
<FormField <FormField name={`steps.${index}.type`} rules={{ required: t(labels.required) }}>
name={`steps.${index}.type`}
rules={{ required: formatMessage(labels.required) }}
>
<ActionSelect /> <ActionSelect />
</FormField> </FormField>
</Column> </Column>
<Column> <Column>
<FormField <FormField name={`steps.${index}.value`} rules={{ required: t(labels.required) }}>
name={`steps.${index}.value`}
rules={{ required: formatMessage(labels.required) }}
>
{({ field, context }) => { {({ field, context }) => {
const type = context.watch(`steps.${index}.type`); const type = context.watch(`steps.${index}.type`);
return ( return (
@@ -260,7 +254,7 @@ function StepRow({
<Icon size="sm"> <Icon size="sm">
<Plus /> <Plus />
</Icon> </Icon>
<Text>{formatMessage(labels.filter)}</Text> <Text>{t(labels.filter)}</Text>
</Button> </Button>
</Row> </Row>
</Grid> </Grid>
@@ -286,14 +280,14 @@ function FilterRow({
initialProperty?: string; initialProperty?: string;
onRemove: () => void; onRemove: () => void;
}) { }) {
const { formatMessage, labels } = useMessages(); const { t, labels } = useMessages();
const [propertyName, setPropertyName] = useState(initialProperty ?? ''); const [propertyName, setPropertyName] = useState(initialProperty ?? '');
return ( return (
<Grid columns="1fr 140px 1fr auto" gap> <Grid columns="1fr 140px 1fr auto" gap>
<FormField <FormField
name={`steps.${stepIndex}.filters.${filterIndex}.property`} name={`steps.${stepIndex}.filters.${filterIndex}.property`}
rules={{ required: formatMessage(labels.required) }} rules={{ required: t(labels.required) }}
> >
<PropertySelect <PropertySelect
websiteId={websiteId} websiteId={websiteId}