refactor(ui): replace ng selectors with react-select [EE-3608] (#7203)

Co-authored-by: LP B <xAt0mZ@users.noreply.github.com>

app/react/kubernetes/cluster/RegistryAccessView/NamespacesSelector.tsx

@@ -0,0 +1,50 @@
+import _ from 'lodash';
+
+import { Select } from '@@/form-components/ReactSelect';
+
+interface Namespace {
+  id: string;
+  name: string;
+}
+
+interface Props {
+  name?: string;
+  value: string[];
+  onChange(value: string[]): void;
+  namespaces: Namespace[];
+  dataCy?: string;
+  inputId?: string;
+  placeholder?: string;
+}
+
+export function NamespacesSelector({
+  name,
+  value,
+  onChange,
+  namespaces,
+  dataCy,
+  inputId,
+  placeholder,
+}: Props) {
+  return (
+    <Select
+      name={name}
+      isMulti
+      getOptionLabel={(namespace) => namespace.name}
+      getOptionValue={(namespace) => String(namespace.id)}
+      options={namespaces}
+      value={_.compact(
+        value.map((namespaceName) =>
+          namespaces.find((namespace) => namespace.name === namespaceName)
+        )
+      )}
+      closeMenuOnSelect={false}
+      onChange={(selectedTeams) =>
+        onChange(selectedTeams.map((namespace) => namespace.name))
+      }
+      data-cy={dataCy}
+      inputId={inputId}
+      placeholder={placeholder}
+    />
+  );
+}