fix(site): avoid showing disabled fields in group settings page

ammario · ammario · commit f184644118e4 · 2023-08-17T19:07:10.000Z
Previou we allowed interaction with the icon setter and showed
confusing help text under the disabled "Display Name" field.
diff --git 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",
