feat: add build arguments to build page

[cdrage]

feat: add build arguments to build page

What does this PR do?

Build arguments is already built-in to podman desktop API.

This adds to the UI the ability to pass in build arguments.

Screenshot / video of UI

Screen.Recording.2024-05-17.at.4.15.22.PM.mov

What issues does this PR fix or reference?

Closes #7250

How to test this PR?

• Tests are covering the bug fix or the new feature

1. Build a Containerfile with ARG
2. See it fail (normal)
3. In build args, add your arg (ex. foo=bar)
4. It will now build and pass.

[cdrage]

@odockal Need your help on the failure if that's okay! I've been trying locally to get it "not strict" button selection?

⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯

 FAIL  tests/playwright/src/specs/image-smoke.spec.ts > Image workflow verification > Build image
Error: locator._expect: Error: strict mode violation: getByRole('button', { name: 'Build' }) resolved to 3 elements:
    1) <button disabled type="button" aria-label="Delete build …>…</button> aka getByLabel('Delete build argument')
    2) <button type="button" title="Add build argument" class="…>…</button> aka getByRole('button', { name: 'Add build argument' })
    3) <button type="button" class="relative px-4 py-[5px] box-…>…</button> aka getByRole('button', { name: 'Build', exact: true })

Call log:
  - locator._expect with timeout 5000ms
  - waiting for getByRole('button', { name: 'Build' })

 ❯ BuildImagePage.buildImage tests/playwright/src/model/pages/build-image-page.ts:88:40
     86|     }
     87| 
     88|     await playExpect(this.buildButton).toBeEnabled();
       |                                        ^
     89|     await this.buildButton.click();
     90|     await playExpect(this.doneButton).toBeEnabled({ timeout: 120000 });

[odockal]

@cdrage You need to add strict check into the locator since you have added new buttons that introduce an ambiguity.

podman-desktop/tests/playwright/src/model/pages/build-image-page.ts

Line 45 in eed4aed

this.buildButton = page.getByRole('button', { name: 'Build' });

Just add strict: true: this.buildButton = page.getByRole('button', { name: 'Build', strict: true });

[cdrage]

@cdrage You need to add strict check into the locator since you have added new buttons that introduce an ambiguity.

podman-desktop/tests/playwright/src/model/pages/build-image-page.ts

Line 45 in eed4aed

this.buildButton = page.getByRole('button', { name: 'Build' });

Just add strict: true: this.buildButton = page.getByRole('button', { name: 'Build', strict: true });

Updated!

PR is ready for review 💯 @axel7083 @benoitf @dgolovin

[odockal]

Note: correct is { name: 'Build', exact: true }.

[benoitf]

I don't know if long term maybe we should have an 'advanced section' or tab to separate actions that are optionals

Also I think we discussed to remember all the build options over run (to run again the same build later)

(not preventing the merge of this PR, just highlighting some previous discussions)

[cdrage]

I don't know if long term maybe we should have an 'advanced section' or tab to separate actions that are optionals

Also I think we discussed to remember all the build options over run (to run again the same build later)

(not preventing the merge of this PR, just highlighting some previous discussions)

100% agree.

I've created issue #7254 which is about automatically filling in those sections automatically.

I have opened up issue: #7308 about adding an advanced drop-down section / tab.