From 8a2c0d1e8a58702d9b5e64f35733c4f68cee6642 Mon Sep 17 00:00:00 2001
From: Ammar Bandukwala <ammar@ammar.io>
Date: Thu, 17 Aug 2023 19:08:03 +0000
Subject: [PATCH] fix(site): avoid showing disabled fields in group settings
 page

Previously we allowed interaction with the icon setter and showed
confusing help text under the disabled "Display Name" field.
---
 .../GroupsPage/SettingsGroupPageView.tsx      | 44 +++++++++++--------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/site/src/pages/GroupsPage/SettingsGroupPageView.tsx b/site/src/pages/GroupsPage/SettingsGroupPageView.tsx
index b2cff4062b283..6c64865d273e5 100644
--- a/site/src/pages/GroupsPage/SettingsGroupPageView.tsx
+++ b/site/src/pages/GroupsPage/SettingsGroupPageView.tsx
@@ -57,27 +57,33 @@ const UpdateGroupForm: FC<{
             autoFocus
             fullWidth
             label="Name"
-            disabled={group.id === group.organization_id}
-          />
-          <TextField
-            {...getFieldHelpers(
-              "display_name",
-              "Optional: keep empty to default to the name.",
-            )}
-            onChange={onChangeTrimmed(form)}
-            autoComplete="display_name"
-            autoFocus
-            fullWidth
-            label="Display Name"
             disabled={isEveryoneGroup(group)}
           />
-          <LazyIconField
-            {...getFieldHelpers("avatar_url")}
-            onChange={onChangeTrimmed(form)}
-            fullWidth
-            label={t("form.fields.icon")}
-            onPickEmoji={(value) => form.setFieldValue("avatar_url", value)}
-          />
+          {isEveryoneGroup(group) ? (
+            <></>
+          ) : (
+            <>
+              <TextField
+                {...getFieldHelpers(
+                  "display_name",
+                  "Optional: keep empty to default to the name.",
+                )}
+                onChange={onChangeTrimmed(form)}
+                autoComplete="display_name"
+                autoFocus
+                fullWidth
+                label="Display Name"
+                disabled={isEveryoneGroup(group)}
+              />
+              <LazyIconField
+                {...getFieldHelpers("avatar_url")}
+                onChange={onChangeTrimmed(form)}
+                fullWidth
+                label={t("form.fields.icon")}
+                onPickEmoji={(value) => form.setFieldValue("avatar_url", value)}
+              />
+            </>
+          )}
           <TextField
             {...getFieldHelpers(
               "quota_allowance",