website/docs: update procedurals for assigning roles to groups (#12198)

* update for dual-select

* add new dual-select unit and tweaks

* polishes

---------

Co-authored-by: Tana M Berry <tana@goauthentik.com>

website/docs/users-sources/groups/index.mdx

@@ -3,6 +3,8 @@ title: About groups
 description: Learn about groups in authentik
 ---
 
+For information about creating and editing groups refer to [Manage groups](./manage_groups.md).
+
 ## Hierarchy
 
 Groups can be children of another group. Members of children groups are effective members of the parent group.
@@ -13,4 +15,4 @@ Recursion is limited to 20 levels to prevent deadlocks.
 
 ## Attributes
 
-Attributes of groups are recursively merged, for all groups the user is a member of.
+Attributes of groups are recursively merged, for all groups the user is a member of. For more information, see [Group properties and attributes](./group_ref.md).

website/docs/users-sources/groups/manage_groups.md

@@ -29,7 +29,7 @@ To edit the group's name, parent group, whether or not the group is for superuse
 
 To [add or remove users](../user/user_basic_operations.md#add-a-user-to-a-group) from the group, or to manage permissions assigned to the group, click on the name of the group to go to the group's detail page.
 
-For more information about permissions, refer to ["Assign or remove permissions for a specific group"](../access-control/manage_permissions.md#assign-or-remove-permissions-on-a-specific-group).
+For more information about permissions, refer to [Assign or remove permissions for a specific group](../access-control/manage_permissions.md#assign-or-remove-permissions-on-a-specific-group).
 
 ## Delete a group
 
@@ -41,7 +41,7 @@ To delete a group, follow these steps:
 
 ## Assign a role to a group
 
-You can assign a role to a group, and then all users in the group inherit the permissions assigned to that role. For instructions and more information, see ["Assign a role to a group"](../roles/manage_roles.md#assign-a-role-to-a-group).
+You can assign a role to a group, and then all users in the group inherit the permissions assigned to that role. For instructions and more information, see [Assign a role to a group](../roles/manage_roles.md#assign-a-role-to-a-group).
 
 ## Delegating group member management <span class="badge badge--version">authentik 2024.4+</span>
 

website/docs/users-sources/roles/manage_roles.md

@@ -38,15 +38,11 @@ To delete a role, follow these steps:
 In authentik, roles are assigned to [groups](../groups/index.mdx), not to individual users.
 
 :::warning
-In authentik, each role can only be applied to a single group at the moment.
+In authentik, each role can only be applied to a single group at a time.
 :::
 
-1.  To assign the role to a group, navigate to **Directory -> Groups**.
-2.  Click the name of the group to which you want to add a role.
-3.  On the group's detail page, on the Overview tab, click **Edit** in the **Group Info** area.
-4.  On the **Update Group** modal, in the **Roles** field, scroll through the list of existent roles, and click to select the one you want to add to the group. (You can select multiple roles at once by holding the Control and Command keys while selecting the roles.)
-5.  Click **Update** to add the role(s) and close the modal.
-
-:::info
-To remove a role from a group, hold the Command key and click the name of the role that you want to remove from the group. This desepcts the role. Then click **Update**.
-:::
+1. To assign the role to a group, navigate to **Directory -> Groups**.
+2. Click the name of the group to which you want to add a role.
+3. On the group's detail page, on the Overview tab, click **Edit** in the **Group Info** area.
+4. On the **Update Group** modal, in the **Roles** field, select the roles you want to assign to the group from the list of **Available Roles** in the left box (you can select multiple roles at once by holding the Shift key while selecting the roles), and then click the appropriate arrow icon to move them into the **Selected Roles** box.
+5. Click **Update** to add the role(s) and close the modal.