use event id instead of name (#20109)

* use id instead of name to add event

* "translated" ids to name

js/apps/admin-ui/src/events/EventsSection.tsx

@@ -312,14 +312,16 @@ export default function EventsSection() {
                                 );
                               }}
                             >
-                              {chip}
+                              {t(`realm-settings:eventTypes.${chip}.name`)}
                             </Chip>
                           ))}
                         </ChipGroup>
                       }
                     >
                       {events?.enabledEventTypes?.map((option) => (
-                        <SelectOption key={option} value={option} />
+                        <SelectOption key={option} value={option}>
+                          {t(`realm-settings:eventTypes.${option}.name`)}
+                        </SelectOption>
                       ))}
                     </Select>
                   )}
@@ -435,7 +437,7 @@ export default function EventsSection() {
                           key={entry}
                           onClick={() => removeFilterValue(key, entry)}
                         >
-                          {entry}
+                          {t(`realm-settings:eventTypes.${entry}.name`)}
                         </Chip>
                       ))
                     )}

js/apps/admin-ui/src/realm-settings/event-config/EventsTypeTable.tsx

@@ -29,7 +29,8 @@ export function EventsTypeTable({
   const { t } = useTranslation("realm-settings");
 
   const data = eventTypes.map((type) => ({
-    id: t(`eventTypes.${type}.name`),
+    id: type,
+    name: t(`eventTypes.${type}.name`),
     description: t(`eventTypes.${type}.description`),
   }));
   return (
@@ -60,7 +61,7 @@ export function EventsTypeTable({
       }
       columns={[
         {
-          name: "id",
+          name: "name",
           displayKey: "realm-settings:eventType",
         },
         {