refactor(app): placement form section [EE-6386] (#10818)

Co-authored-by: testa113 <testa113>

app/react/kubernetes/applications/components/PlacementFormSection/PlacementItem.tsx

@@ -0,0 +1,76 @@
+import clsx from 'clsx';
+
+import { ItemProps } from '@@/form-components/InputList';
+import { Select } from '@@/form-components/ReactSelect';
+import { isErrorType } from '@@/form-components/formikUtils';
+import { FormError } from '@@/form-components/FormError';
+
+import { NodeLabels, Placement } from './types';
+
+interface PlacementItemProps extends ItemProps<Placement> {
+  nodesLabels: NodeLabels;
+  availableNodeLabels: NodeLabels;
+}
+
+export function PlacementItem({
+  onChange,
+  item,
+  error,
+  index,
+  nodesLabels,
+  availableNodeLabels,
+}: PlacementItemProps) {
+  const labelOptions = Object.keys(availableNodeLabels).map((label) => ({
+    label,
+    value: label,
+  }));
+  const valueOptions = nodesLabels[item.label]?.map((value) => ({
+    label: value,
+    value,
+  }));
+  const placementError = isErrorType(error) ? error : undefined;
+  return (
+    <div className="w-full">
+      <div className="flex w-full gap-2">
+        <div className="basis-1/2 grow">
+          <Select
+            options={labelOptions}
+            value={{ label: item.label, value: item.label }}
+            noOptionsMessage={() => 'No available node labels.'}
+            onChange={(labelOption) => {
+              const newValues = nodesLabels[labelOption?.value || ''];
+              onChange({
+                ...item,
+                value: newValues?.[0] || '',
+                label: labelOption?.value || '',
+              });
+            }}
+            size="sm"
+            className={clsx({ striked: !!item.needsDeletion })}
+            isDisabled={!!item.needsDeletion}
+            data-cy={`k8sAppCreate-placementLabel_${index}`}
+          />
+          {placementError?.label && (
+            <FormError>{placementError.label}</FormError>
+          )}
+        </div>
+        <div className="basis-1/2 grow">
+          <Select
+            options={valueOptions}
+            value={valueOptions?.find((option) => option.value === item.value)}
+            onChange={(valueOption) =>
+              onChange({ ...item, value: valueOption?.value || '' })
+            }
+            size="sm"
+            className={clsx({ striked: !!item.needsDeletion })}
+            isDisabled={!!item.needsDeletion}
+            data-cy={`k8sAppCreate-placementName_${index}`}
+          />
+          {placementError?.value && (
+            <FormError>{placementError.value}</FormError>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}