refactor(templates): migrate list view to react [EE-2296] (#10999)

app/react/docker/containers/CreateView/VolumesTab/Item.tsx

@@ -18,7 +18,7 @@ export function Item({
   error,
   index,
 }: ItemProps<Volume>) {
-  const allowBindMounts = useInputContext();
+  const { allowBindMounts, allowAuto } = useInputContext();
 
   return (
     <div>
@@ -61,6 +61,7 @@ export function Item({
               value={volume.name}
               onChange={(name) => setValue({ name })}
               inputId={`volume-${index}`}
+              allowAuto={allowAuto}
             />
           </InputGroup>
         )}

app/react/docker/containers/CreateView/VolumesTab/VolumeSelector.tsx

@@ -8,10 +8,12 @@ export function VolumeSelector({
   value,
   onChange,
   inputId,
+  allowAuto,
 }: {
   value: string;
   onChange: (value?: string) => void;
   inputId?: string;
+  allowAuto: boolean;
 }) {
   const environmentId = useEnvironmentId();
   const volumesQuery = useVolumes(environmentId, {
@@ -24,7 +26,9 @@ export function VolumeSelector({
     return null;
   }
 
-  const volumes = volumesQuery.data;
+  const volumes = allowAuto
+    ? [...volumesQuery.data, { Name: 'auto', Driver: '' }]
+    : volumesQuery.data;
 
   const selectedValue = volumes.find((vol) => vol.Name === value);
 
@@ -33,7 +37,9 @@ export function VolumeSelector({
       placeholder="Select a volume"
       options={volumes}
       getOptionLabel={(vol) =>
-        `${truncate(vol.Name, 30)} - ${truncate(vol.Driver, 30)}`
+        vol.Name !== 'auto'
+          ? `${truncate(vol.Name, 30)} - ${truncate(vol.Driver, 30)}`
+          : 'auto'
       }
       getOptionValue={(vol) => vol.Name}
       isMulti={false}

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

@@ -1,3 +1,8 @@
+import { useMemo } from 'react';
+
+import { useIsEnvironmentAdmin } from '@/react/hooks/useUser';
+import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
+
 import { InputList } from '@@/form-components/InputList';
 import { ArrayError } from '@@/form-components/InputList/InputList';
 
@@ -8,16 +13,29 @@ import { Item } from './Item';
 export function VolumesTab({
   onChange,
   values,
-  allowBindMounts,
   errors,
+  allowAuto = false,
 }: {
   onChange: (values: Values) => void;
   values: Values;
-  allowBindMounts: boolean;
   errors?: ArrayError<Values>;
+  allowAuto?: boolean;
 }) {
+  const isEnvironmentAdminQuery = useIsEnvironmentAdmin({ adminOnlyCE: true });
+  const envQuery = useCurrentEnvironment();
+
+  const allowBindMounts = !!(
+    isEnvironmentAdminQuery.authorized ||
+    envQuery.data?.SecuritySettings.allowBindMountsForRegularUsers
+  );
+
+  const inputContext = useMemo(
+    () => ({ allowBindMounts, allowAuto }),
+    [allowAuto, allowBindMounts]
+  );
+
   return (
-    <InputContext.Provider value={allowBindMounts}>
+    <InputContext.Provider value={inputContext}>
       <InputList<Volume>
         errors={Array.isArray(errors) ? errors : []}
         label="Volume mapping"

app/react/docker/containers/CreateView/VolumesTab/context.ts

@@ -1,6 +1,9 @@
 import { createContext, useContext } from 'react';
 
-export const InputContext = createContext<boolean | null>(null);
+export const InputContext = createContext<{
+  allowAuto: boolean;
+  allowBindMounts: boolean;
+} | null>(null);
 
 export function useInputContext() {
   const value = useContext(InputContext);