fix: add container for EditGroups (#3318)

This PR fixes an issue that would manifest when you navigated directly
to the groups and tried to edit the group from the group card. When you
were redirected to the edit groups view, the data fields would be empty.
The root cause of this issue is that the data has not arrived over the
wire before we load the UI, resulting in the UI showing an empty
dataset.

Normally, if this data came directly from useSWR, the app would
re-render and display the data correctly. However, in this instance we
are passing the data to an intermediary hook (useGroupForm) which does
not have the same re-render logic. Therefore we are effectively working
from stale data. We solve this issue by adding a container that resolves
the group before the edit form is rendered, and that invokes the
intermediary hook only when the data is available.

frontend/src/component/admin/Admin.tsx

@@ -6,7 +6,7 @@ import { Billing } from './billing/Billing';
 import FlaggedBillingRedirect from './billing/FlaggedBillingRedirect/FlaggedBillingRedirect';
 import { CorsAdmin } from './cors';
 import { CreateGroup } from './groups/CreateGroup/CreateGroup';
-import { EditGroup } from './groups/EditGroup/EditGroup';
+import { EditGroupContainer } from './groups/EditGroup/EditGroup';
 import { Group } from './groups/Group/Group';
 import { GroupsAdmin } from './groups/GroupsAdmin';
 import { InstanceAdmin } from './instance-admin/InstanceAdmin';
@@ -37,7 +37,10 @@ export const Admin = () => (
             <Route path="invite-link" element={<InviteLink />} />
             <Route path="groups" element={<GroupsAdmin />} />
             <Route path="groups/create-group" element={<CreateGroup />} />
-            <Route path="groups/:groupId/edit" element={<EditGroup />} />
+            <Route
+                path="groups/:groupId/edit"
+                element={<EditGroupContainer />}
+            />
             <Route path="groups/:groupId" element={<Group />} />
             <Route path="roles" element={<ProjectRoles />} />
             <Route path="instance" element={<InstanceAdmin />} />

frontend/src/component/admin/groups/EditGroup/EditGroup.tsx

@@ -13,10 +13,34 @@ import { useGroup } from 'hooks/api/getters/useGroup/useGroup';
 import { UG_SAVE_BTN_ID } from 'utils/testIds';
 import { GO_BACK } from 'constants/navigate';
 import { useGroups } from 'hooks/api/getters/useGroups/useGroups';
+import { IGroup } from 'interfaces/group';
 
-export const EditGroup = () => {
+export const EditGroupContainer = () => {
     const groupId = Number(useRequiredPathParam('groupId'));
     const { group, refetchGroup } = useGroup(groupId);
+
+    if (!group) return null;
+
+    return (
+        <EditGroup
+            group={group}
+            groupId={groupId}
+            refetchGroup={refetchGroup}
+        />
+    );
+};
+
+interface IEditGroupProps {
+    group: IGroup;
+    groupId: number;
+    refetchGroup: () => void;
+}
+
+export const EditGroup = ({
+    group,
+    groupId,
+    refetchGroup,
+}: IEditGroupProps) => {
     const { refetchGroups } = useGroups();
     const { setToastData, setToastApiError } = useToast();
     const { uiConfig } = useUiConfig();