From 1bc7175dd45763fa4fe87b6eb0fb6932450469eb Mon Sep 17 00:00:00 2001
From: Fred KISSIE <fredkiss3@gmail.com>
Date: Wed, 29 Apr 2026 05:19:23 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20replace=20user=20select=20in=20reso?=
 =?UTF-8?q?urce=20auth=20and=20alert=20rule=20field?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../proxy/[niceId]/authentication/page.tsx    | 79 +++++--------------
 .../alert-rule-editor/AlertRuleFields.tsx     | 49 +++---------
 2 files changed, 34 insertions(+), 94 deletions(-)

diff --git a/src/app/[orgId]/settings/resources/proxy/[niceId]/authentication/page.tsx b/src/app/[orgId]/settings/resources/proxy/[niceId]/authentication/page.tsx
index 12f511078..4b184827d 100644
--- a/src/app/[orgId]/settings/resources/proxy/[niceId]/authentication/page.tsx
+++ b/src/app/[orgId]/settings/resources/proxy/[niceId]/authentication/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { RolesSelector } from "@app/components/roles-selector";
 import SetResourceHeaderAuthForm from "@app/components/SetResourceHeaderAuthForm";
 import SetResourcePincodeForm from "@app/components/SetResourcePincodeForm";
 import {
@@ -33,6 +34,7 @@ import {
     SelectTrigger,
     SelectValue
 } from "@app/components/ui/select";
+import { UsersSelector } from "@app/components/users-selector";
 import type { ResourceContextType } from "@app/contexts/resourceContext";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useOrgContext } from "@app/hooks/useOrgContext";
@@ -497,46 +499,27 @@ export default function ResourceAuthenticationPage() {
                                                             {t("roles")}
                                                         </FormLabel>
                                                         <FormControl>
-                                                            <TagInput
-                                                                {...field}
-                                                                activeTagIndex={
-                                                                    activeRolesTagIndex
+                                                            <RolesSelector
+                                                                selectedRoles={
+                                                                    field.value ??
+                                                                    []
                                                                 }
-                                                                setActiveTagIndex={
-                                                                    setActiveRolesTagIndex
+                                                                restrictAdminRole
+                                                                orgId={
+                                                                    org.org
+                                                                        .orgId
                                                                 }
-                                                                placeholder={t(
-                                                                    "accessRoleSelect2"
-                                                                )}
-                                                                size="sm"
-                                                                tags={
-                                                                    usersRolesForm.getValues()
-                                                                        .roles
-                                                                }
-                                                                setTags={(
-                                                                    newRoles
+                                                                onSelectRoles={(
+                                                                    newUsers
                                                                 ) => {
                                                                     usersRolesForm.setValue(
                                                                         "roles",
-                                                                        newRoles as [
+                                                                        newUsers as [
                                                                             Tag,
                                                                             ...Tag[]
                                                                         ]
                                                                     );
                                                                 }}
-                                                                enableAutocomplete={
-                                                                    true
-                                                                }
-                                                                autocompleteOptions={
-                                                                    allRoles
-                                                                }
-                                                                allowDuplicates={
-                                                                    false
-                                                                }
-                                                                restrictTagsToAutocompleteOptions={
-                                                                    true
-                                                                }
-                                                                sortTags={true}
                                                             />
                                                         </FormControl>
                                                         <FormMessage />
@@ -557,23 +540,16 @@ export default function ResourceAuthenticationPage() {
                                                             {t("users")}
                                                         </FormLabel>
                                                         <FormControl>
-                                                            <TagInput
-                                                                {...field}
-                                                                activeTagIndex={
-                                                                    activeUsersTagIndex
+                                                            <UsersSelector
+                                                                selectedUsers={
+                                                                    field.value ??
+                                                                    []
                                                                 }
-                                                                setActiveTagIndex={
-                                                                    setActiveUsersTagIndex
+                                                                orgId={
+                                                                    org.org
+                                                                        .orgId
                                                                 }
-                                                                placeholder={t(
-                                                                    "accessUserSelect"
-                                                                )}
-                                                                tags={
-                                                                    usersRolesForm.getValues()
-                                                                        .users
-                                                                }
-                                                                size="sm"
-                                                                setTags={(
+                                                                onSelectUsers={(
                                                                     newUsers
                                                                 ) => {
                                                                     usersRolesForm.setValue(
@@ -584,19 +560,6 @@ export default function ResourceAuthenticationPage() {
                                                                         ]
                                                                     );
                                                                 }}
-                                                                enableAutocomplete={
-                                                                    true
-                                                                }
-                                                                autocompleteOptions={
-                                                                    allUsers
-                                                                }
-                                                                allowDuplicates={
-                                                                    false
-                                                                }
-                                                                restrictTagsToAutocompleteOptions={
-                                                                    true
-                                                                }
-                                                                sortTags={true}
                                                             />
                                                         </FormControl>
                                                         <FormMessage />
diff --git a/src/components/alert-rule-editor/AlertRuleFields.tsx b/src/components/alert-rule-editor/AlertRuleFields.tsx
index 1d420f433..7d68733be 100644
--- a/src/components/alert-rule-editor/AlertRuleFields.tsx
+++ b/src/components/alert-rule-editor/AlertRuleFields.tsx
@@ -48,6 +48,8 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import type { Control, UseFormReturn } from "react-hook-form";
 import { useFormContext, useWatch } from "react-hook-form";
 import { useDebounce } from "use-debounce";
+import { RolesSelector } from "../roles-selector";
+import { UsersSelector } from "../users-selector";
 
 export function AddActionPanel({
     onAdd
@@ -593,29 +595,16 @@ function NotifyActionFields({
                     <FormItem className="flex flex-col items-start">
                         <FormLabel>{t("alertingNotifyUsers")}</FormLabel>
                         <FormControl>
-                            <TagInput
-                                {...field}
-                                activeTagIndex={activeUsersTagIndex}
-                                setActiveTagIndex={setActiveUsersTagIndex}
-                                placeholder={t("alertingSelectUsers")}
-                                size="sm"
-                                tags={userTags}
-                                setTags={(newTags) => {
-                                    const next =
-                                        typeof newTags === "function"
-                                            ? newTags(userTags)
-                                            : newTags;
+                            <UsersSelector
+                                selectedUsers={field.value ?? []}
+                                orgId={orgId}
+                                onSelectUsers={(newUsers) => {
                                     form.setValue(
                                         `actions.${index}.userTags`,
-                                        next as Tag[],
+                                        newUsers as [Tag, ...Tag[]],
                                         { shouldDirty: true }
                                     );
                                 }}
-                                enableAutocomplete={true}
-                                autocompleteOptions={allUsers}
-                                allowDuplicates={false}
-                                restrictTagsToAutocompleteOptions={true}
-                                sortTags={true}
                             />
                         </FormControl>
                         <FormMessage />
@@ -629,29 +618,17 @@ function NotifyActionFields({
                     <FormItem className="flex flex-col items-start">
                         <FormLabel>{t("alertingNotifyRoles")}</FormLabel>
                         <FormControl>
-                            <TagInput
-                                {...field}
-                                activeTagIndex={activeRolesTagIndex}
-                                setActiveTagIndex={setActiveRolesTagIndex}
-                                placeholder={t("alertingSelectRoles")}
-                                size="sm"
-                                tags={roleTags}
-                                setTags={(newTags) => {
-                                    const next =
-                                        typeof newTags === "function"
-                                            ? newTags(roleTags)
-                                            : newTags;
+                            <RolesSelector
+                                selectedRoles={field.value ?? []}
+                                restrictAdminRole
+                                orgId={orgId}
+                                onSelectRoles={(newUsers) => {
                                     form.setValue(
                                         `actions.${index}.roleTags`,
-                                        next as Tag[],
+                                        newUsers as [Tag, ...Tag[]],
                                         { shouldDirty: true }
                                     );
                                 }}
-                                enableAutocomplete={true}
-                                autocompleteOptions={allRoles}
-                                allowDuplicates={false}
-                                restrictTagsToAutocompleteOptions={true}
-                                sortTags={true}
                             />
                         </FormControl>
                         <FormMessage />