Add export to cmd bar (#1593)
* Add new exportFile icon * Isolate exportFromEngine command * Naive initial export command * Update types to accept functions for arg defaultValue, required, and options * Make existing helper functions and configs work with new types * Make UI components work with new types support resolving function values and conditional logic * Add full export command to command bar * Replace ExportButton with thin wrapper on cmd bar command * fmt * Fix stale tests and bugs found by good tests * fmt * Update src/components/CommandBar/CommandArgOptionInput.tsx * Update snapshot tests and onboarding wording * Move the panel open click into doExport * Don't need to input storage step in export tests anymore * Remove console logs, fmt, select options if we need to * Increase test timeout --------- Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>
This commit is contained in:
Frank Noirot
GitHub
@ -1,8 +1,8 @@
|
||||
import { Combobox } from '@headlessui/react'
|
||||
import Fuse from 'fuse.js'
|
||||
import { useCommandsContext } from 'hooks/useCommandsContext'
|
||||
import { CommandArgumentOption } from 'lib/commandTypes'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { CommandArgument, CommandArgumentOption } from 'lib/commandTypes'
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
|
||||
function CommandArgOptionInput({
|
||||
options,
|
||||
@ -11,51 +11,89 @@ function CommandArgOptionInput({
|
||||
onSubmit,
|
||||
placeholder,
|
||||
}: {
|
||||
options: CommandArgumentOption<unknown>[]
|
||||
options: (CommandArgument<unknown> & { inputType: 'options' })['options']
|
||||
argName: string
|
||||
stepBack: () => void
|
||||
onSubmit: (data: unknown) => void
|
||||
placeholder?: string
|
||||
}) {
|
||||
const { commandBarSend, commandBarState } = useCommandsContext()
|
||||
const resolvedOptions = useMemo(
|
||||
() =>
|
||||
typeof options === 'function'
|
||||
? options(commandBarState.context)
|
||||
: options,
|
||||
[argName, options, commandBarState.context]
|
||||
)
|
||||
// The initial current option is either an already-input value or the configured default
|
||||
const currentOption = useMemo(
|
||||
() =>
|
||||
resolvedOptions.find(
|
||||
(o) => o.value === commandBarState.context.argumentsToSubmit[argName]
|
||||
) || resolvedOptions.find((o) => o.isCurrent),
|
||||
[commandBarState.context.argumentsToSubmit, argName, resolvedOptions]
|
||||
)
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
const formRef = useRef<HTMLFormElement>(null)
|
||||
const [argValue, setArgValue] = useState<(typeof options)[number]['value']>(
|
||||
options.find((o) => 'isCurrent' in o && o.isCurrent)?.value ||
|
||||
commandBarState.context.argumentsToSubmit[argName] ||
|
||||
options[0].value
|
||||
const [selectedOption, setSelectedOption] = useState<
|
||||
CommandArgumentOption<unknown>
|
||||
>(currentOption || resolvedOptions[0])
|
||||
const initialQuery = useMemo(() => '', [options, argName])
|
||||
const [query, setQuery] = useState(initialQuery)
|
||||
const [filteredOptions, setFilteredOptions] =
|
||||
useState<typeof resolvedOptions>()
|
||||
|
||||
// Create a new Fuse instance when the options change
|
||||
const fuse = useMemo(
|
||||
() =>
|
||||
new Fuse(resolvedOptions, {
|
||||
keys: ['name', 'description'],
|
||||
threshold: 0.3,
|
||||
}),
|
||||
[argName, resolvedOptions]
|
||||
)
|
||||
const [query, setQuery] = useState('')
|
||||
const [filteredOptions, setFilteredOptions] = useState<typeof options>()
|
||||
|
||||
const fuse = new Fuse(options, {
|
||||
keys: ['name', 'description'],
|
||||
threshold: 0.3,
|
||||
})
|
||||
// Reset the query and selected option when the argName changes
|
||||
useEffect(() => {
|
||||
setQuery(initialQuery)
|
||||
setSelectedOption(currentOption || resolvedOptions[0])
|
||||
}, [argName])
|
||||
|
||||
// Auto focus and select the input when the component mounts
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus()
|
||||
inputRef.current?.select()
|
||||
}, [inputRef])
|
||||
|
||||
// Filter the options based on the query,
|
||||
// resetting the query when the options change
|
||||
useEffect(() => {
|
||||
const results = fuse.search(query).map((result) => result.item)
|
||||
setFilteredOptions(query.length > 0 ? results : options)
|
||||
}, [query])
|
||||
setFilteredOptions(query.length > 0 ? results : resolvedOptions)
|
||||
}, [query, resolvedOptions, fuse])
|
||||
|
||||
function handleSelectOption(option: CommandArgumentOption<unknown>) {
|
||||
setArgValue(option)
|
||||
// We deal with the whole option object internally
|
||||
setSelectedOption(option)
|
||||
|
||||
// But we only submit the value
|
||||
onSubmit(option.value)
|
||||
}
|
||||
|
||||
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
onSubmit(argValue)
|
||||
|
||||
// We submit the value of the selected option, not the whole object
|
||||
onSubmit(selectedOption.value)
|
||||
}
|
||||
|
||||
return (
|
||||
<form id="arg-form" onSubmit={handleSubmit} ref={formRef}>
|
||||
<Combobox value={argValue} onChange={handleSelectOption} name="options">
|
||||
<Combobox
|
||||
value={selectedOption}
|
||||
onChange={handleSelectOption}
|
||||
name="options"
|
||||
>
|
||||
<div className="flex items-center mx-4 mt-4 mb-2">
|
||||
<label
|
||||
htmlFor="option-input"
|
||||
@ -75,10 +113,12 @@ function CommandArgOptionInput({
|
||||
stepBack()
|
||||
}
|
||||
}}
|
||||
value={query}
|
||||
placeholder={
|
||||
(argValue as CommandArgumentOption<unknown>)?.name ||
|
||||
currentOption?.name ||
|
||||
placeholder ||
|
||||
'Select an option for ' + argName
|
||||
argName ||
|
||||
'Select an option'
|
||||
}
|
||||
autoCapitalize="off"
|
||||
autoComplete="off"
|
||||
@ -98,7 +138,7 @@ function CommandArgOptionInput({
|
||||
className="flex items-center gap-2 px-4 py-1 first:mt-2 last:mb-2 ui-active:bg-energy-10/50 dark:ui-active:bg-chalkboard-90"
|
||||
>
|
||||
<p className="flex-grow">{option.name} </p>
|
||||
{'isCurrent' in option && option.isCurrent && (
|
||||
{option.value === currentOption?.value && (
|
||||
<small className="text-chalkboard-70 dark:text-chalkboard-50">
|
||||
current
|
||||
</small>
|
||||
|
||||
@ -29,12 +29,6 @@ export const CommandBarProvider = ({
|
||||
const [commandBarState, commandBarSend] = useMachine(commandBarMachine, {
|
||||
devTools: true,
|
||||
guards: {
|
||||
'Arguments are ready': (context, _) => {
|
||||
return context.selectedCommand?.args
|
||||
? context.argumentsToSubmit.length ===
|
||||
Object.keys(context.selectedCommand.args)?.length
|
||||
: false
|
||||
},
|
||||
'Command has no arguments': (context, _event) => {
|
||||
return (
|
||||
!context.selectedCommand?.args ||
|
||||
@ -81,7 +75,12 @@ export const CommandBar = () => {
|
||||
function stepBack() {
|
||||
if (!currentArgument) {
|
||||
if (commandBarState.matches('Review')) {
|
||||
const entries = Object.entries(selectedCommand?.args || {})
|
||||
const entries = Object.entries(selectedCommand?.args || {}).filter(
|
||||
([_, argConfig]) =>
|
||||
typeof argConfig.required === 'function'
|
||||
? argConfig.required(commandBarState.context)
|
||||
: argConfig.required
|
||||
)
|
||||
|
||||
const currentArgName = entries[entries.length - 1][0]
|
||||
const currentArg = {
|
||||
@ -89,19 +88,12 @@ export const CommandBar = () => {
|
||||
...entries[entries.length - 1][1],
|
||||
}
|
||||
|
||||
if (commandBarState.matches('Review')) {
|
||||
commandBarSend({
|
||||
type: 'Edit argument',
|
||||
data: {
|
||||
arg: currentArg,
|
||||
},
|
||||
})
|
||||
} else {
|
||||
commandBarSend({
|
||||
type: 'Remove argument',
|
||||
data: { [currentArgName]: currentArg },
|
||||
})
|
||||
}
|
||||
commandBarSend({
|
||||
type: 'Edit argument',
|
||||
data: {
|
||||
arg: currentArg,
|
||||
},
|
||||
})
|
||||
} else {
|
||||
commandBarSend({ type: 'Deselect command' })
|
||||
}
|
||||
@ -124,11 +116,6 @@ export const CommandBar = () => {
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(
|
||||
() => console.log(commandBarState.context.argumentsToSubmit),
|
||||
[commandBarState.context.argumentsToSubmit]
|
||||
)
|
||||
|
||||
return (
|
||||
<Transition.Root
|
||||
show={!commandBarState.matches('Closed') || false}
|
||||
|
||||
@ -76,72 +76,82 @@ function CommandBarHeader({ children }: React.PropsWithChildren<{}>) {
|
||||
)}
|
||||
{selectedCommand?.name}
|
||||
</p>
|
||||
{Object.entries(selectedCommand?.args || {}).map(
|
||||
([argName, arg], i) => (
|
||||
<button
|
||||
disabled={!isReviewing && currentArgument?.name === argName}
|
||||
onClick={() => {
|
||||
commandBarSend({
|
||||
type: isReviewing
|
||||
? 'Edit argument'
|
||||
: 'Change current argument',
|
||||
data: { arg: { ...arg, name: argName } },
|
||||
})
|
||||
}}
|
||||
key={argName}
|
||||
className={`relative w-fit px-2 py-1 rounded-sm flex gap-2 items-center border ${
|
||||
argName === currentArgument?.name
|
||||
? 'disabled:bg-energy-10/50 dark:disabled:bg-energy-10/20 disabled:border-energy-10 dark:disabled:border-energy-10 disabled:text-chalkboard-100 dark:disabled:text-chalkboard-10'
|
||||
: 'bg-chalkboard-20/50 dark:bg-chalkboard-80/50 border-chalkboard-20 dark:border-chalkboard-80'
|
||||
}`}
|
||||
>
|
||||
<span className="capitalize">{argName}</span>
|
||||
{argumentsToSubmit[argName] ? (
|
||||
arg.inputType === 'selection' ? (
|
||||
getSelectionTypeDisplayText(
|
||||
argumentsToSubmit[argName] as Selections
|
||||
)
|
||||
) : arg.inputType === 'kcl' ? (
|
||||
roundOff(
|
||||
Number(
|
||||
(argumentsToSubmit[argName] as KclCommandValue)
|
||||
.valueCalculated
|
||||
),
|
||||
4
|
||||
)
|
||||
) : typeof argumentsToSubmit[argName] === 'object' ? (
|
||||
JSON.stringify(argumentsToSubmit[argName])
|
||||
) : (
|
||||
<em>{argumentsToSubmit[argName] as ReactNode}</em>
|
||||
)
|
||||
) : null}
|
||||
{showShortcuts && (
|
||||
<small className="absolute -top-[1px] right-full translate-x-1/2 px-0.5 rounded-sm bg-chalkboard-80 text-chalkboard-10 dark:bg-energy-10 dark:text-chalkboard-100">
|
||||
<span className="sr-only">Hotkey: </span>
|
||||
{i + 1}
|
||||
</small>
|
||||
)}
|
||||
{arg.inputType === 'kcl' &&
|
||||
!!argumentsToSubmit[argName] &&
|
||||
'variableName' in
|
||||
(argumentsToSubmit[argName] as KclCommandValue) && (
|
||||
<>
|
||||
<CustomIcon name="make-variable" className="w-4 h-4" />
|
||||
<Tooltip position="blockEnd">
|
||||
New variable:{' '}
|
||||
{
|
||||
(
|
||||
argumentsToSubmit[
|
||||
argName
|
||||
] as KclExpressionWithVariable
|
||||
).variableName
|
||||
}
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
{Object.entries(selectedCommand?.args || {})
|
||||
.filter(([_, argConfig]) =>
|
||||
typeof argConfig.required === 'function'
|
||||
? argConfig.required(commandBarState.context)
|
||||
: argConfig.required
|
||||
)
|
||||
)}
|
||||
.map(([argName, arg], i) => {
|
||||
const argValue =
|
||||
(typeof argumentsToSubmit[argName] === 'function'
|
||||
? (argumentsToSubmit[argName] as Function)(
|
||||
commandBarState.context
|
||||
)
|
||||
: argumentsToSubmit[argName]) || ''
|
||||
|
||||
return (
|
||||
<button
|
||||
disabled={!isReviewing && currentArgument?.name === argName}
|
||||
onClick={() => {
|
||||
commandBarSend({
|
||||
type: isReviewing
|
||||
? 'Edit argument'
|
||||
: 'Change current argument',
|
||||
data: { arg: { ...arg, name: argName } },
|
||||
})
|
||||
}}
|
||||
key={argName}
|
||||
className={`relative w-fit px-2 py-1 rounded-sm flex gap-2 items-center border ${
|
||||
argName === currentArgument?.name
|
||||
? 'disabled:bg-energy-10/50 dark:disabled:bg-energy-10/20 disabled:border-energy-10 dark:disabled:border-energy-10 disabled:text-chalkboard-100 dark:disabled:text-chalkboard-10'
|
||||
: 'bg-chalkboard-20/50 dark:bg-chalkboard-80/50 border-chalkboard-20 dark:border-chalkboard-80'
|
||||
}`}
|
||||
>
|
||||
<span className="capitalize">{argName}</span>
|
||||
{argValue ? (
|
||||
arg.inputType === 'selection' ? (
|
||||
getSelectionTypeDisplayText(argValue as Selections)
|
||||
) : arg.inputType === 'kcl' ? (
|
||||
roundOff(
|
||||
Number((argValue as KclCommandValue).valueCalculated),
|
||||
4
|
||||
)
|
||||
) : typeof argValue === 'object' ? (
|
||||
JSON.stringify(argValue)
|
||||
) : (
|
||||
<em>{argValue}</em>
|
||||
)
|
||||
) : null}
|
||||
{showShortcuts && (
|
||||
<small className="absolute -top-[1px] right-full translate-x-1/2 px-0.5 rounded-sm bg-chalkboard-80 text-chalkboard-10 dark:bg-energy-10 dark:text-chalkboard-100">
|
||||
<span className="sr-only">Hotkey: </span>
|
||||
{i + 1}
|
||||
</small>
|
||||
)}
|
||||
{arg.inputType === 'kcl' &&
|
||||
!!argValue &&
|
||||
'variableName' in (argValue as KclCommandValue) && (
|
||||
<>
|
||||
<CustomIcon
|
||||
name="make-variable"
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<Tooltip position="blockEnd">
|
||||
New variable:{' '}
|
||||
{
|
||||
(
|
||||
argumentsToSubmit[
|
||||
argName
|
||||
] as KclExpressionWithVariable
|
||||
).variableName
|
||||
}
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{isReviewing ? <ReviewingButton /> : <GatheringArgsButton />}
|
||||
</div>
|
||||
|
||||
@ -48,7 +48,8 @@ function CommandBarReview({ stepBack }: { stepBack: () => void }) {
|
||||
if (!arg) return
|
||||
})
|
||||
|
||||
function submitCommand() {
|
||||
function submitCommand(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
commandBarSend({
|
||||
type: 'Submit command',
|
||||
data: argumentsToSubmit,
|
||||
|
||||
@ -29,7 +29,7 @@ function CommandBarSelectionInput({
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
const { commandBarState, commandBarSend } = useCommandsContext()
|
||||
const [hasSubmitted, setHasSubmitted] = useState(false)
|
||||
const selection = useSelector(arg.actor, selectionSelector)
|
||||
const selection = useSelector(arg.machineActor, selectionSelector)
|
||||
const [selectionsByType, setSelectionsByType] = useState<
|
||||
'none' | ResolvedSelectionType[]
|
||||
>(
|
||||
|
||||
Reference in New Issue
Block a user