feat: add chown (linux only)

### What does this PR do?

* Adds chown to the advanced settings page for build
* Only applicable to Linux (see:
  osbuild/bootc-image-builder#576)

### 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). -->

Closes #472

### How to test this PR?

<!-- Please explain steps to reproduce -->

1. Be on Linux
2. Build an image
3. See that it is chown (ex. ls -l /outputdir)

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

Author: cdrage

packages/backend/src/build-disk-image.spec.ts

@@ -431,3 +431,28 @@ test('test build config json passed in', async () => {
     expect(options.HostConfig.Binds[2]).toEqual(build.buildConfigFilePath + ':/config.json:ro');
   }
 });
+
+test('test chown works when passed into createBuilderImageOptions', async () => {
+  const name = 'test123-bootc-image-builder';
+  const build = {
+    image: 'test-image',
+    tag: 'latest',
+    type: ['raw'],
+    arch: 'amd64',
+    folder: '/tmp/foo/bar/qemutest4',
+    chown: '1000:1000',
+  } as BootcBuildInfo;
+
+  const options = createBuilderImageOptions(name, build);
+
+  expect(options).toBeDefined();
+  expect(options.HostConfig).toBeDefined();
+  expect(options.HostConfig?.Binds).toBeDefined();
+  if (options.HostConfig?.Binds) {
+    expect(options.HostConfig.Binds.length).toEqual(2);
+    expect(options.HostConfig.Binds[0]).toEqual(build.folder + ':/output/');
+    expect(options.HostConfig.Binds[1]).toEqual('/var/lib/containers/storage:/var/lib/containers/storage');
+  }
+  expect(options.Cmd).toContain('--chown');
+  expect(options.Cmd).toContain(build.chown);
+});

packages/backend/src/build-disk-image.ts

@@ -456,6 +456,11 @@ export function createBuilderImageOptions(
     }
   }
 
+  // If there is the chown in build, add the --chown flag to the command with the value in chown
+  if (build.chown) {
+    cmd.push('--chown', build.chown);
+  }
+
   return options;
 }
 

packages/frontend/src/Build.spec.ts

@@ -728,4 +728,7 @@ test('collapse and uncollapse of advanced options', async () => {
   // expect build config to be shown
   const buildConfig2 = screen.queryByRole('label', { name: 'Build config' });
   expect(buildConfig2).toBeDefined();
+  // Expect chown to be shown
+  const chown = screen.queryByRole('label', { name: 'Change file owner and group' });
+  expect(chown).toBeDefined();
 });

packages/frontend/src/Build.svelte

@@ -34,6 +34,7 @@ let availableArchitectures: string[] = [];
 // Build options
 let buildFolder: string;
 let buildConfigFile: string;
+let buildChown: string;
 let buildType: BuildType[] = [];
 let buildArch: string | undefined;
 let buildFilesystem: string = ''; // Default filesystem auto-selected / empty
@@ -193,6 +194,7 @@ async function buildBootcImage() {
     type: buildType,
     arch: buildArch,
     filesystem: buildFilesystem,
+    chown: buildChown,
     awsAmiName: awsAmiName,
     awsBucket: awsBucket,
     awsRegion: awsRegion,
@@ -690,6 +692,25 @@ export function goToHomePage(): void {
                   </p>
                 </div>
 
+                <!-- chown, this option is only available for Linux users -->
+                {#if isLinux}
+                  <div class="mb-2">
+                    <label for="chown" class="block mb-2 font-semibold">Change file owner and group</label>
+                    <div class="flex flex-row space-x-3">
+                      <Input
+                        name="chown"
+                        id="chown"
+                        bind:value={buildChown}
+                        placeholder="GID and UID parameters (ex. 1000:1000)"
+                        class="w-full"
+                        aria-label="chown-select" />
+                    </div>
+                    <p class="text-sm text-[var(--pd-content-text)] pt-2">
+                      This option allows you to change the owner and group of the files in the output directory.
+                    </p>
+                  </div>
+                {/if}
+
                 <!-- AWS -->
                 <div>
                   <span class="font-semibold block">Upload image to AWS</span>

packages/shared/src/models/bootc.ts

@@ -26,6 +26,7 @@ export interface BootcBuildInfo {
   engineId: string;
   type: BuildType[];
   folder: string;
+  chown?: string;
   buildConfigFilePath?: string;
   filesystem?: string;
   arch?: string;