Merge pull request #8959 from CitizenLabDotCo/add-tooltip-for-partici…

…pation-info About box improvements
CitizenLabDotCo · Oct 8, 2024 · 13c4582 · 13c4582
2 parents 8a99be2 + 08e0f7b
commit 13c4582
Show file tree

Hide file tree

Showing 39 changed files with 472 additions and 331 deletions.
diff --git a/front/app/components/ProjectCard/index.tsx b/front/app/components/ProjectCard/index.tsx
@@ -705,15 +705,13 @@ const ProjectCard = memo<InputProps>(
                   className={`${size} ${!showFooter ? 'hidden' : ''}`}
                 >
                   <Box h="100%" display="flex" alignItems="center">
-                    {hasAvatars && (
-                      <AvatarBubbles
-                        size={32}
-                        limit={3}
-                        userCountBgColor={theme.colors.tenantPrimary}
-                        avatarIds={avatarIds}
-                        userCount={project.data.attributes.participants_count}
-                      />
-                    )}
+                    <AvatarBubbles
+                      size={32}
+                      limit={3}
+                      userCountBgColor={theme.colors.tenantPrimary}
+                      avatarIds={avatarIds}
+                      userCount={project.data.attributes.participants_count}
+                    />
                   </Box>
                 </ContentFooter>
               </Box>

diff --git a/front/app/components/ProjectDescriptionBuilder/ContentViewer/Viewer/Viewer.test.tsx b/front/app/components/ProjectDescriptionBuilder/ContentViewer/Viewer/Viewer.test.tsx
@@ -40,6 +40,20 @@ const mockProjectData = {
     input_term: 'idea',
     uses_content_builder: true,
   },
+  relationships: {
+    avatars: {
+      data: [
+        {
+          id: '1',
+          type: 'avatar',
+        },
+        {
+          id: '2',
+          type: 'avatar',
+        },
+      ],
+    },
+  },
 };
 
 const mockProjectDescriptionBuilderLayoutData:
@@ -70,7 +84,7 @@ describe('Preview', () => {
       screen.queryByTestId('projectDescriptionBuilderProjectDescription')
     ).not.toBeInTheDocument();
   });
-  it('should shows description when project description builder is not enabled', () => {
+  it('should show description when project description builder is not enabled', () => {
     DEFAULT_PROJECT_DESCRIPTION_BUILDER_LAYOUT_DATA.data.attributes.enabled =
       false;
     render(<Preview projectId={projectId} projectTitle={projectTitle} />);

diff --git a/front/app/components/ProjectDescriptionBuilder/ContentViewer/Viewer/index.tsx b/front/app/components/ProjectDescriptionBuilder/ContentViewer/Viewer/index.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 
 import { Box, Spinner, Title } from '@citizenlab/cl2-component-library';
 import { isEmpty } from 'lodash-es';
-import useProjectDescriptionBuilderLayout from 'api/project_description_builder/useProjectDescriptionBuilderLayout';
 import { Multiloc } from 'typings';
 
+import useProjectDescriptionBuilderLayout from 'api/project_description_builder/useProjectDescriptionBuilderLayout';
 import useProjectFiles from 'api/project_files/useProjectFiles';
 import useProjectById from 'api/projects/useProjectById';
 

diff --git a/front/app/components/admin/ContentBuilder/Widgets/AboutBox/index.tsx b/front/app/components/admin/ContentBuilder/Widgets/AboutBox/index.tsx
@@ -1,17 +1,24 @@
 import React from 'react';
 
-import { Box } from '@citizenlab/cl2-component-library';
+import { Box, colors, Toggle } from '@citizenlab/cl2-component-library';
+import { useNode } from '@craftjs/core';
 import { useParams } from 'react-router-dom';
 
 import useProjectBySlug from 'api/projects/useProjectBySlug';
 
 import ProjectInfoSideBar from 'containers/ProjectsShowPage/shared/header/ProjectInfoSideBar';
 
+import { useIntl } from 'utils/cl-intl';
+
 import useCraftComponentDefaultPadding from '../../useCraftComponentDefaultPadding';
 
 import messages from './messages';
 
-const AboutBox = () => {
+type AboutBoxProps = {
+  hideParticipationNumbers?: boolean;
+};
+
+const AboutBox = ({ hideParticipationNumbers }: AboutBoxProps) => {
   const { projectId, slug } = useParams() as {
     projectId: string;
     slug: string;
@@ -26,14 +33,48 @@ const AboutBox = () => {
       margin="0 auto"
       px={componentDefaultPadding}
     >
-      {projectID && <ProjectInfoSideBar projectId={projectID} />}
+      {projectID && (
+        <ProjectInfoSideBar
+          projectId={projectID}
+          hideParticipationNumbers={hideParticipationNumbers}
+        />
+      )}
+    </Box>
+  );
+};
+
+const AboutBoxSettings = () => {
+  const { formatMessage } = useIntl();
+  const {
+    actions: { setProp },
+    hideParticipationNumbers,
+  } = useNode((node) => ({
+    hideParticipationNumbers: node.data.props.hideParticipationNumbers,
+    id: node.id,
+  }));
+
+  return (
+    <Box background={colors.white} my="32px">
+      <Toggle
+        checked={hideParticipationNumbers}
+        onChange={() => {
+          setProp(
+            (props: AboutBoxProps) =>
+              (props.hideParticipationNumbers = !hideParticipationNumbers)
+          );
+        }}
+        label={formatMessage(messages.hideParticipationNumbersText)}
+      />
     </Box>
   );
 };
 
 AboutBox.craft = {
+  related: {
+    settings: AboutBoxSettings,
+  },
   custom: {
-    title: messages.aboutBox,
+    title: messages.participationBox,
     noPointerEvents: true,
   },
 };

diff --git a/front/app/components/admin/ContentBuilder/Widgets/AboutBox/messages.ts b/front/app/components/admin/ContentBuilder/Widgets/AboutBox/messages.ts
@@ -1,8 +1,12 @@
 import { defineMessages } from 'react-intl';
 
 export default defineMessages({
-  aboutBox: {
-    id: 'app.containers.admin.ContentBuilder.aboutBox',
-    defaultMessage: 'About Box',
+  participationBox: {
+    id: 'app.containers.admin.ContentBuilder.participationBox',
+    defaultMessage: 'Participation Box',
+  },
+  hideParticipationNumbersText: {
+    id: 'app.containers.admin.ContentBuilder.hideParticipationNumbersText',
+    defaultMessage: 'Hide participation numbers',
   },
 });
diff --git a/front/app/containers/Admin/projects/project/projectHeader/index.tsx b/front/app/containers/Admin/projects/project/projectHeader/index.tsx
@@ -7,6 +7,7 @@ import {
   Text,
   colors,
   IconNames,
+  Tooltip,
 } from '@citizenlab/cl2-component-library';
 import moment from 'moment';
 import styled from 'styled-components';
@@ -21,7 +22,7 @@ import otherProjectMessages from 'containers/Admin/projects/all/messages';
 import NavigationTabs from 'components/admin/NavigationTabs';
 import Button from 'components/UI/Button';
 
-import { MessageDescriptor, useIntl } from 'utils/cl-intl';
+import { FormattedMessage, MessageDescriptor, useIntl } from 'utils/cl-intl';
 
 import messages from './messages';
 
@@ -172,14 +173,57 @@ const ProjectHeader = ({ projectId }: Props) => {
           <Text color="coolGrey600" fontSize="s" my="0px">
             ·
           </Text>
-          <Box display="flex" alignItems="center">
-            <Icon name="user" fill={colors.coolGrey600} width="16px" />
-            <Text color="coolGrey600" fontSize="s" m="0px">
-              {formatMessage(messages.participants, {
-                participantsCount: project.data.attributes.participants_count,
-              })}
-            </Text>
-          </Box>
+          <Tooltip
+            theme="dark"
+            maxWidth={280}
+            placement="bottom"
+            content={
+              <Box p="8px">
+                <FormattedMessage {...messages.participantsInfoTitle} />
+                <ul
+                  style={{
+                    margin: '0',
+                    marginBottom: '8px',
+                    listStyleType: 'disc',
+                  }}
+                >
+                  <li>
+                    <FormattedMessage {...messages.users} />
+                  </li>
+                  <li>
+                    <FormattedMessage {...messages.attendees} />
+                  </li>
+                </ul>
+
+                <FormattedMessage {...messages.participantsExclusionTitle} />
+                <ul
+                  style={{
+                    margin: '0',
+                    marginBottom: '8px',
+                    listStyleType: 'disc',
+                  }}
+                >
+                  <li>
+                    <FormattedMessage {...messages.followers} />
+                  </li>
+                  <li>
+                    <FormattedMessage {...messages.embeddedMethods} />
+                  </li>
+                </ul>
+
+                <FormattedMessage {...messages.note} />
+              </Box>
+            }
+          >
+            <Box display="flex" alignItems="center">
+              <Icon name="user" fill={colors.coolGrey600} width="16px" />
+              <Text color="coolGrey600" fontSize="s" m="0px">
+                {formatMessage(messages.participants, {
+                  participantsCount: project.data.attributes.participants_count,
+                })}
+              </Text>
+            </Box>
+          </Tooltip>
         </Box>
       </Box>
     </NavigationTabs>

diff --git a/front/app/containers/Admin/projects/project/projectHeader/messages.ts b/front/app/containers/Admin/projects/project/projectHeader/messages.ts
@@ -42,4 +42,33 @@ export default defineMessages({
     id: 'app.components.app.containers.AdminPage.ProjectEdit.projectHeader.publishedFinished1',
     defaultMessage: 'Published - Finished',
   },
+  participantsInfoTitle: {
+    id: 'app.components.app.containers.AdminPage.ProjectEdit.projectHeader.participantsInfo.participantsInfoTitle',
+    defaultMessage: 'Participants include:',
+  },
+  users: {
+    id: 'app.components.app.containers.AdminPage.ProjectEdit.projectHeader.participantsInfo.users',
+    defaultMessage: 'Users interacting with Go Vocal methods',
+  },
+  attendees: {
+    id: 'app.components.app.containers.AdminPage.ProjectEdit.projectHeader.participantsInfo.attendees',
+    defaultMessage: 'Event attendees',
+  },
+  participantsExclusionTitle: {
+    id: 'app.components.app.containers.AdminPage.ProjectEdit.projectHeader.participantsInfo.participantsExclusionTitle',
+    defaultMessage: 'Participants do not include:',
+  },
+  followers: {
+    id: 'app.components.app.containers.AdminPage.ProjectEdit.projectHeader.participantsInfo.followers',
+    defaultMessage: 'Followers of a project',
+  },
+  embeddedMethods: {
+    id: 'app.components.app.containers.AdminPage.ProjectEdit.projectHeader.participantsInfo.embeddedMethods',
+    defaultMessage: 'Participants in embedded methods (e.g., external surveys)',
+  },
+  note: {
+    id: 'app.components.app.containers.AdminPage.ProjectEdit.projectHeader.participantsInfo.note',
+    defaultMessage:
+      'Note: Enabling anonymous or open participation permissions may allow users to participate multiple times, leading to misleading or incomplete user data.',
+  },
 });