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

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

@@ -0,0 +1,56 @@
+import { array, string } from 'yup';
+
+import { FormError } from '@@/form-components/FormError';
+import { InputLabeled } from '@@/form-components/Input/InputLabeled';
+import { ItemProps } from '@@/form-components/InputList';
+import { ArrayError, InputList } from '@@/form-components/InputList/InputList';
+
+export const hostFileSchema = array(
+  string().required('Entry is required')
+).default([]);
+
+export function HostsFileEntries({
+  values,
+  onChange,
+  errors,
+}: {
+  values: string[];
+  onChange: (values: string[]) => void;
+  errors?: ArrayError<string>;
+}) {
+  return (
+    <InputList
+      label="Hosts file entries"
+      value={values}
+      onChange={(hostsFileEntries) => onChange(hostsFileEntries)}
+      errors={errors}
+      item={HostsFileEntryItem}
+      itemBuilder={() => ''}
+      data-cy="hosts-file-entries"
+    />
+  );
+}
+
+function HostsFileEntryItem({
+  item,
+  onChange,
+  disabled,
+  error,
+  readOnly,
+  index,
+}: ItemProps<string>) {
+  return (
+    <div>
+      <InputLabeled
+        label="value"
+        value={item}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        readOnly={readOnly}
+        data-cy={`hosts-file-entry_${index}`}
+      />
+
+      {error && <FormError>{error}</FormError>}
+    </div>
+  );
+}