Update Permissions Selection UI + Add UPDATE_POLL

libs/model/src/community/CreateGroup.command.ts

@@ -1,6 +1,5 @@
 import { InvalidInput, type Command } from '@hicommonwealth/core';
 import * as schemas from '@hicommonwealth/schemas';
-import { PermissionEnum } from '@hicommonwealth/schemas';
 import { Op } from 'sequelize';
 import { models, sequelize } from '../database';
 import { authRoles } from '../middleware';
@@ -73,9 +72,6 @@ export function CreateGroup(): Command<typeof schemas.CreateGroup> {
               // add topic level interaction permissions for current group
               const groupPermissions = (payload.topics || []).map((t) => {
                 const permissions = t.permissions;
-                // Enable UPDATE_POLL by default for all group permissions
-                // TODO: remove once client supports selecting the UPDATE_POLL permission
-                permissions.push(PermissionEnum.UPDATE_POLL);
                 return {
                   group_id: group.id!,
                   topic_id: t.id,

libs/model/src/community/UpdateGroup.command.ts

@@ -1,6 +1,5 @@
 import { InvalidInput, type Command } from '@hicommonwealth/core';
 import * as schemas from '@hicommonwealth/schemas';
-import { PermissionEnum } from '@hicommonwealth/schemas';
 import { Op } from 'sequelize';
 import { models, sequelize } from '../database';
 import { authRoles } from '../middleware';
@@ -92,9 +91,6 @@ export function UpdateGroup(): Command<typeof schemas.UpdateGroup> {
           await Promise.all(
             (payload.topics || [])?.map(async (t) => {
               const permissions = t.permissions;
-              if (!permissions.includes(PermissionEnum.UPDATE_POLL)) {
-                permissions.push(PermissionEnum.UPDATE_POLL);
-              }
               if (group.id) {
                 await models.GroupPermission.update(
                   {

packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/Update/UpdateCommunityGroupPage.tsx

@@ -21,7 +21,6 @@ import {
 import { convertRequirementAmountFromWeiToTokens } from '../../common/helpers';
 import { DeleteGroupModal } from '../DeleteGroupModal';
 import { GroupForm } from '../common/GroupForm';
-import { convertGranularPermissionsToAccumulatedPermissions } from '../common/GroupForm/helpers';
 import { makeGroupDataBaseAPIPayload } from '../common/helpers';
 import './UpdateCommunityGroupPage.scss';
 
@@ -132,9 +131,7 @@ const UpdateCommunityGroupPage = ({ groupId }: { groupId: string }) => {
           topics: (foundGroup.topics || []).map((topic) => ({
             label: topic.name,
             value: topic.id,
-            permission: convertGranularPermissionsToAccumulatedPermissions(
-              topic.permissions || [],
-            ),
+            permission: topic.permissions || [],
           })),
         }}
         onSubmit={(values) => {

packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/GroupForm.tsx

@@ -26,20 +26,16 @@ import {
 import Allowlist from './Allowlist';
 import './GroupForm.scss';
 import RequirementSubForm from './RequirementSubForm';
-import TopicPermissionsSubForm from './TopicPermissionsSubForm';
-import {
-  REQUIREMENTS_TO_FULFILL,
-  REVERSED_TOPIC_PERMISSIONS,
-  TOPIC_PERMISSIONS,
-} from './constants';
-import { convertAccumulatedPermissionsToGranularPermissions } from './helpers';
+import TopicPermissionToggleGroupSubForm from './TopicPermissionToggleGroupSubForm';
+import { REQUIREMENTS_TO_FULFILL } from './constants';
+import { isPermissionGuard } from './helpers';
 import {
   FormSubmitValues,
   GroupFormProps,
+  Permission,
   RequirementSubFormsState,
   RequirementSubType,
-  TopicPermissions,
-  TopicPermissionsSubFormsState,
+  TopicPermissionToggleGroupSubFormsState,
 } from './index.types';
 import {
   VALIDATION_MESSAGES,
@@ -175,9 +171,10 @@ const GroupForm = ({
   const [requirementSubForms, setRequirementSubForms] = useState<
     RequirementSubFormsState[]
   >([]);
-  const [topicPermissionsSubForms, setTopicPermissionsSubForms] = useState<
-    TopicPermissionsSubFormsState[]
-  >([]);
+  const [
+    topicPermissionsToggleGroupSubForms,
+    setTopicPermissionsToggleGroupSubForms,
+  ] = useState<TopicPermissionToggleGroupSubFormsState[]>([]);
 
   useEffect(() => {
     if (initialValues.requirements) {
@@ -213,16 +210,27 @@ const GroupForm = ({
     }
 
     if (initialValues.topics) {
-      setTopicPermissionsSubForms(
-        initialValues.topics.map((t) => ({
-          permission: t.permission,
-          topic: { id: parseInt(`${t.value}`), name: t.label },
-        })),
-      );
+      const updatedInitialValues: TopicPermissionToggleGroupSubFormsState[] =
+        initialValues.topics.map(({ label, value, permission }) => ({
+          topic: {
+            id: Number(value),
+            name: label,
+          },
+          permission: (Array.isArray(permission)
+            ? permission.filter(isPermissionGuard)
+            : []) as Permission[],
+        }));
+      setTopicPermissionsToggleGroupSubForms(updatedInitialValues);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const handleTopicPermissionsChange = (
+    updatedPermissions: TopicPermissionToggleGroupSubFormsState[],
+  ) => {
+    setTopicPermissionsToggleGroupSubForms(updatedPermissions);
+  };
+
   const removeRequirementByIndex = (index: number) => {
     const updatedSubForms = [...requirementSubForms];
     updatedSubForms.splice(index, 1);
@@ -388,11 +396,9 @@ const GroupForm = ({
 
     const formValues = {
       ...values,
-      topics: topicPermissionsSubForms.map((t) => ({
+      topics: topicPermissionsToggleGroupSubForms.map((t) => ({
         id: t.topic.id,
-        permissions: convertAccumulatedPermissionsToGranularPermissions(
-          REVERSED_TOPIC_PERMISSIONS[t.permission],
-        ),
+        permissions: t.permission,
       })),
       requirementsToFulfill,
       requirements: requirementSubForms.map((x) => x.values),
@@ -403,29 +409,20 @@ const GroupForm = ({
 
   const handleWatchForm = (values: FormSubmitValues) => {
     if (values?.topics?.length > 0) {
-      setTopicPermissionsSubForms(
+      const updatedTopicPermissions: TopicPermissionToggleGroupSubFormsState[] =
         values.topics.map((topic) => ({
           topic: {
-            id: parseInt(`${topic.value}`),
+            id: Number(topic.value),
             name: topic.label,
           },
-          permission: TOPIC_PERMISSIONS.UPVOTE_AND_COMMENT_AND_POST,
-        })),
-      );
+          permission: [],
+        }));
+      setTopicPermissionsToggleGroupSubForms(updatedTopicPermissions);
     } else {
-      setTopicPermissionsSubForms([]);
+      setTopicPermissionsToggleGroupSubForms([]);
     }
   };
 
-  const updateTopicPermissionByIndex = (
-    index: number,
-    newPermission: TopicPermissions,
-  ) => {
-    const updatedTopicPermissionsSubForms = [...topicPermissionsSubForms];
-    updatedTopicPermissionsSubForms[index].permission = newPermission;
-    setTopicPermissionsSubForms([...updatedTopicPermissionsSubForms]);
-  };
-
   // + 1 for allowlists
   const maxRequirements = requirementSubForms.length + 1;
 
@@ -625,7 +622,7 @@ const GroupForm = ({
               </section>
 
               {/* Sub-section: Gated topic permissions */}
-              {topicPermissionsSubForms?.length > 0 && (
+              {topicPermissionsToggleGroupSubForms.length > 0 && (
                 <section className="form-section">
                   <div className="header-row">
                     <CWText
@@ -640,27 +637,12 @@ const GroupForm = ({
                       within.
                     </CWText>
                   </div>
-
-                  <CWText type="b2" className="topic-permission-header">
-                    Topic
-                  </CWText>
-
-                  {topicPermissionsSubForms.map((topicPermission, index) => (
-                    <>
-                      <CWDivider className="divider-spacing" />
-                      <TopicPermissionsSubForm
-                        key={topicPermission.topic.id}
-                        topic={topicPermission.topic}
-                        defaultPermission={topicPermission.permission}
-                        onPermissionChange={(newPermission) =>
-                          updateTopicPermissionByIndex(index, newPermission)
-                        }
-                      />
-                      {index === topicPermissionsSubForms.length - 1 && (
-                        <CWDivider className="divider-spacing" />
-                      )}
-                    </>
-                  ))}
+                  {topicPermissionsToggleGroupSubForms && (
+                    <TopicPermissionToggleGroupSubForm
+                      PermissionFormData={topicPermissionsToggleGroupSubForms}
+                      onChange={handleTopicPermissionsChange}
+                    />
+                  )}
                 </section>
               )}
             </section>

packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.scss

@@ -0,0 +1,58 @@
+.topic-permissions {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .permissions-header {
+    display: flex;
+    align-items: center;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #e0e0e0;
+    font-weight: bold;
+
+    .header-title {
+      flex: 1;
+      text-align: left;
+      padding-right: 16px;
+    }
+
+    .header-item {
+      width: 150px;
+      flex: 0 0 135px;
+      text-align: center;
+      justify-content: center;
+    }
+
+    .header-permissions {
+      display: contents;
+    }
+  }
+
+  .permissions-row {
+    display: flex;
+    align-items: center;
+    padding: 8px 0;
+    border-bottom: 1px solid #f0f0f0;
+
+    &:last-child {
+      border: none;
+    }
+
+    .topic-name {
+      flex: 1;
+      font-size: 14px;
+      text-align: left;
+      padding-right: 16px;
+    }
+
+    .toggle {
+      flex: 0 0 135px;
+      display: flex;
+      justify-content: center;
+    }
+
+    &.all-row {
+      font-weight: bold;
+    }
+  }
+}