ContainerProviderConnectionSelect.svelte

<script lang="ts">
import Select from './Select.svelte';
import type { ProviderContainerConnectionDetailedInfo } from '@podman-desktop/extension-hummingbird-core-api';

interface Props {
  value: ProviderContainerConnectionDetailedInfo | undefined;
  onChange?: (value: ProviderContainerConnectionDetailedInfo | undefined) => void;
  containerProviderConnections: ProviderContainerConnectionDetailedInfo[];
  disabled?: boolean;
  clearable?: boolean;
}

let { value = $bindable(), clearable = true, containerProviderConnections, onChange, disabled }: Props = $props();

/**
 * Handy mechanism to provide the mandatory property `label` and `value` to the Select component
 */
let selected: (ProviderContainerConnectionDetailedInfo & { label: string; value: string }) | undefined = $derived.by(
  () => {
    if (value) {
      return { ...value, label: value.name, value: key(value) };
    }
  },
);

function key(connection: ProviderContainerConnectionDetailedInfo): string {
  return `${connection.providerId}:${connection.name}`;
}

function handleOnChange(nValue: ProviderContainerConnectionDetailedInfo | undefined): void {
  value = nValue;
  onChange?.(value);
}

function getProviderStatusColor(item: ProviderContainerConnectionDetailedInfo): string {
  switch (item.status) {
    case 'starting':
    case 'stopping':
      return 'bg-[var(--pd-status-degraded)]';
    case 'started':
      return 'bg-[var(--pd-status-running)]';
    default:
      return 'bg-[var(--pd-status-stopped)]';
  }
}
</script>

<Select
  label="Select Container Engine"
  name="select-container-engine"
  disabled={disabled}
  value={selected}
  onchange={handleOnChange}
  clearable={clearable}
  placeholder="Select container provider to use"
  items={containerProviderConnections.map(containerProviderConnection => ({
    ...containerProviderConnection,
    value: key(containerProviderConnection),
    label: containerProviderConnection.name,
  }))}>
  <div slot="item" let:item>
    <div class="flex items-center w-full">
      <div class="w-2 h-2 min-w-2 me-2 rounded-full {getProviderStatusColor(item)}"></div>

      <div class="flex-1 min-w-0">
        <span class="block truncate">
          {item.name}
        </span>
      </div>

      {#if item.vmType}
        <div class="flex-shrink-0 ms-2">
          ({item.vmType})
        </div>
      {/if}
    </div>
  </div>
</Select>