From 502c727695c6f4cf261d0258ce99919d928c7874 Mon Sep 17 00:00:00 2001 From: Salman Date: Thu, 5 Dec 2024 02:49:04 +0500 Subject: [PATCH 1/4] permission-ui-revamp --- .../Update/UpdateCommunityGroupPage.tsx | 5 +- .../Groups/common/GroupForm/GroupForm.tsx | 100 +++++-------- .../TopicPermissionToggleGroupSubForm.scss | 58 +++++++ .../TopicPermissionToggleGroupSubForm.tsx | 141 ++++++++++++++++++ .../index.ts | 1 + .../Groups/common/GroupForm/constants.ts | 25 +++- .../Groups/common/GroupForm/helpers.ts | 12 ++ .../Groups/common/GroupForm/index.types.ts | 27 +++- 8 files changed, 303 insertions(+), 66 deletions(-) create mode 100644 packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.scss create mode 100644 packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.tsx create mode 100644 packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/index.ts diff --git a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/Update/UpdateCommunityGroupPage.tsx b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/Update/UpdateCommunityGroupPage.tsx index 680e5c6375b..5be1013f267 100644 --- a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/Update/UpdateCommunityGroupPage.tsx +++ b/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) => { diff --git a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/GroupForm.tsx b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/GroupForm.tsx index 634a63ca44f..ed37b315dcd 100644 --- a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/GroupForm.tsx +++ b/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([]); 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 = ({ {/* Sub-section: Gated topic permissions */} - {topicPermissionsSubForms?.length > 0 && ( + {topicPermissionsToggleGroupSubForms.length > 0 && (
- - - Topic - - - {topicPermissionsSubForms.map((topicPermission, index) => ( - <> - - - updateTopicPermissionByIndex(index, newPermission) - } - /> - {index === topicPermissionsSubForms.length - 1 && ( - - )} - - ))} + {topicPermissionsToggleGroupSubForms && ( + + )}
)} diff --git a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.scss b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.scss new file mode 100644 index 00000000000..eb4bf28db88 --- /dev/null +++ b/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; + } + } +} diff --git a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.tsx b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.tsx new file mode 100644 index 00000000000..005b1f849b9 --- /dev/null +++ b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.tsx @@ -0,0 +1,141 @@ +import { CWText } from 'client/scripts/views/components/component_kit/cw_text'; +import { CWToggle } from 'client/scripts/views/components/component_kit/cw_toggle'; +import React from 'react'; +import { PermissionLabel, togglePermissionMap } from '../constants'; +import { + PermissionLabelType, + Topic, + TopicPermissionFormToggleGroupSubFormProps, +} from '../index.types'; +import './TopicPermissionToggleGroupSubForm.scss'; + +const TopicPermissionToggleGroupSubForm = ({ + PermissionFormData, + onChange, +}: TopicPermissionFormToggleGroupSubFormProps) => { + const topics = PermissionFormData.map((item) => item.topic); + + const handlePermissionChange = ( + topic: Topic, + permissionLabel: PermissionLabelType, + ) => { + const permissionsToToggle = togglePermissionMap[permissionLabel] || []; + + const updatedData = PermissionFormData.map((item) => { + if (item.topic === topic) { + const updatedPermissions = item.permission.filter( + (perm) => !permissionsToToggle.includes(perm), + ); + + if ( + !item.permission.some((perm) => permissionsToToggle.includes(perm)) + ) { + updatedPermissions.push(...permissionsToToggle); + } + + return { ...item, permission: updatedPermissions }; + } + return item; + }); + + onChange(updatedData); + }; + + const togglePermission = ( + topic: Topic, + permissionLabel: PermissionLabelType, + ) => { + handlePermissionChange(topic, permissionLabel); + }; + + const toggleAllPermissionsForAction = ( + permissionLabel: PermissionLabelType, + toggleValue: boolean, + ) => { + const permissionsToToggle = togglePermissionMap[permissionLabel] || []; + + const updatedData = PermissionFormData.map((item) => { + const updatedPermissions = toggleValue + ? [...new Set([...item.permission, ...permissionsToToggle])] + : item.permission.filter((perm) => !permissionsToToggle.includes(perm)); + + return { ...item, permission: updatedPermissions }; + }); + + onChange(updatedData); + }; + + const toggle = (topics: Topic[], permissionLabel: PermissionLabelType) => { + const permissionsToCheck = togglePermissionMap[permissionLabel] || []; + const value = topics.every((topic) => + permissionsToCheck.every((perm) => + PermissionFormData.find( + (item) => item.topic === topic, + )?.permission.includes(perm), + ), + ); + return !value; + }; + + return ( +
+
+ + Topic + +
+ {PermissionLabel.map((perm, index) => ( + + {perm} + + ))} +
+
+ + {topics.map((topic, topicIndex) => ( +
+ + {topic?.name} + + {PermissionLabel.map((permission, permIndex) => ( +
+ + PermissionFormData.find( + (item) => item.topic === topic, + )?.permission.includes(perm), + )} + onChange={() => togglePermission(topic, permission)} + /> +
+ ))} +
+ ))} + +
+
All
+ {PermissionLabel.map((permission, permIndex) => ( +
+ + togglePermissionMap[permission]?.every((perm) => + PermissionFormData.find( + (item) => item.topic === topic, + )?.permission.includes(perm), + ), + )} + onChange={() => + toggleAllPermissionsForAction( + permission, + toggle(topics, permission), + ) + } + /> +
+ ))} +
+
+ ); +}; + +export default TopicPermissionToggleGroupSubForm; diff --git a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/index.ts b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/index.ts new file mode 100644 index 00000000000..cab7d5938a6 --- /dev/null +++ b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/index.ts @@ -0,0 +1 @@ +export { default } from './TopicPermissionToggleGroupSubForm'; diff --git a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/constants.ts b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/constants.ts index d87892352d3..ab5c8916ccd 100644 --- a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/constants.ts +++ b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/constants.ts @@ -1,4 +1,5 @@ -import { GroupTopicPermissionEnum } from './index.types'; +import { PermissionEnum } from '@hicommonwealth/schemas'; +import { GroupTopicPermissionEnum, PermissionLabelType } from './index.types'; export const REQUIREMENTS_TO_FULFILL = { ALL_REQUIREMENTS: 'ALL', @@ -23,3 +24,25 @@ export const REVERSED_TOPIC_PERMISSIONS: ReversedTopicPermissions = Object.fromEntries( Object.entries(TOPIC_PERMISSIONS).map(([key, value]) => [value, key]), ) as ReversedTopicPermissions; + +export const Permissions = PermissionEnum; + +export const PermissionLabel = [ + 'Create threads', + 'Create Comments', + 'Can react', + 'Use poll', +]; + +export const togglePermissionMap: Record< + PermissionLabelType, + PermissionEnum[] +> = { + 'Create threads': [PermissionEnum.CREATE_THREAD], + 'Create Comments': [PermissionEnum.CREATE_COMMENT], + 'Can react': [ + PermissionEnum.CREATE_COMMENT_REACTION, + PermissionEnum.CREATE_THREAD_REACTION, + ], + 'Use poll': [PermissionEnum.UPDATE_POLL], +}; diff --git a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/helpers.ts b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/helpers.ts index f537029a80d..8e12d54c421 100644 --- a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/helpers.ts +++ b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/helpers.ts @@ -57,3 +57,15 @@ export const convertGranularPermissionsToAccumulatedPermissions = ( return TOPIC_PERMISSIONS.UPVOTE_AND_COMMENT_AND_POST; }; + +export const isPermissionGuard = ( + value: PermissionEnum, +): value is PermissionEnum => { + return [ + PermissionEnum.CREATE_COMMENT_REACTION, + PermissionEnum.CREATE_THREAD_REACTION, + PermissionEnum.CREATE_COMMENT, + PermissionEnum.CREATE_THREAD, + PermissionEnum.UPDATE_POLL, + ].includes(value); +}; diff --git a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/index.types.ts b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/index.types.ts index 21b5783bed9..dca66199a1c 100644 --- a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/index.types.ts +++ b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/index.types.ts @@ -1,5 +1,5 @@ import { PermissionEnum } from '@hicommonwealth/schemas'; -import { TOPIC_PERMISSIONS } from './constants'; +import { PermissionLabel, TOPIC_PERMISSIONS } from './constants'; export enum GroupTopicPermissionEnum { UPVOTE = 'UPVOTE', @@ -36,6 +36,29 @@ export type TopicPermissionsSubFormType = { onPermissionChange: (permission: string) => void; }; +export const Permissions = PermissionEnum; + +export type Permission = (typeof Permissions)[keyof typeof Permissions]; + +export type Topic = { + id: number; + name: string; +}; + +export type TopicPermissionToggleGroupSubFormsState = { + permission: Permission[]; + topic: Topic; +}; + +export type TopicPermissionFormToggleGroupSubFormProps = { + PermissionFormData: TopicPermissionToggleGroupSubFormsState[]; + onChange: ( + updatedPermissions: TopicPermissionToggleGroupSubFormsState[], + ) => void; +}; + +export type PermissionLabelType = (typeof PermissionLabel)[number]; + export type LabelType = { label: string; value: string; @@ -60,7 +83,7 @@ export type RequirementSubFormType = { export type GroupFormTopicSubmitValues = { id: number; - permissions: PermissionEnum[]; + permissions: Permission[]; }; export type GroupResponseValuesType = { From c9ae7eb26f2adb38760095fb21a4e41f059b8b3c Mon Sep 17 00:00:00 2001 From: Salman Date: Thu, 5 Dec 2024 13:45:07 +0500 Subject: [PATCH 2/4] renaming --- .../TopicPermissionToggleGroupSubForm.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.tsx b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.tsx index 005b1f849b9..ca20bd64b42 100644 --- a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.tsx +++ b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.tsx @@ -65,9 +65,12 @@ const TopicPermissionToggleGroupSubForm = ({ onChange(updatedData); }; - const toggle = (topics: Topic[], permissionLabel: PermissionLabelType) => { + const toggle = ( + selectedTopics: Topic[], + permissionLabel: PermissionLabelType, + ) => { const permissionsToCheck = togglePermissionMap[permissionLabel] || []; - const value = topics.every((topic) => + const value = selectedTopics.every((topic) => permissionsToCheck.every((perm) => PermissionFormData.find( (item) => item.topic === topic, From 46c8f543e318eab6d35aead0bcde62cc2f7a60e0 Mon Sep 17 00:00:00 2001 From: Salman Date: Thu, 5 Dec 2024 14:24:56 +0500 Subject: [PATCH 3/4] backed-update-create-api-fixed --- libs/model/src/community/CreateGroup.command.ts | 4 ---- libs/model/src/community/UpdateGroup.command.ts | 4 ---- 2 files changed, 8 deletions(-) diff --git a/libs/model/src/community/CreateGroup.command.ts b/libs/model/src/community/CreateGroup.command.ts index 6e8a79d9908..6130bf8c0b7 100644 --- a/libs/model/src/community/CreateGroup.command.ts +++ b/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 { // 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, diff --git a/libs/model/src/community/UpdateGroup.command.ts b/libs/model/src/community/UpdateGroup.command.ts index 157a78131ef..fec9d37ad1e 100644 --- a/libs/model/src/community/UpdateGroup.command.ts +++ b/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 { 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( { From baa5319ab17ad4280117e26689f43985f3ced731 Mon Sep 17 00:00:00 2001 From: Salman Date: Mon, 30 Dec 2024 20:55:01 +0500 Subject: [PATCH 4/4] permission-mapping-with-granular-permissions --- .../TopicPermissionToggleGroupSubForm.scss | 2 +- .../TopicPermissionToggleGroupSubForm.tsx | 2 +- .../Groups/common/GroupForm/constants.ts | 1 + .../Groups/common/GroupForm/helpers.ts | 4 ++++ .../Groups/common/GroupForm/index.types.ts | 1 + 5 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.scss b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.scss index eb4bf28db88..f25b92b4df0 100644 --- a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.scss +++ b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.scss @@ -1,4 +1,4 @@ -.topic-permissions { +.TopicPermissions { display: flex; flex-direction: column; gap: 16px; diff --git a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.tsx b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.tsx index ca20bd64b42..2611c564708 100644 --- a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.tsx +++ b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/TopicPermissionToggleGroupSubForm/TopicPermissionToggleGroupSubForm.tsx @@ -81,7 +81,7 @@ const TopicPermissionToggleGroupSubForm = ({ }; return ( -
+
Topic diff --git a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/constants.ts b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/constants.ts index ab5c8916ccd..b8fe5da730d 100644 --- a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/constants.ts +++ b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/constants.ts @@ -8,6 +8,7 @@ export const REQUIREMENTS_TO_FULFILL = { export const TOPIC_PERMISSIONS = { [GroupTopicPermissionEnum.UPVOTE]: 'Upvote', + [GroupTopicPermissionEnum.COMMENT]: 'Comment', [GroupTopicPermissionEnum.UPVOTE_AND_COMMENT]: 'Upvote & Comment', [GroupTopicPermissionEnum.UPVOTE_AND_COMMENT_AND_POST]: 'Upvote & Comment & Post', diff --git a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/helpers.ts b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/helpers.ts index 8e12d54c421..a5ea9cb4692 100644 --- a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/helpers.ts +++ b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/helpers.ts @@ -55,6 +55,10 @@ export const convertGranularPermissionsToAccumulatedPermissions = ( return TOPIC_PERMISSIONS[GroupTopicPermissionEnum.UPVOTE]; } + if (permissions.includes(PermissionEnum.CREATE_COMMENT)) { + return TOPIC_PERMISSIONS[GroupTopicPermissionEnum.COMMENT]; + } + return TOPIC_PERMISSIONS.UPVOTE_AND_COMMENT_AND_POST; }; diff --git a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/index.types.ts b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/index.types.ts index dca66199a1c..60d72ba7776 100644 --- a/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/index.types.ts +++ b/packages/commonwealth/client/scripts/views/pages/CommunityGroupsAndMembers/Groups/common/GroupForm/index.types.ts @@ -5,6 +5,7 @@ export enum GroupTopicPermissionEnum { UPVOTE = 'UPVOTE', UPVOTE_AND_COMMENT = 'UPVOTE_AND_COMMENT', UPVOTE_AND_COMMENT_AND_POST = 'UPVOTE_AND_COMMENT_AND_POST', + COMMENT = 'COMMENT', } export type RequirementSubFormsState = {