fix: Client Protocol Mappers with non UUID ids cannot be edited (#34643)

closes #34636

Signed-off-by: Christian Janker <christian.janker@gmx.at>

js/apps/admin-ui/src/client-scopes/EditClientScope.tsx

@@ -185,6 +185,7 @@ export default function EditClientScope() {
           realm,
           id: clientScope!.id!,
           mapperId: mapper.id!,
+          viewMode: "new",
         }),
       );
     } else {
@@ -256,7 +257,12 @@ export default function EditClientScope() {
               onAdd={addMappers}
               onDelete={onDelete}
               detailLink={(id) =>
-                toMapper({ realm, id: clientScope.id!, mapperId: id! })
+                toMapper({
+                  realm,
+                  id: clientScope.id!,
+                  mapperId: id!,
+                  viewMode: "edit",
+                })
               }
             />
           </Tab>

js/apps/admin-ui/src/client-scopes/details/MappingDetails.tsx

@@ -34,7 +34,7 @@ export default function MappingDetails() {
   const { t } = useTranslation();
   const { addAlert, addError } = useAlerts();
 
-  const { id, mapperId } = useParams<MapperParams>();
+  const { id, mapperId, viewMode } = useParams<MapperParams>();
   const form = useForm();
   const { setValue, handleSubmit } = form;
   const [mapping, setMapping] = useState<ProtocolMapperTypeRepresentation>();
@@ -46,8 +46,7 @@ export default function MappingDetails() {
   const navigate = useNavigate();
   const { realm } = useRealm();
   const serverInfo = useServerInfo();
-  const isGuid = /^[{]?[0-9a-fA-F]{8}-([0-9a-fA-F]{4}-){3}[0-9a-fA-F]{12}[}]?$/;
-  const isUpdating = !!isGuid.exec(mapperId);
+  const isUpdating = viewMode === "edit";
 
   const isOnClientScope = !!useMatch(MapperRoute.path);
   const toDetails = () =>

js/apps/admin-ui/src/client-scopes/routes/Mapper.tsx

@@ -7,12 +7,13 @@ export type MapperParams = {
   realm: string;
   id: string;
   mapperId: string;
+  viewMode: "edit" | "new";
 };
 
 const MappingDetails = lazy(() => import("../details/MappingDetails"));
 
 export const MapperRoute: AppRouteObject = {
-  path: "/:realm/client-scopes/:id/mappers/:mapperId",
+  path: "/:realm/client-scopes/:id/mappers/:mapperId/:viewMode",
   element: <MappingDetails />,
   breadcrumb: (t) => t("mappingDetails"),
   handle: {

js/apps/admin-ui/src/clients/routes/Mapper.tsx

@@ -7,6 +7,7 @@ export type MapperParams = {
   realm: string;
   id: string;
   mapperId: string;
+  viewMode: "edit" | "new";
 };
 
 const MappingDetails = lazy(
@@ -14,7 +15,7 @@ const MappingDetails = lazy(
 );
 
 export const MapperRoute: AppRouteObject = {
-  path: "/:realm/clients/:id/clientScopes/dedicated/mappers/:mapperId",
+  path: "/:realm/clients/:id/clientScopes/dedicated/mappers/:mapperId/:viewMode",
   element: <MappingDetails />,
   breadcrumb: (t) => t("mappingDetails"),
   handle: {

js/apps/admin-ui/src/clients/scopes/DedicatedScopes.tsx

@@ -60,6 +60,7 @@ export default function DedicatedScopes() {
           realm,
           id: client.id!,
           mapperId: mapper.id!,
+          viewMode: "new",
         }),
       );
     } else {
@@ -122,7 +123,7 @@ export default function DedicatedScopes() {
               onAdd={addMappers}
               onDelete={onDeleteMapper}
               detailLink={(mapperId) =>
-                toMapper({ realm, id: client.id!, mapperId })
+                toMapper({ realm, id: client.id!, mapperId, viewMode: "edit" })
               }
             />
           </Tab>