Group selection ux for identities or idp groups (#1031)

## Done

- Group selection ux for identities or idp groups
- Allow clicking on the name of the group to select and deselect

## QA

1. Run the LXD-UI:
- On the demo server via the link posted by @webteam-app below. This is
only available for PRs created by collaborators of the repo. Ask
@mas-who or @edlerd for access.
- With a local copy of this branch, [build and run as described in the
docs](../CONTRIBUTING.md#setting-up-for-development).
2. Perform the following QA steps:
- Under permissions->identities: Edit one or many identities group
selections
- Under permissions->idp groups: Create an idp group and select /
deselect groups. Edit an idp group and select / deselect groups
- in both cases ensure clicking on the group name in the side panel
toggles the row correctly and the total number of edits is correctly
shown. ensure after submitting, the correct state is saved.

src/pages/permissions/panels/CreateIdpGroupPanel.tsx

@@ -131,6 +131,15 @@ const CreateIdpGroupPanel: FC = () => {
             parentItemName=""
             selectedGroups={desiredState.groupsAdded}
             setSelectedGroups={modifyGroups}
+            toggleGroup={(group: string) => {
+              const newGroups = new Set([...desiredState.groupsAdded]);
+              if (newGroups.has(group)) {
+                newGroups.delete(group);
+              } else {
+                newGroups.add(group);
+              }
+              modifyGroups([...newGroups], newGroups.size === 0);
+            }}
             scrollDependencies={[
               groups,
               desiredState.groupsAdded.size,

src/pages/permissions/panels/GroupSelection.tsx

@@ -17,7 +17,7 @@ interface Props {
   selectedGroups: Set<string>;
   setSelectedGroups: (val: string[], isUnselectAll?: boolean) => void;
   indeterminateGroups?: Set<string>;
-  toggleGroup?: (rowName: string) => void;
+  toggleGroup: (rowName: string) => void;
   scrollDependencies: DependencyList;
 }
 
@@ -75,20 +75,26 @@ const GroupSelection: FC<Props> = ({
         ? `Group will be removed from ${selectedParentsText}`
         : "";
 
+    const toggleRow = () => {
+      toggleGroup(group.name);
+    };
+
     return {
       name: group.name,
       className: "u-row",
       columns: [
         {
           content: group.name,
+          onClick: toggleRow,
           role: "cell",
-          className: "name u-truncate",
+          className: "name u-truncate clickable-cell",
           "aria-label": "Name",
         },
         {
           content: <span>{group.description || ""}</span>,
+          onClick: toggleRow,
           role: "cell",
-          className: "description",
+          className: "description clickable-cell",
           "aria-label": "Description",
           title: group.description,
         },