feat(podman): support add podman envs in the wizard [r8s-20] (#12056)

app/react/docker/containers/CreateView/NetworkTab/NetworkTab.tsx

@@ -1,5 +1,8 @@
 import { FormikErrors } from 'formik';
 
+import { useIsPodman } from '@/react/portainer/environments/queries/useIsPodman';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
 import { FormControl } from '@@/form-components/FormControl';
 import { Input } from '@@/form-components/Input';
 
@@ -19,12 +22,15 @@ export function NetworkTab({
   setFieldValue: (field: string, value: unknown) => void;
   errors?: FormikErrors<Values>;
 }) {
+  const envId = useEnvironmentId();
+  const isPodman = useIsPodman(envId);
+  const additionalOptions = getAdditionalOptions(isPodman);
   return (
     <div className="mt-3">
       <FormControl label="Network" errors={errors?.networkMode}>
         <NetworkSelector
           value={values.networkMode}
-          additionalOptions={[{ label: 'Container', value: CONTAINER_MODE }]}
+          additionalOptions={additionalOptions}
           onChange={(networkMode) => setFieldValue('networkMode', networkMode)}
         />
       </FormControl>
@@ -105,3 +111,10 @@ export function NetworkTab({
     </div>
   );
 }
+
+function getAdditionalOptions(isPodman?: boolean) {
+  if (isPodman) {
+    return [];
+  }
+  return [{ label: 'Container', value: CONTAINER_MODE }];
+}

app/react/docker/containers/CreateView/NetworkTab/toViewModel.test.ts

@@ -0,0 +1,147 @@
+import { describe, it, expect } from 'vitest';
+
+import { DockerNetwork } from '@/react/docker/networks/types';
+
+import { ContainerListViewModel } from '../../types';
+import { ContainerDetailsJSON } from '../../queries/useContainer';
+
+import { getDefaultViewModel, getNetworkMode } from './toViewModel';
+
+describe('getDefaultViewModel', () => {
+  it('should return the correct default view model for Windows', () => {
+    const result = getDefaultViewModel(true);
+    expect(result).toEqual({
+      networkMode: 'nat',
+      hostname: '',
+      domain: '',
+      macAddress: '',
+      ipv4Address: '',
+      ipv6Address: '',
+      primaryDns: '',
+      secondaryDns: '',
+      hostsFileEntries: [],
+      container: '',
+    });
+  });
+
+  it('should return the correct default view model for Podman', () => {
+    const result = getDefaultViewModel(false, true);
+    expect(result).toEqual({
+      networkMode: 'podman',
+      hostname: '',
+      domain: '',
+      macAddress: '',
+      ipv4Address: '',
+      ipv6Address: '',
+      primaryDns: '',
+      secondaryDns: '',
+      hostsFileEntries: [],
+      container: '',
+    });
+  });
+
+  it('should return the correct default view model for Linux Docker', () => {
+    const result = getDefaultViewModel(false);
+    expect(result).toEqual({
+      networkMode: 'bridge',
+      hostname: '',
+      domain: '',
+      macAddress: '',
+      ipv4Address: '',
+      ipv6Address: '',
+      primaryDns: '',
+      secondaryDns: '',
+      hostsFileEntries: [],
+      container: '',
+    });
+  });
+});
+
+describe('getNetworkMode', () => {
+  const mockNetworks: Array<DockerNetwork> = [
+    {
+      Name: 'bridge',
+      Id: 'bridge-id',
+      Driver: 'bridge',
+      Scope: 'local',
+      Attachable: false,
+      Internal: false,
+      IPAM: { Config: [], Driver: '', Options: {} },
+      Options: {},
+      Containers: {},
+    },
+    {
+      Name: 'host',
+      Id: 'host-id',
+      Driver: 'host',
+      Scope: 'local',
+      Attachable: false,
+      Internal: false,
+      IPAM: { Config: [], Driver: '', Options: {} },
+      Options: {},
+      Containers: {},
+    },
+    {
+      Name: 'custom',
+      Id: 'custom-id',
+      Driver: 'bridge',
+      Scope: 'local',
+      Attachable: true,
+      Internal: false,
+      IPAM: { Config: [], Driver: '', Options: {} },
+      Options: {},
+      Containers: {},
+    },
+  ];
+
+  const mockRunningContainers: Array<ContainerListViewModel> = [
+    {
+      Id: 'container-1',
+      Names: ['container-1-name'],
+    } as ContainerListViewModel, // gaslight the type to avoid over-specifying
+  ];
+
+  it('should return the network mode from HostConfig', () => {
+    const config: ContainerDetailsJSON = {
+      HostConfig: { NetworkMode: 'host' },
+    };
+    expect(getNetworkMode(config, mockNetworks)).toEqual(['host']);
+  });
+
+  it('should return the network mode from NetworkSettings if HostConfig is empty', () => {
+    const config: ContainerDetailsJSON = {
+      NetworkSettings: { Networks: { custom: {} } },
+    };
+    expect(getNetworkMode(config, mockNetworks)).toEqual(['custom']);
+  });
+
+  it('should return container mode when NetworkMode starts with "container:"', () => {
+    const config: ContainerDetailsJSON = {
+      HostConfig: { NetworkMode: 'container:container-1' },
+    };
+    expect(getNetworkMode(config, mockNetworks, mockRunningContainers)).toEqual(
+      ['container', 'container-1-name']
+    );
+  });
+
+  it('should return "podman" for bridge network when isPodman is true', () => {
+    const config: ContainerDetailsJSON = {
+      HostConfig: { NetworkMode: 'bridge' },
+    };
+    expect(getNetworkMode(config, mockNetworks, [], true)).toEqual(['podman']);
+  });
+
+  it('should return "bridge" for default network mode on Docker', () => {
+    const config: ContainerDetailsJSON = {
+      HostConfig: { NetworkMode: 'default' },
+    };
+    expect(getNetworkMode(config, mockNetworks)).toEqual(['bridge']);
+  });
+
+  it('should return the first available network if no matching network is found', () => {
+    const config: ContainerDetailsJSON = {
+      HostConfig: { NetworkMode: 'non-existent' },
+    };
+    expect(getNetworkMode(config, mockNetworks)).toEqual(['bridge']);
+  });
+});

app/react/docker/containers/CreateView/NetworkTab/toViewModel.ts

@@ -5,8 +5,8 @@ import { ContainerListViewModel } from '../../types';
 
 import { CONTAINER_MODE, Values } from './types';
 
-export function getDefaultViewModel(isWindows: boolean) {
-  const networkMode = isWindows ? 'nat' : 'bridge';
+export function getDefaultViewModel(isWindows: boolean, isPodman?: boolean) {
+  const networkMode = getDefaultNetworkMode(isWindows, isPodman);
   return {
     networkMode,
     hostname: '',
@@ -21,10 +21,17 @@ export function getDefaultViewModel(isWindows: boolean) {
   };
 }
 
+export function getDefaultNetworkMode(isWindows: boolean, isPodman?: boolean) {
+  if (isWindows) return 'nat';
+  if (isPodman) return 'podman';
+  return 'bridge';
+}
+
 export function toViewModel(
   config: ContainerDetailsJSON,
   networks: Array<DockerNetwork>,
-  runningContainers: Array<ContainerListViewModel> = []
+  runningContainers: Array<ContainerListViewModel> = [],
+  isPodman?: boolean
 ): Values {
   const dns = config.HostConfig?.Dns;
   const [primaryDns = '', secondaryDns = ''] = dns || [];
@@ -34,7 +41,8 @@ export function toViewModel(
   const [networkMode, container = ''] = getNetworkMode(
     config,
     networks,
-    runningContainers
+    runningContainers,
+    isPodman
   );
 
   const networkSettings = config.NetworkSettings?.Networks?.[networkMode];
@@ -61,10 +69,11 @@ export function toViewModel(
   };
 }
 
-function getNetworkMode(
+export function getNetworkMode(
   config: ContainerDetailsJSON,
   networks: Array<DockerNetwork>,
-  runningContainers: Array<ContainerListViewModel> = []
+  runningContainers: Array<ContainerListViewModel> = [],
+  isPodman?: boolean
 ) {
   let networkMode = config.HostConfig?.NetworkMode || '';
   if (!networkMode) {
@@ -85,6 +94,9 @@ function getNetworkMode(
   const networkNames = networks.map((n) => n.Name);
 
   if (networkNames.includes(networkMode)) {
+    if (isPodman && networkMode === 'bridge') {
+      return ['podman'] as const;
+    }
     return [networkMode] as const;
   }
 
@@ -92,6 +104,9 @@ function getNetworkMode(
     networkNames.includes('bridge') &&
     (!networkMode || networkMode === 'default' || networkMode === 'bridge')
   ) {
+    if (isPodman) {
+      return ['podman'] as const;
+    }
     return ['bridge'] as const;
   }