From 73958b53e8a3d573b5bb63efe4aee0371bb3c384 Mon Sep 17 00:00:00 2001
From: Florent BENOIT <fbenoit@redhat.com>
Date: Fri, 12 Jan 2024 11:27:21 -0500
Subject: [PATCH] feat: add a way to choose platform when building image
 (#5503)

* feat: add a way to choose platform when building image

fixes https://github.com/containers/podman-desktop/issues/5492
Signed-off-by: Florent Benoit <fbenoit@redhat.com>
---
 .../image/BuildImageFromContainerfile.spec.ts |   1 +
 .../image/BuildImageFromContainerfile.svelte  |   6 +
 .../BuildImageFromContainerfileCard.spec.ts   | 109 +++++++++++
 .../BuildImageFromContainerfileCard.svelte    | 113 +++++++++++
 .../BuildImageFromContainerfileCards.spec.ts  |  65 +++++++
 .../BuildImageFromContainerfileCards.svelte   | 182 ++++++++++++++++++
 6 files changed, 476 insertions(+)
 create mode 100644 packages/renderer/src/lib/image/BuildImageFromContainerfileCard.spec.ts
 create mode 100644 packages/renderer/src/lib/image/BuildImageFromContainerfileCard.svelte
 create mode 100644 packages/renderer/src/lib/image/BuildImageFromContainerfileCards.spec.ts
 create mode 100644 packages/renderer/src/lib/image/BuildImageFromContainerfileCards.svelte

diff --git a/packages/renderer/src/lib/image/BuildImageFromContainerfile.spec.ts b/packages/renderer/src/lib/image/BuildImageFromContainerfile.spec.ts
index 7758c19941578..c1722ca50dbf7 100644
--- a/packages/renderer/src/lib/image/BuildImageFromContainerfile.spec.ts
+++ b/packages/renderer/src/lib/image/BuildImageFromContainerfile.spec.ts
@@ -42,6 +42,7 @@ beforeAll(() => {
   });
   (window as any).openFileDialog = vi.fn().mockResolvedValue({ canceled: false, filePaths: ['Containerfile'] });
   (window as any).telemetryPage = vi.fn().mockResolvedValue(undefined);
+  (window as any).getOsArch = vi.fn();
 });
 
 // the build image page expects to have a valid provider connection, so let's mock one
diff --git a/packages/renderer/src/lib/image/BuildImageFromContainerfile.svelte b/packages/renderer/src/lib/image/BuildImageFromContainerfile.svelte
index a6c459ecce6f5..7a2e01bbc615c 100644
--- a/packages/renderer/src/lib/image/BuildImageFromContainerfile.svelte
+++ b/packages/renderer/src/lib/image/BuildImageFromContainerfile.svelte
@@ -22,6 +22,7 @@ import TerminalWindow from '../ui/TerminalWindow.svelte';
 import type { Terminal } from 'xterm';
 import Button from '../ui/Button.svelte';
 import { faCube } from '@fortawesome/free-solid-svg-icons';
+import BuildImageFromContainerfileCards from './BuildImageFromContainerfileCards.svelte';
 
 let buildFinished = false;
 let containerImageName = 'my-custom-image';
@@ -216,6 +217,11 @@ async function abortBuild() {
           {/if}
         </div>
 
+        <div hidden="{buildImageInfo?.buildRunning}">
+          <label for="containerBuildPlatform" class="block mb-2 text-sm font-bold text-gray-400">Platform</label>
+          <BuildImageFromContainerfileCards bind:platforms="{containerBuildPlatform}" />
+        </div>
+
         <div class="w-full flex flex-row space-x-4">
           {#if !buildImageInfo?.buildRunning}
             <Button
diff --git a/packages/renderer/src/lib/image/BuildImageFromContainerfileCard.spec.ts b/packages/renderer/src/lib/image/BuildImageFromContainerfileCard.spec.ts
new file mode 100644
index 0000000000000..e6fb89cad3087
--- /dev/null
+++ b/packages/renderer/src/lib/image/BuildImageFromContainerfileCard.spec.ts
@@ -0,0 +1,109 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import '@testing-library/jest-dom/vitest';
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import BuildImageFromContainerfileCard from '/@/lib/image/BuildImageFromContainerfileCard.svelte';
+
+test('check click', async () => {
+  const component = render(BuildImageFromContainerfileCard, {
+    title: 'ARM64',
+    badge: 'arm64',
+    isDefault: false,
+    checked: false,
+    value: 'arm64',
+    icon: undefined,
+  });
+
+  const events: { mode: string; value: string }[] = [];
+
+  component.component.$on('card', (e: any) => {
+    events.push(e.detail);
+  });
+
+  // expect checkbox is unchecked
+  expect(screen.getByRole('checkbox')).not.toBeChecked();
+
+  expect(events).toEqual([]);
+
+  // click on the card and expect to be checked
+  await userEvent.click(screen.getByRole('button'));
+
+  expect(events).toEqual([{ mode: 'add', value: 'arm64' }]);
+});
+
+test('Expect checked', async () => {
+  render(BuildImageFromContainerfileCard, {
+    title: 'ARM64',
+    badge: 'arm64',
+    isDefault: false,
+    checked: true,
+    value: 'arm64',
+    icon: undefined,
+  });
+
+  // expect checkbox is unchecked
+  expect(screen.getByRole('checkbox')).toBeChecked();
+});
+
+test('Expect default tooltip', async () => {
+  render(BuildImageFromContainerfileCard, {
+    title: 'ARM64',
+    badge: 'arm64',
+    isDefault: true,
+    checked: true,
+    value: 'arm64',
+    icon: undefined,
+  });
+
+  // check we have a div tooltip with aria-label tooltip
+  const tooltip = screen.getByText('Default platform of your computer');
+  expect(tooltip).toBeInTheDocument();
+});
+
+test('check we can add a new card', async () => {
+  const component = render(BuildImageFromContainerfileCard, {
+    title: '',
+    badge: '',
+    isDefault: false,
+    checked: false,
+    value: '',
+    icon: undefined,
+    additionalItem: true,
+  });
+
+  const addCards: { value: string }[] = [];
+
+  component.component.$on('addcard', (e: any) => {
+    addCards.push(e.detail);
+  });
+
+  expect(addCards).toEqual([]);
+
+  // click on the card and expect to be checked
+  await userEvent.click(screen.getByRole('button'));
+
+  // add new name on the input field
+  await userEvent.type(screen.getByRole('textbox'), 'my/platform{enter}');
+
+  expect(addCards).toEqual([{ value: 'my/platform' }]);
+});
diff --git a/packages/renderer/src/lib/image/BuildImageFromContainerfileCard.svelte b/packages/renderer/src/lib/image/BuildImageFromContainerfileCard.svelte
new file mode 100644
index 0000000000000..699ae51b31e2f
--- /dev/null
+++ b/packages/renderer/src/lib/image/BuildImageFromContainerfileCard.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+import { faSun } from '@fortawesome/free-solid-svg-icons';
+import Fa from 'svelte-fa';
+import Checkbox from '../ui/Checkbox.svelte';
+import Tooltip from '../ui/Tooltip.svelte';
+import { onMount, tick, createEventDispatcher } from 'svelte';
+
+export let title: string = '';
+export let badge: string = '';
+export let isDefault: boolean = false;
+export let checked: boolean = false;
+export let value: string = '';
+export let icon: any;
+let iconType: 'fontAwesome' | 'unknown' | undefined = undefined;
+
+export let additionalItem: boolean = false;
+let additionalValue: string = '';
+
+let displayValueFieldInput = false;
+
+let inputHtmlElement: HTMLInputElement | undefined;
+
+const dispatch = createEventDispatcher();
+
+function handleKeydownAdditionalField(event: KeyboardEvent) {
+  if (event.key === 'Enter') {
+    dispatch('addcard', { value: additionalValue });
+    displayValueFieldInput = false;
+  }
+}
+
+function handleClick() {
+  if (additionalItem) {
+    // display the new field input
+    displayValueFieldInput = true;
+    additionalValue = '';
+
+    // make focus on the input field
+    tick().then(() => {
+      if (inputHtmlElement) {
+        inputHtmlElement.focus();
+      }
+    });
+    return;
+  }
+
+  checked = !checked;
+
+  if (checked) {
+    dispatch('card', { mode: 'add', value: value });
+  } else {
+    dispatch('card', { mode: 'remove', value: value });
+  }
+}
+
+onMount(() => {
+  if (icon?.prefix?.startsWith('fa')) {
+    iconType = 'fontAwesome';
+  } else {
+    iconType = 'unknown';
+  }
+
+  if (isDefault) {
+    dispatch('card', { mode: 'add', value: value });
+  }
+});
+</script>
+
+<button
+  class="rounded-md p-2 min-w-32 w-32 cursor-pointer hover:bg-charcoal-700 {checked
+    ? 'border-dustypurple-700'
+    : 'border-gray-700'} border-2 flex flex-row"
+  aria-label="{value}"
+  on:click|preventDefault="{() => handleClick()}">
+  <div>
+    {#if !additionalItem}
+      <Checkbox bind:checked="{checked}" on:click="{() => handleClick()}" />
+    {:else}
+      <div>&nbsp;</div>
+    {/if}
+  </div>
+  <div class="mr-2 text-gray-700">
+    <div class="flex flex-row">
+      <div class="ml-1">
+        {#if iconType === 'fontAwesome'}
+          <Fa class="text-gray-700 cursor-pointer" icon="{icon}" size="24" />
+        {:else if iconType === 'unknown'}
+          <svelte:component this="{icon}" class="text-gray-700 cursor-pointer" size="24" />
+        {/if}
+      </div>
+
+      {#if isDefault}
+        <Tooltip tip="Default platform of your computer">
+          <Fa size="14" class="text-dustypurple-700 cursor-pointer" icon="{faSun}" />
+        </Tooltip>
+      {/if}
+    </div>
+    <div class="text-sm text-left truncate w-24">{title}</div>
+    <div class="flex">
+      {#if badge}
+        <div class="bg-dustypurple-700 text-white text-xs font-medium me-2 px-2.5 py-0.5 rounded">{badge}</div>
+      {/if}
+      {#if displayValueFieldInput}
+        <input
+          type="text"
+          class="w-24 outline-none text-sm bg-dustypurple-900 rounded-sm text-gray-700 placeholder-gray-700"
+          bind:value="{additionalValue}"
+          bind:this="{inputHtmlElement}"
+          on:keydown="{handleKeydownAdditionalField}" />
+      {/if}
+    </div>
+  </div>
+</button>
diff --git a/packages/renderer/src/lib/image/BuildImageFromContainerfileCards.spec.ts b/packages/renderer/src/lib/image/BuildImageFromContainerfileCards.spec.ts
new file mode 100644
index 0000000000000..7af4d92fcd2c6
--- /dev/null
+++ b/packages/renderer/src/lib/image/BuildImageFromContainerfileCards.spec.ts
@@ -0,0 +1,65 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import '@testing-library/jest-dom/vitest';
+import { test, expect, beforeAll, vi } from 'vitest';
+import { render } from '@testing-library/svelte';
+import BuildImageFromContainerfileCards from './BuildImageFromContainerfileCards.svelte';
+
+// fake the window.events object
+beforeAll(() => {
+  (window.events as unknown) = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    receive: (_channel: string, func: any) => {
+      func();
+    },
+  };
+  (window as any).getOsArch = vi.fn();
+});
+
+test('check default on arm64', async () => {
+  vi.mocked(window.getOsArch).mockResolvedValue('arm64');
+
+  const platforms = '';
+  const rendered = render(BuildImageFromContainerfileCards, {
+    platforms,
+  });
+
+  // wait a little with setTimeout
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  // check we have a platform
+  expect(rendered.component.$$.ctx[5]).toEqual('linux/arm64');
+});
+
+test('check default on amd64', async () => {
+  vi.mocked(window.getOsArch).mockResolvedValue('x64');
+
+  const platforms = '';
+  const rendered = render(BuildImageFromContainerfileCards, {
+    platforms,
+  });
+
+  // wait a little with setTimeout
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  // check we have a platform
+  expect(rendered.component.$$.ctx[5]).toEqual('linux/amd64');
+});
diff --git a/packages/renderer/src/lib/image/BuildImageFromContainerfileCards.svelte b/packages/renderer/src/lib/image/BuildImageFromContainerfileCards.svelte
new file mode 100644
index 0000000000000..af0e65f783e6c
--- /dev/null
+++ b/packages/renderer/src/lib/image/BuildImageFromContainerfileCards.svelte
@@ -0,0 +1,182 @@
+<script lang="ts">
+import { faChevronCircleDown, faChevronRight, faLayerGroup, faPlusCircle } from '@fortawesome/free-solid-svg-icons';
+import { faLinux } from '@fortawesome/free-brands-svg-icons';
+import Fa from 'svelte-fa';
+import BuildImageFromContainerfileCard from './BuildImageFromContainerfileCard.svelte';
+import WebAssemblyIcon from '../images/WebAssemblyIcon.svelte';
+import { onMount } from 'svelte';
+
+export let platforms: string = '';
+let platformsArray: string[] = [];
+
+interface CardInfo {
+  title: string;
+  badge: string;
+  isDefault: boolean;
+  checked: boolean;
+  value: string;
+  icon: unknown;
+}
+
+const DEFAULT_CARDS: CardInfo[] = [
+  {
+    title: 'Linux',
+    badge: 'AMD64',
+    isDefault: false,
+    checked: false,
+    value: 'linux/amd64',
+    icon: faLinux,
+  },
+  {
+    title: 'Linux',
+    badge: 'ARM64',
+    isDefault: false,
+    checked: false,
+    value: 'linux/arm64',
+    icon: faLinux,
+  },
+];
+
+const ADVANCED_CARDS: CardInfo[] = [
+  {
+    title: 'Linux',
+    badge: 'PPC64LE',
+    isDefault: false,
+    checked: false,
+    value: 'linux/ppc64le',
+    icon: faLinux,
+  },
+  {
+    title: 'Linux',
+    badge: 'S390X',
+    isDefault: false,
+    checked: false,
+    value: 'linux/s390x',
+    icon: faLinux,
+  },
+  {
+    title: 'WebAssembly',
+    badge: 'WASI',
+    isDefault: false,
+    checked: false,
+    value: 'wasi/wasm',
+    icon: WebAssemblyIcon,
+  },
+];
+
+let showMoreOptions = false;
+
+let sortedCards: CardInfo[] = [];
+let advancedCards: CardInfo[] = [];
+
+onMount(async () => {
+  // need to sort the default cards by having the first card using the same arch than Podman Desktop
+
+  // get current arch
+  let arch = await window.getOsArch();
+  if (arch === 'x64') {
+    arch = 'amd64';
+  }
+
+  // sort the default cards using current arch as first
+  DEFAULT_CARDS.sort((a, b) => {
+    if (a.value.includes(arch)) {
+      return -1;
+    }
+    if (b.value.includes(arch)) {
+      return 1;
+    }
+    return 0;
+  });
+  sortedCards = DEFAULT_CARDS;
+
+  // first item should be the default
+  sortedCards[0].isDefault = true;
+  sortedCards[0].checked = true;
+
+  advancedCards = ADVANCED_CARDS;
+});
+
+function handleCard(card: { detail: { mode: 'add' | 'remove'; value: string } }) {
+  if (card.detail.mode === 'add') {
+    // add card.detail.value from the array platformsArray
+    platformsArray.push(card.detail.value);
+  } else if (card.detail.mode === 'remove') {
+    // remove card.detail.value from the array platformsArray
+    platformsArray = platformsArray.filter(item => item !== card.detail.value);
+  }
+
+  // platforms should be a comma separated string
+  platforms = platformsArray.join(',');
+}
+
+function addCard(item: { value: string }) {
+  // create a new card and make it checked
+  const card = {
+    title: item.value,
+    badge: 'custom',
+    isDefault: false,
+    checked: true,
+    value: item.value,
+    icon: faLayerGroup,
+  };
+  advancedCards.push(card);
+  advancedCards = advancedCards;
+}
+</script>
+
+<div class="flex flex-col" role="region" aria-label="Build Platform Options">
+  <div class="flex flex-row gap-x-4 gap-y-4 flex-wrap">
+    {#each sortedCards as card}
+      <BuildImageFromContainerfileCard
+        title="{card.title}"
+        isDefault="{card.isDefault}"
+        checked="{card.checked}"
+        badge="{card.badge}"
+        value="{card.value}"
+        icon="{card.icon}"
+        on:card="{item => handleCard(item)}" />
+    {/each}
+  </div>
+
+  {#if !showMoreOptions}
+    <button
+      aria-label="Show more options"
+      class="pt-2 flex items-center text-sm cursor-pointer text-gray-700"
+      on:click="{() => (showMoreOptions = !showMoreOptions)}">
+      <Fa icon="{faChevronRight}" class=" mr-2 " />
+      More Options...
+    </button>
+  {:else}
+    <div class="flex flex-col pt-4">
+      <div class="flex flex-row gap-x-4 flex-wrap gap-y-4">
+        {#each advancedCards as card}
+          <BuildImageFromContainerfileCard
+            title="{card.title}"
+            isDefault="{card.isDefault}"
+            checked="{card.checked}"
+            badge="{card.badge}"
+            value="{card.value}"
+            icon="{card.icon}"
+            on:card="{item => handleCard(item)}" />
+        {/each}
+        <BuildImageFromContainerfileCard
+          title="New platform"
+          isDefault="{false}"
+          checked="{false}"
+          badge=""
+          value=""
+          icon="{faPlusCircle}"
+          additionalItem="{true}"
+          on:addcard="{item => addCard(item.detail)}" />
+      </div>
+    </div>
+    <button
+      aria-label="Show less options"
+      class="pt-2 flex items-center text-sm cursor-pointer text-gray-700"
+      on:click="{() => (showMoreOptions = !showMoreOptions)}">
+      <Fa icon="{faChevronCircleDown}" class=" mr-2 transform rotate-90" />
+      Less Options...
+    </button>
+  {/if}
+</div>