Added logic to show group gated topic level permissions

hicommonwealth · Oct 10, 2024 · abd1584 · abd1584
1 parent de7d332
commit abd1584
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 31 deletions.
diff --git a/...ipts/views/pages/CommunityGroupsAndMembers/Members/GroupsSection/GroupCard/GroupCard.scss b/...ipts/views/pages/CommunityGroupsAndMembers/Members/GroupsSection/GroupCard/GroupCard.scss
@@ -35,18 +35,36 @@
         color: $neutral-500;
         font-size: 18px;
       }
+
       .caption {
         color: $neutral-500;
       }
     }
   }
 
-  .gating-tags {
+  .gating-topics {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
     gap: 8px;
-    align-items: center;
     width: 100%;
+
+    .row {
+      padding: 8px 0;
+      width: 100%;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+
+      .Tag {
+        height: auto;
+
+        @include extraSmall {
+          .Text {
+            word-wrap: break-word;
+            white-space: normal;
+          }
+        }
+      }
+    }
   }
 
   .allowlist-table {

diff --git a/...ripts/views/pages/CommunityGroupsAndMembers/Members/GroupsSection/GroupCard/GroupCard.tsx b/...ripts/views/pages/CommunityGroupsAndMembers/Members/GroupsSection/GroupCard/GroupCard.tsx
@@ -1,5 +1,4 @@
 import useBrowserWindow from 'hooks/useBrowserWindow';
-import MinimumProfile from 'models/MinimumProfile';
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Avatar } from 'views/components/Avatar';
@@ -9,32 +8,13 @@ import { CWText } from 'views/components/component_kit/cw_text';
 import { CWTag } from 'views/components/component_kit/new_designs/CWTag';
 import { formatAddressShort } from '../../../../../../helpers';
 import CWPagination from '../../../../../components/component_kit/new_designs/CWPagination/CWPagination';
+import { TOPIC_PERMISSIONS } from '../../../Groups/common/GroupForm/constants';
 import './GroupCard.scss';
 import RequirementCard from './RequirementCard/RequirementCard';
-
-type RequirementCardProps = {
-  requirementType: string;
-  requirementChain: string;
-  requirementContractAddress?: string;
-  requirementCondition: string;
-  requirementAmount: string;
-  requirementTokenId?: string;
-};
-
-type GroupCardProps = {
-  isJoined?: boolean;
-  groupName: string;
-  groupDescription?: string;
-  requirements?: RequirementCardProps[]; // This represents erc requirements
-  requirementsToFulfill: 'ALL' | number;
-  allowLists?: string[];
-  topics: { id: number; name: string }[];
-  canEdit?: boolean;
-  onEditClick?: () => any;
-  profiles?: Map<string, MinimumProfile>;
-};
+import { GroupCardProps } from './types';
 
 const ALLOWLIST_MEMBERS_PER_PAGE = 7;
+
 const GroupCard = ({
   isJoined,
   groupName,
@@ -163,9 +143,24 @@ const GroupCard = ({
       {topics.length > 0 && (
         <>
           <CWText type="h5">Gated Topics</CWText>
-          <div className="gating-tags">
+          <div className="gating-topics">
+            <div className="row">
+              <CWText type="b2">Topic</CWText>
+              <CWText type="b2">Permission</CWText>
+            </div>
             {topics.map((t, index) => (
-              <CWTag key={index} label={t.name} type="referendum" />
+              <div key={index}>
+                <CWDivider className="divider-spacing" />
+                <div className="row">
+                  <CWText type="b2">{t.name}</CWText>
+
+                  <CWTag
+                    label={TOPIC_PERMISSIONS[t.permission || ''] || ''}
+                    type="referendum"
+                  />
+                </div>
+                <CWDivider className="divider-spacing" />
+              </div>
             ))}
           </div>
         </>

diff --git a/...nt/scripts/views/pages/CommunityGroupsAndMembers/Members/GroupsSection/GroupCard/types.ts b/...nt/scripts/views/pages/CommunityGroupsAndMembers/Members/GroupsSection/GroupCard/types.ts
@@ -0,0 +1,24 @@
+import MinimumProfile from 'models/MinimumProfile';
+import { TopicPermissions } from '../../../Groups/common/GroupForm/index.types';
+
+export type RequirementCardProps = {
+  requirementType: string;
+  requirementChain: string;
+  requirementContractAddress?: string;
+  requirementCondition: string;
+  requirementAmount: string;
+  requirementTokenId?: string;
+};
+
+export type GroupCardProps = {
+  isJoined?: boolean;
+  groupName: string;
+  groupDescription?: string;
+  requirements?: RequirementCardProps[]; // This represents erc requirements
+  requirementsToFulfill: 'ALL' | number;
+  allowLists?: string[];
+  topics: { id: number; name: string; permission?: TopicPermissions }[];
+  canEdit?: boolean;
+  onEditClick?: () => any;
+  profiles?: Map<string, MinimumProfile>;
+};
diff --git a/...ent/scripts/views/pages/CommunityGroupsAndMembers/Members/GroupsSection/GroupsSection.tsx b/...ent/scripts/views/pages/CommunityGroupsAndMembers/Members/GroupsSection/GroupsSection.tsx
@@ -40,6 +40,8 @@ const GroupsSection = ({
     profiles?.map((p) => [p.address, p]),
   );
 
+  console.log('filteredGroups => ', filteredGroups);
+
   return (
     <section className="GroupsSection">
       {hasNoGroups && <TopicGatingHelpMessage />}
@@ -92,6 +94,7 @@ const GroupsSection = ({
               topics={(group?.topics || []).map((x) => ({
                 id: x.id,
                 name: x.name,
+                permission: x.permission,
               }))}
               canEdit={canManageGroups}
               onEditClick={() => navigate(`/members/groups/${group.id}/update`)}

diff --git a/packages/commonwealth/server/controllers/server_groups_methods/get_groups.ts b/packages/commonwealth/server/controllers/server_groups_methods/get_groups.ts
@@ -3,6 +3,7 @@ import {
   MembershipAttributes,
   TopicAttributes,
 } from '@hicommonwealth/model';
+import { GroupTopicPermissionEnum } from '@hicommonwealth/schemas';
 import { Op, WhereOptions } from 'sequelize';
 import { ServerGroupsController } from '../server_groups_controller';
 
@@ -12,9 +13,13 @@ export type GetGroupsOptions = {
   includeTopics?: boolean;
 };
 
+export type TopicAttributesWithPermission = TopicAttributes & {
+  permission: GroupTopicPermissionEnum;
+};
+
 type GroupWithExtras = GroupAttributes & {
   memberships?: MembershipAttributes[];
-  topics?: TopicAttributes[];
+  topics?: TopicAttributesWithPermission[];
 };
 export type GetGroupsResult = GroupWithExtras[];
 
@@ -26,6 +31,12 @@ export async function __getGroups(
     where: {
       community_id: communityId,
     },
+    include: [
+      {
+        model: this.models.GroupTopicPermission,
+        attributes: ['topic_id', 'allowed_actions'],
+      },
+    ],
   });
 
   let groupsResult = groups.map((group) => group.toJSON() as GroupWithExtras);
@@ -68,11 +79,21 @@ export async function __getGroups(
         },
       },
     });
+
     groupsResult = groupsResult.map((group) => ({
       ...group,
       topics: topics
-        .map((t) => t.toJSON())
-        .filter((t) => t.group_ids!.includes(group.id!)),
+        .filter((t) => t.group_ids!.includes(group.id!))
+        .map((t) => {
+          const temp: TopicAttributesWithPermission = { ...t.toJSON() };
+          temp.permission =
+            ((group as any).GroupTopicPermissions || []).find(
+              (gtp) => gtp.topic_id === t.id,
+            )?.allowed_actions ||
+            // TODO: this fallback should be via a migration for existing communities
+            GroupTopicPermissionEnum.UPVOTE_AND_COMMENT_AND_POST;
+          return temp;
+        }),
     }));
   }