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

feat(dashboard): digest aggregated by key field editor with autosuggestions #7322

Merged
merged 7 commits into from
Dec 19, 2024
+20 −9
Merged

feat(dashboard): digest aggregated by key field editor with autosuggestions #7322

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3529190
feat(dashboard): scheduled digest
LetItRock Dec 17, 2024
162e086
Merge branch 'next' into nv-4585-scheduled-digest
LetItRock Dec 17, 2024
49ef9d5
chore(dashboard): update lock file
LetItRock Dec 17, 2024
a384a7e
chore(dashboard): fix input type
LetItRock Dec 17, 2024
e7ce5fd
Merge branch 'next' into nv-4585-scheduled-digest
LetItRock Dec 18, 2024
26670c2
feat(dashboard): digest aggregated by key field editor with autosugge…
LetItRock Dec 18, 2024
6063b71
Merge branch 'next' into nv-5049-digest-aggregated-by-key-field-editor
LetItRock Dec 19, 2024
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
29 changes: 20 additions & 9 deletions apps/dashboard/src/components/workflow-editor/steps/digest/digest-key.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,21 @@
import { useMemo } from 'react';
import { useFormContext } from 'react-hook-form';
import { RiAccountPinBoxFill } from 'react-icons/ri';
import { autocompletion } from '@codemirror/autocomplete';

import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/primitives/form/form';
import { Input, InputFieldPure } from '@/components/primitives/input';
import { cn } from '@/utils/ui';
import { InputFieldPure } from '@/components/primitives/input';
import { Code2 } from '@/components/icons/code-2';
import { Editor } from '@/components/primitives/editor';
import { useWorkflow } from '@/components/workflow-editor/workflow-provider';
import { parseStepVariablesToLiquidVariables } from '@/utils/parseStepVariablesToLiquidVariables';
import { completions } from '@/utils/liquid-autocomplete';

export const DigestKey = () => {
const { control } = useFormContext();
const { step } = useWorkflow();
const variables = useMemo(() => (step ? parseStepVariablesToLiquidVariables(step.variables) : []), [step]);
const extensions = useMemo(() => [autocompletion({ override: [completions(variables)] })], [variables]);

return (
<FormField
Expand All @@ -22,18 +30,21 @@ export const DigestKey = () => {
<span>Aggregated by</span>
</span>
</FormLabel>
<InputFieldPure className="h-7 rounded-lg border pr-0">
<InputFieldPure className="h-7 items-center gap-0 rounded-lg border">
<FormLabel className="flex h-full items-center gap-1 border-r border-neutral-100 pr-1">
<Code2 className="-ml-1.5 size-5" />
<span className="text-foreground-600 mt-[1px] text-xs font-normal">subscriberId</span>
<span className="text-foreground-600 text-xs font-normal">subscriberId</span>
</FormLabel>
<FormControl>
<Input
className={cn(
'min-w-[20ch] [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none'
)}
<Editor
Copy link
Contributor

Choose a reason for hiding this comment

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

Note that as part of future work, we need to introduce a single line editor component that leverages the <Editor/> but behaves like an input. That is, on Enter press no new limes should be added, and on tab press we should move to the next input in the form instead of applying indentation to the current line of text.

fontFamily="inherit"
ref={field.ref}
placeholder="Add additional digest..."
{...field}
className="overflow-x-auto [&_.cm-line]:mt-px"
id={field.name}
extensions={extensions}
value={field.value}
onChange={field.onChange}
/>
</FormControl>
</InputFieldPure>
Expand Down
Loading