Disallow deletion of restricted user attributes (#2734)

src/authentication/components/DraggableTable.tsx

@@ -20,11 +20,13 @@ export type Field<T> = {
   cellRenderer?: (row: T) => ReactNode;
 };
 
+export type Action<T> = IAction & { isActionable?: (item: T) => boolean };
+
 type DraggableTableProps<T> = Omit<TableComposableProps, "data" | "ref"> & {
   keyField: string;
   columns: Field<T>[];
   data: T[];
-  actions?: IAction[];
+  actions?: Action<T>[];
   onDragFinish: (dragged: string, newOrder: string[]) => void;
 };
 
@@ -217,7 +219,14 @@ export function DraggableTable<T>({
             ))}
             {actions && (
               <Td isActionCell>
-                <ActionsColumn items={actions} rowData={row} />
+                <ActionsColumn
+                  items={actions.map(({ isActionable, ...action }) =>
+                    isActionable
+                      ? { ...action, isDisabled: !isActionable(row) }
+                      : action
+                  )}
+                  rowData={row}
+                />
               </Td>
             )}
           </Tr>

src/realm-settings/user-profile/AttributesTab.tsx

@@ -24,6 +24,8 @@ import { toAttribute } from "../routes/Attribute";
 import type { UserProfileAttribute } from "@keycloak/keycloak-admin-client/lib/defs/userProfileConfig";
 import useToggle from "../../utils/useToggle";
 
+const RESTRICTED_ATTRIBUTES = ["username", "email"];
+
 type movedAttributeType = UserProfileAttribute;
 
 export const AttributesTab = () => {
@@ -182,6 +184,7 @@ export const AttributesTab = () => {
           },
           {
             title: t("common:delete"),
+            isActionable: ({ name }) => !RESTRICTED_ATTRIBUTES.includes(name!),
             onClick: (_key, _idx, component) => {
               setAttributeToDelete(component.name);
               toggleDeleteDialog();