chore: fix titles of build images (podman-desktop#7251)

chore: fix titles of build image$a

### What does this PR do?

Other sections of podman desktop uses lowercase for the titles, not
capitalized.

Changes the UI to use lowercase for the titles.

### Screenshot / video of UI

<!-- If this PR is changing UI, please include
screenshots or screencasts showing the difference -->

### What issues does this PR fix or reference?

<!-- Include any related issues from Podman Desktop
repository (or from another issue tracker). -->

N/A

### How to test this PR?

<!-- Please explain steps to verify the functionality,
do not forget to provide unit/component tests -->

N/A, it's a small change

Signed-off-by: Charlie Drage <[email protected]>

packages/renderer/src/lib/image/BuildImageFromContainerfile.spec.ts

@@ -124,11 +124,11 @@ test('Expect Build button is enabled', async () => {
   setup();
   render(BuildImageFromContainerfile, {});
 
-  const containerFilePath = screen.getByRole('textbox', { name: 'Containerfile Path' });
+  const containerFilePath = screen.getByRole('textbox', { name: 'Containerfile path' });
   expect(containerFilePath).toBeInTheDocument();
   await userEvent.type(containerFilePath, '/somepath/containerfile');
 
-  const buildFolder = screen.getByRole('textbox', { name: 'Build Context Directory' });
+  const buildFolder = screen.getByRole('textbox', { name: 'Build context directory' });
   expect(buildFolder).toBeInTheDocument();
   await userEvent.type(buildFolder, '/somepath');
 
@@ -141,11 +141,11 @@ test('Expect Done button is enabled once build is done', async () => {
   setup();
   render(BuildImageFromContainerfile, {});
 
-  const containerFilePath = screen.getByRole('textbox', { name: 'Containerfile Path' });
+  const containerFilePath = screen.getByRole('textbox', { name: 'Containerfile path' });
   expect(containerFilePath).toBeInTheDocument();
   await userEvent.type(containerFilePath, '/somepath/containerfile');
 
-  const buildFolder = screen.getByRole('textbox', { name: 'Build Context Directory' });
+  const buildFolder = screen.getByRole('textbox', { name: 'Build context directory' });
   expect(buildFolder).toBeInTheDocument();
   await userEvent.type(buildFolder, '/somepath');
 
@@ -165,16 +165,16 @@ test('Select multiple platforms and expect pressing Build will do two buildImage
   setup();
   await waitRender();
 
-  const containerFilePath = screen.getByRole('textbox', { name: 'Containerfile Path' });
+  const containerFilePath = screen.getByRole('textbox', { name: 'Containerfile path' });
   expect(containerFilePath).toBeInTheDocument();
   await userEvent.type(containerFilePath, '/somepath/containerfile');
 
-  const buildFolder = screen.getByRole('textbox', { name: 'Build Context Directory' });
+  const buildFolder = screen.getByRole('textbox', { name: 'Build context directory' });
   expect(buildFolder).toBeInTheDocument();
   await userEvent.type(buildFolder, '/somepath');
 
   // Type in the image name a test value 'foobar'
-  const containerImageName = screen.getByRole('textbox', { name: 'Image Name' });
+  const containerImageName = screen.getByRole('textbox', { name: 'Image name' });
   expect(containerImageName).toBeInTheDocument();
   await userEvent.type(containerImageName, 'foobar');
 
@@ -246,15 +246,15 @@ test('Selecting one platform only calls buildImage once with the selected platfo
   setup();
   await waitRender();
 
-  const containerFilePath = screen.getByRole('textbox', { name: 'Containerfile Path' });
+  const containerFilePath = screen.getByRole('textbox', { name: 'Containerfile path' });
   expect(containerFilePath).toBeInTheDocument();
   await userEvent.type(containerFilePath, '/somepath/containerfile');
 
-  const buildFolder = screen.getByRole('textbox', { name: 'Build Context Directory' });
+  const buildFolder = screen.getByRole('textbox', { name: 'Build context directory' });
   expect(buildFolder).toBeInTheDocument();
   await userEvent.type(buildFolder, '/somepath');
 
-  const imageName = screen.getByRole('textbox', { name: 'Image Name' });
+  const imageName = screen.getByRole('textbox', { name: 'Image name' });
   expect(imageName).toBeInTheDocument();
   await userEvent.type(imageName, 'foobar');
 
@@ -303,7 +303,7 @@ test('Expect no value for containerImageName input field (no my-custom-image val
   setup();
   render(BuildImageFromContainerfile);
 
-  const containerImageName = screen.getByRole('textbox', { name: 'Image Name' });
+  const containerImageName = screen.getByRole('textbox', { name: 'Image name' });
   expect(containerImageName).toBeInTheDocument();
   expect(containerImageName).toHaveValue('');
   expect(containerImageName).toHaveAttribute('placeholder', 'Image name (e.g. quay.io/namespace/my-custom-image)');
@@ -338,11 +338,11 @@ test('Expect recommended extension in case of build error', async () => {
 
   render(BuildImageFromContainerfile, {});
 
-  const containerFilePath = screen.getByRole('textbox', { name: 'Containerfile Path' });
+  const containerFilePath = screen.getByRole('textbox', { name: 'Containerfile path' });
   expect(containerFilePath).toBeInTheDocument();
   await userEvent.type(containerFilePath, '/somepath/containerfile');
 
-  const buildFolder = screen.getByRole('textbox', { name: 'Build Context Directory' });
+  const buildFolder = screen.getByRole('textbox', { name: 'Build context directory' });
   expect(buildFolder).toBeInTheDocument();
   await userEvent.type(buildFolder, '/somepath');
 

packages/renderer/src/lib/image/BuildImageFromContainerfile.svelte

@@ -275,7 +275,7 @@ async function abortBuild() {
     {:else}
       <div class="bg-charcoal-900 pt-5 space-y-6 px-8 sm:pb-6 xl:pb-8 rounded-lg">
         <div hidden="{buildImageInfo?.buildRunning}">
-          <label for="containerFilePath" class="block mb-2 text-sm font-bold text-gray-400">Containerfile Path</label>
+          <label for="containerFilePath" class="block mb-2 text-sm font-bold text-gray-400">Containerfile path</label>
           <div class="flex flex-row space-x-3">
             <Input
               name="containerFilePath"
@@ -290,21 +290,21 @@ async function abortBuild() {
 
         <div hidden="{buildImageInfo?.buildRunning}">
           <label for="containerBuildContextDirectory" class="block mb-2 text-sm font-bold text-gray-400"
-            >Build Context Directory</label>
+            >Build context directory</label>
           <div class="flex flex-row space-x-3">
             <Input
               name="containerBuildContextDirectory"
               id="containerBuildContextDirectory"
               bind:value="{containerBuildContextDirectory}"
-              placeholder="Folder to build in"
+              placeholder="Directory to build in"
               class="w-full"
               required />
             <Button on:click="{() => getContainerBuildContextDirectory()}">Browse...</Button>
           </div>
         </div>
 
         <div hidden="{buildImageInfo?.buildRunning}">
-          <label for="containerImageName" class="block mb-2 text-sm font-bold text-gray-400">Image Name</label>
+          <label for="containerImageName" class="block mb-2 text-sm font-bold text-gray-400">Image name</label>
           <Input
             bind:value="{containerImageName}"
             name="containerImageName"

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

@@ -40,7 +40,7 @@ export class BuildImagePage extends BasePage {
     super(page);
     this.heading = page.getByRole('heading', { name: 'Build Image from Containerfile' });
     this.containerFilePathInput = page.getByPlaceholder('Containerfile to build');
-    this.buildContextDirectoryInput = page.getByPlaceholder('Folder to build in');
+    this.buildContextDirectoryInput = page.getByPlaceholder('Directory to build in');
     this.imageNameInput = page.getByPlaceholder('my-custom-image');
     this.buildButton = page.getByRole('button', { name: 'Build' });
     this.doneButton = page.getByRole('button', { name: 'Done' });