feat: expose Everyone group through UI (#9117)

- Allows setting quota allowances on the 'Everyone' group.

site/src/pages/GroupsPage/GroupPage.tsx

@@ -38,6 +38,7 @@ import {
   TableToolbar,
 } from "components/TableToolbar/TableToolbar"
 import { UserAvatar } from "components/UserAvatar/UserAvatar"
+import { isEveryoneGroup } from "utils/groups"
 
 const AddGroupMember: React.FC<{
   isLoading: boolean
@@ -124,6 +125,7 @@ export const GroupPage: React.FC = () => {
                     <Button startIcon={<SettingsOutlined />}>Settings</Button>
                   </Link>
                   <Button
+                    disabled={group?.id === group?.organization_id}
                     onClick={() => {
                       send("DELETE")
                     }}
@@ -146,7 +148,13 @@ export const GroupPage: React.FC = () => {
             </PageHeader>
 
             <Stack spacing={1}>
-              <Maybe condition={canUpdateGroup}>
+              <Maybe
+                condition={
+                  canUpdateGroup &&
+                  group !== undefined &&
+                  !isEveryoneGroup(group)
+                }
+              >
                 <AddGroupMember
                   isLoading={state.matches("addingMember")}
                   onSubmit={(user, reset) => {
@@ -217,7 +225,8 @@ export const GroupPage: React.FC = () => {
                                           userId: member.id,
                                         })
                                       },
-                                      disabled: false,
+                                      disabled:
+                                        group.id === group.organization_id,
                                     },
                                   ]}
                                 />

site/src/pages/GroupsPage/SettingsGroupPageView.tsx

@@ -12,6 +12,7 @@ import { useTranslation } from "react-i18next"
 import { getFormHelpers, nameValidator, onChangeTrimmed } from "utils/formUtils"
 import * as Yup from "yup"
 import { Stack } from "components/Stack/Stack"
+import { isEveryoneGroup } from "utils/groups"
 
 type FormData = {
   name: string
@@ -56,6 +57,7 @@ const UpdateGroupForm: FC<{
             autoFocus
             fullWidth
             label="Name"
+            disabled={group.id === group.organization_id}
           />
           <TextField
             {...getFieldHelpers(
@@ -67,6 +69,7 @@ const UpdateGroupForm: FC<{
             autoFocus
             fullWidth
             label="Display Name"
+            disabled={isEveryoneGroup(group)}
           />
           <LazyIconField
             {...getFieldHelpers("avatar_url")}

site/src/utils/groups.ts

@@ -11,6 +11,18 @@ export const everyOneGroup = (organizationId: string): Group => ({
   source: "user",
 })
 
+/**
+ * Returns true if the provided group is the 'Everyone' group.
+ * The everyone group represents all the users in an organization
+ * for which every organization member is implicitly a member of.
+ *
+ * @param {Group} group - The group to evaluate.
+ * @returns {boolean} - Returns true if the group's ID matches its
+ * organization ID.
+ */
+export const isEveryoneGroup = (group: Group): boolean =>
+  group.id === group.organization_id
+
 export const getGroupSubtitle = (group: Group): string => {
   // It is the everyone group when a group id is the same of the org id
   if (group.id === group.organization_id) {