chore: integrate user groups into UI

coder · Parkreiner · Nov 7, 2023 · Nov 1, 2023 · Nov 1, 2023 · Nov 2, 2023
commit 1d646eba2b37fe09932e194c9c4c4feb07610e3c
diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx
@@ -1,30 +1,86 @@
-import { FC } from "react";
+import { type FC } from "react";
 import { Section } from "components/SettingsLayout/Section";
 import { AccountForm } from "./AccountForm";
 import { useAuth } from "components/AuthProvider/AuthProvider";
 import { useMe } from "hooks/useMe";
 import { usePermissions } from "hooks/usePermissions";
+import { Stack } from "@mui/system";
+import { useQuery } from "react-query";
+import { groupsForUser } from "api/queries/groups";
+import { useOrganizationId } from "hooks";
+import { useTheme } from "@emotion/react";
+import { Loader } from "components/Loader/Loader";
+import { Group } from "api/typesGenerated";
 
 export const AccountPage: FC = () => {
+  const theme = useTheme();
   const { updateProfile, updateProfileError, isUpdatingProfile } = useAuth();
-  const me = useMe();
   const permissions = usePermissions();
-  const canEditUsers = permissions && permissions.updateUsers;
+
+  const me = useMe();
+  const organizationId = useOrganizationId();
+  const groupsQuery = useQuery(groupsForUser(organizationId, me.id));
 
   return (
-    <Section title="Account" description="Update your account info">
-      <AccountForm
-        editable={Boolean(canEditUsers)}
-        email={me.email}
-        updateProfileError={updateProfileError}
-        isLoading={isUpdatingProfile}
-        initialValues={{
-          username: me.username,
-        }}
-        onSubmit={updateProfile}
-      />
-    </Section>
+    <Stack spacing={6}>
+      <Section title="Account" description="Update your account info">
+        <AccountForm
+          editable={permissions?.updateUsers ?? false}
+          email={me.email}
+          updateProfileError={updateProfileError}
+          isLoading={isUpdatingProfile}
+          initialValues={{ username: me.username }}
+          onSubmit={updateProfile}
+        />
+      </Section>
+
+      <Section
+        title="Your groups"
+        layout="fluid"
+        description={
+          groupsQuery.isSuccess && (
+            <span>
+              You are in{" "}
+              <em
+                css={{
+                  fontStyle: "normal",
+                  color: theme.palette.text.primary,
+                  fontWeight: 600,
+                }}
+              >
+                {groupsQuery.data.length} groups
+              </em>
+            </span>
+          )
+        }
+      >
+        {groupsQuery.isSuccess ? (
+          <GroupList groups={groupsQuery.data} />
+        ) : (
+          <Loader />
+        )}
+      </Section>
+    </Stack>
   );
 };
 
+type GroupListProps = {
+  groups: readonly Group[];
+};
+
+function GroupList({ groups }: GroupListProps) {
+  const theme = useTheme();
+
+  return (
+    <>
+      {groups.map((group) => (
+        <div key={group.id} css={{ backgroundColor: "blue" }}>
+          <span>{group.display_name || group.name}</span>
+          <span>{group.members.length} members</span>
+        </div>
+      ))}
+    </>
+  );
+}
+
 export default AccountPage;