diff --git a/src/components/CommandBar/CommandBarHeader.tsx b/src/components/CommandBar/CommandBarHeader.tsx index 5642be7f2..3c64aeacd 100644 --- a/src/components/CommandBar/CommandBarHeader.tsx +++ b/src/components/CommandBar/CommandBarHeader.tsx @@ -76,6 +76,20 @@ function CommandBarHeader({ children }: React.PropsWithChildren) { [argumentsToSubmit, selectedCommand] ) + const availableOptionalArgs = Object.entries(nonHiddenArgs || {}).filter( + ([argName, arg]) => { + const argValue = + (typeof argumentsToSubmit[argName] === 'function' + ? argumentsToSubmit[argName](commandBarState.context) + : argumentsToSubmit[argName]) || '' + const isRequired = + typeof arg.required === 'function' + ? arg.required(commandBarState.context) + : arg.required + + return !(isRequired || argValue) + } + ) return ( selectedCommand && argumentsToSubmit && ( @@ -247,47 +261,32 @@ function CommandBarHeader({ children }: React.PropsWithChildren) { )}
- {isReviewing && ( + {isReviewing && availableOptionalArgs.length > 0 && (
-

Optional arguments

+

Optional arguments

- {Object.entries(nonHiddenArgs || {}).flatMap( - ([argName, arg], i) => { - const argValue = - (typeof argumentsToSubmit[argName] === 'function' - ? argumentsToSubmit[argName](commandBarState.context) - : argumentsToSubmit[argName]) || '' - const isRequired = - typeof arg.required === 'function' - ? arg.required(commandBarState.context) - : arg.required - - if (isRequired || argValue) { - return [] - } - - return ( - - ) - } - )} + {availableOptionalArgs.map(([argName, arg]) => { + return ( + + ) + })}