♻️ replace roles & user selectors in machines & create user

src/components/OrgRolesTagField.tsx

@@ -8,51 +8,42 @@ import {
     FormLabel,
     FormMessage
 } from "@app/components/ui/form";
-import { Tag, TagInput } from "@app/components/tags/tag-input";
+
 import { toast } from "@app/hooks/useToast";
 import { useTranslations } from "next-intl";
-import type { Dispatch, SetStateAction } from "react";
-import type { FieldValues, Path, UseFormReturn } from "react-hook-form";
 
-export type RoleTag = {
-    id: string;
-    text: string;
-};
+import type { FieldValues, Path, UseFormReturn } from "react-hook-form";
+import { RolesSelector, type SelectedRole } from "./roles-selector";
 
 type OrgRolesTagFieldProps<TFieldValues extends FieldValues> = {
-    form: Pick<UseFormReturn<TFieldValues>, "control" | "getValues" | "setValue">;
+    form: Pick<
+        UseFormReturn<TFieldValues>,
+        "control" | "getValues" | "setValue"
+    >;
+    orgId: string;
     /** Field in the form that holds Tag[] (role tags). Default: `"roles"`. */
     name?: Path<TFieldValues>;
-    label: string;
-    placeholder: string;
-    allRoleOptions: Tag[];
+    label?: string;
     supportsMultipleRolesPerUser: boolean;
     showMultiRolePaywallMessage: boolean;
     paywallMessage: string;
-    loading?: boolean;
-    activeTagIndex: number | null;
-    setActiveTagIndex: Dispatch<SetStateAction<number | null>>;
+    disabled?: boolean;
 };
 
 export default function OrgRolesTagField<TFieldValues extends FieldValues>({
     form,
     name = "roles" as Path<TFieldValues>,
     label,
-    placeholder,
-    allRoleOptions,
+    orgId,
     supportsMultipleRolesPerUser,
     showMultiRolePaywallMessage,
     paywallMessage,
-    loading = false,
-    activeTagIndex,
-    setActiveTagIndex
+    disabled
 }: OrgRolesTagFieldProps<TFieldValues>) {
     const t = useTranslations();
 
-    function setRoleTags(updater: Tag[] | ((prev: Tag[]) => Tag[])) {
-        const prev = form.getValues(name) as Tag[];
-        const nextValue =
-            typeof updater === "function" ? updater(prev) : updater;
+    function setRoleTags(nextValue: SelectedRole[]) {
+        const prev = form.getValues(name) as SelectedRole[];
         const next = supportsMultipleRolesPerUser
             ? nextValue
             : nextValue.length > 1
@@ -88,22 +79,13 @@ export default function OrgRolesTagField<TFieldValues extends FieldValues>({
             name={name}
             render={({ field }) => (
                 <FormItem className="flex flex-col items-start">
-                    <FormLabel>{label}</FormLabel>
+                    <FormLabel>{label ?? t("roles")}</FormLabel>
                     <FormControl>
-                        <TagInput
-                            {...field}
-                            activeTagIndex={activeTagIndex}
-                            setActiveTagIndex={setActiveTagIndex}
-                            placeholder={placeholder}
-                            size="sm"
-                            tags={field.value}
-                            setTags={setRoleTags}
-                            enableAutocomplete={true}
-                            autocompleteOptions={allRoleOptions}
-                            allowDuplicates={false}
-                            restrictTagsToAutocompleteOptions={true}
-                            sortTags={true}
-                            disabled={loading}
+                        <RolesSelector
+                            orgId={orgId}
+                            selectedRoles={field.value ?? []}
+                            onSelectRoles={setRoleTags}
+                            disabled={disabled}
                         />
                     </FormControl>
                     {showMultiRolePaywallMessage && (