refactor(containers): migrate volumes tab to react [EE-5209] (#10284)

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

@@ -0,0 +1,45 @@
+import { truncate } from '@/portainer/filters/filters';
+import { useVolumes } from '@/react/docker/volumes/queries/useVolumes';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { Select } from '@@/form-components/ReactSelect';
+
+export function VolumeSelector({
+  value,
+  onChange,
+  inputId,
+}: {
+  value: string;
+  onChange: (value?: string) => void;
+  inputId?: string;
+}) {
+  const environmentId = useEnvironmentId();
+  const volumesQuery = useVolumes(environmentId, {
+    select(volumes) {
+      return volumes.sort((vol1, vol2) => vol1.Name.localeCompare(vol2.Name));
+    },
+  });
+
+  if (!volumesQuery.data) {
+    return null;
+  }
+
+  const volumes = volumesQuery.data;
+
+  const selectedValue = volumes.find((vol) => vol.Name === value);
+
+  return (
+    <Select
+      placeholder="Select a volume"
+      options={volumes}
+      getOptionLabel={(vol) =>
+        `${truncate(vol.Name, 30)} - ${truncate(vol.Driver, 30)}`
+      }
+      getOptionValue={(vol) => vol.Name}
+      isMulti={false}
+      value={selectedValue}
+      onChange={(vol) => onChange(vol?.Name)}
+      inputId={inputId}
+    />
+  );
+}