Add Clear button for non required args (#7775)

* Add Clear button for non required args
Fixes #7772

* Add pw test steps for clear button

Author: pierremtb

e2e/playwright/command-bar-tests.spec.ts

@@ -250,6 +250,8 @@ test.describe('Command bar tests', () => {
     page,
     homePage,
     cmdBar,
+    scene,
+    editor,
   }) => {
     await page.addInitScript(async () => {
       localStorage.setItem(
@@ -265,20 +267,9 @@ test.describe('Command bar tests', () => {
       )
     })
 
-    const u = await getUtils(page)
     await page.setBodyDimensions({ width: 1200, height: 500 })
-
     await homePage.goToModelingScene()
-
-    // Make sure the stream is up
-    await u.openDebugPanel()
-    await u.expectCmdLog('[data-message-type="execution-done"]')
-
-    await expect(
-      page.getByRole('button', { name: 'Start Sketch' })
-    ).not.toBeDisabled()
-    await u.clearCommandLogs()
-    await page.getByRole('button', { name: 'Extrude' }).isEnabled()
+    await scene.settled(cmdBar)
 
     let cmdSearchBar = page.getByPlaceholder('Search commands')
     await page.keyboard.press('ControlOrMeta+K')
@@ -288,44 +279,121 @@ test.describe('Command bar tests', () => {
     await cmdBar.cmdOptions.getByText('Extrude').click()
 
     // Assert that we're on the selection step
-    await expect(page.getByRole('button', { name: 'Profiles' })).toBeDisabled()
+    await cmdBar.expectState({
+      stage: 'arguments',
+      commandName: 'Extrude',
+      currentArgKey: 'sketches',
+      currentArgValue: '',
+      headerArguments: {
+        Profiles: '',
+        Length: '',
+      },
+      highlightedHeaderArg: 'Profiles',
+    })
     // Select a face
-    await page.mouse.move(700, 200)
-    await page.mouse.click(700, 200)
+    await editor.selectText('startProfile(at = [-6.95, 10.98])')
     await cmdBar.progressCmdBar()
 
     // Assert that we're on the distance step
-    await expect(
-      page.getByRole('button', { name: 'length', exact: false })
-    ).toBeDisabled()
+    await cmdBar.expectState({
+      stage: 'arguments',
+      commandName: 'Extrude',
+      currentArgKey: 'length',
+      currentArgValue: '5',
+      headerArguments: {
+        Profiles: '1 profile',
+        Length: '',
+      },
+      highlightedHeaderArg: 'length',
+    })
 
     // Assert that the an alternative variable name is chosen,
     // since the default variable name is already in use (distance)
     await cmdBar.variableCheckbox.click()
     await expect(page.getByPlaceholder('Variable name')).toHaveValue(
       'length001'
     )
-
-    const continueButton = page.getByRole('button', { name: 'Continue' })
-    const submitButton = page.getByTestId('command-bar-submit')
-    await continueButton.click()
+    await cmdBar.progressCmdBar()
 
     // Review step and argument hotkeys
-    await expect(submitButton).toBeEnabled()
-    await expect(submitButton).toBeFocused()
-    await submitButton.press('Shift+Backspace')
+    await cmdBar.expectState({
+      stage: 'review',
+      commandName: 'Extrude',
+      headerArguments: {
+        Profiles: '1 profile',
+        Length: '5',
+      },
+    })
+    await page.keyboard.press('Shift+Backspace')
 
     // Assert we're back on the distance step
     await expect(
       page.getByRole('button', { name: 'length', exact: false })
     ).toBeDisabled()
 
-    await continueButton.click()
-    await submitButton.click()
+    await cmdBar.progressCmdBar()
 
-    await u.waitForCmdReceive('extrude')
+    // Add optional arg
+    await cmdBar.expectState({
+      stage: 'review',
+      commandName: 'Extrude',
+      headerArguments: {
+        Profiles: '1 profile',
+        Length: '5',
+      },
+    })
+    await cmdBar.clickOptionalArgument('bidirectionalLength')
+    await cmdBar.expectState({
+      stage: 'arguments',
+      commandName: 'Extrude',
+      currentArgKey: 'bidirectionalLength',
+      currentArgValue: '',
+      headerArguments: {
+        Profiles: '1 profile',
+        Length: '5',
+        BidirectionalLength: '',
+      },
+      highlightedHeaderArg: 'bidirectionalLength',
+    })
+    await page.keyboard.type('10') // Set bidirectional length
+    await cmdBar.progressCmdBar()
+    await cmdBar.expectState({
+      stage: 'review',
+      commandName: 'Extrude',
+      headerArguments: {
+        Profiles: '1 profile',
+        Length: '5',
+        BidirectionalLength: '10',
+      },
+    })
 
-    await expect(page.locator('.cm-content')).toContainText(
+    // Clear optional arg
+    await page.getByRole('button', { name: 'BidirectionalLength' }).click()
+    await cmdBar.expectState({
+      stage: 'arguments',
+      commandName: 'Extrude',
+      currentArgKey: 'bidirectionalLength',
+      currentArgValue: '10',
+      headerArguments: {
+        Profiles: '1 profile',
+        Length: '5',
+        BidirectionalLength: '10',
+      },
+      highlightedHeaderArg: 'bidirectionalLength',
+    })
+    await cmdBar.clearNonRequiredButton.click()
+    await cmdBar.expectState({
+      stage: 'review',
+      commandName: 'Extrude',
+      headerArguments: {
+        Profiles: '1 profile',
+        Length: '5',
+      },
+    })
+
+    await cmdBar.progressCmdBar()
+    await scene.settled(cmdBar)
+    await editor.expectEditor.toContain(
       'extrude001 = extrude(sketch001, length = length001)'
     )
   })
@@ -659,6 +727,8 @@ theta = 45deg
     )
   })
 
+  // TODO: add pw test for clear non-required arg button
+
   test('Command palette can be opened via query parameter', async ({
     page,
     homePage,

e2e/playwright/fixtures/cmdBarFixture.ts

@@ -160,6 +160,10 @@ export class CmdBarFixture {
     await expect(this.cmdBarElement).not.toBeVisible()
   }
 
+  get clearNonRequiredButton() {
+    return this.page.getByTestId('command-bar-clear-non-required-button')
+  }
+
   get cmdSearchInput() {
     return this.page.getByTestId('cmd-bar-search')
   }

src/components/CommandBar/CommandBarArgument.tsx

@@ -27,9 +27,20 @@ function CommandBarArgument({ stepBack }: { stepBack: () => void }) {
     })
   }
 
+  function clear() {
+    if (!currentArgument) return
+
+    commandBarActor.send({
+      type: 'Submit argument',
+      data: {
+        [currentArgument.name]: undefined,
+      },
+    })
+  }
+
   return (
     currentArgument && (
-      <CommandBarHeaderFooter stepBack={stepBack}>
+      <CommandBarHeaderFooter stepBack={stepBack} clear={clear}>
         <ArgumentInput
           arg={currentArgument}
           stepBack={stepBack}

src/components/CommandBar/CommandBarHeaderFooter.tsx

@@ -18,7 +18,11 @@ import { commandBarActor, useCommandBarState } from '@src/lib/singletons'
 function CommandBarHeaderFooter({
   children,
   stepBack,
-}: React.PropsWithChildren<object> & { stepBack: () => void }) {
+  clear,
+}: React.PropsWithChildren<object> & {
+  stepBack: () => void
+  clear?: () => void
+}) {
   const commandBarState = useCommandBarState()
   const {
     context: { selectedCommand, currentArgument, argumentsToSubmit },
@@ -38,6 +42,10 @@ function CommandBarHeaderFooter({
   }, [selectedCommand])
   const isReviewing = commandBarState.matches('Review')
   const [showShortcuts, setShowShortcuts] = useState(false)
+  const isCurrentArgRequired =
+    typeof currentArgument?.required === 'function'
+      ? currentArgument.required(commandBarState.context)
+      : currentArgument?.required
 
   useHotkeys(
     'alt',
@@ -221,8 +229,10 @@ function CommandBarHeaderFooter({
         </div>
         <CommandBarDivider />
         {children}
-        <div className="px-4 pb-2 flex justify-between items-center gap-2">
+        <div className="px-4 pb-2 flex items-center gap-2">
           <StepBackButton stepBack={stepBack} />
+          {!isCurrentArgRequired && clear && <ClearButton clear={clear} />}
+          <div className="flex-grow"></div>
           {isReviewing ? (
             <ReviewingButton
               bgClassName={
@@ -334,4 +344,30 @@ function StepBackButton({
   )
 }
 
+function ClearButton({
+  bgClassName,
+  iconClassName,
+  clear,
+}: ButtonProps & { clear: () => void }) {
+  return (
+    <ActionButton
+      Element="button"
+      type="button"
+      form="arg-form"
+      className={`w-fit !p-0 rounded-sm hover:brightness-110 hover:shadow focus:outline-current bg-chalkboard-20/50 dark:bg-chalkboard-80/50 border-chalkboard-20 dark:border-chalkboard-80 ${bgClassName}`}
+      tabIndex={0}
+      data-testid="command-bar-clear-non-required-button"
+      iconStart={{
+        icon: 'trash',
+        bgClassName: `p-1 rounded-sm bg-chalkboard-20/50 dark:bg-chalkboard-80/50 ${bgClassName}`,
+        iconClassName: `${iconClassName}`,
+      }}
+      onClick={clear}
+    >
+      <span className={`pr-2 ${iconClassName}`}>Clear</span>
+      <Tooltip position="bottom">Clear</Tooltip>
+    </ActionButton>
+  )
+}
+
 export default CommandBarHeaderFooter